Javascript 使用它的多通道着色器'；他自己的意见

我一直在尝试将着色器从ShaderToy移植到常规WebGL，并且遇到了一些麻烦。我设法使多通道着色器工作，但没有将其本身作为输入通道的着色器。我在这里做了一个测试示例：。着色器有两个过程，都有一个缓冲区作为输入。据我所知，当缓冲区将自身作为输入时，它将使用来自上一个时间步的自身输出

因此，我尝试使用该结构制作两个渲染目标：

class RenderTarget { 
   tex: Texture 
   fbo: FrameBuffer 
}

使用渲染循环：

gl.useProgram(prog1) 
gl.bindFramebuffer(gl.TEXTURE_2D, rt1.fbo) 
gl.bindTexture(gl.TEXTURE_2D, rt2.texture); 
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

gl.useProgram(prog2) 
gl.bindFramebuffer(gl.TEXTURE_2D, null) 
gl.bindTexture(gl.TEXTURE_2D, rt1.texture); 
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

swap(rt1, rt2)

然而，这只是渲染底部的条，而不是粒子，我不知道为什么。我这里有一个缩小规模的例子：

const fsSource=document.getElementById（“着色器fs”）.text；
类RenderTarget{
建造商（总帐、宽度、高度）{
this.texture=gl.createTexture（）；
gl.bindTexture（gl.TEXTURE_2D，this.TEXTURE）；
这个水平=0；
const internalFormat=gl.RGBA；
常数边界=0；
常量格式=gl.RGBA；
常量类型=gl.无符号字节；
常数数据=新的UINT8阵列（宽*高*4）；
gl.texImage2D（gl.TEXTURE_2D，this.level，内部格式，宽度，高度，边框，格式，类型，数据）；
gl.texParameteri（gl.TEXTURE\u 2D，gl.TEXTURE\u MIN\u过滤器，gl.LINEAR）；
gl.texParameteri（gl.TEXTURE\u 2D，gl.TEXTURE\u MAG\u过滤器，gl.LINEAR）；
gl.texParameteri（gl.TEXTURE_2D、gl.TEXTURE_WRAP_S、gl.CLAMP_TO_EDGE）；
gl.texParameteri（gl.TEXTURE\u 2D、gl.TEXTURE\u WRAP\u T、gl.CLAMP\u至边缘）；
this.fbo=gl.createFramebuffer（）；
gl.bindFramebuffer（gl.FRAMEBUFFER，this.fbo）；
gl.framebufferTexture2D（gl.FRAMEBUFFER，gl.COLOR_ATTACHMENT0，gl.TEXTURE_2D，this.TEXTURE，0）；
}
}
函数loadShader（gl、类型、源）{
常量着色器=gl.createShader（类型）；
gl.shaderSource（着色器，源）；
gl.compileShader（着色器）；
if（！gl.getShaderParameter（着色器，gl.COMPILE_状态））{
const info=String（gl.getShaderInfoLog（着色器））；
console.log（信息、来源）；
gl.deleteShader（着色器）；
退货信息；
}
返回着色器；
}
函数初始化程序（gl、vsSource、fsSource）{
常量vertexShader=loadShader（gl，gl.VERTEX_着色器，vsSource）；
const fragmentShader=loadShader（gl，gl.FRAGMENT\u着色器，fsSource）；
const shaderProgram=gl.createProgram（）；
gl.attachShader（着色器程序、顶点着色器）；
gl.attachShader（着色器程序、碎片着色器）；
gl.linkProgram（着色器程序）；
返回着色器程序；
}
函数initQuad（gl）{
const positionBuffer=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，positionBuffer）；
常数位置=[-1.0,1.0,1.0,1.0，-1.0，-1.0,1.0，-1.0]；
总账缓冲数据（总账数组缓冲区、新Float32Array（位置）、总账静态绘图）；
返回位置缓冲区；
}
const vs=`#版本300 es
在vec2中；
输出vec2uv；
void main（）{
紫外线=紫外线暴露；
gl_位置=vec4（0,0,1.0）；
}`;
常数fs=`#版本300 es
高精度浮点；
均匀采样二维iChannel0；
输出vec4颜色；
void main（）{
vec2p=gl_FragCoord.xy/vec2（420,320.）；
fColor=纹理（iChannel0，p）；
}`;
函数init（）{
//设置画布和webgl2上下文
常数宽度=420；
常数高度=320；
const canvas=document.createElement（“canvas”）；
画布宽度=宽度；
canvas.height=高度；
const gl=canvas.getContext（“webgl2”）；
document.body.appendChild（画布）；
//编译着色器并设置两个渲染目标
const prog1=初始程序（gl、vs、fsSource）；
const prog2=初始程序（gl、vs、fs）；
常量rt1=新的渲染目标（gl、宽度、高度）；
常量rt2=新的渲染目标（gl、宽度、高度）；
常量rts=[rt1，rt2]；
//绑定顶点四边形
总账使用计划（项目1）；
常量quadPos=gl.getAttribLocation（prog1，'aVertexPosition'）；
常量四元=初始四元（gl）；
gl.bindBuffer（gl.ARRAY\u BUFFER，quad）；
总账VertexAttributePointer（quadPos，2，总账FLOAT，false，0，0）；
gl.EnableVertexAttributeArray（quadPos）；
总图视口（0，0，宽度，高度）；
//设置所需的制服
const iTimePos=gl.getUniformLocation（prog1，“iTime”）；
常量ITIMEDELTAPS=gl.getUniformLocation（prog1，“iTimeDelta”）；
常量iFramePos=gl.getUniformLocation（prog1，“iFrame”）；
常数iResolutionPos=gl.getUniformLocation（程序1，“iResolution”）；
常量iChannelResolutionPos=gl.getUniformLocation（prog1，“iChannelResolution”）；
常数分辨率=[宽度、高度、0.0、0.0、0.0、0.0、0.0、0.0、0.0、0.0、0.0、0.0、0.0、0.0]；
gl.uniform2f（iResolutionPos、宽度、高度）；
gl.uniform3fv（iChannelResolutionPos，新Float32Array（resos））；
常量prog1Channel0Pos=gl.getUniformLocation（prog1，“iChannel0”）；
总帐使用计划（项目2）；
常量prog2Channel0Pos=gl.getUniformLocation（prog2，“iChannel0”）；
设frame=0；
设时间=0；
设lastTime=0；
设setTexture=函数（总图、纹理、位置、点）{
gl.activeTexture（gl.TEXTURE0+spot）；
gl.bindTexture（gl.TEXTURE_2D，tex）；
gl.uniform1i（位置、地点）；
}
让动画=函数（）{
时间=性能。现在（）/1000；
gl.clearColor（0.0,0.0,0.0,1.0）；
gl.clear（gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT）；
//第一次渲染过程
总账使用计划（项目1）；
gl.uniform1f（iTimePos，时间）；
gl.uniform1i（iFramePos，框架）；
gl.uniform1f（Itimedeltaps，time-lastTime）；
gl.bindFramebuffer（gl.FRAMEBUFFER，rts[0].fbo）；
gl.bindTexture（gl.TEXTURE_2D，rts[1].纹理）；
//setTexture（gl，rts[1]。纹理，prog1Channel0Pos，0）；
总图.绘图阵列（总图.三角带，0,4）；
//第二次渲染过程
总帐使用计划（项目2）；
gl.bindFramebuffer（gl.FRAMEBUFFER，null）；
gl.bindTexture（gl.TEXTURE_2D，rts[0].TEXTURE）；
gl.clearColor（0.0,0.0,0.0,1.0）；
gl.clear（gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT）；
//setTexture（gl，rts[0]。纹理，prog2Channel0Pos，0）；
总图.绘图阵列（总图.三角带，0,4）；
rts.reverse（）；
lastTime=时间；
frame++；
请求动画帧（动画）；
}
lastTime=性能。现在（）；
制作动画（）；
}
init（）
#版本300 es
#国际财务报告准则
高精度浮点；
精度高
 fColor = vec4(p, 0, 1);

 fragColor = vec4(fragCoord / iResolution, 0, 1);
 return;

gl.bindFramebuffer(gl.FRAMEBUFFER, rts[1].fbo);
gl.enable(gl.SCISSOR_TEST);
gl.scissor(100, 100, 10, 10);
gl.clearColor(.2, .5, .7, .9);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.disable(gl.SCISSOR_TEST);

const resos = [width, height, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0];
gl.uniform3fv(iChannelResolutionPos, new Float32Array(resos));

const resos = [width, height, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0];
gl.uniform3fv(iChannelResolutionPos, resos);

const info = String(gl.getShaderInfoLog(shader));

const info = gl.getShaderInfoLog(shader);

gl.linkProgram(prg);
const success = gl.getProgramParameter(gl.LINK_STATUS);
if (!success) {
  console.log(gl.getProgramInfoLog(prg);
}