@pirireis/webglobeplugins 0.17.1 → 1.0.2

package/programs/point-on-globe/square-pixel-point.js

@@ -1,7 +1,9 @@
-import { createProgram } from "../../util/webglobjectbuilders";
-import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems";
-import { mercatorXYToGLPosition, cartesian3DToGLPosition } from "../../util/shaderfunctions/geometrytransformations";
-import { noRegisterGlobeProgramCache } from "../programcache";
+import { createProgram } from "../../util/webglobjectbuilders";
+import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems";
+import { mercatorXYToGLPosition, cartesian3DToGLPosition } from "../../util/shaderfunctions/geometrytransformations";
+import { noRegisterGlobeProgramCache } from "../programcache";
+
+
 const vs = `#version 300 es
 ${CameraUniformBlockString}
 ${mercatorXYToGLPosition}
@@ -38,7 +40,8 @@ void main() {
     }
     v_rgba = rgba;
     vVertexID = gl_VertexID;
-}`;
+}`;
+
 const fs = `#version 300 es
 precision highp float;
 
@@ -54,118 +57,134 @@ void main() {
     vertexID = vVertexID; 
     fragColor = v_rgba;
     fragColor.a *= opacity;
-}`;
-class PointOnGlobeProgram {
-    constructor(globe) {
-        this.globe = globe;
-        this.gl = globe.gl;
-        this.program = createProgram(this.gl, vs, fs);
-        const { gl, program } = this;
-        this.uniforms = {
-            opacity: gl.getUniformLocation(program, "opacity"),
-            hovered_vertexID: gl.getUniformLocation(program, "hovered_vertexID"),
-            hoveredPointSize: gl.getUniformLocation(program, "hoveredPointSize"),
-            pointSize: gl.getUniformLocation(program, "pointSize"),
-        };
-        // eslint-disable-next-line
-        { // assign opacity
-            this._lastOpacity = 1.0;
-            this._lastPointSize = 2.0;
-            this._lastHoveredPointSize = 4.0;
-            this._lastHoveredID = -1;
-            const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
-            gl.useProgram(program);
-            gl.uniform1f(this.uniforms.opacity, this._lastOpacity);
-            gl.uniform1f(this.uniforms.pointSize, this._lastPointSize);
-            gl.uniform1f(this.uniforms.hoveredPointSize, this._lastHoveredPointSize);
-            gl.uniform1i(this.uniforms.hovered_vertexID, this._lastHoveredID);
-            gl.useProgram(currentProgram);
-        }
-        // eslint-disable-next-line
-        { // assign attribute locations
-            gl.bindAttribLocation(program, 0, "pos3D");
-            gl.bindAttribLocation(program, 1, "pos2D");
-            gl.bindAttribLocation(program, 2, "rgba");
-        }
-        // eslint-disable-next-line
-        { // arrange camera uniform block
-            this.cameraBlockBingingPoint = 0;
-            this.cameraBlockTotem = CameraUniformBlockTotemCache.get(globe);
-            const cameraBlockIndex = gl.getUniformBlockIndex(program, "CameraUniformBlock");
-            gl.uniformBlockBinding(program, cameraBlockIndex, this.cameraBlockBingingPoint);
-        }
-    }
-    createVAO(pos3DBuffer, pos2DBuffer, rgbaBuffer) {
-        const { gl } = this;
-        const vao = gl.createVertexArray();
-        gl.bindVertexArray(vao);
-        // eslint-disable-next-line
-        {
-            gl.bindBuffer(gl.ARRAY_BUFFER, pos3DBuffer);
-            gl.enableVertexAttribArray(0);
-            gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
-        }
-        // eslint-disable-next-line
-        {
-            gl.bindBuffer(gl.ARRAY_BUFFER, pos2DBuffer);
-            gl.enableVertexAttribArray(1);
-            gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0);
-        }
-        // eslint-disable-next-line
-        {
-            gl.bindBuffer(gl.ARRAY_BUFFER, rgbaBuffer);
-            gl.enableVertexAttribArray(2);
-            gl.vertexAttribPointer(2, 4, gl.FLOAT, false, 0, 0);
-        }
-        gl.bindVertexArray(null);
-        gl.bindBuffer(gl.ARRAY_BUFFER, null);
-        return vao;
-    }
-    draw(vao, length, { opacity = 1.0, hoveredID = -1, pointSize = 2.0, hoveredPointSize = 4.0, elementBuffer = null } = {}) {
-        if (length === 0 || opacity === 0)
-            return;
-        const { gl, program, uniforms } = this;
-        gl.useProgram(program);
-        if (this._lastOpacity !== opacity) {
-            gl.uniform1f(uniforms.opacity, opacity);
-            this._lastOpacity = opacity;
-        }
-        if (this._lastPointSize !== pointSize) {
-            gl.uniform1f(uniforms.pointSize, pointSize);
-            this._lastPointSize = pointSize;
-        }
-        if (this._lastHoveredPointSize !== hoveredPointSize) {
-            gl.uniform1f(uniforms.hoveredPointSize, hoveredPointSize);
-            this._lastHoveredPointSize = hoveredPointSize;
-        }
-        if (this._lastHoveredID !== hoveredID) {
-            gl.uniform1i(uniforms.hovered_vertexID, hoveredID);
-            this._lastHoveredID = hoveredID;
-        }
-        gl.bindVertexArray(vao);
-        this.cameraBlockTotem.bind(this.cameraBlockBingingPoint);
-        if (elementBuffer) {
-            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elementBuffer);
-            gl.drawElements(gl.POINTS, length, gl.UNSIGNED_INT, 0);
-            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
-        }
-        else {
-            gl.drawArrays(gl.POINTS, 0, length);
-        }
-        this.cameraBlockTotem.unbind(this.cameraBlockBingingPoint);
-        gl.bindVertexArray(null);
-    }
-    free() {
-        if (this._isFreed)
-            return;
-        const { gl, globe } = this;
-        CameraUniformBlockTotemCache.release(globe);
-        gl.deleteProgram(this.program);
-        this._isFreed = true;
-    }
-}
-const PointOnGlobeProgramCache = Object.freeze({
-    get: (globe) => noRegisterGlobeProgramCache.getProgram(globe, PointOnGlobeProgram),
-    release: (globe) => noRegisterGlobeProgramCache.releaseProgram(globe, PointOnGlobeProgram)
-});
-export { PointOnGlobeProgramCache };
+}`;
+
+
+class PointOnGlobeProgram {
+
+    constructor(globe) {
+
+        this.globe = globe;
+        this.gl = globe.gl;
+
+        this.program = createProgram(this.gl, vs, fs);
+
+        const { gl, program } = this;
+
+
+        this.uniforms = {
+            opacity: gl.getUniformLocation(program, "opacity"),
+            hovered_vertexID: gl.getUniformLocation(program, "hovered_vertexID"),
+            hoveredPointSize: gl.getUniformLocation(program, "hoveredPointSize"),
+            pointSize: gl.getUniformLocation(program, "pointSize"),
+        }
+
+        // eslint-disable-next-line
+        { // assign opacity
+            this._lastOpacity = 1.0;
+            this._lastPointSize = 2.0;
+            this._lastHoveredPointSize = 4.0;
+            this._lastHoveredID = -1;
+            const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+            gl.useProgram(program);
+            gl.uniform1f(this.uniforms.opacity, this._lastOpacity);
+            gl.uniform1f(this.uniforms.pointSize, this._lastPointSize);
+            gl.uniform1f(this.uniforms.hoveredPointSize, this._lastHoveredPointSize);
+            gl.uniform1i(this.uniforms.hovered_vertexID, this._lastHoveredID);
+            gl.useProgram(currentProgram);
+        }
+        // eslint-disable-next-line
+        { // assign attribute locations
+            gl.bindAttribLocation(program, 0, "pos3D");
+            gl.bindAttribLocation(program, 1, "pos2D");
+            gl.bindAttribLocation(program, 2, "rgba");
+        }
+        // eslint-disable-next-line
+        { // arrange camera uniform block
+            this.cameraBlockBingingPoint = 0;
+            this.cameraBlockTotem = CameraUniformBlockTotemCache.get(globe);
+            const cameraBlockIndex = gl.getUniformBlockIndex(program, "CameraUniformBlock");
+            gl.uniformBlockBinding(program, cameraBlockIndex, this.cameraBlockBingingPoint);
+        }
+    }
+
+
+    createVAO(pos3DBuffer, pos2DBuffer, rgbaBuffer) {
+        const { gl } = this;
+        const vao = gl.createVertexArray();
+        gl.bindVertexArray(vao);
+        // eslint-disable-next-line
+        {
+            gl.bindBuffer(gl.ARRAY_BUFFER, pos3DBuffer);
+            gl.enableVertexAttribArray(0);
+            gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
+        }
+        // eslint-disable-next-line
+        {
+            gl.bindBuffer(gl.ARRAY_BUFFER, pos2DBuffer);
+            gl.enableVertexAttribArray(1);
+            gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0);
+        }
+        // eslint-disable-next-line
+        {
+            gl.bindBuffer(gl.ARRAY_BUFFER, rgbaBuffer);
+            gl.enableVertexAttribArray(2);
+            gl.vertexAttribPointer(2, 4, gl.FLOAT, false, 0, 0);
+            // gl.vertexAttribPointer(2, 4, gl.UNSIGNED_INT, true, 0, 0);
+        }
+
+        gl.bindVertexArray(null);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        return vao;
+    }
+
+
+    draw(vao, length, { opacity = 1.0, hoveredID = -1, pointSize = 2.0, hoveredPointSize = 4.0, elementBuffer = null } = {}) {
+        if (length === 0 || opacity === 0) return;
+        const { gl, program, uniforms } = this;
+        gl.useProgram(program);
+        if (this._lastOpacity !== opacity) {
+            gl.uniform1f(uniforms.opacity, opacity);
+            this._lastOpacity = opacity;
+        }
+        if (this._lastPointSize !== pointSize) {
+            gl.uniform1f(uniforms.pointSize, pointSize);
+            this._lastPointSize = pointSize;
+        }
+        if (this._lastHoveredPointSize !== hoveredPointSize) {
+            gl.uniform1f(uniforms.hoveredPointSize, hoveredPointSize);
+            this._lastHoveredPointSize = hoveredPointSize;
+        }
+        if (this._lastHoveredID !== hoveredID) {
+            gl.uniform1i(uniforms.hovered_vertexID, hoveredID);
+            this._lastHoveredID = hoveredID;
+        }
+        gl.bindVertexArray(vao);
+        this.cameraBlockTotem.bind(this.cameraBlockBingingPoint);
+        if (elementBuffer) {
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elementBuffer);
+            gl.drawElements(gl.POINTS, length, gl.UNSIGNED_INT, 0);
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+        } else {
+            gl.drawArrays(gl.POINTS, 0, length);
+        }
+        this.cameraBlockTotem.unbind(this.cameraBlockBingingPoint);
+        gl.bindVertexArray(null);
+    }
+
+    free() {
+        if (this._isFreed) return;
+        const { gl, globe } = this;
+        CameraUniformBlockTotemCache.release(globe);
+        gl.deleteProgram(this.program);
+        this._isFreed = true;
+    }
+}
+
+
+const PointOnGlobeProgramCache = Object.freeze({
+    get: (globe) => noRegisterGlobeProgramCache.getProgram(globe, PointOnGlobeProgram),
+    release: (globe) => noRegisterGlobeProgramCache.releaseProgram(globe, PointOnGlobeProgram)
+});
+
+export { PointOnGlobeProgramCache };

package/programs/polygon-on-globe/roadmap.md

@@ -0,0 +1,8 @@
+Data input
+
+Use adaptors to cut big triangles into manageable pieces
+
+Dynamically tessellate based on bbox and zoom level on webworker ( tile should be merged beforehand )
+
+
+// 

package/programs/polygon-on-globe/texture-dem-triangles.ts

@@ -0,0 +1,290 @@
+import { createProgram } from "../../util/webglobjectbuilders";
+import { CameraUniformBlockTotemCache, CameraUniformBlockString, CameraUniformBlockTotem } from "../totems/camerauniformblock";
+import { DemTextureManager, DemTextureManagerCache, DEM_TEXTURE_BLOCK_STRING } from "../totems/dem-textures-manager"
+import { cartesian3DToGLPosition, mercatorXYToGLPosition, POLE_BY_PI } from "../../util/shaderfunctions/geometrytransformations";
+import { relativeBBoxPositionRadian } from "../../util/shaderfunctions/geometrytransformations";
+import { drawArrays } from "../../util/gl-util/draw-options/methods";
+import { attributeLoader } from "../../util/gl-util/buffer/attribute-loader";
+import { WORLD_RADIUS_3D } from "../../Math/constants";
+import { Globe, BufferAndReadInfo, DrawRangeIndexParams, LongLatRadian, UBOHandler, GlobeBBox } from "../../types";
+import { UniformBlockManager } from "../../util/gl-util/uniform-block/manager";
+
+// const ESCAPE_VALUE = 0.123456;
+const uniformBindingPoints = {
+    camera: 0,
+    style: 1,
+    dem: 2,
+    selection: 3,
+};
+
+export const IndexAttributeEscapeValue = -1;
+
+const styleBlockManager = new UniformBlockManager(
+    'Style',
+    [
+        { name: "defaultColor", type: "vec4", value: new Float32Array([0.0, 0.0, 0.0, 0.0]) },
+        { name: "pickedColor", type: "vec4", value: new Float32Array([0, 0, 0, 0]) },
+        { name: "u_pointSize", type: "float", value: new Float32Array([6.0]) },
+        { name: "opacity", type: "float", value: new Float32Array([1.0]) },
+        { name: "private_isPickedOn", type: "float", value: new Float32Array([0]) },
+        { name: "private_pickedIndex", type: "float", value: new Float32Array([0]) },
+    ],
+    uniformBindingPoints.style,
+);
+
+
+
+const vertexShaderSource = `#version 300 es
+#pragma vscode_glsllint_stage : vert
+
+precision highp float;
+precision highp sampler2DArray;
+
+${CameraUniformBlockString}
+${POLE_BY_PI}
+${cartesian3DToGLPosition}
+${mercatorXYToGLPosition}
+
+${DEM_TEXTURE_BLOCK_STRING}
+
+in vec3 a_position;
+in vec2 a_xy;
+in float a_index;
+in vec4 a_color;
+
+${styleBlockManager.glslCode()}
+
+out vec4 v_color;
+flat out int v_index;
+
+${relativeBBoxPositionRadian}
+
+
+void main() {
+    float elevation = ${WORLD_RADIUS_3D};
+    float altitude = 0.0;
+    v_color = (a_color.a != -1.0) ? a_color : defaultColor;
+
+    if (is3D == true) {
+        for (int i = 0; i < 6; i++) {
+            if( i == u_breakLoopIndex - 1 ) {
+                break;
+            }
+            vec2 uv = relativeBBoxPositionRadian(a_xy, u_demTextureBBOX[i]);
+            if (uv.x != -1.0) {
+                uv.y = 1.0 - uv.y; // flip y coordinate
+                // rescale and transform uv to fit in the texture data cover bbox
+                uv *= u_textureDataCoverRatio[i].xy;
+
+                //
+                altitude = texture(u_demTexture, vec3(uv, float(i))).r;
+                break;
+            }
+        }
+        vec3 position = a_position * (elevation + altitude);
+        gl_Position = cartesian3DToGLPosition(position);
+    } else {
+        vec2 mercatorXY = a_xy * POLE_BY_PI;
+        gl_Position = mercatorXYToGLPosition(mercatorXY);
+    }
+
+    if (private_isPickedOn ==  1.0){
+        if (a_index == private_pickedIndex) {
+            v_color = pickedColor;
+        }
+        v_index = int(a_index + 0.5); // +0.5 to avoid rounding issues
+    }
+
+    
+    v_color.a *= opacity; 
+    gl_PointSize = u_pointSize;
+}
+`;
+
+const fragmentShaderSource = `#version 300 es
+#pragma vscode_glsllint_stage : frag
+
+
+
+precision highp float;
+precision highp int;
+
+
+in vec4 v_color; // color from vertex shader
+flat in int v_index; // index from vertex shader
+layout(location = 0) out vec4 outColor;
+layout(location = 1) out int outIndex;
+
+void main() {
+    outColor = v_color;
+    outIndex = v_index;
+}
+`;
+
+
+function resCalculation(sourceResolution: number, mergeCount: number): number {
+    return sourceResolution + (mergeCount - 1) * (sourceResolution - 1);
+}
+
+const RESOLUTION = resCalculation(5, 20); // 5 is tile dimension length, 12 is merge count
+export class TextureDemTriangles {
+    globe: Globe
+    gl: WebGL2RenderingContext;
+    program: WebGLProgram;
+    // Later an injection will handle demTextures and demTextureBBOX
+    // texture: WebGLTexture;
+    // demTextures: WebGLTexture[] = [];
+    // demTextureBBOX: Float32Array = new Float32Array(6 * 4); // 6 bounding boxes
+    cameraUniformBlock: CameraUniformBlockTotem;
+    demTextureManager: DemTextureManager;
+
+    _defaultSelectionUBO!: UBOHandler;
+    _publishedUBOs: UBOHandler[] = [];
+
+    locations = {
+        attributes: {
+            a_position: -1,
+            a_xy: -1,
+            a_index: -1,
+            a_color: -1,
+        },
+        uniforms: {
+            u_demTexture: -1 as unknown as WebGLUniformLocation,
+            u_demTextureBBOX: -1 as unknown as WebGLUniformLocation,
+            u_textureDataCoverRatio: -1 as unknown as WebGLUniformLocation,
+            u_style: -1 as unknown as WebGLUniformLocation,
+            u_breakLoopIndex: -1 as unknown as WebGLUniformLocation,
+        }
+    }
+
+    constructor(globe: Globe) {
+        this.globe = globe;
+        this.gl = globe.gl;
+        this.program = createProgram(this.gl, vertexShaderSource, fragmentShaderSource);
+        this.cameraUniformBlock = CameraUniformBlockTotemCache.get(this.globe);
+        this.cameraUniformBlock.assignBindingPoint(this.program, uniformBindingPoints.camera);
+
+        styleBlockManager.assignBindingPoint(this.gl, this.program);
+
+        // get attribute locations
+        this.locations.attributes.a_position = this.gl.getAttribLocation(this.program, 'a_position');
+        this.locations.attributes.a_xy = this.gl.getAttribLocation(this.program, 'a_xy');
+        this.locations.attributes.a_index = this.gl.getAttribLocation(this.program, 'a_index');
+        this.locations.attributes.a_color = this.gl.getAttribLocation(this.program, 'a_color');
+        // get uniform locations
+        this.locations.uniforms.u_demTexture = this.gl.getUniformLocation(this.program, 'u_demTexture')!;
+        this.locations.uniforms.u_demTextureBBOX = this.gl.getUniformLocation(this.program, 'u_demTextureBBOX')!;
+        this.locations.uniforms.u_textureDataCoverRatio = this.gl.getUniformLocation(this.program, 'u_textureDataCoverRatio')!;
+        this.locations.uniforms.u_breakLoopIndex = this.gl.getUniformLocation(this.program, 'u_breakLoopIndex')!;
+        this.locations.uniforms.u_style = this.gl.getUniformBlockIndex(this.program, 'Style');
+        this.gl.uniformBlockBinding(this.program, this.locations.uniforms.u_style as number, uniformBindingPoints.style);
+
+        this.demTextureManager = DemTextureManagerCache.get(this.globe);
+        this.demTextureManager.assignBindingPoint(this.program, uniformBindingPoints.dem);
+    }
+
+
+    createVAO(
+        pos3dBufferInfo: BufferAndReadInfo,
+        longLatBufferInfo: BufferAndReadInfo,
+        indexBufferInfo?: BufferAndReadInfo,
+        variativeColorBuffer?: BufferAndReadInfo,
+    ): WebGLVertexArrayObject {
+        const vao = this.gl.createVertexArray()!;
+        this.gl.bindVertexArray(vao);
+        attributeLoader(this.gl, pos3dBufferInfo, this.locations.attributes.a_position, 3);
+        attributeLoader(this.gl, longLatBufferInfo, this.locations.attributes.a_xy, 2);
+        attributeLoader(this.gl, indexBufferInfo, this.locations.attributes.a_index, 1, {
+            escapeValues: [IndexAttributeEscapeValue],
+            normalized: false,
+        });
+        attributeLoader(this.gl, variativeColorBuffer, this.locations.attributes.a_color, 4, {
+            escapeValues: [IndexAttributeEscapeValue, IndexAttributeEscapeValue, IndexAttributeEscapeValue, IndexAttributeEscapeValue]
+        });
+        this.gl.bindVertexArray(null);
+        return vao;
+    }
+
+
+
+    createUBO(bufferReadType: "STATIC_DRAW" | "DYNAMIC_DRAW" | "STREAM_DRAW" = "STATIC_DRAW"): UBOHandler {
+        const ubo = styleBlockManager.createUBO(this.gl, bufferReadType);
+        this._publishedUBOs.push(ubo);
+        return ubo;
+    }
+
+
+
+    free() {
+        this.gl.deleteProgram(this.program);
+        // this.gl.deleteTexture(this.texture);
+        this._publishedUBOs.forEach(ubo => ubo.free());
+        this._publishedUBOs = [];
+        DemTextureManagerCache.release(this.globe);
+        CameraUniformBlockTotemCache.release(this.globe);
+    }
+
+
+    draw(vao: WebGLVertexArrayObject, drawOptions: DrawRangeIndexParams, ubo: UBOHandler) {
+        const gl = this.gl;
+        gl.useProgram(this.program);
+        this.cameraUniformBlock.bind(uniformBindingPoints.camera);
+        this.demTextureManager.bindData(0, uniformBindingPoints.dem);
+        gl.bindVertexArray(vao);
+        ubo.bind();
+        if (this.globe.api_GetCurrentLODWithDecimal() < 14.5) {
+            drawOnTopBegin(gl);
+        }
+        drawArrays(gl, gl.TRIANGLES, drawOptions);
+        if (this.globe.api_GetCurrentLODWithDecimal() < 14.5) {
+            drawOnTopEnd(gl);
+        }
+        this.demTextureManager.unbindData(0, uniformBindingPoints.dem);
+
+        gl.bindVertexArray(null);
+        gl.bindTexture(gl.TEXTURE_2D_ARRAY, null);
+        gl.useProgram(null);
+        ubo.unbind();
+        this.cameraUniformBlock.unbind(uniformBindingPoints.camera);
+    }
+
+
+    _getUniformBlockOffset(name: string): number {
+        // hardcoded offsets based on std140 layout rules
+        const offsets: { [key: string]: number } = {
+            'defaultColor': 0,
+        };
+        const result = offsets[name];
+        if (result === undefined) {
+            throw new Error(`Unknown uniform block member: ${name}, names are: ${Object.keys(offsets).join(", ")}`);
+        }
+        return result;
+    }
+}
+
+
+function drawOnTopBegin(gl: WebGL2RenderingContext) {
+    gl.disable(gl.DEPTH_TEST);
+    // gl.enable(gl.POLYGON_OFFSET_FILL);
+    // // Use an offset to "nudge" the depth value slightly closer or farther.
+    // // Common values are gl.polygonOffset(1.0, 1.0) or gl.polygonOffset(0.RESOLUTION, 0.RESOLUTION)
+    // gl.polygonOffset(1.0, 1.0);
+    // gl.depthRange(0.0, 0.0001);  // Use near 0.01% of depth range
+    // gl.enable(gl.POLYGON_OFFSET_FILL);
+    // You will need to experiment with these values!
+    // A good starting point is -1.0, -1.0.
+    // Negative values "pull" the fragments closer to the camera.
+    // gl.polygonOffset(-1.0, -1.0);
+
+    // gl.enable(gl.POLYGON_OFFSET_FILL);
+    // gl.polygonOffset(-1.0, -2.0);
+}
+
+function drawOnTopEnd(gl: WebGL2RenderingContext) {
+    gl.enable(gl.DEPTH_TEST);
+    // gl.disable(gl.POLYGON_OFFSET_FILL);
+    // gl.disable(gl.POLYGON_OFFSET_FILL);
+    // gl.depthRange(0.0, 1.0);  // Restore full depth range
+
+    // gl.disable(gl.POLYGON_OFFSET_FILL);
+}