绿屏three.js渲染输出答案

【问题标题】：Green Screen three.js render output绿屏three.js渲染输出
【发布时间】：2019-08-17 08:50:09
【问题描述】：

我在编码中使用了three.js 库，我想在场景中放置一个透明的洞。这个洞本身就是一个 3d 对象，所以它前面的对象会被渲染，但它后面的对象不会被渲染。

我尝试将这个 3d“洞”材质设置为基本材质，这样我就可以读取像素数据并基于此将某些像素设置为透明。但是一旦我检索到画布上下文，程序就会停止工作。

我的问题是如何在 three.js 画布上读取和写入像素数据，或者如果可能的话，three.js 库是否已经有办法做到这一点？

//编辑//

我找到了一种使用 renderer.context 和一些其他代码在 three.js 画布上读取像素数据的方法。我现在的新问题是如何更改 three.js 或 webgl 中单个像素的颜色

//编辑//

我现在可以读取像素数据并对其进行修改，然后使用 DataTexture 方法将其放入 THREE.js 纹理中。但是现在每当我将该纹理应用到飞机时，飞机都会返回白色。

var texture = new THREE.Texture();
function SetTransparent(){
    var pixels = new Uint8Array(window.innerWidth*window.innerHeight*4);
    gl.readPixels(0, 0, window.innerWidth, window.innerHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
    var length = pixels.length/4;
    /*for (var i = 0; i < length; i++) {
        if (pixels[i*4] === 0 && pixels[i*4+1] === 0 && pixels[i*4+2] === 0 && pixels[i*4+3] === 255){
            pixels[i*4+3] = 0;
        }
    }*/
    var editTex = new THREE.DataTexture(pixels, window.innerWidth, window.innerHeight, THREE.RGBAFormat, THREE.UnsignedByteType);
    texture = editTex;
    texture.needsUpdate = true;
}

【问题讨论】：

检查这个：medium.com/@Zadvorsky/webgl-masking-composition-75b82dd4cdfd，但试图删除所有创意细节，最终无法正常工作：jsfiddle.net/mmalex/y2kt3Lrf，也许有人可以帮助找到一个错误。
这不是我想要的。我想 1. 将渲染器输出转换为 Uint8Array，2. 根据渲染器输出编辑该数组中的值，以及 3. 将这些值返回到纹理中以输出到画布中
我明白了...按照您的描述进行操作并且没有着色器会显着降低 fps。

标签： javascript canvas three.js html5-canvas webgl

【解决方案1】：

终于解决了我的问题。我用webglcontex.readpixels(parameters); 读取了我所有的像素数据。然后，我将这些数据根据颜色进行处理，然后将其放入 2d 画布中。

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var SetCanvas = function(data){
    var w = window.innerWidth;
    var h = window.innerHeight;
    Array.from({length: h}, (val, i) => data.slice(i * w * 4, (i + 1) * w * 4))
        .forEach((val, i) => data.set(val, (h - i - 1) * w * 4));
    var id = ctx.createImageData(window.innerWidth, window.innerHeight);
    id.data.set(data);
    ctx.putImageData(id, 0, 0);
};

【讨论】：