@xeokit/xeokit-sdk 2.3.0-beta-15 → 2.3.0-beta-18

package/dist/xeokit-sdk.cjs.js

@@ -12106,34 +12106,27 @@ class Canvas extends Component {
 
         let lastParent = null;
 
-        let tickCount = 0; // chipmunk
+        let tickCount = 0;
 
         this._tick = this.scene.on("tick", () => {
 
-            tickCount++; // chipmunk
+            tickCount++;
 
             self._canvasSizeChanged = false;
 
-            if (self.optimizeResizeDetection)
-            {
-                if (tickCount < 60) // chipmunk
-                { // chipmunk
-                    return; // chipmunk
-                } // chipmunk
+            if (self.optimizeResizeDetection) {
+                if (tickCount < 10) {
+                    return;
+                }
             }
 
-            tickCount = 0; // chipmunk
+            tickCount = 0;
 
             const canvas = this.canvas;
 
             const newResolutionScale = (this._resolutionScale !== lastResolutionScale);
             const newWindowSize = (window.innerWidth !== lastWindowWidth || window.innerHeight !== lastWindowHeight);
 
-            if (!newWindowSize) // chipmunk
-            { // chipmunk
-                return; // chipmunk
-            } // chipmunk
-
             const newCanvasSize = (canvas.clientWidth !== lastCanvasWidth || canvas.clientHeight !== lastCanvasHeight);
             const newCanvasPos = (canvas.offsetLeft !== lastCanvasOffsetLeft || canvas.offsetTop !== lastCanvasOffsetTop);
 
@@ -14609,7 +14602,8 @@ class SAODepthLimitedBlurRenderer {
                     }
 
                     outColor = packFloatToRGBA(occlusionSum / weightSum);
-                }`]
+                }`
+            ]
         });
 
         if (this._program.errors) {
@@ -14699,7 +14693,7 @@ class SAODepthLimitedBlurRenderer {
 
         gl.uniform1fv(this._uSampleWeights, sampleWeights);
 
-        const depthTexture =  depthRenderBuffer.getDepthTexture();
+        const depthTexture = depthRenderBuffer.getDepthTexture();
         const occlusionTexture = occlusionRenderBuffer.getTexture();
 
         program.bindTexture(this._uDepthTexture, depthTexture, 0); // TODO: use FrameCtx.textureUnit
@@ -15999,22 +15993,6 @@ const Renderer = function (scene, options) {
                     gl.depthMask(false);
                 }
 
-                // Transparent X-ray edges
-
-                if (xrayEdgesTransparentBinLen > 0) {
-                    for (i = 0; i < xrayEdgesTransparentBinLen; i++) {
-                        xrayEdgesTransparentBin[i].drawEdgesXRayed(frameCtx);
-                    }
-                }
-
-                // Transparent X-ray fill
-
-                if (xrayedFillTransparentBinLen > 0) {
-                    for (i = 0; i < xrayedFillTransparentBinLen; i++) {
-                        xrayedFillTransparentBin[i].drawSilhouetteXRayed(frameCtx);
-                    }
-                }
-
                 // Transparent color edges
 
                 if (normalFillTransparentBinLen > 0 || normalEdgesTransparentBinLen > 0) {
@@ -16035,6 +16013,23 @@ const Renderer = function (scene, options) {
                         drawable.drawColorTransparent(frameCtx);
                     }
                 }
+
+                // Transparent X-ray edges
+
+                if (xrayEdgesTransparentBinLen > 0) {
+                    for (i = 0; i < xrayEdgesTransparentBinLen; i++) {
+                        xrayEdgesTransparentBin[i].drawEdgesXRayed(frameCtx);
+                    }
+                }
+
+                // Transparent X-ray fill
+
+                if (xrayedFillTransparentBinLen > 0) {
+                    for (i = 0; i < xrayedFillTransparentBinLen; i++) {
+                        xrayedFillTransparentBin[i].drawSilhouetteXRayed(frameCtx);
+                    }
+                }
+
                 gl.disable(gl.BLEND);
                 if (!alphaDepthMask) {
                     gl.depthMask(true);
@@ -45607,10 +45602,7 @@ class TrianglesBatchingColorTextureRenderer {
         gl.uniform1i(this._uRenderPass, renderPass);
 
         gl.uniformMatrix4fv(this._uViewMatrix, false, (origin) ? createRTCViewMat(camera.viewMatrix, origin) : camera.viewMatrix);
-        gl.uniformMatrix4fv(this._uViewNormalMatrix, false, camera.viewNormalMatrix);
-
         gl.uniformMatrix4fv(this._uWorldMatrix, false, model.worldMatrix);
-        gl.uniformMatrix4fv(this._uWorldNormalMatrix, false, model.worldNormalMatrix);
 
         const numSectionPlanes = scene._sectionPlanesState.sectionPlanes.length;
         if (numSectionPlanes > 0) {
@@ -45644,10 +45636,6 @@ class TrianglesBatchingColorTextureRenderer {
 
         this._aPosition.bindArrayBuffer(state.positionsBuf);
 
-        if (this._aNormal) {
-            this._aNormal.bindArrayBuffer(state.normalsBuf);
-        }
-
         if (this._aUV) {
             this._aUV.bindArrayBuffer(state.uvBuf);
         }
@@ -45718,9 +45706,7 @@ class TrianglesBatchingColorTextureRenderer {
         this._uPositionsDecodeMatrix = program.getLocation("positionsDecodeMatrix");
         this._uUVDecodeMatrix = program.getLocation("uvDecodeMatrix");
         this._uWorldMatrix = program.getLocation("worldMatrix");
-        this._uWorldNormalMatrix = program.getLocation("worldNormalMatrix");
         this._uViewMatrix = program.getLocation("viewMatrix");
-        this._uViewNormalMatrix = program.getLocation("viewNormalMatrix");
         this._uProjMatrix = program.getLocation("projMatrix");
 
         this._uLightAmbient = program.getLocation("lightAmbient");
@@ -45767,7 +45753,6 @@ class TrianglesBatchingColorTextureRenderer {
 
         this._aPosition = program.getAttribute("position");
         this._aOffset = program.getAttribute("offset");
-        this._aNormal = program.getAttribute("normal");
         this._aUV = program.getAttribute("uv");
         this._aColor = program.getAttribute("color");
         this._aFlags = program.getAttribute("flags");
@@ -45834,9 +45819,7 @@ class TrianglesBatchingColorTextureRenderer {
 
         const scene = this._scene;
         const sectionPlanesState = scene._sectionPlanesState;
-        const lightsState = scene._lightsState;
         const clipping = sectionPlanesState.sectionPlanes.length > 0;
-        let light;
         const src = [];
         src.push("#version 300 es");
         src.push("// Triangles batching color texture vertex shader");
@@ -45844,7 +45827,6 @@ class TrianglesBatchingColorTextureRenderer {
         src.push("uniform int renderPass;");
 
         src.push("in vec3 position;");
-        src.push("in vec3 normal;");
         src.push("in vec4 color;");
         src.push("in vec2 uv;");
         src.push("in vec4 flags;");
@@ -45855,11 +45837,9 @@ class TrianglesBatchingColorTextureRenderer {
         }
 
         src.push("uniform mat4 worldMatrix;");
-        src.push("uniform mat4 worldNormalMatrix;");
 
         src.push("uniform mat4 viewMatrix;");
         src.push("uniform mat4 projMatrix;");
-        src.push("uniform mat4 viewNormalMatrix;");
         src.push("uniform mat4 positionsDecodeMatrix;");
         src.push("uniform mat3 uvDecodeMatrix;");
 
@@ -45872,38 +45852,11 @@ class TrianglesBatchingColorTextureRenderer {
             src.push("out float isPerspective;");
         }
 
-        src.push("uniform vec4 lightAmbient;");
-
-        for (let i = 0, len = lightsState.lights.length; i < len; i++) {
-            light = lightsState.lights[i];
-            if (light.type === "ambient") {
-                continue;
-            }
-            src.push("uniform vec4 lightColor" + i + ";");
-            if (light.type === "dir") {
-                src.push("uniform vec3 lightDir" + i + ";");
-            }
-            if (light.type === "point") {
-                src.push("uniform vec3 lightPos" + i + ";");
-            }
-            if (light.type === "spot") {
-                src.push("uniform vec3 lightPos" + i + ";");
-                src.push("uniform vec3 lightDir" + i + ";");
-            }
-        }
-
-        src.push("vec3 octDecode(vec2 oct) {");
-        src.push("    vec3 v = vec3(oct.xy, 1.0 - abs(oct.x) - abs(oct.y));");
-        src.push("    if (v.z < 0.0) {");
-        src.push("        v.xy = (1.0 - abs(v.yx)) * vec2(v.x >= 0.0 ? 1.0 : -1.0, v.y >= 0.0 ? 1.0 : -1.0);");
-        src.push("    }");
-        src.push("    return normalize(v);");
-        src.push("}");
-
         if (clipping) {
             src.push("out vec4 vWorldPosition;");
             src.push("out vec4 vFlags2;");
         }
+        src.push("out vec4 vViewPosition;");
         src.push("out vec4 vColor;");
         src.push("out vec2 vUV;");
 
@@ -45922,45 +45875,8 @@ class TrianglesBatchingColorTextureRenderer {
             src.push("worldPosition.xyz = worldPosition.xyz + offset;");
         }
         src.push("vec4 viewPosition  = viewMatrix * worldPosition; ");
-        src.push("vec4 worldNormal =  worldNormalMatrix * vec4(octDecode(normal.xy), 0.0); ");
-        src.push("vec3 viewNormal = normalize((viewNormalMatrix * worldNormal).xyz);");
-
-        src.push("vec3 reflectedColor = vec3(0.0, 0.0, 0.0);");
-        src.push("vec3 viewLightDir = vec3(0.0, 0.0, -1.0);");
-
-        src.push("float lambertian = 1.0;");
-        for (let i = 0, len = lightsState.lights.length; i < len; i++) {
-            light = lightsState.lights[i];
-            if (light.type === "ambient") {
-                continue;
-            }
-            if (light.type === "dir") {
-                if (light.space === "view") {
-                    src.push("viewLightDir = normalize(lightDir" + i + ");");
-                } else {
-                    src.push("viewLightDir = normalize((viewMatrix * vec4(lightDir" + i + ", 0.0)).xyz);");
-                }
-            } else if (light.type === "point") {
-                if (light.space === "view") {
-                    src.push("viewLightDir = -normalize(lightPos" + i + " - viewPosition.xyz);");
-                } else {
-                    src.push("viewLightDir = -normalize((viewMatrix * vec4(lightPos" + i + ", 0.0)).xyz);");
-                }
-            } else if (light.type === "spot") {
-                if (light.space === "view") {
-                    src.push("viewLightDir = normalize(lightDir" + i + ");");
-                } else {
-                    src.push("viewLightDir = normalize((viewMatrix * vec4(lightDir" + i + ", 0.0)).xyz);");
-                }
-            } else {
-                continue;
-            }
-            src.push("lambertian = max(dot(-viewNormal, viewLightDir), 0.0);");
-            src.push("reflectedColor += lambertian * (lightColor" + i + ".rgb * lightColor" + i + ".a);");
-        }
-
-        src.push("vec3 rgb = (vec3(float(color.r) / 255.0, float(color.g) / 255.0, float(color.b) / 255.0));");
-        src.push("vColor =  vec4((lightAmbient.rgb * lightAmbient.a * rgb) + (reflectedColor * rgb), float(color.a) / 255.0);");
+        src.push("vViewPosition = viewPosition;");
+        src.push("vColor = vec4(float(color.r) / 255.0, float(color.g) / 255.0, float(color.b) / 255.0, float(color.a) / 255.0);");
         src.push("vUV = (uvDecodeMatrix * vec3(uv, 1.0)).xy;");
 
         src.push("vec4 clipPos = projMatrix * viewPosition;");
@@ -45980,6 +45896,7 @@ class TrianglesBatchingColorTextureRenderer {
 
     _buildFragmentShader() {
         const scene = this._scene;
+        const lightsState = scene._lightsState;
         const sectionPlanesState = scene._sectionPlanesState;
         const clipping = sectionPlanesState.sectionPlanes.length > 0;
         const src = [];
@@ -45999,9 +45916,7 @@ class TrianglesBatchingColorTextureRenderer {
             src.push("uniform float logDepthBufFC;");
             src.push("in float vFragDepth;");
         }
-
         src.push("uniform sampler2D uColorMap;");
-
         if (this._withSAO) {
             src.push("uniform sampler2D uOcclusionTexture;");
             src.push("uniform vec4      uSAOParams;");
@@ -46015,7 +45930,6 @@ class TrianglesBatchingColorTextureRenderer {
             src.push("    return dot( v, unPackFactors );");
             src.push("}");
         }
-
         if (clipping) {
             src.push("in vec4 vWorldPosition;");
             src.push("in vec4 vFlags2;");
@@ -46025,7 +45939,27 @@ class TrianglesBatchingColorTextureRenderer {
                 src.push("uniform vec3 sectionPlaneDir" + i + ";");
             }
         }
+        src.push("uniform mat4 viewMatrix;");
+        src.push("uniform vec4 lightAmbient;");
+        for (let i = 0, len = lightsState.lights.length; i < len; i++) {
+            const light = lightsState.lights[i];
+            if (light.type === "ambient") {
+                continue;
+            }
+            src.push("uniform vec4 lightColor" + i + ";");
+            if (light.type === "dir") {
+                src.push("uniform vec3 lightDir" + i + ";");
+            }
+            if (light.type === "point") {
+                src.push("uniform vec3 lightPos" + i + ";");
+            }
+            if (light.type === "spot") {
+                src.push("uniform vec3 lightPos" + i + ";");
+                src.push("uniform vec3 lightDir" + i + ";");
+            }
+        }
 
+        src.push("in vec4 vViewPosition;");
         src.push("in vec4 vColor;");
         src.push("in vec2 vUV;");
         src.push("out vec4 outColor;");
@@ -46047,12 +45981,49 @@ class TrianglesBatchingColorTextureRenderer {
             src.push("}");
         }
 
-        if (scene.logarithmicDepthBufferEnabled) {
-            src.push("gl_FragDepth = isPerspective == 0.0 ? gl_FragCoord.z : log2( vFragDepth ) * logDepthBufFC * 0.5;");
+        src.push("vec3 reflectedColor = vec3(0.0, 0.0, 0.0);");
+        src.push("vec3 viewLightDir = vec3(0.0, 0.0, -1.0);");
+
+        src.push("float lambertian = 1.0;");
+
+        src.push("vec3 xTangent = dFdx( vViewPosition.xyz );");
+        src.push("vec3 yTangent = dFdy( vViewPosition.xyz );");
+        src.push("vec3 viewNormal = normalize( cross( xTangent, yTangent ) );");
+
+        for (let i = 0, len = lightsState.lights.length; i < len; i++) {
+            const light = lightsState.lights[i];
+            if (light.type === "ambient") {
+                continue;
+            }
+            if (light.type === "dir") {
+                if (light.space === "view") {
+                    src.push("viewLightDir = normalize(lightDir" + i + ");");
+                } else {
+                    src.push("viewLightDir = normalize((viewMatrix * vec4(lightDir" + i + ", 0.0)).xyz);");
+                }
+            } else if (light.type === "point") {
+                if (light.space === "view") {
+                    src.push("viewLightDir = -normalize(lightPos" + i + " - viewPosition.xyz);");
+                } else {
+                    src.push("viewLightDir = -normalize((viewMatrix * vec4(lightPos" + i + ", 0.0)).xyz);");
+                }
+            } else if (light.type === "spot") {
+                if (light.space === "view") {
+                    src.push("viewLightDir = normalize(lightDir" + i + ");");
+                } else {
+                    src.push("viewLightDir = normalize((viewMatrix * vec4(lightDir" + i + ", 0.0)).xyz);");
+                }
+            } else {
+                continue;
+            }
+
+            src.push("lambertian = max(dot(-viewNormal, viewLightDir), 0.0);");
+            src.push("reflectedColor += lambertian * (lightColor" + i + ".rgb * lightColor" + i + ".a);");
         }
 
-        src.push("vec4 colorTexel = vColor * texture(uColorMap, vUV);");
-        src.push("float opacity = vColor.a;");
+        src.push("vec4 color =  vec4((lightAmbient.rgb * lightAmbient.a * vColor.rgb) + (reflectedColor * vColor.rgb), vColor.a);");
+        src.push("vec4 colorTexel = color * texture(uColorMap, vUV);");
+        src.push("float opacity = color.a;");
 
         if (this._withSAO) {
             // Doing SAO blend in the main solid fill draw shader just so that edge lines can be drawn over the top
@@ -46069,6 +46040,10 @@ class TrianglesBatchingColorTextureRenderer {
             src.push("   outColor                = vec4(colorTexel.rgb, opacity);");
         }
 
+        if (scene.logarithmicDepthBufferEnabled) {
+            src.push("gl_FragDepth = isPerspective == 0.0 ? gl_FragCoord.z : log2( vFragDepth ) * logDepthBufFC * 0.5;");
+        }
+
         src.push("}");
         return src;
     }
@@ -46455,6 +46430,11 @@ function quantizePositions(positions, aabb, positionsDecodeMatrix) { // http://c
  */
 function transformAndOctEncodeNormals(worldNormalMatrix, normals, lenNormals, compressedNormals, lenCompressedNormals) {
     // http://jcgt.org/published/0003/02/01/
+
+    function dot(array, vec3) {
+        return array[0] * vec3[0] + array[1] * vec3[1] + array[2] * vec3[2];
+    }
+
     let oct, dec, best, currentCos, bestCos;
     let i;
     let localNormal = new Float32Array([0, 0, 0, 0]);
@@ -46506,29 +46486,29 @@ function transformAndOctEncodeNormals(worldNormalMatrix, normals, lenNormals, co
 function octEncodeNormals(normals) { // http://jcgt.org/published/0003/02/01/
     const lenNormals = normals.length;
     const compressedNormals = new Int8Array(lenNormals);
-    let oct, best, currentCos, bestCos;
+    let oct, dec, best, currentCos, bestCos;
     for (let i = 0; i < lenNormals; i += 3) {
         // Test various combinations of ceil and floor to minimize rounding errors
         best = oct = octEncodeNormal(normals, i, "floor", "floor");
-        octDecodeVec2(oct);
-        currentCos = bestCos = dot(normals, i);
+        dec = octDecodeVec2(oct);
+        currentCos = bestCos = dot(normals, i, dec);
         oct = octEncodeNormal(normals, i, "ceil", "floor");
-        octDecodeVec2(oct);
-        currentCos = dot(normals, i);
+        dec = octDecodeVec2(oct);
+        currentCos = dot(normals, i, dec);
         if (currentCos > bestCos) {
             best = oct;
             bestCos = currentCos;
         }
         oct = octEncodeNormal(normals, i, "floor", "ceil");
-        octDecodeVec2(oct);
-        currentCos = dot(normals, i);
+        dec = octDecodeVec2(oct);
+        currentCos = dot(normals, i, dec);
         if (currentCos > bestCos) {
             best = oct;
             bestCos = currentCos;
         }
         oct = octEncodeNormal(normals, i, "ceil", "ceil");
-        octDecodeVec2(oct);
-        currentCos = dot(normals, i);
+        dec = octDecodeVec2(oct);
+        currentCos = dot(normals, i, dec);
         if (currentCos > bestCos) {
             best = oct;
             bestCos = currentCos;
@@ -46602,8 +46582,8 @@ function octDecodeVec2(oct) { // Decode an oct-encoded normal
 /**
  * @private
  */
-function dot(p, vec3) { // Dot product of a normal in an array against a candidate decoding
-    return p[0] * vec3[0] + p[1] * vec3[1] + p[2] * vec3[2];
+function dot(array, i, vec3) {
+    return array[i] * vec3[0] + array[i + 1] * vec3[1] + array[i + 2] * vec3[2];
 }
 
 const tempMat4$2 = math.mat4();
@@ -47132,7 +47112,6 @@ class TrianglesBatchingLayer {
 
         this._state.colorTextureSupported
             = !!state.uvBuf
-            && !!state.normalsBuf
             && !!state.textureSet
             && !!state.textureSet.colorTexture;
 
@@ -48875,8 +48854,8 @@ class TrianglesInstancingFlatColorRenderer {
 
         src.push("in vec4 vViewPosition;");
         src.push("in vec4 vColor;");
-
         src.push("out vec4 outColor;");
+
         src.push("void main(void) {");
 
         if (clipping) {
@@ -53549,10 +53528,7 @@ class TrianglesInstancingColorTextureRenderer {
         gl.uniform1i(this._uRenderPass, renderPass);
 
         gl.uniformMatrix4fv(this._uViewMatrix, false, (origin) ? createRTCViewMat(camera.viewMatrix, origin) : camera.viewMatrix);
-        gl.uniformMatrix4fv(this._uViewNormalMatrix, false, camera.viewNormalMatrix);
-
         gl.uniformMatrix4fv(this._uWorldMatrix, false, model.worldMatrix);
-        gl.uniformMatrix4fv(this._uWorldNormalMatrix, false, model.worldNormalMatrix);
 
         const numSectionPlanes = scene._sectionPlanesState.sectionPlanes.length;
         if (numSectionPlanes > 0) {
@@ -53592,16 +53568,7 @@ class TrianglesInstancingColorTextureRenderer {
         gl.vertexAttribDivisor(this._aModelMatrixCol1.location, 1);
         gl.vertexAttribDivisor(this._aModelMatrixCol2.location, 1);
 
-        this._aModelNormalMatrixCol0.bindArrayBuffer(state.modelNormalMatrixCol0Buf);
-        this._aModelNormalMatrixCol1.bindArrayBuffer(state.modelNormalMatrixCol1Buf);
-        this._aModelNormalMatrixCol2.bindArrayBuffer(state.modelNormalMatrixCol2Buf);
-
-        gl.vertexAttribDivisor(this._aModelNormalMatrixCol0.location, 1);
-        gl.vertexAttribDivisor(this._aModelNormalMatrixCol1.location, 1);
-        gl.vertexAttribDivisor(this._aModelNormalMatrixCol2.location, 1);
-
         this._aPosition.bindArrayBuffer(geometry.positionsBuf);
-        this._aNormal.bindArrayBuffer(geometry.normalsBuf);
         this._aUV.bindArrayBuffer(geometry.uvBuf);
 
         this._aColor.bindArrayBuffer(state.colorsBuf);
@@ -53629,9 +53596,6 @@ class TrianglesInstancingColorTextureRenderer {
         gl.vertexAttribDivisor(this._aModelMatrixCol0.location, 0);
         gl.vertexAttribDivisor(this._aModelMatrixCol1.location, 0);
         gl.vertexAttribDivisor(this._aModelMatrixCol2.location, 0);
-        gl.vertexAttribDivisor(this._aModelNormalMatrixCol0.location, 0);
-        gl.vertexAttribDivisor(this._aModelNormalMatrixCol1.location, 0);
-        gl.vertexAttribDivisor(this._aModelNormalMatrixCol2.location, 0);
         gl.vertexAttribDivisor(this._aColor.location, 0);
         gl.vertexAttribDivisor(this._aFlags.location, 0);
 
@@ -53687,10 +53651,8 @@ class TrianglesInstancingColorTextureRenderer {
         this._uUVDecodeMatrix = program.getLocation("uvDecodeMatrix");
 
         this._uWorldMatrix = program.getLocation("worldMatrix");
-        this._uWorldNormalMatrix = program.getLocation("worldNormalMatrix");
 
         this._uViewMatrix = program.getLocation("viewMatrix");
-        this._uViewNormalMatrix = program.getLocation("viewNormalMatrix");
         this._uProjMatrix = program.getLocation("projMatrix");
 
         this._uLightAmbient = program.getLocation("lightAmbient");
@@ -53736,7 +53698,6 @@ class TrianglesInstancingColorTextureRenderer {
         }
 
         this._aPosition = program.getAttribute("position");
-        this._aNormal = program.getAttribute("normal");
         this._aColor = program.getAttribute("color");
         this._aUV = program.getAttribute("uv");
         this._aFlags = program.getAttribute("flags");
@@ -53747,10 +53708,6 @@ class TrianglesInstancingColorTextureRenderer {
         this._aModelMatrixCol1 = program.getAttribute("modelMatrixCol1");
         this._aModelMatrixCol2 = program.getAttribute("modelMatrixCol2");
 
-        this._aModelNormalMatrixCol0 = program.getAttribute("modelNormalMatrixCol0");
-        this._aModelNormalMatrixCol1 = program.getAttribute("modelNormalMatrixCol1");
-        this._aModelNormalMatrixCol2 = program.getAttribute("modelNormalMatrixCol2");
-
         this._uColorMap = "uColorMap";
 
         this._uOcclusionTexture = "uOcclusionTexture";
@@ -53809,11 +53766,7 @@ class TrianglesInstancingColorTextureRenderer {
     _buildVertexShader() {
         const scene = this._scene;
         const sectionPlanesState = scene._sectionPlanesState;
-        const lightsState = scene._lightsState;
         const clipping = sectionPlanesState.sectionPlanes.length > 0;
-        let i;
-        let len;
-        let light;
         const src = [];
         src.push("#version 300 es");
         src.push("// Instancing geometry drawing vertex shader");
@@ -53821,7 +53774,6 @@ class TrianglesInstancingColorTextureRenderer {
         src.push("uniform int renderPass;");
 
         src.push("in vec3 position;");
-        src.push("in vec3 normal;");
         src.push("in vec4 color;");
         src.push("in vec2 uv;");
         src.push("in vec4 flags;");
@@ -53835,14 +53787,8 @@ class TrianglesInstancingColorTextureRenderer {
         src.push("in vec4 modelMatrixCol1;");
         src.push("in vec4 modelMatrixCol2;");
 
-        src.push("in vec4 modelNormalMatrixCol0;");
-        src.push("in vec4 modelNormalMatrixCol1;");
-        src.push("in vec4 modelNormalMatrixCol2;");
-
         src.push("uniform mat4 worldMatrix;");
-        src.push("uniform mat4 worldNormalMatrix;");
         src.push("uniform mat4 viewMatrix;");
-        src.push("uniform mat4 viewNormalMatrix;");
         src.push("uniform mat4 projMatrix;");
         src.push("uniform mat4 positionsDecodeMatrix;");
         src.push("uniform mat3 uvDecodeMatrix;");
@@ -53856,38 +53802,11 @@ class TrianglesInstancingColorTextureRenderer {
             src.push("out float isPerspective;");
         }
 
-        src.push("uniform vec4 lightAmbient;");
-
-        for (i = 0, len = lightsState.lights.length; i < len; i++) {
-            light = lightsState.lights[i];
-            if (light.type === "ambient") {
-                continue;
-            }
-            src.push("uniform vec4 lightColor" + i + ";");
-            if (light.type === "dir") {
-                src.push("uniform vec3 lightDir" + i + ";");
-            }
-            if (light.type === "point") {
-                src.push("uniform vec3 lightPos" + i + ";");
-            }
-            if (light.type === "spot") {
-                src.push("uniform vec3 lightPos" + i + ";");
-                src.push("uniform vec3 lightDir" + i + ";");
-            }
-        }
-
-        src.push("vec3 octDecode(vec2 oct) {");
-        src.push("    vec3 v = vec3(oct.xy, 1.0 - abs(oct.x) - abs(oct.y));");
-        src.push("    if (v.z < 0.0) {");
-        src.push("        v.xy = (1.0 - abs(v.yx)) * vec2(v.x >= 0.0 ? 1.0 : -1.0, v.y >= 0.0 ? 1.0 : -1.0);");
-        src.push("    }");
-        src.push("    return normalize(v);");
-        src.push("}");
-
         if (clipping) {
             src.push("out vec4 vWorldPosition;");
             src.push("out vec4 vFlags2;");
         }
+        src.push("out vec4 vViewPosition;");
         src.push("out vec4 vColor;");
         src.push("out vec2 vUV;");
 
@@ -53908,47 +53827,8 @@ class TrianglesInstancingColorTextureRenderer {
         }
 
         src.push("vec4 viewPosition  = viewMatrix * worldPosition; ");
-
-        src.push("vec4 modelNormal = vec4(octDecode(normal.xy), 0.0); ");
-        src.push("vec4 worldNormal = worldNormalMatrix * vec4(dot(modelNormal, modelNormalMatrixCol0), dot(modelNormal, modelNormalMatrixCol1), dot(modelNormal, modelNormalMatrixCol2), 0.0);");
-        src.push("vec3 viewNormal = normalize(vec4(viewNormalMatrix * worldNormal).xyz);");
-
-        src.push("vec3 reflectedColor = vec3(0.0, 0.0, 0.0);");
-        src.push("vec3 viewLightDir = vec3(0.0, 0.0, -1.0);");
-
-        src.push("float lambertian = 1.0;");
-        for (i = 0, len = lightsState.lights.length; i < len; i++) {
-            light = lightsState.lights[i];
-            if (light.type === "ambient") {
-                continue;
-            }
-            if (light.type === "dir") {
-                if (light.space === "view") {
-                    src.push("viewLightDir = normalize(lightDir" + i + ");");
-                } else {
-                    src.push("viewLightDir = normalize((viewMatrix * vec4(lightDir" + i + ", 0.0)).xyz);");
-                }
-            } else if (light.type === "point") {
-                if (light.space === "view") {
-                    src.push("viewLightDir = -normalize(lightPos" + i + " - viewPosition.xyz);");
-                } else {
-                    src.push("viewLightDir = -normalize((viewMatrix * vec4(lightPos" + i + ", 0.0)).xyz);");
-                }
-            } else if (light.type === "spot") {
-                if (light.space === "view") {
-                    src.push("viewLightDir = normalize(lightDir" + i + ");");
-                } else {
-                    src.push("viewLightDir = normalize((viewMatrix * vec4(lightDir" + i + ", 0.0)).xyz);");
-                }
-            } else {
-                continue;
-            }
-            src.push("lambertian = max(dot(-viewNormal, viewLightDir), 0.0);");
-            src.push("reflectedColor += lambertian * (lightColor" + i + ".rgb * lightColor" + i + ".a);");
-        }
-
-        src.push("vec3 rgb = (vec3(float(color.r) / 255.0, float(color.g) / 255.0, float(color.b) / 255.0));");
-        src.push("vColor =  vec4((lightAmbient.rgb * lightAmbient.a * rgb) + (reflectedColor * rgb), float(color.a) / 255.0);");
+        src.push("vViewPosition = viewPosition;");
+        src.push("vColor = vec4(float(color.r) / 255.0, float(color.g) / 255.0, float(color.b) / 255.0, float(color.a) / 255.0);");
         src.push("vUV = (uvDecodeMatrix * vec3(uv, 1.0)).xy;");
 
         src.push("vec4 clipPos = projMatrix * viewPosition;");
@@ -53971,6 +53851,9 @@ class TrianglesInstancingColorTextureRenderer {
     _buildFragmentShader() {
         const scene = this._scene;
         const sectionPlanesState = scene._sectionPlanesState;
+        const lightsState = scene._lightsState;
+        let i;
+        let len;
         const clipping = sectionPlanesState.sectionPlanes.length > 0;
         const src = [];
         src.push("#version 300 es");
@@ -54012,9 +53895,31 @@ class TrianglesInstancingColorTextureRenderer {
                 src.push("uniform vec3 sectionPlaneDir" + i + ";");
             }
         }
+        src.push("uniform mat4 viewMatrix;");
+        src.push("uniform vec4 lightAmbient;");
+        for (i = 0, len = lightsState.lights.length; i < len; i++) {
+            const light = lightsState.lights[i];
+            if (light.type === "ambient") {
+                continue;
+            }
+            src.push("uniform vec4 lightColor" + i + ";");
+            if (light.type === "dir") {
+                src.push("uniform vec3 lightDir" + i + ";");
+            }
+            if (light.type === "point") {
+                src.push("uniform vec3 lightPos" + i + ";");
+            }
+            if (light.type === "spot") {
+                src.push("uniform vec3 lightPos" + i + ";");
+                src.push("uniform vec3 lightDir" + i + ";");
+            }
+        }
+
+        src.push("in vec4 vViewPosition;");
         src.push("in vec4 vColor;");
         src.push("in vec2 vUV;");
         src.push("out vec4 outColor;");
+
         src.push("void main(void) {");
 
         if (clipping) {
@@ -54032,17 +53937,52 @@ class TrianglesInstancingColorTextureRenderer {
             src.push("}");
         }
 
-        if (scene.logarithmicDepthBufferEnabled) {
-            src.push("    gl_FragDepth = isPerspective == 0.0 ? gl_FragCoord.z : log2( vFragDepth ) * logDepthBufFC * 0.5;");
-        }
+        src.push("vec3 reflectedColor = vec3(0.0, 0.0, 0.0);");
+        src.push("vec3 viewLightDir = vec3(0.0, 0.0, -1.0);");
 
-        src.push("vec4 colorTexel = texture(uColorMap, vUV);");
-        src.push("float opacity = vColor.a;");
+        src.push("float lambertian = 1.0;");
 
-        // Doing SAO blend in the main solid fill draw shader just so that edge lines can be drawn over the top
-        // Would be more efficient to defer this, then render lines later, using same depth buffer for Z-reject
+        src.push("vec3 xTangent = dFdx( vViewPosition.xyz );");
+        src.push("vec3 yTangent = dFdy( vViewPosition.xyz );");
+        src.push("vec3 viewNormal = normalize( cross( xTangent, yTangent ) );");
+
+        for (i = 0, len = lightsState.lights.length; i < len; i++) {
+            const light = lightsState.lights[i];
+            if (light.type === "ambient") {
+                continue;
+            }
+            if (light.type === "dir") {
+                if (light.space === "view") {
+                    src.push("viewLightDir = normalize(lightDir" + i + ");");
+                } else {
+                    src.push("viewLightDir = normalize((viewMatrix * vec4(lightDir" + i + ", 0.0)).xyz);");
+                }
+            } else if (light.type === "point") {
+                if (light.space === "view") {
+                    src.push("viewLightDir = -normalize(lightPos" + i + " - viewPosition.xyz);");
+                } else {
+                    src.push("viewLightDir = -normalize((viewMatrix * vec4(lightPos" + i + ", 0.0)).xyz);");
+                }
+            } else if (light.type === "spot") {
+                if (light.space === "view") {
+                    src.push("viewLightDir = normalize(lightDir" + i + ");");
+                } else {
+                    src.push("viewLightDir = normalize((viewMatrix * vec4(lightDir" + i + ", 0.0)).xyz);");
+                }
+            } else {
+                continue;
+            }
+            src.push("lambertian = max(dot(-viewNormal, viewLightDir), 0.0);");
+            src.push("reflectedColor += lambertian * (lightColor" + i + ".rgb * lightColor" + i + ".a);");
+        }
+
+        src.push("vec4 color =  vec4((lightAmbient.rgb * lightAmbient.a * vColor.rgb) + (reflectedColor * vColor.rgb), vColor.a);");
+        src.push("vec4 colorTexel = color * texture(uColorMap, vUV);");
+        src.push("float opacity = color.a;");
 
         if (this._withSAO) {
+            // Doing SAO blend in the main solid fill draw shader just so that edge lines can be drawn over the top
+            // Would be more efficient to defer this, then render lines later, using same depth buffer for Z-reject
             src.push("   float viewportWidth     = uSAOParams[0];");
             src.push("   float viewportHeight    = uSAOParams[1];");
             src.push("   float blendCutoff       = uSAOParams[2];");
@@ -54053,6 +53993,11 @@ class TrianglesInstancingColorTextureRenderer {
         } else {
             src.push("   outColor                = vec4(vColor.rgb * colorTexel.rgb, opacity);");
         }
+
+        if (scene.logarithmicDepthBufferEnabled) {
+            src.push("    gl_FragDepth = isPerspective == 0.0 ? gl_FragCoord.z : log2( vFragDepth ) * logDepthBufFC * 0.5;");
+        }
+
         src.push("}");
         return src;
     }
@@ -54708,7 +54653,6 @@ class TrianglesInstancingLayer {
 
         this._state.colorTextureSupported
             = !!geometry.uvBuf
-            && !!geometry.normalsBuf
             && !!textureSet
             && !!textureSet.colorTexture;