@pirireis/webglobeplugins 1.0.2 → 1.0.4

package/{programs/polygon-on-globe/texture-dem-triangles.ts → webglobeplugins/programs/polygon-on-globe/texture-dem-triangles.js}

@@ -1,39 +1,29 @@
-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,
-);
-
-
-
+import { createProgram } from "../../util/webglobjectbuilders";
+import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems/camerauniformblock";
+import { DemTextureManagerCache, DEM_TEXTURE_BLOCK_STRING } from "../totems/attachments/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 { 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]) },
+    { name: "dontUseColor", type: "float", value: new Float32Array([0]) },
+], uniformBindingPoints.style);
 const vertexShaderSource = `#version 300 es
 #pragma vscode_glsllint_stage : vert
 
@@ -50,7 +40,7 @@ ${DEM_TEXTURE_BLOCK_STRING}
 in vec3 a_position;
 in vec2 a_xy;
 in float a_index;
-in vec4 a_color;
+in uvec4 a_color;
 
 ${styleBlockManager.glslCode()}
 
@@ -63,7 +53,16 @@ ${relativeBBoxPositionRadian}
 void main() {
     float elevation = ${WORLD_RADIUS_3D};
     float altitude = 0.0;
-    v_color = (a_color.a != -1.0) ? a_color : defaultColor;
+
+    vec4 decodedColor = vec4(
+        float(a_color.r) / 255.0,
+        float(a_color.g) / 255.0,
+        float(a_color.b) / 255.0,
+        float(a_color.a) / 254.0
+    );
+
+    // a_color.a == 255u is reserved as "no per-vertex color" sentinel.
+    v_color = (a_color.a == 255u || dontUseColor == 1.0) ? defaultColor : decodedColor;
 
     if (is3D == true) {
         for (int i = 0; i < 6; i++) {
@@ -99,8 +98,7 @@ void main() {
     v_color.a *= opacity; 
     gl_PointSize = u_pointSize;
 }
-`;
-
+`;
 const fragmentShaderSource = `#version 300 es
 #pragma vscode_glsllint_stage : frag
 
@@ -119,172 +117,143 @@ 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);
-}
+`;
+function resCalculation(sourceResolution, mergeCount) {
+    return sourceResolution + (mergeCount - 1) * (sourceResolution - 1);
+}
+const RESOLUTION = resCalculation(5, 20); // 5 is tile dimension length, 12 is merge count
+export class TextureDemTriangles {
+    globe;
+    gl;
+    program;
+    // Later an injection will handle demTextures and demTextureBBOX
+    // texture: WebGLTexture;
+    // demTextures: WebGLTexture[] = [];
+    // demTextureBBOX: Float32Array = new Float32Array(6 * 4); // 6 bounding boxes
+    cameraUniformBlock;
+    demTextureManager;
+    _defaultSelectionUBO;
+    _publishedUBOs = [];
+    locations = {
+        attributes: {
+            a_position: -1,
+            a_xy: -1,
+            a_index: -1,
+            a_color: -1,
+        },
+        uniforms: {
+            u_demTexture: -1,
+            u_demTextureBBOX: -1,
+            u_textureDataCoverRatio: -1,
+            u_style: -1,
+            u_breakLoopIndex: -1,
+        }
+    };
+    constructor(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, uniformBindingPoints.style);
+        this.demTextureManager = DemTextureManagerCache.get(this.globe);
+        this.demTextureManager.assignBindingPoint(this.program, uniformBindingPoints.dem);
+    }
+    createVAO(pos3dBufferInfo, longLatBufferInfo, indexBufferInfo, variativeColorBuffer) {
+        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, {
+            type: this.gl.UNSIGNED_BYTE,
+            integer: true,
+            integerUnsigned: true,
+            escapeValues: [0, 0, 0, 255]
+        });
+        this.gl.bindVertexArray(null);
+        return vao;
+    }
+    createUBO(bufferReadType = "STATIC_DRAW") {
+        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, drawOptions, ubo) {
+        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) {
+        // hardcoded offsets based on std140 layout rules
+        const offsets = {
+            '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) {
+    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) {
+    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);
+}