代码之家 › 专栏 › 技术社区 › Craig Gidney Mihai

WebGL2未写入'out int[2]`result的第二个输出

webgl2

0

Craig Gidney Mihai · 技术社区 · 4 年前

当我读取片段着色器的输出时:

#version 300 es
precision highp float;
precision highp int;
out int outColor[2];
void main() {
    outColor[0] = 5;
    outColor[1] = 2;
}

渲染成32位整数RG纹理后,我发现只有5个被写入,而不是2个。可能我的某些格式说明符出错了。或者我可能将帧缓冲区附加到错误的东西上( gl.COLOR_ATTACHMENT0 ). 我尝试过各种各样的论点,但我所做的大多数修改都没有结果,因为格式不一致。可能我需要同时改变3个常数。

这是我独立的消息来源。我想要的输出是一个介于5和2之间的数组。相反,我得到一个数组,在5和半随机大常数和0之间交替。

let canvas /** @type {HTMLCanvasElement} */ = document.createElement('canvas');
let gl = canvas.getContext("webgl2");

let vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, `#version 300 es
in vec4 a_position;
void main() {
    gl_Position = a_position;
}
`);
gl.compileShader(vertexShader);
console.assert(gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS), "Vertex shader compile failed.");

let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, `#version 300 es
precision highp float;
precision highp int;
out int outColor[2];
void main() {
    outColor[0] = 5;
    outColor[1] = 2;
}
`);
gl.compileShader(fragmentShader);

let program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

let positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-3, -1, 1, 3, 1, -1]), gl.STATIC_DRAW);
let positionAttributeLocation = gl.getAttribLocation(program, "a_position");
let vao = gl.createVertexArray();
gl.bindVertexArray(vao);
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

let w = 4;
let h = 4;

let texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RG32I, w, h, 0, gl.RG_INTEGER, gl.INT, null);
let frameBuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);

gl.useProgram(program);
gl.viewport(0, 0, w, h);
gl.drawArrays(gl.TRIANGLES, 0, 3);
let outputBuffer = new Int32Array(w*h*2);
gl.readPixels(0, 0, w, h, gl.RG_INTEGER, gl.INT, outputBuffer);
console.log(outputBuffer);

1 回复 | 直到 4 年前

1

2

mystery Barmar 4 年前

阵列输出,如 out int outColor[2]; 用于输出到多个渲染目标。在本例中,两个渲染目标各有一个通道,因为您使用了标量类型。

out ivec2 outColor; .