ゲート内のクロノトリガーからの移行を再現するグラフィックプログラミング

最近このゲームを始めましたが、これは私の興味のピークになりました

12:08から動きの遷移を見ることができます

そこでは興味深い数学がいくつか行われているようです。2つの異なるビューが組み合わされているように見えます。青い波紋が最初に背景にレンダリングされ、次に紫色の振動波が何らかの疑似3D投影でレンダリングされているように見えます。

彼らがこの結果にどのように正確に到達したかは私を超えており、好奇心は私を良くしています。

これがどのように行われるかを多くの人が知っているとは思いませんが、だれかが大規模なグラフィックプログラミングを行った場合、おそらく彼らは私を啓発するでしょう。

シェーダーを使ってエフェクトを複製してみました。

Shader00センター：https ://www.shadertoy.com/view/XsXSz2

Shader01 Sides：https ://www.shadertoy.com/view/4sXSz2

:)あなたは、Byte56が言ったように、3つの飛行機をセットアップすることができました。Shader00でカメラの真正面に面する平面と、Shader01で2つの平面、おそらくRandyGaulが言及したように、上下の不均一なスケールで深さの錯覚を与えます。

彼らは、説得力のある十分な3D外観を与えるべきだと私は信じています。

2つのシェーダーはどちらも、YouTubeリンクとまったく同じではありません（また、ラフドラフトです）。しかし、これらのシェーダーは、うまくいけば、独自のバージョンの構築を開始する場所を提供できると信じています。

チュートリアル：シンプルな縞模様の作り方。

平面の各点には座標があります。シェーダーエフェクトを作成しようとすると、基本的に2D演算を平面上に視覚化します。ここで簡単な例を紹介しましょう。

//This shader will visualize coordinates 
vec2 uv = gl_FragCoord.xy / iResolution.xy;
gl_FragColor = vec4(uv.x,uv.y,0,1);

赤はx座標を表し、緑の色相はy座標を表します。ここでは、最も単純なシェーダーエフェクトを作成します。ストライプ。このチュートリアルでは、uv.y値は必要ありません。

vec2 uv = gl_FragCoord.xy / iResolution.xy;
gl_FragColor = vec4(uv.x,0,0,1);

赤い色合いが右側に向かうにつれて激しくなっていることがわかります。これは、右側に移動すると座標のx値が高くなるためです。左端のx座標は0から始まり、右端のx座標は1です。

この基本的な理解があるので、「直感的」なものを試してみましょう

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float color = 0.0;
if(uv.x < .5 ) color= 1.0 ;
gl_FragColor = vec4(color,0,0,1);

そこに縞模様があります。待って...それは完全に正しくないようです。はい、これは赤と黒だけです。ストライプパターンは、2つ以上のカラーセクションで構成されています。そこ...！

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float color = 0.0;
if(uv.x < .2 ||(uv.x >.4 && uv.x < .6) || (uv.x > .8 && uv.x <1.0 )) color= 1.0 ;
gl_FragColor = vec4(color,0,0,1);

しかし、N個のストライプを作成する場合はどうでしょうか。

表示しようとしているのは、従来のプログラミング「ロジック」を使用してシェーダープログラミングにアプローチしようとすると、失敗する可能性が高いということです。シェーダーに関して言えば、それはすべて数学に関するものです。

数学といえば、「ストライプ」パターンに最も似ているパターンは何ですか。言い換えれば、縞のように見える方程式は何ですか？はい。Y = sin（X）。ただし、X値の範囲は0.0〜1.0です。Y= sin（X）を使用する場合は、x値の範囲を0.0〜6.28にします（これはおよそ2 PIです）。

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * 2.0 *PI; 
float y = sin(x);
gl_FragColor = vec4(y,0,0,1);

これで、方程式によって生成されるパターンに関して「ストライプ」ができました。なぜこのアプローチを取るべきなのでしょうか？これはより高速であるだけでなく、N個のストライプを持つ醜い "if"条件を記述する必要もありません。複数のストライプが必要な場合は、最大X値をさらに増やすことで、単純にパターンを拡張できます。

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * (2.0 *PI * 10.0); //ta dan!
float y = sin(x);
gl_FragColor = vec4(y,0,0,1);

このシェーダーは初期のシェーダーのような完璧なストライプを生成しないと言うかもしれませんが、実際には、より適切な方程式を書くだけです！

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * (2.0 *PI * 10.0);
float y = sin(x) / abs(sin(x) );
gl_FragColor = vec4(y,0,0,1);

ウィー〜

次：波状の縞模様の作り方。