Get colorBuffer of rendered layer

Help & Support
#1

Hello.

Thanks dev team for releasing new layers system, and the first thing I tried was getting a rendered texture of layer.

I found a terribly dirty solution directly via webGL but I hope layers should give this opportunity as well.

So I tried it like this:

this.app.scene.layers.getLayerByName("World").onPostRender = function(cameraIndex) {
    var camera = this.cameras[cameraIndex];
    var pixels = camera.renderTarget.colorBuffer.
    // pixels is emply i.e. [0,0,0,0,0, ... ]
    camera.renderTarget.colorBuffer.unlock();
}

I want to render the whole scene without one layer, then get colorBuffer of world layer and use it before I render left one.

My old implementation of refractive post-effect doesn’t work anymore since camera hasn’t default renderTarget.

#2

Okay, I found it by myself.

Buy I don’t know which method is faster? My guess is copyTexImage2D.

pc.Texture.prototype.fillFromBuffer = function() {
    var gl = pc.app.graphicsDevice.gl;
    
    if (typeof this.frameBufferPixels == "undefined") {
        this.frameBufferPixels = new Uint8Array(gl.drawingBufferWidth * gl.drawingBufferHeight * 4);;
    }
    
    gl.readPixels(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight, gl.RGBA, gl.UNSIGNED_BYTE, this.frameBufferPixels);
    
    if (!this.frameBufferPixels) return; 
    
    var currentPixels = this.lock();
    
    if (currentPixels instanceof Uint8Array) {
        currentPixels.set(this.frameBufferPixels);
    }
   
    this.unlock();
};

pc.Texture.prototype.copyFromBuffer = function() {
    var device = pc.app.graphicsDevice;
    var gl = device.gl;
    
    var glTexture = this._glTextureId;
    
    if (glTexture instanceof WebGLTexture) {
        gl.bindTexture(gl.TEXTURE_2D, glTexture);
        gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGB, 0, 0, device.width,  device.height, 0);
    }
};
1 Like
#3

Okay, I’ve done it by myself. Now I have nice invisibility FX.

Also, copying is much faster that filling. So avoid to use it. But it still harms performance a lot.

image
image.png1244×278 7.83 KB

3 Likes
#4

Very cool!
2020202020

#5

I’ve done some fixes, so it looks even better now :slight_smile: Thanks!

Probably, I will share after some tests. We can use if as a base for more effects.
It also requires some monkey patched methods for pc currently :frowning: