examples/depthTexture.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Hilo3d Depth Texture Demo</title>
    <link rel="stylesheet" type="text/css" href="./example.css">
</head>
<body>
    <div id="container"></div>
    <script src="../build/Hilo3d.js"></script>
    <script src="./js/stats.js"></script>
    <script src="./js/OrbitControls.js"></script>
    <script src="./js/init.js"></script>
    <script>
        Hilo3d.extensions.use('WEBGL_depth_texture');
        var boxGeometry = new Hilo3d.BoxGeometry();
        boxGeometry.setAllRectUV([[0, 1], [1, 1], [1, 0], [0, 0]]);
        var material = new Hilo3d.BasicMaterial({
          lightType: 'NONE',
        });

        var depthNode = new Hilo3d.Node({
          onUpdate: function() {
            this.rotationY += 0.5;
            this.rotationX += 0.5;
          }
        });
        for(let i = 0;i < 20;i ++) {
          depthNode.addChild(new Hilo3d.Mesh({
            material: material,
            geometry: boxGeometry,
            x: (Math.random() * 2 - 1) * 5,
            y: (Math.random() * 2 - 1) * 5,
            z: (Math.random() * 2 - 1) * 5,
            rotationX: Math.random() * 360,
            rotationY: Math.random() * 360,
            rotationZ: Math.random() * 360,
            onUpdate: function() {
              this.rotationY += 0.5;
              this.rotationX += 0.5;
            }
          })).setScale(.1);
        };

        stage.onUpdate = function() {
          framebuffer.bind();
          depthNode.onUpdate();
          stage.renderer.render(depthNode, camera);
          framebuffer.unbind();
        }

        var framebuffer = new Hilo3d.Framebuffer(renderer, {
          colorAttachmentInfos: [],
          depthStencilAttachmentInfo: {
            attachmentType: Hilo3d.Framebuffer.ATTACHMENT_TYPE_TEXTURE,
            attachment: Hilo3d.constants.DEPTH_ATTACHMENT,
            format: Hilo3d.constants.DEPTH_COMPONENT,
            internalFormat: Hilo3d.constants.DEPTH_COMPONENT16,
            type: Hilo3d.constants.UNSIGNED_SHORT,
          }
        });

        renderer.on('afterRender', () => {
          framebuffer.render(0, 0, 1, 1, null, framebuffer.depthStencilAttachmentInfo.texture);
        })
        
    </script>
</body>
</html>