图形编程可复制门内Chrono Trigger的过渡

我最近第一次开始玩这个游戏，这真的使我的兴趣达到顶峰

您可以看到运动的过渡从〜12：08开始

那里似乎发生了一些有趣的数学运算。似乎有两个不同的视图组合在一起。首先在背景中渲染蓝色波纹，然后在某种伪3D投影上渲染紫色振荡波。

然而，他们如何精确地达到这一结果超出了我的范围，好奇心使我变得更好。

我不希望很多人知道这是如何完成的，但是如果有人进行了广泛的图形编程，也许他们会启发我。

我试图通过使用着色器来复制效果。

Shader00中心：https ://www.shadertoy.com/view/XsXSz2

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

:)正如Byte56所说，您可以设置三个平面。一个面向摄像机的平面直接使用Shader00向前，然后是两个采用Shader01的平面，也许就像RandyGaul提到的那样，顶部/底部非均匀缩放以产生深度错觉。

我认为，它们应该提供足够的3D外观来令人信服。

这两个着色器与您的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);

那里有条纹图案。等等...看起来不太正确。是的，这只是红色和黑色。条纹图案不仅仅包含两个颜色部分。那里...！

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);

现在，我们根据方程式生成的图案具有“条形”。为什么要采用这种方法？这不仅可以更快，而且消除了编写丑陋的“ if”条件以具有N个条带的需求。如果我们希望有多个条纹，我们可以简单地通过进一步增加最大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);

e ~~~

下一页：如何制作波浪条纹图案。