У меня есть 3D-текстура 4x4x4, которую я инициализирую и показываю правильно, чтобы закрасить сетку вершин 4x4x4 (см. Прилагаемую красную сетку с одним белым пикселем - 0,0,0).
Однако, когда я рендерил 4 слоя в буфере кадров (все четыре за один раз, используя gl.COLOR_ATTACHMENT0 -> gl.COLOR_ATTACHMENT3, только четыре из шестнадцати пикселей на слое успешно визуализируются моим фрагментным шейдером (для поворота) зеленый).
Когда я делаю только один слой с 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));
});
VERTEX SHADER:
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);
}
`;