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）进行测试，但任何值当然都有效。

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

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

Answer 1

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

RGB列中重新生成的值由alpha预乘。

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

要解决此问题，请设置：

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

在构建使用的渲染器期间

。

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

material.blending = 0;

从Three.js RenderToTarget读取数据会产生意外结果

1 个答案: