Green Screen three.js отображает вывод - PullRequest
Новая
       43

Green Screen three.js отображает вывод

1 голос
/ 27 марта 2019

Я использую библиотеку three.js в своем коде и хочу сделать прозрачную дыру в сцене.Эта дыра сама будет трехмерным объектом, поэтому объекты перед ней будут визуализироваться, но объекты за ней не будут отображаться.

Я попытался установить материал этой «дыры» в качестве основного материала, чтобы я мог просто прочитать данные пикселей и установить определенные пиксели прозрачными на основе этого.Но как только я получаю контекст холста, программа перестает работать.

Мой вопрос заключается в том, как мне читать и записывать данные пикселей на канве three.js или, если это возможно, делать Three.js.У библиотеки уже есть способ сделать это?

// РЕДАКТИРОВАТЬ //

Я нашел способ прочитать данные пикселей на холсте three.js, используя renderer.context и некоторый другой код.Мой новый вопрос теперь заключается в том, как мне изменить цвет отдельных пикселей в three.js или webgl

// EDIT //

Теперь я могу читать данные пикселей и изменять их, а затем помещать ихв текстуру THREE.js, используя метод DataTexture.Но теперь, когда я применяю эту текстуру к плоскости, плоскость возвращается белым. 

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

1 Ответ

0 голосов
/ 28 марта 2019

Наконец-то решил мою проблему. Я читаю все свои данные пикселей с webglcontex.readpixels(parameters);. Затем я взял эти данные, обработал их в соответствии с цветами и поместил их в двухмерный холст. 

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