Clear Color Buffer

Help & Support
#1

Hole, I’m using an example scene to create a texture from a screenshot and assign that texture to a material (diffuse and opacity). My problem is that every time I make a capture, the memory usage keeps increasing and I can’t clear the render buffer before making a new capture. Can someone give me a hand ?
Here I leave the access to the project, it is very simple.

TextOnModel | Editor (playcanvas.com)

THANK YOU

#2

Hi @MLB ,

If I hat to guess, it would be this part of your rendering code:

    var colorBuffer = new pc.Texture(this.app.graphicsDevice, {
        width: 512,
        height: 512,
        format: pc.PIXELFORMAT_R8_G8_B8_A8,
        autoMipmap: true,
        minFilter: pc.FILTER_NEAREST,
        magFilter: pc.FILTER_NEAREST,

    });

Since each time you click, you create a new texture, the browser will need to allocate RAM for it, and it won’t be cleared away until garbage collection occurs, since no other function clears it. You may want to define this texture in initialize and then instead of creating a new texture on screenshot, simply update the existing one with a new render. That should keep your memory usage under control.

If I’m wrong, other users on the forum please feel free to correct me.

I hope this is helpful.

#3

Thanks for your response, I understand the logic of what you say, but I can not do it. Do you can modify my cordo to do that?

Thank you

#4

Hi @MLB ,

Sorry for the late reply. Here are the changes to your renderLayerTotexture script that I made. Testing in Firefox showed that there was not an abnormal increase in RAM when changing the texture on the spheres repeatedly.

var RenderLayerTotexture = pc.createScript('renderLayerTotexture');

RenderLayerTotexture.attributes.add("layerName", {type: "string"});


RenderLayerTotexture.prototype.initialize = function() {

    this.app.on('render:deleteBuffer',this.deleteBuffer, this);

    this.app.on('render:refresh',this.refresh, this);

    this.on('destroy', function() {
        this.app.off('render:refresh', this.refresh, this);
    });

    this.colorBuffer = new pc.Texture(this.app.graphicsDevice, {
        width: 512,
        height: 512,
        format: pc.PIXELFORMAT_R8_G8_B8_A8,
        autoMipmap: true,
        minFilter: pc.FILTER_NEAREST,
        magFilter: pc.FILTER_NEAREST,

    });
    this.colorBuffer.minFilter = pc.FILTER_LINEAR_MIPMAP_LINEAR;
    this.colorBuffer.magFilter = pc.FILTER_LINEAR;
    this.colorBuffer.anisotropy = 5;
    this.colorBuffer.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
    this.colorBuffer.addressV = pc.ADDRESS_CLAMP_TO_EDGE;

    
    this.renderTarget = new pc.RenderTarget(this.app.graphicsDevice, this.colorBuffer, {
        depth: true,
        flipY: true,
        samples: 8
    });
};




//----------------------------------------------------------------------------------------------------


RenderLayerTotexture.prototype.deleteBuffer = function() {




};


//----------------------------------------------------------------------------------------------------





// initialize code called once per entity
RenderLayerTotexture.prototype.refresh = function() {
    
    
    this.renderTarget.destroy();
    // Create a 512x512x24-bit render target with a depth buffer
    
    var layer = this.app.scene.layers.getLayerByName(this.layerName);
    layer.renderTarget = this.renderTarget;
    
    this.renderTarget.colorBuffer = this.colorBuffer;
    this.app.fire('apply:refresh', layer);

};

You can see these changes in action at my for here:

https://playcanvas.com/project/913664/overview/modelontext

If this is not the behavior that you were looking for please feel free to reply. These changes were a bit quick and dirty, and more specialized help might be outside of the scope of what I can provide personally.

I hope this his helpful!

3 Likes
#5

It works perfect. Thank you very much for your help