THE SAUNA これが噂のパラダイス
THE SAUNA これが噂のパラダイス
#215
それいけ!フロントエンド

今月勉強になったこと「千里の道も一歩から」

くりちゃん

こんにちは、フロントエンドエンジニアのくりちゃんです。

今月も業務の間にWebGLをちょこちょこ勉強していました。今月も勉強したことをゆるくまとめてみたいと思います。

LIGが過去に制作したバレットグループ株式会社様のコーポレートサイト。よく見ると背景のグラデーションが動いていてかっこいいですよね。

バレットグループ株式会社/Bullet Group Inc.

バレットグループ株式会社様コーポレートサイト
https://bltinc.co.jp/

真似してみたいなと思い、コードをいろいろとのぞいてました。

どうやら、グラデーションの画像をThree.jsで動かしてるみたい……?

今回はGUIでグラデーションの色もグリグリ変化させてみたいので、画像ではなくて、コードでがんばってみたいと思います!

See the Pen
circle
by Hisami Kurita (@hisamikurita)
on CodePen.

まずは、丸から作ってみました。調べてみるとGLSLにはビルドインのlength関数があって、中心からの距離を測れるみたいです。便利ですね。

次にこの丸をいっぱい作ろうと思います。InstancedBufferGeometryなるものを使うと高速に大量のオブジェクトを描画できるみたいです。

See the Pen
Threejs Gradation #02
by Hisami Kurita (@hisamikurita)
on CodePen.

できました! また、当初の目的通り、GUIでグラデーションの色を変化させることができるようにしてみました。

ここでもGLSLのビルドインのmod関数を使用して、0、1、2、0、1、2、0、1、2 というふうに配列を取り出しています。

次はsin/cosとシンプレックスノイズを使って丸を動かしてみます。

See the Pen
Threejs Gradation #03
by Hisami Kurita (@hisamikurita)
on CodePen.

丸の淵が見えてしまっているので、なんだか微妙な感じですね。

もっと良い感じにしたいので、ポストエフェクトをかけて、光とブラーとノイズの演出を付け加えてみます。

See the Pen
Threejs Gradation #04
by Hisami Kurita (@hisamikurita)
on CodePen.

だいぶ良い感じになりましたね。満足です。

「千里の道も一歩から」

やりたいことに対して、一つ一つ実装して行くことが、大切なのかもしれません。

次はもっと良い作品を作りたいですね! 終わり。

3 0 0 0