three.js - 从 Three.js RenderToTarget 读取数据会产生意想不到的结果

Question

好吧，我正在尝试使用 WebGL 的 readPixels 方法将数据从着色器渲染到帧缓冲区。该技术很简单:

renderer.render(sceneRTT, cameraRTT, rtTexture, true);

var pixels = new self.Uint8Array(width * height * 4);

var gl = renderer.context;
gl.bindFramebuffer(gl.FRAMEBUFFER, rtTexture.__webglFramebuffer);
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

我通过将着色器的 gl_FragCoord 更改为 gl_FragCoord = vec4(255,120,35,100) 来测试这一点，尽管任何值当然都是有效的。

问题是，像素总是返回不正确的值，即使我指定了上面这样的常量值!可能是什么原因造成的？

注意:这个问题在我测试的每个着色器上都会出现，包括其他人的工作 fiddle

Answer 1

好吧，在尝试了一些测试值之后，我找出了问题所在。

RGB 列中返回的值预先乘以 alpha。

这是因为 WebGLRenderer 的 premultipliedAlpha 标志默认设置为 true。

要修复此行为，请设置:

var renderer = new THREE.WebGLRenderer( { premultipliedAlpha : false } ); 

在构建所使用的渲染器期间。

此外，请确保在创建要应用于帧缓冲区的 Material 时将其混合设置为无:

material.blending = 0;