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);

Threejs代码

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的<{1}}属性来实现：

alpha

threejs gl.readPixels alpha总是返回255

1 个答案: