绿屏 three.js 渲染输出

Question

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

我尝试将此 3d "hole's" material 设置为基本 material 这样我就可以只读取像素数据并基于此将某些像素设置为透明。但是一旦我检索到 canvas 上下文，程序就会停止工作。

我的问题是如何在 three.js canvas 上读取和写入像素数据，或者如果可能的话，three.js 库是否已经有办法完成此操作？

//编辑//

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

中单个像素的颜色

//编辑//

我现在可以读取像素数据并对其进行更改，然后使用 DataTexture 方法将其放入 THREE.js 纹理中。但是现在每当我将该纹理应用于平面时，平面 returns 白色。

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

Answer 1

终于解决了我的问题。我用 webglcontex.readpixels(parameters); 读取了我所有的像素数据。然后我获取该数据并根据颜色对其进行处理并将其放入 2d canvas.

中

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

绿屏 three.js 渲染输出

Green Screen three.js render output

javascript

canvas

webgl

three.js

html5-canvas