Javascript WebGL drawBuffer输出黑色纹理

我试图在drawBuffers的帮助下编写简单的webgl多路径程序。我创建了2个drawBuffer纹理，并在fragmentShaderPass1中为它们指定颜色。纹理1应为绿色，纹理2应为棕色。然后我将这些纹理作为一个统一的对象传递给fragmentShaderPass2，后者使用纹理1的颜色渲染矩形。问题是矩形总是黑色而不是绿色！我做错了什么

    // STAGE 1
    let fragmentShaderPass1 = `
        #extension GL_EXT_draw_buffers : require
        precision highp float;
        precision highp int;
        precision highp sampler2D;

        void main( void )
        {
            gl_FragData[0] = vec4(.2, .8, .0, 1);  // green
            gl_FragData[1] = vec4(.6, .5, .4, .3);  // brown
        }
    `;
    let pass1_prog = createProgram(gl, globals.vertexShader, fragmentShaderPass1);

    let firstStageFrameBuffer = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, firstStageFrameBuffer);

    gl.useProgram(pass1_prog);

    for (let i = 0; i < 2; i++) 
    {
        let tex = gl.createTexture();
        textures.push(tex);

        gl.bindTexture(gl.TEXTURE_2D, tex);

        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, canvas.width, canvas.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);

        // attach texture to framebuffer
        gl.framebufferTexture2D(gl.FRAMEBUFFER, ext.COLOR_ATTACHMENT0_WEBGL + i, gl.TEXTURE_2D, tex, 0);
    }

    gl.disable(gl.DEPTH_TEST); // framebuffer doesn't even have a depth buffer!
    gl.viewport(0, 0, _this.canvas.width, _this.canvas.height); 

    ext.drawBuffersWEBGL([
        ext.COLOR_ATTACHMENT0_WEBGL,
        ext.COLOR_ATTACHMENT1_WEBGL
    ]);

    gl.drawArrays(gl.POINTS, 0, 1); 



    // STAGE 2
    let fragmentShaderPass2 = `
        precision highp float;
        precision highp int;
        precision highp sampler2D;

        uniform sampler2D inColor0;
        uniform sampler2D inColor1;

        void main( void )
        {
            gl_FragColor = texture2D(inColor0, vec2(0.5));
        }
    `;
    let pass2_prog = createProgram(gl, globals.vertexShader, fragmentShaderPass2);

    gl.bindFramebuffer(gl.FRAMEBUFFER, null);

    gl.useProgram(pass2_prog);
    gl.viewport(0, 0, canvas.width, canvas.height); 
    gl.clearColor(1.0, 1.0, 1.0, 1.0);

    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, textures[0]);
    gl.uniform1i(gl.getUniformLocation(pass2_prog, "inColor0"), 0);

    gl.activeTexture(gl.TEXTURE1);
    gl.bindTexture(gl.TEXTURE_2D, textures[1]); 
    gl.uniform1i(gl.getUniformLocation(pass2_prog, "inColor1"), 1);

    gl.drawArrays(gl.POINTS, 0, 1);

---

您在上面发布的代码无法使纹理可渲染，并在中获取此错误

渲染警告：绑定到纹理单元0的纹理不可渲染。它可能是非2次方的，或者可能有不兼容的纹理过滤

它们不可渲染，因为它们没有mips，但设置为默认使用mips。它们也可能不是2维的幂，虽然你没有显示画布的大小，但只是猜测它不是2维的幂

使它们具有可渲染性

  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

让他们渲染

const canvas=document.querySelector'canvas'； const_this={canvas}； 常量纹理=[]； const gl=_this.canvas.getContext'webgl'； const ext=gl.getExtension'WEBGL_draw_buffers'； 如果ext{alert'need WEBGL_draw_buffers'；} 常量全局={ 顶点着色器：` 真空总管{ gl_位置=向量40,0,0,1； gl_PointSize=100.0； } `, } //第一阶段 设fragmentShaderPass1=` 扩展GL\U EXT\U draw\U缓冲区：需要 高精度浮点； 精度高； 高精度二维采样器； 主空隙 { gl_FragData[0]=vec4.2,8,0,1；//绿色 gl_FragData[1]=vec4.6,5,4,1；//布朗 } `; 让pass1_prog=createProgramgl，globals.vertexShader，fragmentShaderPass1； 让firstStageFrameBuffer=gl.createFramebuffer； gl.bindframebuffer gl.FRAMEBUFFER，firstStageFrameBuffer； gl.useProgrampass1_prog； 对于let i=0；i<2；i++{ 设tex=gl.createTexture； 纹理.pushtex； gl.bindTexturegl.TEXTURE_2D，tex； gl.texImage2Dgl.TEXTURE_2D，0，gl.RGBA，canvas.width，canvas.height，0，gl.RGBA，gl.UNSIGNED_字节，null； gl.texParameterigl.TEXTURE_2D，gl.TEXTURE_MIN_过滤器，gl.LINEAR； gl.texParameterigl.TEXTURE_2D、gl.TEXTURE_WRAP_S、gl.CLAMP_TO_EDGE； gl.texParameterigl.TEXTURE_2D、gl.TEXTURE_WRAP_T、gl.CLAMP_至边； //将纹理附加到帧缓冲区 gl.framebufferTexture2Dgl.FRAMEBUFFER，ext.COLOR_ATTACHMENT0_WEBGL+i，gl.TEXTURE_2D，tex，0； } gl.disablegl.DEPTH_TEST；//帧缓冲区甚至没有深度缓冲区！ gl.viewport0，0，_this.canvas.width，_this.canvas.height； ext.drawBuffersWEBGL[ ext.COLOR\u附件0\u WEBGL， ext.COLOR\u附件1\u WEBGL ]; gl.drawArraysgl.POINTS，0,1； //第二阶段 设fragmentShaderPass2=` 高精度浮点； 精度高； 高精度二维采样器； 均匀采样2D不着色0； 均匀采样2D不着色1； 主空隙 { gl_FragColor=texture2DinColor0，vec20.5； } `; 让pass2_prog=createProgramgl，globals.vertexShader，fragmentShaderPass2； gl.bindframebuffer gl.FRAMEBUFFER，空； gl.useProgrampass2_prog； gl.viewport0，0，canvas.width，canvas.height； gl.clearColor1.0、1.0、1.0、1.0； gl.activeTexturegl.TEXTURE0； gl.bindTexturegl.TEXTURE_2D，纹理[0]； gl.uniform1igl.getUniformLocationpass2_prog，inColor0，0； gl.activeTexturegl.TEXTURE1； gl.bindTexturegl.TEXTURE_2D，纹理[1]； gl.uniform1igl.GetUNIFORMLLocationPass2_程序，不着色1，1； gl.drawArraysgl.POINTS，0,1； // -- 函数createProgramgl、vSrc、fSrc{ 返回twgl.createProgramgl[vSrc，fSrc]； } 画布{边框：1px纯黑；}

---

您在上面发布的代码无法使纹理可渲染，并在中获取此错误

渲染警告：绑定到纹理单元0的纹理不可渲染。它可能是非2次方的，或者可能有不兼容的纹理过滤

它们不可渲染，因为它们没有mips，但设置为默认使用mips。它们也可能不是2维的幂，虽然你没有显示画布的大小，但只是猜测它不是2维的幂

使它们具有可渲染性

  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

让他们渲染

const canvas=document.querySelector'canvas'； const_this={canvas}； 常量纹理=[]； const gl=_this.canvas.getContext'webgl'； const ext=gl.getExtension'WEBGL_draw_buffers'； 如果ext{alert'need WEBGL_draw_buffers'；} 常量全局={ 顶点着色器：` 真空总管{ gl_位置=向量40,0,0,1； gl_PointSize=100.0； } `, } //第一阶段 设fragmentShaderPass1=` 扩展GL\U EXT\U draw\U缓冲区：需要 高精度浮点； 精度高； 高精度二维采样器； 主空隙 { gl_FragData[0]=vec4.2,8,0,1；//绿色 gl_FragData[1]=vec4.6,5,4,1；//布朗 } `; 让pass1_prog=createProgramgl，globals.vertexShader，fragmentShaderPass1； 让firstStageFrameBuffer=gl.createFramebuffer； gl.bindframebuffer gl.FRAMEBUFFER，firstStageFrameBuffer； 美国环保署 ss1_程序； 对于let i=0；i<2；i++{ 设tex=gl.createTexture； 纹理.pushtex； gl.bindTexturegl.TEXTURE_2D，tex； gl.texImage2Dgl.TEXTURE_2D，0，gl.RGBA，canvas.width，canvas.height，0，gl.RGBA，gl.UNSIGNED_字节，null； gl.texParameterigl.TEXTURE_2D，gl.TEXTURE_MIN_过滤器，gl.LINEAR； gl.texParameterigl.TEXTURE_2D、gl.TEXTURE_WRAP_S、gl.CLAMP_TO_EDGE； gl.texParameterigl.TEXTURE_2D、gl.TEXTURE_WRAP_T、gl.CLAMP_至边； //将纹理附加到帧缓冲区 gl.framebufferTexture2Dgl.FRAMEBUFFER，ext.COLOR_ATTACHMENT0_WEBGL+i，gl.TEXTURE_2D，tex，0； } gl.disablegl.DEPTH_TEST；//帧缓冲区甚至没有深度缓冲区！ gl.viewport0，0，_this.canvas.width，_this.canvas.height； ext.drawBuffersWEBGL[ ext.COLOR\u附件0\u WEBGL， ext.COLOR\u附件1\u WEBGL ]; gl.drawArraysgl.POINTS，0,1； //第二阶段 设fragmentShaderPass2=` 高精度浮点； 精度高； 高精度二维采样器； 均匀采样2D不着色0； 均匀采样2D不着色1； 主空隙 { gl_FragColor=texture2DinColor0，vec20.5； } `; 让pass2_prog=createProgramgl，globals.vertexShader，fragmentShaderPass2； gl.bindframebuffer gl.FRAMEBUFFER，空； gl.useProgrampass2_prog； gl.viewport0，0，canvas.width，canvas.height； gl.clearColor1.0、1.0、1.0、1.0； gl.activeTexturegl.TEXTURE0； gl.bindTexturegl.TEXTURE_2D，纹理[0]； gl.uniform1igl.getUniformLocationpass2_prog，inColor0，0； gl.activeTexturegl.TEXTURE1； gl.bindTexturegl.TEXTURE_2D，纹理[1]； gl.uniform1igl.GetUNIFORMLLocationPass2_程序，不着色1，1； gl.drawArraysgl.POINTS，0,1； // -- 函数createProgramgl、vSrc、fSrc{ 返回twgl.createProgramgl[vSrc，fSrc]； } 画布{边框：1px纯黑；}

---

为什么对texImage2D使用浮点类型？你的情况不应该是无符号字节吗？@vHawk你说得对。我改为无符号字节。这个例子仍然不起作用。你的顶点着色器看起来怎么样？对于发布的代码，你应该在Javascriot控制台中看到错误。你看过JavaScript控制台了吗？为什么要对texImage2D使用FLOAT类型？你的情况不应该是无符号字节吗？@vHawk你说得对。我改为无符号字节。这个例子仍然不起作用。你的顶点着色器看起来怎么样？对于发布的代码，你应该在Javascriot控制台中看到错误。你看过JavaScript控制台了吗？