影でダイナミックアニメーションを作る

私はしばらくの間Iilithyaの遮光物デモに続いていて、数週間前に彼女の仕事について書きたかったです、しかし、すぐに、私が陰で私の深さから出ていたとわかりました.代わりに、Ilithyaは私が私に書くのを助けましたIntroduction to Shaders ウォームアップとして発行.今ではレースの日です!
あなたが遮光物に新しくて、読んでいないならばIntroduction to Shaders 問題は、それは良い場所を開始します.それは私たちがカバーしている遮光物を理解することが容易になる概念的な基礎を提供します.

サマースクリーン

Ilithyaがこのものすごい遮光物を作った方法に深く行きましょう.Summer Screen .
ここでいくつかのことが起こっている.最初に、我々は前後にシフトしているこれらの垂直線のセクションを持っている.その後、これらのグラデーションは、ビーチでの色の波のような上部と下部から来ている.これら二つの効果を理解しましょう.
最初にGLSLコードの短縮版をチェックします.あなたはここに新しい言語といくつかの数学を参照してくださいかもしれないが、心配しないでください!私たちはそれらを通じて良いと遅いトロットよ.

// Create three static colors
vec3 colorA = vec3(0.5, 0., 0.5); // Purple
vec3 colorB = vec3(1.0, 0.41, 0.71); // Pink
vec3 colorC = vec3(0.0, 1.0, 1.0); // Teal blue

// Create three dynamic colors
vec3 color1 = mix(colorA, colorB, fract(x*fr+cos(u_time)));
vec3 color2 = mix(colorB, colorC, (y-sin(u_time))*0.5);
vec3 color3 = mix(color1, color2, x*cos(u_time+2.));

// Our color output
gl_FragColor = vec4(color3, 1.0);

まず最初に述べるのは、GLSLが型付き言語であるため、変数を宣言するときにもその型を宣言することです.
エーfloat 我々の目的のために10進数の数と考えることができます.
エーvec3 私たちの目的のために3つの値を持つ特別なJavaScript配列のようなものです.
エーvec4 aより1つの値を持ちますvec3 そして、何が遮光物の出力ですかmain() 関数が必要です.つの値は、赤、緑、青、アルファに整列します.
ファーストイリヤcolorA , colorB , and colorC . これらのそれぞれが変更されない静的な色です.

それから、彼女は変化するダイナミックな色をつくるために、これらの色と他の変数を使います.まず垂直線を見ます.

垂直線

垂直線のためにズームして、本当にここで起こっているものを見ましょう.

ラインは本当に暗いから光に行くグラデーション繰り返されます.
GLSLでグラデーションを作成するにはmix 関数.mix つの引数をとりますx : 範囲の開始y : 範囲の終わりa : 間x and y .

// vec3 mix(vec3 x, vec3 y, vec3 a)
vec3 color1 = mix(colorA, colorB, fract(x*fr+cos(u_time)));

イリタヤは紫とピンクの間にグラデーションを作っています.色の値に基づいて異なる量で混合されるa , は0 to 1 . If a is 0 , 最初の色の100 %が表示されます.If a is 1 我々は、第2の色の100 %を見ます.中の何でも、我々はブレンドを得ます:

それで、それは我々に1つの勾配を与えることができます.
グラデーションを停止するには0 一方、IlithyaはGLSL関数を使用していますfract . これは整数の小数を返します.fract(x) と同じですx - Math.floor(x) or x % 1 JavaScriptで.でx 増加fract(x) は常に0と1の間のfloatである.
私は、Ilthyaが彼女の作品に持っているものを越えてそれを簡素化するつもりですfract ファンクションワークス

見ることができるようにx 増加し続けるfract(x) ちょうど小数点を返します、あるいは、何かが十進の後に来て、私たちに同じ紫色の色を与えてください.全体の部分を翻訳し、iLithyaのクールな垂直バーを持っている!
我々は、すべてのこれらの部分が少し後でアニメーション化する方法について触れます.

ピンク＆ブルーグラデーション

今、我々はcolor2 .

vec3 color2 = mix(colorB, colorC, (y - sin(u_time)) * 0.5);

もう一つの混合、ピンクと青の間のこの時間.なしfract 今回は、我々は滑らかなグラデーションを得ている.The y 値は、それが下から上に色を変更することができます.我々は、タッチしますsin(u_time) ビットすぐ.

すべてをまとめる

それから彼女はcolor1 and color2 , 接近するミックス量を使う1 右側に.水平方向の変更はx 値.The cos(u_time+2) アニメーションです.

vec3 color3 = mix(color1, color2, x*cos(u_time+2.));

遮光物の部分と最終的な色出力の簡略化されたバージョンは、ここにあります:

あなたは、我々の簡略化されたバージョンが完成した遮光物に類似しているのを見ることができます.

アニメーション

つの主要なアニメーションが夏の画面で起こっている:

バーは左と右にシフトcolor1

ピンクとブルーのグラデーションcolor2

ミックス値color3 左右移動

これらのそれぞれは現在の時刻の値、よく知られている数学関数を使用しています.sin and cos .

vec3 color1 = mix(colorA, colorB, fract(x*fr+cos(u_time)));
vec3 color2 = mix(colorB, colorC, (y-sin(u_time))*0.5);
vec3 color3 = mix(color1, color2, x*cos(u_time+2.));

あれtime 値は3から来る.jsClock そして、Ilithyaは彼女の遮光物のほとんどをアニメーション化する方法です.It returns the elapsed time ページが読み込まれてから.
あなたが3を知らないならば、心配しないでください.jsコードIilithyaを使用してシェーパーコードを簡単に再利用可能なボイラーです.私たちは少しのGLSLコードを持っていなければなりません.jsこれは便利なWebGLの抽象化です.
イリタヤが呼ぶときsin(u_time) or cos(u_time) 彼女は- 1と1の間の値を取り戻すつもりです、そして、それはスムーズに移行します.あなたがCSSアニメーションに精通しているならば、それは多くのように感じますease-in-out .
スーパークイック正弦波再生:
我々は水平軸に沿って値を増加すると、正弦波は私たちを移動し、ピーク1 , 私たちをもたらす0 アンド・ボトム-1 再び登る前に.水平の値が高いと、その値の正弦は常に-1 and 1 . 余弦は同様に働きますが、異なる値を与えます.

そして、あなたはそれを持っている!つの異なる部分をブレンドし、1つの素晴らしいアニメーションを作るために一緒にアニメーション.

ブレイクイット

彼女が私にそれを理解するのを手伝っていたので、Ilithyaは影のコードで値を交換するよう奨励しました.私は非常にあなたが行って、それを行うことをお勧めします.
垂直バーを分離するには、次のシェーパーコードの最後の行を次のように変更します.

gl_FragColor = vec4(color1, 1.0);

垂直のピンクと青のグラデーションを表示するには、次の手順に従います.

gl_FragColor = vec4(color2, 1.0);

または変更することができますcolorA , colorB , or colorC 固体の色のスクリーンを見ること.それを再生、楽しく、どのように動作を把握.
Check out Summer Screen →

バブルガム

私はこの遮光物がどのように働くかに飛び込むつもりでありません、しかし、それはちょうどじっと見つめることをなだめることです.あなたが将来の問題でそれについて読みたいならば、私に知らせてください.
Check out Bubble Gum →

遮光物資源

iLithyaは彼女の上に遮光物を学習するためのいくつかの大きなリソースを共有blog . 誰もが推奨するリソースはThe Book of Shaders , それで、あなたが興味があるならば、確かにそれをチェックしてください.