我有一个 4x4x4 3DTexture,我正在初始化并正确显示它以着色我的 4x4x4 顶点网格(请参阅带有一个白色像素 - 0,0,0 的附加红色网格)。
但是,当我在帧缓冲区中渲染 4 层(使用 gl.COLOR_ATTACHMENT0 --> gl.COLOR_ATTACHMENT3 一次全部四个层时,我的片段着色器成功渲染了层上的 16 个像素中的 4 个(变为绿色)。
当我只使用 gl.COLOR_ATTACHMENT0 做一层时,相同的 4 个像素显示为 1 层正确更改,而其他 3 层保持原始颜色不变。当我将 gl.viewport(0, 0, size, size) (在此示例中为 size = 4)更改为整个屏幕之类的其他内容,或者大小不超过 4 时,会写入不同的像素,但不会超过 4 . 我的目标是精确地单独指定每一层的所有 16 个像素。我现在使用颜色作为学习经验,但纹理实际上是用于物理模拟的每个顶点的位置和速度信息。我假设(错误的假设?)有 64 个点/顶点,我正在运行顶点着色器和片段着色器各 64 次,每次调用着色一个像素。
我已经从着色器中删除了除重要代码之外的所有代码。我没有改变javascript。我怀疑我的问题是初始化并错误地传递了顶点位置数组。
//Set x,y position coordinates to be used to extract data from one plane of our data cube
//remember, z we handle as a 1 layer of our cube which is composed of a stack of x-y planes.
const oneLayerVertices = new Float32Array(size * size * 2);
count = 0;
for (var j = 0; j < (size); j++) {
for (var i = 0; i < (size); i++) {
oneLayerVertices[count] = i;
count++;
oneLayerVertices[count] = j;
count++;
//oneLayerVertices[count] = 0;
//count++;
//oneLayerVertices[count] = 0;
//count++;
}
}
const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
position: {
numComponents: 2,
data: oneLayerVertices,
},
});
然后我使用 bufferInfo 如下:
gl.useProgram(computeProgramInfo.program);
twgl.setBuffersAndAttributes(gl, computeProgramInfo, bufferInfo);
gl.viewport(0, 0, size, size); //remember size = 4
outFramebuffers.forEach((fb, ndx) => {
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.drawBuffers([
gl.COLOR_ATTACHMENT0,
gl.COLOR_ATTACHMENT1,
gl.COLOR_ATTACHMENT2,
gl.COLOR_ATTACHMENT3
]);
const baseLayerTexCoord = (ndx * numLayersPerFramebuffer);
console.log("My baseLayerTexCoord is "+baseLayerTexCoord);
twgl.setUniforms(computeProgramInfo, {
baseLayerTexCoord,
u_kernel: [
0, 0, 0,
0, 0, 0,
0, 0, 0,
0, 0, 1,
0, 0, 0,
0, 0, 0,
0, 0, 0,
0, 0, 0,
0, 0, 0,
],
u_position: inPos,
u_velocity: inVel,
loopCounter: loopCounter,
numLayersPerFramebuffer: numLayersPerFramebuffer
});
gl.drawArrays(gl.POINTS, 0, (16));
});
顶点着色器:calc_vertex:
const compute_vs = `#version 300 es
precision highp float;
in vec4 position;
void main() {
gl_Position = position;
}
`;
片段着色器:calc_fragment:
const compute_fs = `#version 300 es
precision highp float;
out vec4 ourOutput[4];
void main() {
ourOutput[0] = vec4(0,1,0,1);
ourOutput[1] = vec4(0,1,0,1);
ourOutput[2] = vec4(0,1,0,1);
ourOutput[3] = vec4(0,1,0,1);
}
`;