Clockwise winding order for back-facing culling in offscreen textures

mapbox · Aug 24, 2018 · 19ebc7b · 19ebc7b
1 parent 83f30f1
commit 19ebc7b
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 9 deletions.
diff --git a/src/data/bucket/circle_bucket.js b/src/data/bucket/circle_bucket.js
@@ -121,12 +121,6 @@ class CircleBucket<Layer: CircleStyleLayer | HeatmapStyleLayer> implements Bucke
 
                 // this geometry will be of the Point type, and we'll derive
                 // two triangles from it.
-                // ┌──────┐
-                // │ 0  1 │ Counter-clockwise winding order: front-facing culling.
-                // │      │ Triangle 1: 0 => 2 => 1
-                // │ 2  3 │ Triangle 2: 1 => 2 => 3
-                // └──────┘
-
                 const segment = this.segments.prepareSegment(4, this.layoutVertexArray, this.indexArray);
                 const index = segment.vertexLength;
 
@@ -135,8 +129,23 @@ class CircleBucket<Layer: CircleStyleLayer | HeatmapStyleLayer> implements Bucke
                 addCircleVertex(this.layoutVertexArray, x, y, -1, 1);  // 2
                 addCircleVertex(this.layoutVertexArray, x, y, 1, 1);   // 3
 
-                this.indexArray.emplaceBack(index, index + 2, index + 1);
-                this.indexArray.emplaceBack(index + 1, index + 2, index + 3);
+                if (this.layers[0].type === "circle") {
+                    // ┌──────┐
+                    // │ 0  1 │ Counter-clockwise winding order: front-facing culling.
+                    // │      │ Triangle 1: 0 => 2 => 1
+                    // │ 2  3 │ Triangle 2: 1 => 2 => 3
+                    // └──────┘
+                    this.indexArray.emplaceBack(index, index + 2, index + 1);
+                    this.indexArray.emplaceBack(index + 1, index + 2, index + 3);
+                } else if (this.layers[0].type === "heatmap") {
+                    // ┌──────┐
+                    // │ 0  1 │ Clockwise winding order: back-facing culling.
+                    // │      │ Triangle 1: 0 => 1 => 2
+                    // │ 2  3 │ Triangle 2: 1 => 3 => 2
+                    // └──────┘
+                    this.indexArray.emplaceBack(index, index + 1, index + 2);
+                    this.indexArray.emplaceBack(index + 1, index + 3, index + 2);
+                }
 
                 segment.vertexLength += 4;
                 segment.primitiveLength += 2;

diff --git a/src/data/bucket/fill_extrusion_bucket.js b/src/data/bucket/fill_extrusion_bucket.js
@@ -160,8 +160,13 @@ class FillExtrusionBucket implements Bucket {
 
                             const bottomRight = segment.vertexLength;
 
+                            // ┌──────┐
+                            // │ 0  1 │ Clockwise winding order: back-facing culling.
+                            // │      │ Triangle 1: 0 => 1 => 2
+                            // │ 2  3 │ Triangle 2: 1 => 3 => 2
+                            // └──────┘
                             this.indexArray.emplaceBack(bottomRight, bottomRight + 1, bottomRight + 2);
-                            this.indexArray.emplaceBack(bottomRight + 1, bottomRight + 2, bottomRight + 3);
+                            this.indexArray.emplaceBack(bottomRight + 1, bottomRight + 3, bottomRight + 2);
 
                             segment.vertexLength += 4;
                             segment.primitiveLength += 2;
@@ -201,6 +206,7 @@ class FillExtrusionBucket implements Bucket {
             assert(indices.length % 3 === 0);
 
             for (let j = 0; j < indices.length; j += 3) {
+                // Clockwise winding order for culling front-facing triangles.
                 this.indexArray.emplaceBack(
                     triangleIndex + indices[j],
                     triangleIndex + indices[j + 1],