Use frontFace instead of cullFace to determine side orientation

src/Engine/babylon.engine.ts

@@ -2822,21 +2822,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/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;
+            }
         }
     }
 }