WebGLスクール第2回の課題は「扇風機を作ってみる」でした。
いろんな回転軸が絡み合う動きを書けるようにすることが目的ということで簡単なジオメトリを組み合わせて扇風機を作ってみました。
回転処理の実装
扇風機を実現するにあたって羽の回転と首振り運動の2つの動きを取り入れることにしました。
実装としては以下のような入れ子構造のGroupを用意しています。
- 首振り運動を再現するためのGroup -> 首振り運動を管理
- 複数の羽をまとめたGroup -> 羽の回転と縦方向の向きを調整
全部の処理を一つの関数にまとめて書くことに限界を感じたので、以下のような形で別途クラスを用意して可読性を担保しています。
この辺に関してはまだ試行錯誤中でObject3Dを継承したクラスを用意したほうが扱いやすいかもしれません。
class Fan {
params: FanParams;
wings: THREE.Object3D;
tiltGroup: THREE.Object3D;
base: THREE.Object3D;
constructor(params: FanParams) {
// 長い初期化処理
}
register(scene: THREE.Scene) {
scene.add(this.tiltGroup);
scene.add(this.base);
}
rotate(elapsed: number) {
this.wings.rotation.y = elapsed * this.params.rotateFreq * 2 * Math.PI;
}
tilt(elapsed: number) {
const percent = Math.sin(elapsed * this.params.tiltFreq * 2 * Math.PI);
this.tiltGroup.rotation.y = percent * (Math.PI / 3);
}
}
いろいろなPassを試してみる
扇風機を回すだけだと視覚的な面白みに欠けるので、複数のPassを組み合わせられるようにしています。
技術的に難しいことは特にしていなくて単純にReactでサイドバー用意して、変更があったらThree関連のクラスを再生成する感じです。
とりあえずドキュメントにあるPassを適当にピックアップしているのでいまいち効果がわかりにくいものが紛れていたりします。
各Passは単体でも面白い効果が付与できるんですが、組み合わせることで更におもしろくなります。
AfterImageは残像のような効果を実現できますが、扇風機という今回の課題との組み合わせが良くこれを入れるだけで扇風機感が増します。
これにGlitchを組み合わせるとGlitchの効果が間延びして見えるようになりフラッシュバックするみたいな効果が得られます。
個人的にはHalftone + Glitchの組み合わせで、HalftoneでRGB毎のドットのような効果を入れた後にGlitchが入るので見栄えが派手になります。
GlitchPassの実装を眺める
three.js/examples/jsm/postprocessing/GlitchPass.js at master · mrdoob/three.js
github.com
github.com
Glitch処理の見た目が面白かったのでソースコードを眺めてみました。
処理の全体像としてはおそらく以下の通り。
- DigitalGlitchというシェーダを使う独自のMaterialを定義
- this.uniformsという変数を介してMaterialのパラメータを変更
- FullScreenQuadというヘルパで画面全体にMaterialの効果を反映
this.uniformsにわたす値を変えてあげれば色々なGlitch効果を作れそう。
今週末の宿題として試してみようと思います。