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

【问题标题】：Reading data from Three.js RenderToTarget gives unexpected results从 Three.js RenderToTarget 读取数据会产生意想不到的结果
【发布时间】：2014-12-13 07:13:31
【问题描述】：

好的，所以我正在尝试使用 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) 来测试这一点，当然任何值都是有效的。

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

注意：这个问题出现在我测试的每个着色器上，包括其他人的工作小提琴

【问题讨论】：

好的，所以在玩了一些测试值之后，我发现了问题所在。在 RGB 列中重复的值预乘以 alpha。这对我来说是个问题，因为我使用我的 RGBA 值对浮点数进行编码，所以我必须处理固有的数据丢失。

标签： three.js glreadpixels

【解决方案1】：

好吧，在玩了一些测试值之后，我发现了问题所在。

在 RGB 列中重复的值预先乘以 alpha。

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

要解决此问题，请设置：

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

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

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

material.blending = 0;

【讨论】：