From 19ebc7b6b1a04485f36226782de955a1af2ce54f Mon Sep 17 00:00:00 2001 From: Bruno de Oliveira Abinader Date: Fri, 24 Aug 2018 10:58:43 +0300 Subject: [PATCH] Clockwise winding order for back-facing culling in offscreen textures --- src/data/bucket/circle_bucket.js | 25 ++++++++++++++++-------- src/data/bucket/fill_extrusion_bucket.js | 8 +++++++- 2 files changed, 24 insertions(+), 9 deletions(-) diff --git a/src/data/bucket/circle_bucket.js b/src/data/bucket/circle_bucket.js index 39efaad33c0..93005290f10 100644 --- a/src/data/bucket/circle_bucket.js +++ b/src/data/bucket/circle_bucket.js @@ -121,12 +121,6 @@ class CircleBucket 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 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 index 9f01dda5381..3779d292143 100644 --- 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],