threejs gl.readPixels alpha 总是返回 255

Question

我想从 threejs 应用程序中读取像素值。

const gl = renderer.context;
const currentFrame = new Uint8Array(gl.drawingBufferWidth * gl.drawingBufferHeight * 4);
// read image data from gl
gl.readPixels(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight, gl.RGBA, gl.UNSIGNED_BYTE, currentFrame);

三个js代码

const renderer = new THREE.WebGLRenderer({preserveDrawingBuffer: true});

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight );

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 6;

const geometry = new THREE.BoxGeometry(10, 10, 10);
const cube = new THREE.Mesh(geometry);
scene.add(cube);

RBG 值返回正确，但 alpha 值始终返回 255。

Answer 1

有两种可能性。
内部缓冲区包含所有纹素的 alpha 通道的 1.0 (255)。
或者您从中读取的缓冲区在其内部格式中根本没有 alpha 通道。这意味着内部缓冲区格式是例如RGB。

WebGL 1.0 Specifications - 5.13.12 Reading back pixels 指的是 OpenGL ES 2.0 规范。

见OpenGL ES 2.0 Specification - 3.6.2 Transfer of Pixel Rectangles:

最终扩展为 RGBA

每个组被转换为一个由 4 个元素组成的组，如下所示：如果一个组不包含 A 元素，则添加 A 并设置为 1.0。如果组中缺少 R、G 或 B 中的任何一个，则添加每个缺少的元素并分配值 0.0。

注意，如果你没有设置写入片段颜色的顶点属性的 alpha 通道，那么 alpha 通道将为 1.0（在 RGBA8 缓冲区中为 255），因为所有顶点属性都使用 (0, 0, 0, 1）：

WebGL 1.0 Specifications - 5.13.10 Uniforms and attributes 指的是 OpenGL ES 2.0 规范。

见OpenGL ES 2.0 Specification - See 2.7 Current Vertex State:

支持顶点规范所需的状态由 MAX_VERTEX_ATTRIBS 四分量浮点向量组成，用于存储通用顶点属性。 所有通用顶点属性的初始值为 (0, 0, 0, 1)。

如果要在 THREE.mesh 的几何体上设置 Alpha 通道，则必须将 transparent 材质附加到网格上，opacity 小于 1.0。见THREE.material：

var geometry = new THREE.BoxGeometry( 10, 10, 10 );  
var material = new THREE.MeshBasicMaterial( {
    color: 0xff0000,
    transparent: true, 
    opacity: 0.5,
} );
const cube = new THREE.Mesh(geometry, material);

为了能够读取 Alpha 通道，您必须确保画布包含 Alpha（透明度）缓冲区。这可以通过设置THREE.WebGLRenderer 的alpha 属性来实现：

renderer = new THREE.WebGLRenderer( {
    alpha: true
});