Render targets are rendering upside down

From the News from PlayCanvas post ‘:space_invader:Engine Release 1.50.0 - Clustered Area lights :bulb:

https://playcanvas.com/project/708224/overview/News%20from%20PlayCanvas

From dbeast95

The RenderLayerToTexture script was taken from an older project before the Engine texture unflipping of the Y axis.

The tutorial projects have been updated but people’s personal projects may be unmaintained.

In this case the current script is:

// initialize code called once per entity
RenderLayerTotexture.prototype.initialize = function() {
    // Create a 512x512x24-bit render target with a depth buffer
    var colorBuffer = new pc.Texture(this.app.graphicsDevice, {
        width: this.entity.element.calculatedWidth,
        height: this.entity.element.calculatedHeight,
        format: pc.PIXELFORMAT_R8_G8_B8,
        autoMipmap: true
    });
    colorBuffer.minFilter = pc.FILTER_LINEAR;
    colorBuffer.magFilter = pc.FILTER_LINEAR;
    var renderTarget = new pc.RenderTarget({
        colorBuffer: colorBuffer,
        depth: true
    });

    var layer = this.app.scene.layers.getLayerByName(this.layerName);
    layer.renderTarget = renderTarget;
};

There is an option to flip the Y in the RenderTarget class called flipY: RenderTarget | PlayCanvas API Reference

So the script will look like this now:

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

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

// initialize code called once per entity
RenderLayerTotexture.prototype.initialize = function() {
    // Create a 512x512x24-bit render target with a depth buffer
    var colorBuffer = new pc.Texture(this.app.graphicsDevice, {
        width: this.entity.element.calculatedWidth,
        height: this.entity.element.calculatedHeight,
        format: pc.PIXELFORMAT_R8_G8_B8,
        autoMipmap: true
    });
    colorBuffer.minFilter = pc.FILTER_LINEAR;
    colorBuffer.magFilter = pc.FILTER_LINEAR;
    var renderTarget = new pc.RenderTarget({
        colorBuffer: colorBuffer,
        depth: true,
        flipY: true
    });

    var layer = this.app.scene.layers.getLayerByName(this.layerName);
    layer.renderTarget = renderTarget;
};

Fixed fork of the project: https://playcanvas.com/editor/scene/1281955

3 Likes