@pirireis/webglobeplugins 0.15.35 → 0.16.0

package/programs/point-on-globe/element-point-glow.js

@@ -1,22 +1,28 @@
-import { createProgram } from "../../util";
-import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems";
-import { mercatorXYToGLPosition, cartesian3DToGLPosition } from "../../util/shaderfunctions/geometrytransformations";
-import { noRegisterGlobeProgramCache } from "../programcache";
-import { attributeLoader } from "../../util/gl-util/buffer/attribute-loader";
-import { drawArrays } from "../../util/gl-util/draw-options/methods";
-import { UniformBlockManager } from "../../util/gl-util/uniform-block/manager";
-import { singularity } from "../../shaders/fragment-toy/singularity";
-import { firework } from "../../shaders/fragment-toy/firework";
-const cameraBlockBindingPoint = 0;
-const flexibleBlockBindingPoint = 1;
-const uniformBlockManager = new UniformBlockManager("FlexibleBlock", [
-    { name: "u_rgba", type: "vec4", value: new Float32Array([1, 1, 1, 1]) },
-    { name: "u_size_multiplier", type: "float", value: new Float32Array([1.0]) },
-    { name: "u_opacity", type: "float", value: new Float32Array([1.0]) },
-    { name: "u_size", type: "float", value: new Float32Array([1.0]) },
-    { name: "u_minimumSize", type: "float", value: new Float32Array([25.0]) },
-    { name: "u_phase", type: "float", value: new Float32Array([1.0]) },
-], flexibleBlockBindingPoint);
+import { createProgram } from "../../util";
+import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems";
+import { mercatorXYToGLPosition, cartesian3DToGLPosition } from "../../util/shaderfunctions/geometrytransformations";
+import { noRegisterGlobeProgramCache } from "../programcache";
+import { attributeLoader } from "../../util/gl-util/buffer/attribute-loader";
+import { drawArrays } from "../../util/gl-util/draw-options/methods";
+import { UniformBlockManager } from "../../util/gl-util/uniform-block/manager";
+import { singularity } from "../../shaders/fragment-toy/singularity";
+import { firework } from "../../shaders/fragment-toy/firework";
+
+
+const cameraBlockBindingPoint = 0;
+const flexibleBlockBindingPoint = 1;
+
+const uniformBlockManager = new UniformBlockManager(
+    "FlexibleBlock",
+    [
+        { name: "u_rgba", type: "vec4", value: new Float32Array([1, 1, 1, 1]) },
+        { name: "u_size_multiplier", type: "float", value: new Float32Array([1.0]) },
+        { name: "u_opacity", type: "float", value: new Float32Array([1.0]) },
+        { name: "u_size", type: "float", value: new Float32Array([1.0]) },
+        { name: "u_minimumSize", type: "float", value: new Float32Array([25.0]) },
+        { name: "u_phase", type: "float", value: new Float32Array([1.0]) },
+    ], flexibleBlockBindingPoint);
+
 const vs = `#version 300 es
 precision highp float;
 
@@ -53,7 +59,9 @@ void main() {
     vColor = (color.r == -1.0) ? u_rgba : color;
     vColor.a *= u_opacity;
 
-}`;
+}`;
+
+
 const fs = `#version 300 es
 precision highp float;
 
@@ -88,63 +96,89 @@ void main() {
     // fragColor = singularity(gl_PointCoord, u_phase);
 
     fragColor.a *= smoothstep(0.0, 1.1, ( 0.4 * u_opacity + center_alpha +  circle_alpha+ outer_circle_alpha)); 
-}`;
-class Logic {
-    constructor(globe) {
-        this.globe = globe;
-        this.gl = globe.gl;
-        this.program = createProgram(this.gl, vs, fs);
-        const { gl, program } = this;
-        gl.bindAttribLocation(program, 0, "pos3D");
-        gl.bindAttribLocation(program, 1, "pos2D");
-        gl.bindAttribLocation(program, 2, "color");
-        gl.bindAttribLocation(program, 3, "size");
-        // assign uniform block
-        this.cameraBlockTotem = CameraUniformBlockTotemCache.get(globe);
-        this.cameraBlockTotem.assignBindingPoint(program, cameraBlockBindingPoint);
-        uniformBlockManager.assignBindingPoint(this.gl, this.program);
-        this._defaultUBO = uniformBlockManager.createUBO(this.gl);
-    }
-    createVAO(pos3DBuffer, pos2DBuffer, colorBuffer, sizeBuffer) {
-        const { gl } = this;
-        const vao = gl.createVertexArray();
-        gl.bindVertexArray(vao);
-        attributeLoader(gl, pos3DBuffer, 0, 3);
-        attributeLoader(gl, pos2DBuffer, 1, 2);
-        attributeLoader(gl, colorBuffer, 2, 4, { escapeValues: [-1, -1, -1, -1] });
-        attributeLoader(gl, sizeBuffer, 3, 1, { escapeValues: [-1] });
-        gl.bindVertexArray(null);
-        gl.bindBuffer(gl.ARRAY_BUFFER, null);
-        return vao;
-    }
-    createUBO() {
-        const ubo = uniformBlockManager.createUBO(this.gl);
-        return ubo;
-    }
-    draw(vao, drawOptions, ubo = null) {
-        const { gl, program, cameraBlockTotem } = this;
-        gl.useProgram(program);
-        gl.bindVertexArray(vao);
-        cameraBlockTotem.bind(cameraBlockBindingPoint);
-        ubo = ubo || this._defaultUBO;
-        ubo.bind();
-        drawArrays(gl, gl.POINTS, drawOptions);
-        ubo.unbind();
-        gl.bindVertexArray(null);
-        cameraBlockTotem.unbind(cameraBlockBindingPoint);
-        this.globe.DrawRender();
-    }
-    // for singleton cache interation
-    free() {
-        if (this._isFreed)
-            return;
-        CameraUniformBlockTotemCache.release(this.globe);
-        this.gl.deleteProgram(this.program);
-        this._isFreed = true;
-    }
-}
-const ElementPointGlowProgramCache = Object.freeze({
-    get: (globe) => noRegisterGlobeProgramCache.getProgram(globe, Logic),
-    release: globe => noRegisterGlobeProgramCache.releaseProgram(globe, Logic)
-});
-export { ElementPointGlowProgramCache };
+}`;
+
+class Logic {
+
+    constructor(globe) {
+        this.globe = globe;
+        this.gl = globe.gl;
+
+        this.program = createProgram(this.gl, vs, fs);
+
+        const { gl, program } = this;
+
+
+        gl.bindAttribLocation(program, 0, "pos3D");
+        gl.bindAttribLocation(program, 1, "pos2D");
+        gl.bindAttribLocation(program, 2, "color");
+        gl.bindAttribLocation(program, 3, "size");
+        // assign uniform block
+
+        this.cameraBlockTotem = CameraUniformBlockTotemCache.get(globe);
+        this.cameraBlockTotem.assignBindingPoint(program, cameraBlockBindingPoint);
+
+        uniformBlockManager.assignBindingPoint(this.gl, this.program);
+        this._defaultUBO = uniformBlockManager.createUBO(this.gl);
+    }
+
+
+    createVAO(pos3DBuffer, pos2DBuffer, colorBuffer, sizeBuffer) {
+
+        const { gl } = this;
+
+        const vao = gl.createVertexArray();
+        gl.bindVertexArray(vao);
+
+        attributeLoader(gl, pos3DBuffer, 0, 3);
+        attributeLoader(gl, pos2DBuffer, 1, 2);
+        attributeLoader(gl, colorBuffer, 2, 4, { escapeValues: [-1, -1, -1, -1] });
+        attributeLoader(gl, sizeBuffer, 3, 1, { escapeValues: [-1] });
+
+        gl.bindVertexArray(null);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+        return vao;
+    }
+
+
+    createUBO() {
+        const ubo = uniformBlockManager.createUBO(this.gl);
+        return ubo;
+    }
+
+    draw(vao, drawOptions, ubo = null) {
+        const { gl, program, cameraBlockTotem } = this;
+        gl.useProgram(program);
+        gl.bindVertexArray(vao);
+        cameraBlockTotem.bind(cameraBlockBindingPoint);
+
+        ubo = ubo || this._defaultUBO;
+
+        ubo.bind();
+        drawArrays(gl, gl.POINTS, drawOptions);
+        ubo.unbind();
+
+        gl.bindVertexArray(null);
+        cameraBlockTotem.unbind(cameraBlockBindingPoint);
+        this.globe.DrawRender();
+    }
+
+
+
+    // for singleton cache interation
+
+    free() {
+        if (this._isFreed) return;
+        CameraUniformBlockTotemCache.release(this.globe);
+        this.gl.deleteProgram(this.program);
+        this._isFreed = true;
+    }
+}
+
+const ElementPointGlowProgramCache = Object.freeze({
+    get: (globe) => noRegisterGlobeProgramCache.getProgram(globe, Logic),
+    release: globe => noRegisterGlobeProgramCache.releaseProgram(globe, Logic)
+});
+
+export { ElementPointGlowProgramCache };

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

@@ -1,7 +1,9 @@
-import { createProgram } from "../../util";
-import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems";
-import { mercatorXYToGLPosition, cartesian3DToGLPosition } from "../../util/shaderfunctions/geometrytransformations";
-import { noRegisterGlobeProgramCache } from "../programcache";
+import { createProgram } from "../../util";
+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,133 @@ 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.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/texture-dem-triangle-test-plugin.ts

@@ -0,0 +1,120 @@
+import { Globe, BufferAndReadInfo, LongLat, DrawRangeIndexParams } from "../../types";
+import { TextureDemTriangles } from "./texture-dem-triangles";
+/**
+ * Loads a plugin with test data for TextureDemTriangles
+ */
+
+
+const TEST_ITEM_COUNT = 1000000;
+
+
+function createTestLongLatArray(): Float32Array {   
+    const arr = new Float32Array(TEST_ITEM_COUNT * 2);
+    for (let i = 0; i < TEST_ITEM_COUNT; i++) {
+        arr[i * 2 + 0] = Math.random() * 360 - 180; // longitude
+        arr[i * 2 + 1] = Math.random() * 180 - 90;  // latitude
+    }
+    return arr;
+}
+
+function createTestPos3dArray(longLatArray: Float32Array): Float32Array {
+    const arr = new Float32Array(TEST_ITEM_COUNT * 3);
+    for (let i = 0; i < TEST_ITEM_COUNT; i++) {
+        const long = longLatArray[i * 2 + 0] / 180 * Math.PI;
+        const lat = longLatArray[i * 2 + 1] / 180 * Math.PI;
+        // Convert long/lat to 3D position (simplified)
+        arr[i * 3 + 0] = Math.cos(lat) * Math.cos(long);
+        arr[i * 3 + 1] = Math.cos(lat) * Math.sin(long);
+        arr[i * 3 + 2] = Math.sin(lat);
+    }
+    return arr;
+}
+
+
+const createTestBBOXES = (): Array<{northWest: LongLat, southEast: LongLat}> => {
+    const bboxes = [];
+    for (let i = 0; i < 6; i++) {
+        const north = Math.random() * 90; // random latitude
+        const west = Math.random() * -180; // random longitude
+        const south = north - 30; // random latitude
+        const east = west + 30; // random longitude
+        const nw: LongLat = [west, north]; // random northWest
+        const se: LongLat = [east, south]; // random southEast
+        bboxes.push({ northWest: nw, southEast: se });
+    }
+
+    return bboxes;
+};
+
+const createTestDemTextures = (): number[][] => {
+    const textures = [];
+
+    for (let i = 0; i < 6; i++) {
+        const texture = [];
+        for (let j = 0; j < 5 * 5; j++) {
+            const value = 1000 * Math.random(); // random elevation value
+            texture.push(value);
+        }
+        textures.push(texture);
+    }
+    return textures;
+};
+
+
+
+export class TextureDemTrianglesTestPlugin {
+
+    globe: Globe | null = null;
+    textureDemTriangles: TextureDemTriangles | null = null;
+    vao: WebGLVertexArrayObject | null = null;
+    drawOptions: DrawRangeIndexParams | null = null;
+    bufferInfo: { pos3dBufferInfo: BufferAndReadInfo, longLatBufferInfo: BufferAndReadInfo, drawOptions: DrawRangeIndexParams } | null = null;  
+    id: string;
+
+    constructor(id: string) {
+        this.id = id;
+    }
+
+    init (globe: Globe) {
+
+        this.globe = globe;
+        this.textureDemTriangles = new TextureDemTriangles(globe);
+        // set bboxes and dem textures
+        const demTextures = createTestDemTextures();
+        const demTextureBBOX = createTestBBOXES();
+        this.textureDemTriangles.setDemTextures(demTextures, demTextureBBOX);
+        // 
+
+        const bufferInfo =  {
+            pos3dBufferInfo: { 
+                buffer: globe.gl.createBuffer()!,
+                stride: 0,
+                offset: 0,
+             },
+            longLatBufferInfo: { 
+                buffer: globe.gl.createBuffer()!,
+                stride: 0,
+                offset: 0,
+            },
+            drawOptions: { drawRange: { count: TEST_ITEM_COUNT, first: 0} }
+       };
+
+        this.vao = this.textureDemTriangles.createVAO(bufferInfo.pos3dBufferInfo, bufferInfo.longLatBufferInfo);
+        
+        const gl = globe.gl;
+        const longLatArray = createTestLongLatArray();
+        const pos3dArray = createTestPos3dArray(longLatArray);
+        gl.bindBuffer(gl.ARRAY_BUFFER, bufferInfo.pos3dBufferInfo.buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, pos3dArray, gl.STATIC_DRAW);
+        gl.bindBuffer(gl.ARRAY_BUFFER, bufferInfo.longLatBufferInfo.buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, longLatArray, gl.STATIC_DRAW);
+
+        this.bufferInfo = bufferInfo;
+    }
+
+       
+    draw3D(){
+        if (!this.globe || !this.textureDemTriangles || !this.vao || !this.bufferInfo) return;
+        this.textureDemTriangles.draw(this.vao, this.bufferInfo.drawOptions);
+    }
+}