refined the tile clipping process, render pipeline and management of …

…gl states Signed-off-by: Tim Deubler <[email protected]>
heremaps · Nov 17, 2023 · 071ff56 · 071ff56
1 parent 6693658
commit 071ff56
Show file tree

Hide file tree

Showing 15 changed files with 436 additions and 382 deletions.
diff --git a/packages/display/src/displays/webgl/Display.ts b/packages/display/src/displays/webgl/Display.ts
@@ -68,27 +68,27 @@ const stencilQuad = (quadkey: string, subQuadkey: string) => {
 
 
 export type TileBufferData = {
-  z: number;
-  tiled: true;
-  b: GeometryBuffer;
-  data: {
-    tile: ScreenTile;
-    preview?: [string, number, number, number, number, number, number, number, number];
-    previewTile?: GLTile;
-    stencils?;
-  };
+    z: number;
+    tiled: true;
+    b: GeometryBuffer;
+    data: {
+        tile: ScreenTile;
+        preview?: [string, number, number, number, number, number, number, number, number];
+        previewTile?: GLTile;
+        stencils?;
+    };
 };
 
 type CustomBufferData = {
-  z: number;
-  tiled: boolean;
-  b: {
-    zLayer?: number;
-    zIndex?: number;
-    pass?: number;
-    flat: boolean;
-  };
-  data: CustomLayer;
+    z: number;
+    tiled: boolean;
+    b: {
+        zLayer?: number;
+        zIndex?: number;
+        pass?: number;
+        flat: boolean;
+    };
+    data: CustomLayer;
 };
 
 type BufferData = CustomBufferData | TileBufferData;
@@ -206,15 +206,15 @@ class WebGlDisplay extends BasicDisplay {
 
     // from unprojected screen pixels to projected screen pixels
     project(x: number, y: number, z: number = 0, sx = this.sx, sy = this.sy): [number, number, number] {
-    // x -= screenOffsetX;
-    // y -= screenOffsetY;
-    // const p = [x, y, 0];
-    // const s = this.s;
-    // const p = [x * s, y * s, 0];
+        // x -= screenOffsetX;
+        // y -= screenOffsetY;
+        // const p = [x, y, 0];
+        // const s = this.s;
+        // const p = [x * s, y * s, 0];
         const p = [x - sx, y - sy, -z];
         return transformMat4(p, p, this.render.screenMat);
-    // transformMat4(p, p, this.render.vPMats);
-    // return fromClipSpace(p, this.w, this.h);
+        // transformMat4(p, p, this.render.vPMats);
+        // return fromClipSpace(p, this.w, this.h);
     }
 
     setSize(w: number, h: number) {
@@ -224,14 +224,14 @@ class WebGlDisplay extends BasicDisplay {
     }
 
     setTransform(scale: number, rotZ: number, rotX: number) {
-    // if (this.s != scale || this.rz != rotZ || this.rx != rotX)
-    // {
+        // if (this.s != scale || this.rz != rotZ || this.rx != rotX)
+        // {
         const PI2 = 2 * Math.PI;
         rotZ = (rotZ + PI2) % PI2;
         this.s = scale;
         this.rz = rotZ;
         this.rx = rotX;
-    // }
+        // }
     }
 
     setView(
@@ -343,13 +343,18 @@ class WebGlDisplay extends BasicDisplay {
                 zLayer = layer.index + 1;
             }
 
-            let z = zLayer * 1e6 + zIndex;
+            let z = zLayer * 1e8 + zIndex * 10;
 
+            if (!buffer.flat) {
+                // make sure 3d geom is always drawn "after" 2d geom. even if same zIndex is used.
+                // otherwise stencil conflicts are possible.
+                z += 1;
+            }
             absZOrder[z] = 0;
 
             zSorted[zSorted.length] = {
                 b: buffer,
-                z: z,
+                z,
                 data,
                 tiled
             } as TileBufferData;
@@ -502,6 +507,7 @@ class WebGlDisplay extends BasicDisplay {
         while (b--) {
             let data = tileBuffers[b];
             if (data?.tiled) {
+                render.initBufferScissorBox((<TileBufferData>data).b, (<TileBufferData>data).data.tile, (<TileBufferData>data).data.preview);
                 render.draw(<TileBufferData>data, min3dZIndex);
             }
         }