Question

上下文：尝试在three.js纹理中执行类似https://www.ibiblio.org/e-notes/webgl/gpu/waves/barkley.html的操作。这是一个模拟。有两种片段着色器：一种进行仿真，一种进行绘制。当然也涉及顶点着色器，但是以一种非常简单的方式，它只是为片段着色器提供了UV坐标。

发生在片段着色器中的绘制

我已经考虑过使用canvasTexture或framebuffer纹理。但这不是很好，因为我可能要进行一些后处理，例如自己编写“绘图”着色器。

这是一个“模拟”。它的作用是，对于模拟中的每个点（它是一个网格），将当前值和其右边像素的值（未经测试）取平均。模拟实际上涉及两个纹理-您从texture1读取，写入texture2，然后绘制texture2，然后在下一帧中，从Texture2读取，写入texture1，然后绘制texture1。因此必须将gl_FragColor写入另一个纹理。

uniform sampler2D previousFrameSimulationTexture;
varying vec2 vTexCoord;
const float d = 1./simulationWidth.;
void main(void)
{
   vec4 t = texture2D(previousFrameSimulationTexture, vTexCoord);
   float r = t.r;

   r += texture2D( uTexSamp, vec2(vTexCoord.x + d, vTexCoord.y) ).r
   gl_FragColor = vec4(r, 0., 0., 0. );
}

这是“绘图”着色器-这是在three.js片段着色器中常用的部分。

uniform sampler2D currentFrameSimulationTexture;
varying vec2 vTexCoord;
void main(void)
{
   vec4 t = texture2D(uTexSamp, vTexCoord);
   gl_FragColor = vec4(t.r, 0., 0., 1.);
}

问题是，如何确保currentFrameSimulationTexture使其进入Three.js片段着色器以进行后处理并绘制到我们实际看到的纹理上？

在Threejs中组成多个片段着色器的高效/简单方法

0 个答案: