在尝试转换为JS时，如何在WebGL Javascript中实现ShaderTool缓冲区？ [英] How to implement Shadertoy buffers in WebGL Javascript when trying to convert to JS?

问题描述

我正在尝试将Shader玩具转换为Javascript和WebGL，以便它可以独立于ShaderTool运行。ShaderToy具有缓冲区的概念，在此示例中，它重新循环缓冲区并改善输出图像。它在BUF A选项卡上执行此操作。

https://www.shadertoy.com/view/MdyGDW

它将其输出写入绑定到iChannel0的缓冲区A，然后在每个绘制周期从相同的iChannel0读取。如何在WebGL Javascript片段着色器中实现此缓冲区概念，WebGL使用GLSL语言。具体地说，在这种情况下，它能够写入缓冲区，然后在下一个呈现周期从同一缓冲区读取。

推荐答案

ShaderToy使用称为渲染到纹理的技术。假设gl是我们的WebGL上下文。首先，我们需要创建一个纹理，第一遍将绘制到：

// desired size of the texture
const W = 800, H = 600;
const textureA = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, textureA);
// allocate texture data.
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, W, H, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
// may be change texture parameters (at least magnification and
// minification filters since we won't render mip levels.

然后创建帧缓冲区对象，以便可以绘制纹理：

const framebufferA = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, framebufferA);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, textureA, 0);

现在我们可以抽签了：

gl.bindBuffer(gl.FRAMEBUFFER, framebufferA);
gl.viewport(0, 0, W, H);

// draw first pass, the one which supposed to write data for the channel 0
// it'll use fragment shader for bufferA

gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

// pass textureA as channel 0
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, textureA);
gl.uniform1i(channel0Uniform, 0);

// draw second pass, the one with uses channel 0

关于纹理渲染的资料很多，例如here。

这篇关于在尝试转换为JS时，如何在WebGL Javascript中实现ShaderTool缓冲区？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！