Question

好的，我可能在这里遗漏了一些明显的东西。我想要完成的是将一个具有premultipliedAlpha: true的three.js场景存储到缓冲区。但是，当使用gl.readPixels()读取Webgl上下文时，像素颜色的值总是好像将premultipliedAlpha设置为false。换句话说，premultipliedAlpha标志不会影响gl.readPixels（）的输出。

代码示例：

var width = 512;
var height = 512;

// Browser renderer
var renderer = new THREE.WebGLRenderer({alpha: true, antialias: true, premultipliedAlpha: true});
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

// Setup basic scene
var scene = new THREE.Scene();
var camera = new THREE.OrthographicCamera(-width/2, width/2, height/2, -height/2, 0.001, 1000);
camera.position.z = 1;

// Draw a semi-transparent red square
var redSquare = new THREE.Mesh(
    new THREE.PlaneGeometry(width, height),
    new THREE.MeshBasicMaterial({
        side: THREE.DoubleSide,
        transparent : true,
        color: 0xFF0000,
        opacity : .5
    })
);
scene.add(redSquare);
renderer.render( scene, camera );

// Check color of first pixel
var gl = renderer.getContext();
var buf = new Uint8Array(4);
gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, buf);
console.log(buf[0], buf[1], buf[2], buf[3]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script>

输出颜色为127 0 0 127，我预计它为255 0 0 127。切换premultipliedAlpha会更改屏幕上的值，但不会更改输出中的值。这可能是设计的，但我的问题是，如何转换缓冲区中的颜色，以便获得预期值？

解决方案

要预先缓冲缓冲区中的alpha，像素值应除以alpha值，如下所示：

buf[0] /= buf[3] / 0xff
buf[1] /= buf[3] / 0xff
buf[2] /= buf[3] / 0xff

感谢@Kirill Dmitrenko

Answer 1

premultipliedAlpha: true是默认设置，但设置为true或false与画布中的值无关（即从readPixels返回）。它只是浏览器关于如何将画布与页面其余部分合成的标志。

您有责任在画布中放置与您设置的premultipliedAlpha匹配的值

Answer 2

那是因为premultipliedAlpha: true是default value。

three.js premultipliedAlpha = true不影响gl.readPixels（）的输出

2 个答案: