Dirty child entity's transform causes text element t... | playcanvas/engine

Nobody has claimed this yet.

To repro:

Create an entity
Call some local transform functions on that entity.
Add a text element component
Add the entity as a child of another

Result:

The text does not render. Moving the calls to local transform function until after the element component is added works as expected.

Repro code:

<!DOCTYPE html>
<html>
<head>
    <title>PlayCanvas Text Bug</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <script src="../../build/output/playcanvas.js"></script>
    <style>
        body { 
            margin: 0;
            overflow-y: hidden;
        }
    </style>
</head>

<body>
    <!-- The canvas element -->
    <canvas id="application-canvas"></canvas>

    <!-- The script -->
    <script>
        var canvas = document.getElementById("application-canvas");

        // Create the application and start the update loop
        var app = new pc.Application(canvas);
        app.start();

        // Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
        app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
        app.setCanvasResolution(pc.RESOLUTION_AUTO);

        window.addEventListener("resize", function () {
            app.resizeCanvas(canvas.width, canvas.height);
        });

        // Load a font
        var fontAsset = new pc.Asset('arial.json', "font", {url: "../assets/fonts/arial.json"});
        fontAsset.on('load', function () {
            // Create a text element-based entity
            var text = new pc.Entity();
            text.setLocalPosition(0, 0, 0);
            text.setLocalEulerAngles(0, 0, 0);
            text.setLocalScale(1, 1, 1);
            text.addComponent("element", {
                anchor: [ 0.5, 0.5, 0.5, 0.5 ],
                fontAsset: fontAsset,
                fontSize: 0.5,
                pivot: [ 0.5, 0.5 ],
                text: 'Hello',
                type: pc.ELEMENTTYPE_TEXT
            });

            var root = new pc.Entity();
            root.addChild(text);

            app.root.addChild(root);

            // Create an entity with a camera component
            var camera = new pc.Entity();
            camera.addComponent("camera");
            camera.translate(0, 0, 9);
            app.root.addChild(camera);
        });
        app.assets.add(fontAsset);
        app.assets.load(fontAsset);
    </script>
</body>
</html>

Copy that into examples\graphics\text-bug.html and load in the browser.

Rearranging to the following works:

            var text = new pc.Entity();
            text.addComponent("element", {
                anchor: [ 0.5, 0.5, 0.5, 0.5 ],
                fontAsset: fontAsset,
                fontSize: 0.5,
                pivot: [ 0.5, 0.5 ],
                text: 'Hello',
                type: pc.ELEMENTTYPE_TEXT
            });
            text.setLocalPosition(0, 0, 0);
            text.setLocalEulerAngles(0, 0, 0);
            text.setLocalScale(1, 1, 1);

Copy the repro into examples\graphics\text-bug.html and load it in a browser. Compare the case where local transforms are set before adding the element with the reordered working case, then trace the entity-child transform and text-element update path. Done means the text renders when the child is transformed before its text element is added.

Written by the indexing model from the issue text.

Dirty child entity's transform causes text element to not render

Description

Contributor guide

First steps

Research direction

Assessment