Blending layers?

Help & Support
1

The following is adapted from the “layers” sample: https://github.com/playcanvas/engine/blob/master/examples/layers/index.html

I wanted to render two cubes with different cameras, and blend the results together. To do so I insert a new layers before the “world” layer, and setup cubes and cameras in each layers, so that the red bigger cube renders in the “back” layer, and the blue smaller cube renders in the “world” layer. Although I’ve set the clear color of the camera in the “world” layer to be transparent, only the blue cube is visible. It seems the “world” layer overwrite the “back” layer, instead of blending themselves together.

Is the layer system designed to do this? If not, what’s the correct way of doing this? Any help is appreciated.

<!doctype html>
<html>
<head>
    <script src="../../build/output/playcanvas-latest.js"></script>
    <link href="../style.css" rel="stylesheet" />
</head>

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

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

        // Create the app 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);

        app.scene.ambientLight = new pc.Color(0.2, 0.2, 0.2);

        var entity, light, camera;

        var backLayer = new pc.Layer({
            name: "Back Layer"
        });
        var worldLayer = app.scene.layers.getLayerByName("World");

        app.scene.layers.insert(backLayer, 0);

        var backCamera = new pc.Entity();
        backCamera.addComponent("camera", {
            clearColor: new pc.Color(0.4, 0.45, 0.5),
            layers: [backLayer.id]
        });
        backCamera.translate(0, 0, 24);
        app.root.addChild(backCamera);

        var worldCamera = new pc.Entity();
        worldCamera.addComponent("camera", {
            clearColor: new pc.Color(0, 0, 0, 0),
            layers: [worldLayer.id]
        });
        worldCamera.translate(0, 0, 24);
        app.root.addChild(worldCamera);

        var light = new pc.Entity();
        light.addComponent("light", {
            type: "point",
            color: new pc.Color(1, 1, 1),
            range: 100,
            layers: [backLayer.id, worldLayer.id]
        });
        light.translate(5, 0, 15);
        app.root.addChild(light);

        var red = new pc.StandardMaterial();
        red.diffuse.set(1,0,0);
        red.update();

        var blue = new pc.StandardMaterial();
        blue.diffuse.set(0,0,1);
        blue.update();

        var backBox = new pc.Entity();
        backBox.addComponent('model', {
            type: 'box',
            layers: [backLayer.id]
        });
        backBox.model.material = red;
        backBox.setLocalScale(5,5,5);
        app.root.addChild(backBox);

        var worldBox = new pc.Entity();
        worldBox.addComponent('model', {
            type: 'box',
            layers: [worldLayer.id]
        });
        worldBox.model.material = blue;
        worldBox.setLocalScale(2.5,2.5,2.5);
        app.root.addChild(worldBox);

        app.on("update", function (dt) {
            if (backBox) {
                backBox.rotate(0,10*dt,0);
            }
            if (worldBox) {
                worldBox.rotate(0,-10*dt,0);
            }
        });
    </script>
</body>
</html>