我遇到了一个很奇怪的情况，尝试从WebGL画布中读取像素并没有成功。然后我写了一个没有使用类的同样程序版本，出现了某些原因它却可以工作。也许我犯了一些非常基本的错误，但我真的找不出这两者之间（语义）的差异。
在下面的片段中，我（Firefox 88.0 在 Linux 5.11.15-arch1-2 上）看到控制台输出 128 和 0。128 来自类外部的代码，似乎是正确的，因为着色器为每个像素和通道绘制 0.5，而 0 来自类内部的代码。
[编辑] 我已经看到了这个问题，但他们谈论的是读取必须发生在与绘制相同的事件中，这在我的两个案例中都是正确的（两行连续）。他们还谈论了一个屏幕上的画布，而我渲染到一个帧缓冲区，不确定是否有所不同，但我假设帧缓冲区更加持久。
class Gpgpu {
constructor(w, h, vs, fs, ans, uns) {
this.gl = document.createElement("canvas").getContext("webgl");
this.gl.canvas.width = w;
this.gl.canvas.height = h;
this.gl.viewport(0, 0, w, h);
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.gl.createFramebuffer());
this.out = new Uint8Array(w * h * 4);
}
spg(vs, fs, ans, uns) {
let p = this.gl.createProgram();
for (let ss of [
{ t: this.gl.VERTEX_SHADER, d: vs },
{ t: this.gl.FRAGMENT_SHADER, d: fs }
]) {
let s = this.gl.createShader(ss.t);
this.gl.shaderSource(s, ss.d);
this.gl.compileShader(s);
this.gl.attachShader(p, s);
}
this.gl.linkProgram(p);
this.gl.useProgram(p);
this.als = {};
for (let an of ans) {
this.als[an] = {
l: this.gl.getAttribLocation(p, an),
b: this.gl.createBuffer()
};
}
this.uls = {};
for (let un of uns) {
this.uls[un] = this.gl.getUniformLocation(p, un);
}
}
sad(n, ads) {
this.n = n;
for (let an in ads) {
let al = this.als[an];
let ad = ads[an];
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, al.b);
this.gl.bufferData(
this.gl.ARRAY_BUFFER,
Float32Array.from(ad),
this.gl.STATIC_DRAW
);
this.gl.enableVertexAttribArray(al.l);
this.gl.vertexAttribPointer(al.l, 2, this.gl.FLOAT, false, 0, 0);
}
}
drw() {
this.gl.drawArrays(this.gl.TRIANGLES, 0, this.n);
}
}
class Cloth {
constructor(w, h) {
this.gpu = new Gpgpu(w, h);
this.tex = this.gpu.gl.createTexture();
this.gpu.spg(
document.getElementById("vs").innerHTML,
document.getElementById("fs").innerHTML,
["a_position"],
[]
);
this.gpu.sad(6, {
a_position: [-1, -1, -1, 1, 1, -1, -1, 1, 1, -1, 1, 1]
});
this.gpu.gl.bindTexture(this.gpu.gl.TEXTURE_2D, this.tex);
this.gpu.gl.texImage2D(
this.gpu.gl.TEXTURE_2D,
0,
this.gpu.gl.RGBA,
w,
h,
0,
this.gpu.gl.RGBA,
this.gpu.gl.UNSIGNED_BYTE,
null
);
}
t() {
this.gpu.gl.framebufferTexture2D(
this.gpu.gl.FRAMEBUFFER,
this.gpu.gl.COLOR_ATTACHMENT0,
this.gpu.gl.TEXTURE_2D,
this.tex,
0
);
this.gpu.drw();
this.gpu.gl.readPixels(
0,
0,
this.w,
this.h,
this.gpu.gl.RGBA,
this.gpu.gl.UNSIGNED_BYTE,
this.gpu.out
);
console.log(this.gpu.out[0]);
}
}
const w = 10;
const h = 10;
const gpu = new Gpgpu(w, h);
const tex = gpu.gl.createTexture();
gpu.spg(
document.getElementById("vs").innerHTML,
document.getElementById("fs").innerHTML,
["a_position"],
[]
);
gpu.sad(6, {
a_position: [-1, -1, -1, 1, 1, -1, -1, 1, 1, -1, 1, 1]
});
gpu.gl.bindTexture(gpu.gl.TEXTURE_2D, tex);
gpu.gl.texImage2D(
gpu.gl.TEXTURE_2D,
0,
gpu.gl.RGBA,
w,
h,
0,
gpu.gl.RGBA,
gpu.gl.UNSIGNED_BYTE,
null
);
gpu.gl.framebufferTexture2D(
gpu.gl.FRAMEBUFFER,
gpu.gl.COLOR_ATTACHMENT0,
gpu.gl.TEXTURE_2D,
tex,
0
);
gpu.drw();
gpu.gl.readPixels(0, 0, w, h, gpu.gl.RGBA, gpu.gl.UNSIGNED_BYTE, gpu.out);
console.log(gpu.out[0]);
new Cloth(10, 10).t();<script type="x-shader/x-vertex" id="vs">
attribute vec4 a_position;
void main() {
gl_Position = a_position;
}
</script>
<script type="x-shader/x-fragment" id="fs">precision highp float;
void main() {
gl_FragColor = vec4(0.5, 0.5, 0.5, 0.5);
}
</script>
drawArrays之后立即执行readPixels。此外，我正在渲染到帧缓冲区，在问题中不清楚是否存在帧缓冲区。 - fweth