Trying to update the Render to Texture tutorial

I’m trying to update the Render to Texture tutorial (PlayCanvas | HTML5 Game Engine) as it gives two deprecated warnings:
pc.RenderTarget constructor no longer accepts GraphicsDevice parameter.
and
pc.Layer#renderTarget is deprecated. Set the render target on the camera instead.

I’m using the more recent example code at PlayCanvas Examples as a guide but without success – the cylinder is just solid black. However, if I uncomment lines 28 and 29 in RenderLayerToTexture.js below, it works (but still with a deprecated warning).

I have the following code:

RenderLayerToTexture.js

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

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

RenderLayerTotexture.prototype.initialize = function() {
    const colorBuffer = new pc.Texture(this.app.graphicsDevice, {
        width: 512,
        height: 512,
        format: pc.PIXELFORMAT_R8_G8_B8,
        mipmaps: true,
        minFilter: pc.FILTER_LINEAR,
        magFilter: pc.FILTER_LINEAR,
        addressU: pc.ADDRESS_CLAMP_TO_EDGE,
        addressV: pc.ADDRESS_CLAMP_TO_EDGE,
    });

    const renderTarget = new pc.RenderTarget({
        name: `RT`,
        colorBuffer: colorBuffer,
        depth: true,
        flipY: true,
        samples: 2,
    });

    let cam = this.app.root.findByName(this.cameraName);
    cam.renderTarget = renderTarget;

    // var layer = this.app.scene.layers.getLayerByName("RenderTexture");
    // layer.renderTarget = renderTarget;
};

ApplyTexture.js

var ApplyTexture = pc.createScript('applyTexture');
ApplyTexture.attributes.add("cameraName", {type: "string"});

ApplyTexture.prototype.postInitialize = function() {
    let cam = this.app.root.findByName(this.cameraName);
    
    var material = this.entity.model.model.meshInstances[0].material;
    material.diffuseMap = cam.renderTarget.colorBuffer;
    // material.emissiveMap = cam.renderTarget.colorBuffer;
    material.update();
};

Anyone have ideas what I’m doing wrong?

TIA

Hi @CarlBateman,

You are almost there! Update both of your scripts to access the render target like this:

cam.camera.renderTarget = renderTarget;

It’s a property of the camera component, not the entity.

Ah, right! Because layers don’t have components. D’oh. :roll_eyes:

Yes, that works. Thanks!

Any idea why writing to the layer render target in RenderLayerToTexture.js works even though it’s not used in ApplyTexture.js? :thinking:

I wonder if there are any plans to update this and any other deprecated tutorials.

Yeah that definitely needs updating @yaustar :innocent:

Well in the render target script you handle who is writing to the texture (layer or the camera). In apply texture you just use the texture, so it doesn’t matter who is writing to that, as long as you reference the texture.

Hi everyone.
I have been testing out this tutorial.
Is there a way to render the black portion transparent, using the RenderTarget method?

Hi @fcsa,

Yes, make sure that your render texture format supports alpha (use RGBA instead of RGB for format) and also set your camera’s clear color to have an alpha of 0.

That will do the trick.

Thanks @Leonidas you are the best haha its working :smiley:

1 Like