threejs gl.readPixels alpha always return 255

Question

I want to read the pixel values from a threejs application.

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 code

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

The RBG values return correct but the alpha value always return 255.

Rabbid76 Rabbid76 · Accepted Answer · 2017-11-15T16:39:37

There are 2 possibilities.
Either the internal buffer contains 1.0 (255) for the alpha channel of all texels.
Or the buffer where you read from has no alpha channel at all, in its internal format. This means the internal buffer format is e.g. RGB.

The WebGL 1.0 Specifications - 5.13.12 Reading back pixels refers to OpenGL ES 2.0 Specification.

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

Final Expansion to RGBA

Each group is converted to a group of 4 elements as follows: if a group does not contain an A element, then A is added and set to 1.0. If any of R, G, or B is missing from the group, each missing element is added and assigned a value of 0.0.

Note, if you do not set the alpha channel of the vertex attribute which is writen to the fragment color, then the alpha channel will be 1.0 (255 in RGBA8 buffer), beacuse all vertex attributes are initilized with (0, 0, 0, 1):

The WebGL 1.0 Specifications - 5.13.10 Uniforms and attributes refers to OpenGL ES 2.0 Specification.

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

The state required to support vertex specification consists of MAX_VERTEX_ATTRIBS four-component floating-point vectors to store generic vertex attributes. The initial values for all generic vertex attributes are (0, 0, 0, 1).

If you want to set the alpha channel on the geometry of a THREE.mesh, then you have to attach a transparent material to the mesh with an opacity less then 1.0. See 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);

To be able to read an alpha channel, you have to ensure that the canvas contains an alpha (transparency) buffer. This can be don by setting the alpha attribute of the THREE.WebGLRenderer:

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

threejs gl.readPixels alpha always return 255

1 Answers