WebGL FBO（实时绘图）

我试图将这个例子从Three.js翻译过来- 到纯WebGL。我用代码做了很多实验，我认为纹理烘焙有错误，但是我的尝试没有成功，如果不困难的话，请

WebGL示例

设定一个_位置、u_鼠标、u_采样器、u_分辨率；
常数位置={
screenRect:null，
xyz:[0.0,0.0,0.0]，
穆斯敦：错，
};
函数main（）{
const canvas=document.getElementById（'canvas'）；
const gl=canvas.getContext（'webgl'）；
canvas.width=canvas.clientWidth；
canvas.height=canvas.clientHeight；
const program=webglUtils.createProgramFromScripts（gl，[“2d顶点着色器”、“2d片段着色器”]）；
gl.useProgram（程序）；
常量tick=函数（）{
渲染（总图、画布、fbo、平面）；
window.requestAnimationFrame（勾选，画布）；
};
a_Position=gl.getAttriblLocation（程序“a_Position”）；
u_Mouse=gl.getUniformLocation（程序“u_Mouse”）；
u_分辨率=gl.getUniformLocation（程序“u_分辨率”）；
u_Sampler=gl.getUniformLocation（程序“u_Sampler”）；
常量fbo=[initFramebufferObject（gl），initFramebufferObject（gl）]；
常量平面=初始顶点缓冲区平面（gl）；
勾选（）；
}
设src=0，dst=1，t；
函数渲染（总图、画布、fbo、平面）{
gl.bindFramebuffer（gl.FRAMEBUFFER，fbo[dst]）；
总图视口（0,0,1,1）；
drawTexture（gl，gl.program，plane，fbo[src].texture）；
gl.bindFramebuffer（gl.FRAMEBUFFER，null）；
总图视口（0，0，canvas.width，canvas.height）；
drawTexture（gl，gl.program，plane，fbo[dst].texture）；
t=src；
src=dst；
dst=t；
}
函数drawTexture（gl、程序、o、纹理）{
gl.uniform3f（u_鼠标，…位置.xyz）；
gl.uniform2f（u_分辨率、画布宽度、画布高度）；
initAttributeVariable（gl、a_位置、o.vertexBuffer）；
gl.activeTexture（gl.TEXTURE0）；
gl.bindTexture（gl.TEXTURE_2D，纹理）；
gl.bindBuffer（gl.ELEMENT\u ARRAY\u BUFFER，o.indexBuffer）；
总图抽屉元件（总图三角形、o.numIndices、o.indexBuffer.type、0）；
}
函数initAttributeVariable（gl、a_属性、缓冲区）{
gl.bindBuffer（gl.ARRAY\u BUFFER，BUFFER）；
gl.VertexAttributePointer（a_属性，buffer.num，buffer.type，false，0，0）；
gl.EnableVertexAttributeArray（a_属性）；
}
函数initFramebufferObject（gl）{
const framebuffer=gl.createFramebuffer（），texture=gl.createTexture（）；
gl.bindTexture（gl.TEXTURE_2D，纹理）；
gl.texImage2D（gl.TEXTURE_2D，0，gl.RGBA，1，1，0，gl.RGBA，gl.UNSIGNED_字节，新的Uint8Array（[0，0，0，255]）；
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至边缘）；
framebuffer.texture=纹理；
gl.bindFramebuffer（gl.FRAMEBUFFER，FRAMEBUFFER）；
gl.framebufferTexture2D（gl.FRAMEBUFFER，gl.COLOR_ATTACHMENT0，gl.TEXTURE_2D，TEXTURE，0）；
gl.bindFramebuffer（gl.FRAMEBUFFER，null）；
gl.bindTexture（gl.TEXTURE_2D，空）；
返回帧缓冲区；
}
函数initVertexBuffersForPlane（gl）{
常数顶点=新的Float32Array（[1.0,1.0,0.0，-1.0,1.0,0.0，-1.0，-1.0,0.0,1.0，-1.0,0.0]）；
const texCoords=新的Float32Array（[1.0,1.0,0.0,1.0,0.0,0.0,1.0,0.0]）；
常数索引=新的Uint8Array（[0,1,2,0,2,3]）；
常数o={}；
o、 vertexBuffer=initArrayBufferForLaterUse（gl，顶点，3，gl.FLOAT）；
o、 indexBuffer=initElementArrayBufferForLaterUse（gl，索引，gl.无符号字节）；
o、 numIndices=指数.length；
gl.bindBuffer（gl.ARRAY\u BUFFER，null）；
gl.bindBuffer（gl.ELEMENT\u ARRAY\u BUFFER，null）；
返回o；
}
函数initArrayBufferForLaterUse（gl、数据、数值、类型）{
const buffer=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，BUFFER）；
总账缓冲数据（总账数组缓冲、数据、总账静态绘图）；
buffer.num=num；
buffer.type=类型；
返回缓冲区；
}
函数initElementArrayBufferForLaterUse（总账、数据、类型）{
const buffer=gl.createBuffer（）；
gl.bindBuffer（gl.ELEMENT\u ARRAY\u BUFFER，BUFFER）；
gl.bufferData（gl.ELEMENT\u ARRAY\u BUFFER，data，gl.STATIC\u DRAW）；
buffer.type=类型；
返回缓冲区；
}
函数mousehandler（）{
函数getPosition（e）{
常数x=e.clientX，y=window.innerHeight-e.clientY，z=0.05；
position.xyz=[x，y，z]；
}
函数getRect（）{
position.screnRect=canvas.getBoundingClientRect（）；
}
功能鼠标向下（e）{
position.mouseDown=true；
位置（e）；
}
功能移动（e）{
if（position.mouseDown）getPosition（e）；
否则返回；
}
函数up（）{
position.mouseDown=false；
}
getRect（）；
canvas.addEventListener（'mousedown'，mousedown）；
canvas.addEventListener（'mousemove'，move）；
canvas.addEventListener（'mouseup'，up）；
}
鼠标手柄（）；
main（）
正文{
保证金：0；
}
帆布{
宽度：100vw；
高度：100vh；
显示：块；
}

属性向量4 a_位置；
void main（）{
gl_位置=a_位置；
}
精密中泵浮子；
均匀取样器2D u_取样器；
均匀vec2u_分辨率；
均匀vec3u_小鼠；
void main（）{
vec2 uv=gl_FragCoord.xy/u_分辨率；
gl_FragColor=纹理2D（u_采样器，uv）；
浮动距离=距离（u_mouse.xy，gl_FragCoord.xy）；
gl_FragColor.rgb+=u_mouse.z*max（15.0-dist，0.0）；
//gl_FragColor.gb+=0.01；/*测试FBO*/
}
为frambuffer创建纹理对象时，存在一个明显的错误

如果不生成（通过
gl.generateMipmap
），则设置
gl.TEXTURE\u MIN\u过滤器
非常重要。由于默认过滤器是
gl.NEAREST\u MIPMAP\u LINEAR
，如果不将缩小功能更改为
gl.NEAREST
或
gl.LINEAR
，纹理将是MIPMAP不完整的：

gl.bindTexture（gl.TEXTURE_2D，纹理）；
gl.texImage2D（gl.TEXTURE_2D，0，gl.RGBA，宽度，高度，0，gl.RGBA，gl.UNSIGNED_字节，null）；
gl.texParamet