[SOLVED] Making a clear color on render texture

As I have tried alter a forked version of https://playcanvas.com/project/560797/overview/tutorial-render-to-texture I wonder if it can be possible to make a clear background color on the receivning texture layer?

https://developer.playcanvas.com/en/api/pc.Texture.html does mention ‘Alpha’, but in case possible; how exactly?

You control the camera clear color from the Clear Color property found in every camera component:

image

From there you can also change the alpha and make the clear color fully transparent. If you are rendering on an onscreen surface you may also have to check both Transparent Canvas and Preserve Drawing Buffer under your rendering settings to be able to grab a texture directly from the main canvas.

2 Likes

ok, tried to - no luck … here is what I am trying to do (can be quite useful to many gamedevelopers I guess)
https://playcanvas.com/editor/scene/855450

PS: - yes the avatar might be too big from top, but then one can do a glow-thing to show it ‘minified’ on a/the more out-zoomed topmap

You were quite close! Changes I did:

RenderLayerToTexture.js, changed your texture format:

    var colorBuffer = new pc.Texture(this.app.graphicsDevice, {
        width: 1600,
        height: 900,
        format: pc.PIXELFORMAT_R8_G8_B8_A8,
        autoMipmap: true
    });

ApplyTexture.js, enabled blending on your material:

    var material = this.entity.model.model.meshInstances[0].material;
    material.diffuseMap = layer.renderTarget.colorBuffer;
    
    material.opacityMap = layer.renderTarget.colorBuffer;
    material.opacityMapChannel = 'a';
    material.blendType = pc.BLEND_NORMAL;
    
    material.update();    

This is quite useful indeed, thanks for sharing.

1 Like

Great! Thx a lot … I can really use this - opens for a lot of options :slight_smile:

1 Like