diff --git a/examples/annotations/annotations_occlusionEnabled_SceneModel_dtx.html b/examples/annotations/annotations_occlusionEnabled_SceneModel_dtx.html
new file mode 100644
index 0000000000..b4cf7266ac
--- /dev/null
+++ b/examples/annotations/annotations_occlusionEnabled_SceneModel_dtx.html
@@ -0,0 +1,344 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
+    <meta content="width=device-width, initial-scale=1" name="viewport">
+    <title>xeokit Example</title>
+    <link href="../css/pageStyle.css" rel="stylesheet"/>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
+
+    <style>
+
+        .annotation-marker {
+            color: #ffffff;
+            line-height: 1.8;
+            text-align: center;
+            font-family: "monospace";
+            font-weight: bold;
+            position: absolute;
+            width: 25px;
+            height: 25px;
+            border-radius: 15px;
+            border: 2px solid #ffffff;
+            background: black;
+            visibility: hidden;
+            box-shadow: 5px 5px 15px 1px #000000;
+            z-index: 0;
+        }
+
+        .annotation-label {
+            position: absolute;
+            max-width: 250px;
+            min-height: 50px;
+            padding: 8px;
+            padding-left: 12px;
+            padding-right: 12px;
+            background: #ffffff;
+            color: #000000;
+            -webkit-border-radius: 3px;
+            -moz-border-radius: 3px;
+            border-radius: 8px;
+            border: #ffffff solid 2px;
+            box-shadow: 5px 5px 15px 1px #000000;
+            z-index: 90000;
+        }
+
+        .annotation-label:after {
+            content: '';
+            position: absolute;
+            border-style: solid;
+            border-width: 8px 12px 8px 0;
+            border-color: transparent white;
+            display: block;
+            width: 0;
+            z-index: 1;
+            margin-top: -11px;
+            left: -12px;
+            top: 20px;
+        }
+
+        .annotation-label:before {
+            content: '';
+            position: absolute;
+            border-style: solid;
+            border-width: 9px 13px 9px 0;
+            border-color: transparent #ffffff;
+            display: block;
+            width: 0;
+            z-index: 0;
+            margin-top: -12px;
+            left: -15px;
+            top: 20px;
+        }
+
+        .annotation-title {
+            font: normal 20px arial, serif;
+            margin-bottom: 8px;
+        }
+
+        .annotation-desc {
+            font: normal 14px arial, serif;
+        }
+
+    </style>
+</head>
+
+<body>
+<input id="info-button" type="checkbox"/>
+<label class="info-button" for="info-button"><i class="far fa-3x fa-question-circle"></i></label>
+<canvas id="myCanvas"></canvas>
+<div class="slideout-sidebar">
+    <img class="info-icon" src="../../assets/images/annotation_icon.png"/>
+    <h1>AnnotationsPlugin</h1>
+    <h2>Annotations with SceneModel</h2><br>
+    <h3>Components Used</h3>
+    <ul>
+        <li>
+            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html" target="_other">Viewer</a>
+        </li>
+        <li>
+            <a href="../../docs/class/src/viewer/scene/model/SceneModel.js~SceneModel.html"
+                    target="_other">SceneModel</a>
+        </li>
+        <li>
+            <a href="../../docs/class/src/plugins/AnnotationsPlugin/AnnotationsPlugin.js~AnnotationsPlugin.html" target="_other">AnnotationsPlugin</a>
+        </li>
+    </ul>
+</div>
+</body>
+
+<script type="module">
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Import the modules we need for this example
+    //------------------------------------------------------------------------------------------------------------------
+
+    import {
+        Viewer,
+        SceneModel,
+        AnnotationsPlugin
+    } from "../../dist/xeokit-sdk.min.es.js";
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Create a Viewer and arrange the camera
+    //------------------------------------------------------------------------------------------------------------------
+
+    const viewer = new Viewer({
+        canvasId: "myCanvas",
+        dtxEnabled: true
+    });
+
+    viewer.scene.camera.eye = [-21.80, 4.01, 6.56];
+    viewer.scene.camera.look = [0, -5.75, 0];
+    viewer.scene.camera.up = [0.37, 0.91, -0.11];
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Build a simple SceneModel representing a table with four legs
+    //------------------------------------------------------------------------------------------------------------------
+
+    const sceneModel = new SceneModel(viewer.scene, {
+        id: "table",
+        position: [0, 0, 0],
+        scale: [1, 1, 1],
+        rotation: [0, 0, 0],
+        edges: true,
+        dtxEnabled: true
+    });
+
+    sceneModel.createGeometry({
+        id: "myBoxGeometry",
+        primitive: "triangles",
+        positions: [
+            1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, 1, 1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1,
+            1, 1, 1, 1, 1, -1, -1, 1, -1, -1, 1, 1, -1, 1, 1, -1, 1, -1, -1, -1, -1, -1, -1, 1,
+            -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1, 1, -1, -1, -1, -1, -1, -1, 1, -1, 1, 1, -1
+        ],
+        indices: [
+            0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12, 14, 15,
+            16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23
+        ]
+    });
+
+    sceneModel.createMesh({
+        id: "redLegMesh",
+        geometryId: "myBoxGeometry",
+        position: [-4, -6, -4],
+        scale: [1, 3, 1],
+        rotation: [0, 0, 0],
+        color: [1, 0.3, 0.3]
+    });
+
+    sceneModel.createEntity({
+        id: "redLeg",
+        meshIds: ["redLegMesh"]
+    });
+
+    sceneModel.createMesh({
+        id: "greenLegMesh",
+        geometryId: "myBoxGeometry",
+        position: [4, -6, -4],
+        scale: [1, 3, 1],
+        rotation: [0, 0, 0],
+        color: [0.3, 1.0, 0.3],
+        opacity: 0.5
+    });
+
+    sceneModel.createEntity({
+        id: "greenLeg",
+        meshIds: ["greenLegMesh"]
+    });
+
+    sceneModel.createMesh({
+        id: "blueLegMesh",
+        geometryId: "myBoxGeometry",
+        position: [4, -6, 4],
+        scale: [1, 3, 1],
+        rotation: [0, 0, 0],
+        color: [0.3, 0.3, 1.0]
+    });
+
+    sceneModel.createEntity({
+        id: "blueLeg",
+        meshIds: ["blueLegMesh"]
+    });
+
+    sceneModel.createMesh({
+        id: "yellowLegMesh",
+        geometryId: "myBoxGeometry",
+        position: [-4, -6, 4],
+        scale: [1, 3, 1],
+        rotation: [0, 0, 0],
+        color: [1.0, 1.0, 0.0],
+        opacity: 0.5
+    });
+
+    sceneModel.createEntity({
+        id: "yellowLeg",
+        meshIds: ["yellowLegMesh"]
+    });
+
+    sceneModel.createMesh({
+        id: "purpleTableTopMesh",
+        geometryId: "myBoxGeometry",
+        position: [0, -3, 0],
+        scale: [6, 0.5, 6],
+        rotation: [0, 0, 0],
+        color: [1.0, 0.3, 1.0]
+    });
+
+    sceneModel.createEntity({
+        id: "purpleTableTop",
+        meshIds: ["purpleTableTopMesh"]
+    });
+
+    sceneModel.finalize();
+
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Create an AnnotationsPlugin, with which we'll create annotations
+    //------------------------------------------------------------------------------------------------------------------
+
+    const annotations = new AnnotationsPlugin(viewer, {
+
+        markerHTML: "<div class='annotation-marker' style='background-color: {{markerBGColor}};'>{{glyph}}</div>",
+        labelHTML: "<div class='annotation-label' style='background-color: {{labelBGColor}};'>\
+            <div class='annotation-title'>{{title}}</div>\
+            <div class='annotation-desc'>{{description}}</div>\
+            </div>",
+
+        values: {
+            markerBGColor: "red",
+            labelBGColor: "white",
+            glyph: "X",
+            title: "Untitled",
+            description: "No description"
+        }
+    });
+
+    annotations.on("markerClicked", (annotation) => {
+        annotation.setLabelShown(!annotation.getLabelShown());
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Create some Annotations
+    //------------------------------------------------------------------------------------------------------------------
+
+    annotations.createAnnotation({
+        id: "myAnnotation1",
+        entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FLOH"],
+        worldPos: [-1.7087798275434545, -7.72961958860887, 5.093199926162966],
+        occludable: true,
+        markerShown: true,
+        labelShown: false,
+
+        values: {
+            glyph: "A1",
+            title: "Front wall",
+            description: "This is the front wall",
+            markerBGColor: "green"
+        }
+    });
+
+    annotations.createAnnotation({
+        id: "myAnnotation2",
+        /////////////////////////////////////////  Entity
+        worldPos: [-2.091938248945386, -5.112701991304107, -5.6715664879640775],
+        occludable: true,
+        markerShown: true,
+        labelShown: false,
+
+        values: {
+            glyph: "A2",
+            title: "Kitchen bench",
+            description: "This annotation becomes visible<br>whenever you can see its marker<br>through the window",
+            markerBGColor: "blue"
+        }
+    });
+
+    annotations.createAnnotation({
+        id: "myAnnotation3",
+        /////////////////////////////////////////  Entity
+        worldPos: [-5.225982166673446, -8.685570498955713, 1.5609115343190028],
+        occludable: true,
+        markerShown: true,
+        labelShown: false,
+
+        labelHTML: "<div class='annotation-label' style='background-color: {{labelBGColor}};'>\
+                <div class='annotation-title'>{{title}}</div>\
+                <div class='annotation-desc'>{{description}}</div>\
+                <br><img alt='myImage' width='150px' height='100px' src='{{imageSrc}}'>\
+                </div>",
+
+        values: {
+            glyph: "A3",
+            title: "The West wall",
+            description: "Annotations can contain<br>custom HTML like this<br>image:",
+            markerBGColor: "red",
+            imageSrc: "https://xeokit.io/img/docs/BIMServerLoaderPlugin/schependomlaan.png"
+        }
+    });
+
+    annotations.createAnnotation({
+        id: "myAnnotation4",
+        /////////////////////////////////////////  Entity
+        worldPos: [4.00179600408677, -3.9687055304627847, 4.565188195028208],
+        occludable: true,
+        markerShown: true,
+        labelShown: false,
+
+        values: {
+            glyph: "A4",
+            title: "The South entrance landing",
+            description: "A big slab of concrete<br>at the Southern door",
+            markerBGColor: "purple"
+        }
+    });
+
+    viewer.scene.on("tick", ()=>{
+        viewer.scene.camera.orbitYaw(0.5);
+    });
+
+
+</script>
+</html>
\ No newline at end of file
diff --git a/examples/annotations/annotations_occlusionEnabled_sceneGraph.html b/examples/annotations/annotations_occlusionEnabled_sceneGraph.html
new file mode 100644
index 0000000000..8535e884e4
--- /dev/null
+++ b/examples/annotations/annotations_occlusionEnabled_sceneGraph.html
@@ -0,0 +1,339 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
+    <meta content="width=device-width, initial-scale=1" name="viewport">
+    <title>xeokit Example</title>
+    <link href="../css/pageStyle.css" rel="stylesheet"/>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
+
+    <style>
+
+        .annotation-marker {
+            color: #ffffff;
+            line-height: 1.8;
+            text-align: center;
+            font-family: "monospace";
+            font-weight: bold;
+            position: absolute;
+            width: 25px;
+            height: 25px;
+            border-radius: 15px;
+            border: 2px solid #ffffff;
+            background: black;
+            visibility: hidden;
+            box-shadow: 5px 5px 15px 1px #000000;
+            z-index: 0;
+        }
+
+        .annotation-label {
+            position: absolute;
+            max-width: 250px;
+            min-height: 50px;
+            padding: 8px;
+            padding-left: 12px;
+            padding-right: 12px;
+            background: #ffffff;
+            color: #000000;
+            -webkit-border-radius: 3px;
+            -moz-border-radius: 3px;
+            border-radius: 8px;
+            border: #ffffff solid 2px;
+            box-shadow: 5px 5px 15px 1px #000000;
+            z-index: 90000;
+        }
+
+        .annotation-label:after {
+            content: '';
+            position: absolute;
+            border-style: solid;
+            border-width: 8px 12px 8px 0;
+            border-color: transparent white;
+            display: block;
+            width: 0;
+            z-index: 1;
+            margin-top: -11px;
+            left: -12px;
+            top: 20px;
+        }
+
+        .annotation-label:before {
+            content: '';
+            position: absolute;
+            border-style: solid;
+            border-width: 9px 13px 9px 0;
+            border-color: transparent #ffffff;
+            display: block;
+            width: 0;
+            z-index: 0;
+            margin-top: -12px;
+            left: -15px;
+            top: 20px;
+        }
+
+        .annotation-title {
+            font: normal 20px arial, serif;
+            margin-bottom: 8px;
+        }
+
+        .annotation-desc {
+            font: normal 14px arial, serif;
+        }
+
+    </style>
+</head>
+
+<body>
+<input id="info-button" type="checkbox"/>
+<label class="info-button" for="info-button"><i class="far fa-3x fa-question-circle"></i></label>
+<canvas id="myCanvas"></canvas>
+<div class="slideout-sidebar">
+    <img class="info-icon" src="../../assets/images/annotation_icon.png"/>
+    <h1>AnnotationsPlugin</h1>
+    <h2>Annotations with Node, Mesh and ReadableGeometry</h2><br>
+    <h3>Components Used</h3>
+    <ul>
+        <li>
+            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html" target="_other">Viewer</a>
+        </li>
+        <li>
+            <a href="../../docs/class/src/viewer/scene/nodes/Node.js~Node.html"
+                    target="_other">Node</a>
+        </li>
+        <li>
+            <a href="../../docs/class/src/viewer/scene/mesh/Mesh.js~Mesh.html"
+                    target="_other">Mesh</a>
+        </li>
+        <li>
+            <a href="../../docs/class/src/viewer/scene/materials/PhongMaterial.js~PhongMaterial.html"
+                    target="_other">PhongMaterial</a>
+        </li>
+        <li>
+            <a href="../../docs/class/src/viewer/scene/geometry/ReadableGeometry.js~ReadableGeometry.html"
+                    target="_other">ReadableGeometry</a>
+        </li>
+        <li>
+            <a href="../../docs/class/src/plugins/AnnotationsPlugin/AnnotationsPlugin.js~AnnotationsPlugin.html" target="_other">AnnotationsPlugin</a>
+        </li>
+    </ul>
+</div>
+</body>
+
+<script type="module">
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Import the modules we need for this example
+    //------------------------------------------------------------------------------------------------------------------
+
+    import {
+        Viewer,
+        Node,
+        Mesh,
+        ReadableGeometry,
+        buildBoxGeometry,
+        PhongMaterial,
+        AnnotationsPlugin
+    } from "../../dist/xeokit-sdk.min.es.js";
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Create a Viewer and arrange the camera
+    //------------------------------------------------------------------------------------------------------------------
+
+    const viewer = new Viewer({
+        canvasId: "myCanvas",
+        dtxEnabled: true
+    });
+
+    viewer.scene.camera.eye = [-21.80, 4.01, 6.56];
+    viewer.scene.camera.look = [0, -5.75, 0];
+    viewer.scene.camera.up = [0.37, 0.91, -0.11];
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Build a simple scene graph representing a table with four legs
+    //------------------------------------------------------------------------------------------------------------------
+
+    const boxGeometry = new ReadableGeometry(viewer.scene, buildBoxGeometry({
+        xSize: 1,
+        ySize: 1,
+        zSize: 1
+    }));
+
+    new Node(viewer.scene, {
+        id: "table",
+        isModel: true, // <--------------------- Node represents a model
+        rotation: [0, 50, 0],
+        position: [0, 0, 0],
+        scale: [1, 1, 1],
+
+        children: [
+
+            new Mesh(viewer.scene, { // Red table leg
+                id: "redLeg",
+                isObject: true, // <---------- Node represents an object
+                position: [-4, -6, -4],
+                scale: [1, 3, 1],
+                rotation: [0, 0, 0],
+                geometry: boxGeometry,
+                material: new PhongMaterial(viewer.scene, {
+                    diffuse: [1, 0.3, 0.3]
+                })
+            }),
+
+            new Mesh(viewer.scene, { // Green table leg
+                id: "greenLeg",
+                isObject: true, // <---------- Node represents an object
+                position: [4, -6, -4],
+                scale: [1, 3, 1],
+                rotation: [0, 0, 0],
+                geometry: boxGeometry,
+                material: new PhongMaterial(viewer.scene, {
+                    diffuse: [0.3, 1.0, 0.3],
+                    alpha: 0.4
+                })
+            }),
+
+            new Mesh(viewer.scene, {// Blue table leg
+                id: "blueLeg",
+                isObject: true, // <---------- Node represents an object
+                position: [4, -6, 4],
+                scale: [1, 3, 1],
+                rotation: [0, 0, 0],
+                geometry: boxGeometry,
+                material: new PhongMaterial(viewer.scene, {
+                    diffuse: [0.3, 0.3, 1.0]
+                })
+            }),
+
+            new Mesh(viewer.scene, {  // Yellow table leg
+                id: "yellowLeg",
+                isObject: true, // <---------- Node represents an object
+                position: [-4, -6, 4],
+                scale: [1, 3, 1],
+                rotation: [0, 0, 0],
+                geometry: boxGeometry,
+                material: new PhongMaterial(viewer.scene, {
+                    diffuse: [1.0, 1.0, 0.0],
+                    alpha: 0.4
+                })
+            }),
+
+            new Mesh(viewer.scene, { // Purple table top
+                id: "tableTop",
+                isObject: true, // <---------- Node represents an object
+                position: [0, -3, 0],
+                scale: [6, 0.5, 6],
+                rotation: [0, 0, 0],
+                geometry: boxGeometry,
+                material: new PhongMaterial(viewer.scene, {
+                    diffuse: [1.0, 0.3, 1.0]
+                })
+            })
+        ]
+    });
+
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Create an AnnotationsPlugin, with which we'll create annotations
+    //------------------------------------------------------------------------------------------------------------------
+
+    const annotations = new AnnotationsPlugin(viewer, {
+
+        markerHTML: "<div class='annotation-marker' style='background-color: {{markerBGColor}};'>{{glyph}}</div>",
+        labelHTML: "<div class='annotation-label' style='background-color: {{labelBGColor}};'>\
+            <div class='annotation-title'>{{title}}</div>\
+            <div class='annotation-desc'>{{description}}</div>\
+            </div>",
+
+        values: {
+            markerBGColor: "red",
+            labelBGColor: "white",
+            glyph: "X",
+            title: "Untitled",
+            description: "No description"
+        }
+    });
+
+    annotations.on("markerClicked", (annotation) => {
+        annotation.setLabelShown(!annotation.getLabelShown());
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Create some Annotations
+    //------------------------------------------------------------------------------------------------------------------
+
+    annotations.createAnnotation({
+        id: "myAnnotation1",
+        entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FLOH"],
+        worldPos: [-1.7087798275434545, -7.72961958860887, 5.093199926162966],
+        occludable: true,
+        markerShown: true,
+        labelShown: false,
+
+        values: {
+            glyph: "A1",
+            title: "Front wall",
+            description: "This is the front wall",
+            markerBGColor: "green"
+        }
+    });
+
+    annotations.createAnnotation({
+        id: "myAnnotation2",
+        worldPos: [-2.091938248945386, -5.112701991304107, -5.6715664879640775],
+        occludable: true,
+        markerShown: true,
+        labelShown: false,
+
+        values: {
+            glyph: "A2",
+            title: "Kitchen bench",
+            description: "This annotation becomes visible<br>whenever you can see its marker<br>through the window",
+            markerBGColor: "blue"
+        }
+    });
+
+    annotations.createAnnotation({
+        id: "myAnnotation3",
+        worldPos: [-5.225982166673446, -8.685570498955713, 1.5609115343190028],
+        occludable: true,
+        markerShown: true,
+        labelShown: false,
+
+        labelHTML: "<div class='annotation-label' style='background-color: {{labelBGColor}};'>\
+                <div class='annotation-title'>{{title}}</div>\
+                <div class='annotation-desc'>{{description}}</div>\
+                <br><img alt='myImage' width='150px' height='100px' src='{{imageSrc}}'>\
+                </div>",
+
+        values: {
+            glyph: "A3",
+            title: "The West wall",
+            description: "Annotations can contain<br>custom HTML like this<br>image:",
+            markerBGColor: "red",
+            imageSrc: "https://xeokit.io/img/docs/BIMServerLoaderPlugin/schependomlaan.png"
+        }
+    });
+
+    annotations.createAnnotation({
+        id: "myAnnotation4",
+        worldPos: [4.00179600408677, -3.9687055304627847, 4.565188195028208],
+        occludable: true,
+        markerShown: true,
+        labelShown: false,
+
+        values: {
+            glyph: "A4",
+            title: "The South entrance landing",
+            description: "A big slab of concrete<br>at the Southern door",
+            markerBGColor: "purple"
+        }
+    });
+
+    viewer.scene.on("tick", ()=>{
+        viewer.scene.camera.orbitYaw(0.5);
+    });
+
+
+</script>
+</html>
\ No newline at end of file
diff --git a/examples/annotations/index.html b/examples/annotations/index.html
index a046855b59..6be7a6409d 100644
--- a/examples/annotations/index.html
+++ b/examples/annotations/index.html
@@ -269,6 +269,8 @@
             ["annotations_occlusionDisabled", "Annotations with occlusion culling disabled"],
             ["annotations_fullPrecision_MAP", "Annotations with double-precision rendering"],
             ["annotations_occlusionEnabled_dtx", "Annotations with occlusion culling enabled, DTX enabled"],
+            ["annotations_occlusionEnabled_sceneGraph", "Annotations with occlusion culling enabled, scene graph"],
+            ["annotations_occlusionEnabled_SceneModel_dtx", "Annotations with occlusion culling enabled, SceneModel, DTX"],
 
             "#Sprite markers",
 
diff --git a/src/viewer/scene/mesh/occlusion/OcclusionRenderer.js b/src/viewer/scene/mesh/occlusion/OcclusionRenderer.js
index 475c32f89b..3377bb2286 100644
--- a/src/viewer/scene/mesh/occlusion/OcclusionRenderer.js
+++ b/src/viewer/scene/mesh/occlusion/OcclusionRenderer.js
@@ -73,6 +73,10 @@ OcclusionRenderer.prototype.drawMesh = function (frameCtx, mesh) {
     const geometryState = mesh._geometry._state;
     const origin = mesh.origin;
 
+    if (materialState.alpha < 1.0) {
+        return;
+    }
+
     if (frameCtx.lastProgramId !== this._program.id) {
         frameCtx.lastProgramId = this._program.id;
         this._bindProgram(frameCtx);
