Merge pull request #3399 from bghgary/negative-scale

Flip front face when world matrix determinant is negative

loaders/src/glTF/2.0/babylon.glTFLoader.ts

@@ -1358,7 +1358,8 @@ module BABYLON.GLTF2 {
                 let material = <PBRMaterial>this._babylonScene.getMaterialByName(id);
                 if (!material) {
                     material = new PBRMaterial(id, this._babylonScene);
-                    material.sideOrientation = Material.CounterClockWiseSideOrientation;
+                    material.transparencyMode = PBRMaterial.PBRMATERIAL_OPAQUE;
+                    material.sideOrientation = Material.ClockWiseSideOrientation;
                     material.metallic = 1;
                     material.roughness = 1;
                 }
@@ -1427,7 +1428,7 @@ module BABYLON.GLTF2 {
 
         public _createPbrMaterial(material: IGLTFMaterial): void {
             const babylonMaterial = new PBRMaterial(material.name || "mat" + material.index, this._babylonScene);
-            babylonMaterial.sideOrientation = Material.CounterClockWiseSideOrientation;
+            babylonMaterial.sideOrientation = Material.ClockWiseSideOrientation;
             material.babylonMaterial = babylonMaterial;
         }
 

src/Engine/babylon.engine.ts

@@ -2830,21 +2830,24 @@
         // States
         public setState(culling: boolean, zOffset: number = 0, force?: boolean, reverseSide = false): void {
             // Culling
-            var showSide = reverseSide ? this._gl.FRONT : this._gl.BACK;
-            var hideSide = reverseSide ? this._gl.BACK : this._gl.FRONT;
-            var cullFace = this.cullBackFaces ? showSide : hideSide;
-
-            if (this._depthCullingState.cull !== culling || force || this._depthCullingState.cullFace !== cullFace) {
-                if (culling) {
-                    this._depthCullingState.cullFace = cullFace;
-                    this._depthCullingState.cull = true;
-                } else {
-                    this._depthCullingState.cull = false;
-                }
+            if (this._depthCullingState.cull !== culling || force) {
+                this._depthCullingState.cull = culling;
+            }
+
+            // Cull face
+            var cullFace = this.cullBackFaces ? this._gl.BACK : this._gl.FRONT;
+            if (this._depthCullingState.cullFace !== cullFace || force) {
+                this._depthCullingState.cullFace = cullFace;
             }
 
             // Z offset
             this.setZOffset(zOffset);
+
+            // Front face
+            var frontFace = reverseSide ? this._gl.CW : this._gl.CCW;
+            if (this._depthCullingState.frontFace !== frontFace || force) {
+                this._depthCullingState.frontFace = frontFace;
+            }
         }
 
         public setZOffset(value: number): void {

src/Mesh/babylon.abstractMesh.ts

@@ -803,6 +803,17 @@
             return super.getWorldMatrix();
         }
 
+        /**
+         * Returns the latest update of the World matrix determinant.
+         */
+        protected _getWorldMatrixDeterminant(): number {
+            if (this._masterMesh) {
+                return this._masterMesh._getWorldMatrixDeterminant();
+            }
+
+            return super._getWorldMatrixDeterminant();
+        }
+
         // ================================== Point of View Movement =================================
         /**
          * Perform relative position change from the point of view of behind the front of the mesh.

src/Mesh/babylon.mesh.ts

@@ -1304,7 +1304,7 @@
                 return this;
             }
 
-            this._effectiveMaterial = material
+            this._effectiveMaterial = material;
 
             if (this._effectiveMaterial.storeEffectOnSubMeshes) {
                 if (!this._effectiveMaterial.isReadyForSubMesh(this, subMesh, hardwareInstancedRendering)) {
@@ -1338,7 +1338,15 @@
                 return this;
             }
 
-            var reverse = this._effectiveMaterial._preBind(effect, this.overrideMaterialSideOrientation);
+            var sideOrientation = this.overrideMaterialSideOrientation;
+            if (sideOrientation == null) {
+                sideOrientation = this._effectiveMaterial.sideOrientation;
+                if (this._getWorldMatrixDeterminant() < 0) {
+                    sideOrientation = (sideOrientation === Material.ClockWiseSideOrientation ? Material.CounterClockWiseSideOrientation : Material.ClockWiseSideOrientation);
+                }
+            }
+
+            var reverse = this._effectiveMaterial._preBind(effect, sideOrientation);
 
             if (this._effectiveMaterial.forceDepthWrite) {
                 engine.setDepthWrite(true);

src/Mesh/babylon.transformNode.ts

@@ -35,6 +35,7 @@ module BABYLON {
         public _poseMatrix: Matrix;
         private _localWorld = Matrix.Zero();
         public _worldMatrix = Matrix.Zero();
+        public _worldMatrixDeterminant = 0;
         private _absolutePosition = Vector3.Zero();
         private _pivotMatrix = Matrix.Identity();
         private _pivotMatrixInverse: Matrix;
@@ -114,6 +115,16 @@ module BABYLON {
         }
 
         /**
+         * Returns the latest update of the World matrix determinant.
+         */
+        protected _getWorldMatrixDeterminant(): number {
+            if (this._currentRenderId !== this.getScene().getRenderId()) {
+                this._worldMatrixDeterminant = this.computeWorldMatrix().determinant();
+            }
+            return this._worldMatrixDeterminant;
+        }
+
+        /**
          * Returns directly the latest state of the mesh World matrix. 
          * A Matrix is returned.    
          */

src/States/babylon.depthCullingState.ts

@@ -6,14 +6,16 @@
         private _isCullFaceDirty = false;
         private _isCullDirty = false;
         private _isZOffsetDirty = false;
-
+        private _isFrontFaceDirty = false;
+        
         private _depthTest: boolean;
         private _depthMask: boolean;
         private _depthFunc: Nullable<number>;
         private _cull: Nullable<boolean>;
         private _cullFace: Nullable<number>;
         private _zOffset: number;
-
+        private _frontFace: Nullable<number>;
+        
         /**
          * Initializes the state.
          */
@@ -22,7 +24,7 @@
         }
 
         public get isDirty(): boolean {
-            return this._isDepthFuncDirty || this._isDepthTestDirty || this._isDepthMaskDirty || this._isCullFaceDirty || this._isCullDirty || this._isZOffsetDirty;
+            return this._isDepthFuncDirty || this._isDepthTestDirty || this._isDepthMaskDirty || this._isCullFaceDirty || this._isCullDirty || this._isZOffsetDirty || this._isFrontFaceDirty;
         }
 
         public get zOffset(): number {
@@ -103,6 +105,19 @@
             this._isDepthTestDirty = true;
         }
 
+        public get frontFace(): Nullable<number> {
+            return this._frontFace;
+        }
+
+        public set frontFace(value: Nullable<number>) {
+            if (this._frontFace === value) {
+                return;
+            }
+
+            this._frontFace = value;
+            this._isFrontFaceDirty = true;
+        }
+
         public reset() {
             this._depthMask = true;
             this._depthTest = true;
@@ -110,6 +125,7 @@
             this._cullFace = null;
             this._cull = null;
             this._zOffset = 0;
+            this._frontFace = null;
 
             this._isDepthTestDirty = true;
             this._isDepthMaskDirty = true;
@@ -117,6 +133,7 @@
             this._isCullFaceDirty = false;
             this._isCullDirty = false;
             this._isZOffsetDirty = false;
+            this._isFrontFaceDirty = false;
         }
 
         public apply(gl: WebGLRenderingContext) {
@@ -175,6 +192,12 @@
 
                 this._isZOffsetDirty = false;
             }
+
+            // Front face
+            if (this._isFrontFaceDirty) {
+                gl.frontFace(<number>this.frontFace);
+                this._isFrontFaceDirty = false;
+            }
         }
     }
 }