examples/canvas_external_transparent.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>SceneJS Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

    <style>
        body {
            margin: 0;
            -moz-user-select: -moz-none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            background-image: url(textures/cloudsBackground.jpg);
            background-size: cover;
            background-repeat: no-repeat;
        }

        #myCanvas {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            position: absolute;
        }
    </style>

    <script src="../api/latest/scenejs.min.js"></script>

    <link href="css/styles.css" rel="stylesheet"/>

</head>
<body>

<div id="infoLight">
    <a href="http://scenejs.org">SceneJS</a> - scene using transparent canvas already in DOM<br><br>
    This technique, in which we layer a transparent canvas over a div containing an image, is faster<br>
    than creating the background in the 3D scene because it avoids having to render fragments<br>
    via the GPU for the background, ie. avoids all those background pixels going down the GPU pipeline.<br><br>
    Note that since we specified a canvas ID for the scene, the scene binds to that canvas.
</div>

<canvas id="myCanvas" width="100%" height="100%"></canvas>

<script>

    // Demonstrates how to have a transparent canvas

    // This example happens to link to a canvas that's already in the document, rather than one
    // that is automatically created by SceneJS. Transparency will work exactly the same
    // when SceneJS is automatically creating the canvas for you.

    // Point SceneJS to the bundled plugins
    SceneJS.setConfigs({
        pluginPath: "../api/latest/plugins"
    });

    // Create scene
    SceneJS.createScene({

        // Link to our canvas element
        canvasId: "myCanvas",

        // Make canvas transparent
        transparent: true,

        nodes: [

            // Mouse-orbited camera, defined by
            // plugin in http://scenejs.org/api/latest/plugins/node/cameras/orbit.js
            {
                type: "cameras/orbit",
                yaw: 30,
                pitch: -30,
                zoom: 10,
                zoomSensitivity: 1.0,
                spin: 0.1, // Slowly spin

                nodes: [
                    {
                        type: "material",
                        color: { r: 0.5, g: 0.5, b: 0.6 },
                        nodes: [

                            // Teapot primitive, implemented by plugin at
                            // http://scenejs.org/api/latest/plugins/node/geometry/teapot.js
                            {
                                type: "geometry/teapot"
                            }
                        ]
                    }
                ]
            }
        ]
    });

</script>
</body>
</html>