Study in webGL.

Boids.

200匹の魚を制御するboidsシミュレーションです。ソースにはコメントで説明をいれているので興味のある方は覗いてみてください。

Composition.

表示切り替えの演出に3Dを利用したサンプルです。3Dはメインとしてだけではなく、サブ演出的な用途にも利用できると思うのです。

Herix.

壁紙として3Dを利用したサンプルです。3Dはメインとしてだけではなく、デザイン要素としても利用できると思うのです。

Loop cruise.

ループ地形のサンプルです。ランダムで作成した地形と、それを反転した地形を連結してループできる地形を生成しています。

Tranceparent.

透明なオブジェクトの負荷テスト用に作成したサンプルです。光源に反応しないMeshBasicMaterialは負荷が少なくスマホで使えます。

Mirror.

高負荷注意!スマホでは無理かも。光源の反射処理はとても負荷が高く、さらに初期化にも時間がかかるようです。

Stella.

3Dというとポリゴンを想像しますが、2頂点で設定する線用のマテリアルや1頂点で設定する点用のマテリアルもあります。

Snow point.

PointsMaterialのサンプルです。これは点情報を高速に扱えますが、操作は限られます。なので雪は大きさしか変えていません。

Snow sprite.

spriteのサンプルです。これは操作の自由度は高いけれど負荷は高いです。インスタンシングを使えば軽くできるかもしれません。

Sunset shader.

three.jsに付属しているsky.meshのサンプルです。スクロールに合わせて太陽の位置が変わり夕焼けになったりします。

3D showcase.

3Dオブジェクトを指定した方向に向けるサンプルです。ボタンで操作するだけではなくドラッグで向きを変えることもできます

Shade.

影を落とすサンプルです。意外と負荷が高く利用には影密度を落とす必要がありそうです。ドラッグでオブジェクトを回転できます。

Light gradient.

DirectionalLightを利用したシームレスなグラデーションのサンプルです。ドラッグでライトを回転させグラデーションを変えられます。

Stroke anime.

anime.jsを利用するとsvgのストロークアニメが簡単に作成できます。しかし外部リンクのsvgには対応していません。

Text anime.

anime.jsを利用したテキストアニメです。ブラウザの表示領域への入場 / 退場を感知し、それに合わせてアニメするようにしています。

SVG morph.

anime.jsを利用したメニューのサンプルです。anime.jsはSVGの頂点を操作できます(html内にSVGタグで記述された場合のみ)。