@pirireis/webglobeplugins 1.0.2 → 1.0.4

package/webglobeplugins/util/gl-util/buffer/attribute-loader.js

@@ -0,0 +1,74 @@
+/**
+ * @typedef BufferAndReadInfo Buffers can be intertwined or interleaved.
+ * This object forces user to adapt generic convention of buffer and read information.
+ * @type {Object}
+ * @property {WebGLBuffer} buffer
+ * @property {number} stride
+ * @property {number} offset
+ */
+/**
+ *
+ * @param {WebGLBuffer} gl
+ * @param {BufferAndReadInfo} bufferAndReadInfo
+ * @param {number} index
+ * @param {number} size
+ * @param {Object} options
+ * @param {*} options.type | default gl.FLOAT, gl.UNSIGNED_BYTE, gl.SHORT, gl.UNSIGNED_SHORT, gl.INT, gl.UNSIGNED_INT
+ * @param {number} options.divisor
+ * @param {Array<number>} options.escapeValues
+ * @returns
+ */
+const attributeLoader = (gl, bufferAndReadInfo, index, size, { divisor = null, type = null, escapeValues = null, normalized = false, integer = false, integerUnsigned = true, } = {}) => {
+    if (bufferAndReadInfo == null || bufferAndReadInfo.buffer == null) {
+        if (escapeValues)
+            constantFunction(gl, index, size, escapeValues, integer, integerUnsigned);
+        return;
+    }
+    const { buffer, stride, offset } = bufferAndReadInfo;
+    if (!gl || !buffer) {
+        throw new Error("Invalid WebGL context or buffer");
+    }
+    if (index < 0) {
+        throw new Error("Attribute index must be non-negative");
+    }
+    if (stride < 0 || offset < 0) {
+        throw new Error("Stride and offset must be non-negative");
+    }
+    const attribType = type === null ? gl.FLOAT : type;
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.enableVertexAttribArray(index);
+    if (integer) {
+        gl.vertexAttribIPointer(index, size, attribType, stride, offset);
+    }
+    else {
+        gl.vertexAttribPointer(index, size, attribType, normalized, stride, offset);
+    }
+    if (divisor !== null) {
+        gl.vertexAttribDivisor(index, divisor);
+    }
+};
+/**
+ *
+ * @param {WebGLBuffer} buffer
+ * @param {number} stride
+ * @param {number} offset
+ * @returns {BufferAndReadInfo}
+ */
+const createBufferAndReadInfo = (buffer, stride = 0, offset = 0) => {
+    if (buffer == null)
+        return null;
+    return { buffer, stride, offset };
+};
+const constantFunction = (gl, index, size, escapeValues, integer, integerUnsigned) => {
+    if (!integer) {
+        const func = `vertexAttrib${size}f`;
+        // @ts-ignore
+        gl[func](index, ...escapeValues);
+        return;
+    }
+    const values = escapeValues.map((v) => Math.trunc(v));
+    const func = integerUnsigned ? `vertexAttribI${size}ui` : `vertexAttribI${size}i`;
+    // @ts-ignore
+    gl[func](index, ...values);
+};
+export { attributeLoader, createBufferAndReadInfo };

package/{util/gl-util/buffer/index.ts → webglobeplugins/util/gl-util/buffer/index.js}

@@ -1,6 +1,3 @@
-// import './types';
-
-import { attributeLoader } from './attribute-loader';
-
-
-export { attributeLoader };
+// import './types';
+import { attributeLoader } from './attribute-loader';
+export { attributeLoader };

package/{util/gl-util/draw-options/methods.ts → webglobeplugins/util/gl-util/draw-options/methods.js}

@@ -1,47 +1,32 @@
-import { DrawRangeIndexParams } from "../../../types"
-/**
- * Draws instanced geometry using WebGL2.
- */
-const drawInstanced = (
-    gl: WebGL2RenderingContext,
-    mode: GLenum,
-    drawOptions: DrawRangeIndexParams,
-    vertexCount: number
-): void => {
-    const { drawRange, elementBufferIndexType = gl.UNSIGNED_INT } = drawOptions;
-    const { first = 0, count } = drawRange;
-    if (drawOptions.elementBuffer) {
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, drawOptions.elementBuffer ?? null);
-        gl.drawElementsInstanced(mode, vertexCount, elementBufferIndexType, first, count);
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
-    } else {
-        gl.drawArraysInstanced(mode, first, vertexCount, count);
-    }
-}
-
-/**
- * Draws geometry using WebGL2.
- */
-const drawArrays = (
-    gl: WebGL2RenderingContext,
-    defaultMode: GLenum,
-    drawOptions: DrawRangeIndexParams
-): void => {
-    const {
-        drawRange,
-        elementBuffer,
-        elementBufferIndexType = gl.UNSIGNED_INT,
-        drawMode = null
-    } = drawOptions;
-    const { first = 0, count } = drawRange;
-    const mode = drawMode ?? defaultMode;
-    if (elementBuffer) {
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elementBuffer);
-        gl.drawElements(mode, count, elementBufferIndexType, first);
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
-    } else {
-        gl.drawArrays(mode, first, count);
-    }
-}
-
-export { drawArrays, drawInstanced }
+/**
+ * Draws instanced geometry using WebGL2.
+ */
+const drawInstanced = (gl, mode, drawOptions, vertexCount) => {
+    const { drawRange, elementBufferIndexType = gl.UNSIGNED_INT } = drawOptions;
+    const { first = 0, count } = drawRange;
+    if (drawOptions.elementBuffer) {
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, drawOptions.elementBuffer ?? null);
+        gl.drawElementsInstanced(mode, vertexCount, elementBufferIndexType, first, count);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+    }
+    else {
+        gl.drawArraysInstanced(mode, first, vertexCount, count);
+    }
+};
+/**
+ * Draws geometry using WebGL2.
+ */
+const drawArrays = (gl, defaultMode, drawOptions) => {
+    const { drawRange, elementBuffer, elementBufferIndexType = gl.UNSIGNED_INT, drawMode = null } = drawOptions;
+    const { first = 0, count } = drawRange;
+    const mode = drawMode ?? defaultMode;
+    if (elementBuffer) {
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elementBuffer);
+        gl.drawElements(mode, count, elementBufferIndexType, first);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+    }
+    else {
+        gl.drawArrays(mode, first, count);
+    }
+};
+export { drawArrays, drawInstanced };

package/{util/gl-util/uniform-block/manager.ts → webglobeplugins/util/gl-util/uniform-block/manager.js}

@@ -1,232 +1,209 @@
-import { UBOHandler } from "../../../types";
-
-
-
-const typeSizes = {
-    'float': 4,
-    'vec2': 8,
-    'vec3': 16,  // vec3 takes up same space as vec4 due to alignment
-    'vec4': 16,
-    'mat2': 32,  // 2 vec4s (16 * 2)
-    'mat3': 48,  // 3 vec4s (16 * 3)
-    'mat4': 64,  // 4 vec4s (16 * 4)
-    'int': 4,
-    'ivec2': 8,
-    'ivec3': 16,
-    'ivec4': 16,
-    'uvec4': 16,
-    'uint': 4,
-    'bool': 4,
-};
-
-const typeAlignments = {
-    'float': 4,
-    'vec2': 8,
-    'vec3': 16,
-    'vec4': 16,
-    'mat2': 16,  // aligns to vec4 boundary
-    'mat3': 16,  // aligns to vec4 boundary
-    'mat4': 16,  // aligns to vec4 boundary
-    'int': 4,
-    'ivec2': 8,
-    'ivec3': 16,
-    'ivec4': 16,
-    'uvec4': 16,
-    'uint': 4,
-    'bool': 4,
-};
-
-
-const typeArrayConstructors = {
-    'float': Float32Array,
-    'vec2': Float32Array,
-    'vec3': Float32Array,
-    'vec4': Float32Array,
-    'mat2': Float32Array,
-    'mat3': Float32Array,
-    'mat4': Float32Array,
-    'int': Int32Array,
-    'ivec2': Int32Array,
-    'ivec3': Int32Array,
-    'ivec4': Int32Array,
-    'bool': Float32Array,
-    'uint': Uint32Array,
-    'uvec2': Uint32Array,
-    'uvec3': Uint32Array,
-    'uvec4': Uint32Array,
-
-};
-
-type UniformBlockMember = {
-    name: string;
-    type: keyof typeof typeSizes;
-    value: Float32Array | Int32Array | Uint32Array | ArrayBuffer | DataView | null;
-};
-
-type NameValueMap = Map<string, Float32Array | Int32Array | Uint32Array | ArrayBuffer | DataView>;
-
-type UniformBlockName = string;
-
-// TODO: the input types should be all same for a single block.
-// no need to ask for typed array constructor in the constructor
-// eacher remove it and raise error when different types are used in the same block
-// or implicitly manage multiple blocks with different types
-
-
-export class UniformBlockManager {
-
-    /**
-     * 
-     * @param {UniformBlockName} blockName 
-     * @param {Array<UniformBlockMember} blockMembers 
-     * @param {string} prefix usage name of block in the shader 
-     */
-
-    blockName: string;
-    blockMembers: Array<UniformBlockMember>;
-    bindingPoint: number;
-    prefix: string;
-    offsetMap: Map<string, number>;
-    size: number;
-
-    constructor(blockName: string, blockMembers: Array<UniformBlockMember>, bindingPoint: number, prefix: string = "") {
-        this.blockName = blockName;
-        this.blockMembers = blockMembers;
-        this.bindingPoint = bindingPoint;
-        this.prefix = prefix;
-        this.offsetMap = this.__create_LayoutSTD140_OffsetMap();
-        this.size = this.__calculateSize();
-    }
-
-
-
-    glslCode() {
-        let code = `layout(std140) uniform ${this.blockName} {`;
-        for (const member of this.blockMembers) {
-            const { name, type } = member;
-            code += `${type} ${this.prefix}${name};`;
-        }
-        if (this.prefix) {
-            code += `} ${this.prefix};`;
-        } else {
-            code += `};`;
-        }
-        return code;
-    }
-
-
-    createUBO(gl: WebGL2RenderingContext, bufferWriteType: string = "STATIC_DRAW"): UBOHandler {
-        const ubo = gl.createBuffer();
-        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
-        // @ts-ignore
-        gl.bufferData(gl.UNIFORM_BUFFER, this.size, gl[bufferWriteType]);
-        gl.bindBufferBase(gl.UNIFORM_BUFFER, 0, ubo);
-
-        for (const member of this.blockMembers) {
-            const { name, type, value = null } = member;;
-            const offset = this.offsetMap.get(name) as number;
-            const data = (value === null) ? new typeArrayConstructors[type](typeSizes[type] / 4).fill(NaN) : value;
-            gl.bufferSubData(gl.UNIFORM_BUFFER, offset, data);
-        }
-        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
-
-        return { // TODO typedef this, encapsulate this in a class or something, ask ai
-            ubo,
-            update: (nameValueMap: NameValueMap) => this.updateUBO(gl, ubo, nameValueMap),
-            updateSingle: (key: string, value: Float32Array | Int32Array | Uint32Array | ArrayBuffer | DataView) => this.updateUboSingle(gl, ubo, key, value),
-            bind: () => this.bind(gl, ubo),
-            unbind: () => this.unbind(gl),
-            free: () => gl.deleteBuffer(ubo),
-        };
-    }
-
-    updateUboSingle(gl: WebGL2RenderingContext, ubo: WebGLBuffer, key: string, value: Float32Array | Int32Array | Uint32Array | ArrayBuffer | DataView) { // TEST THIS
-        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
-        const offset = this.offsetMap.get(key);
-        if (offset === undefined) {
-            throw new Error(`Uniform block member ${key} not found in offset map.\nPossible members: ${Array.from(this.offsetMap.keys()).join(", ")}`);
-        }
-        const memberType = this.blockMembers.find(member => member.name === key)!.type;
-        let data: Float32Array | Int32Array | Uint32Array | ArrayBuffer | DataView;
-        if (Array.isArray(value)) {
-            data = new typeArrayConstructors[memberType](value);
-        } else if (typeof value === 'number') {
-            data = new typeArrayConstructors[memberType]([value]);
-        } else if (value instanceof ArrayBuffer) {
-            data = new typeArrayConstructors[memberType](value);
-        } else if (ArrayBuffer.isView(value) && !(value instanceof DataView)) {
-            data = (typeof value === 'number') ? new typeArrayConstructors[memberType]([value]) : new typeArrayConstructors[memberType](value);
-        } else {
-            throw new Error(`Unsupported value type for ${key}: ${typeof value}.\n Supported types are: number, Array, ArrayBuffer, TypedArray.`);
-        }
-        gl.bufferSubData(gl.UNIFORM_BUFFER, offset, data);
-        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
-
-    }
-
-    updateUBO(gl: WebGL2RenderingContext, ubo: WebGLBuffer, nameValueMap: NameValueMap) {
-        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
-        for (const [name, value] of nameValueMap.entries()) {
-            const offset = this.offsetMap.get(name);
-            if (offset === undefined) {
-                throw new Error(`Uniform block member ${name} not found in offset map.\nPossible members: ${Array.from(this.offsetMap.keys()).join(", ")}`);
-            }
-            const type = this.blockMembers.find(member => member.name === name)!.type;
-            let data: Float32Array | Int32Array | Uint32Array | ArrayBuffer | DataView;
-            if (Array.isArray(value)) {
-                data = new typeArrayConstructors[type](value);
-            } else if (typeof value === 'number') {
-                data = new typeArrayConstructors[type]([value]);
-            } else if (value instanceof ArrayBuffer) {
-                data = new typeArrayConstructors[type](value);
-            } else if (ArrayBuffer.isView(value) && !(value instanceof DataView))
-                data = (typeof value === 'number') ? new typeArrayConstructors[type]([value]) : new typeArrayConstructors[type](value);
-            else {
-                throw new Error(`Unsupported value type for ${name}: ${typeof value}.\n Supported types are: number, Array, ArrayBuffer, TypedArray.`);
-            }
-            gl.bufferSubData(gl.UNIFORM_BUFFER, offset, data);
-        }
-        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
-    }
-
-    // call this after linking the program
-    assignBindingPoint(gl: WebGL2RenderingContext, program: WebGLProgram) { // TODO: this can cause bugs on multiglobe
-        const blockIndex = gl.getUniformBlockIndex(program, this.blockName);
-        gl.uniformBlockBinding(program, blockIndex, this.bindingPoint);
-    }
-
-    // call this before drawing
-    bind(gl: WebGL2RenderingContext, ubo: WebGLBuffer) {
-        gl.bindBufferBase(gl.UNIFORM_BUFFER, this.bindingPoint, ubo);
-    }
-
-    // call this right after drawing
-    unbind(gl: WebGL2RenderingContext) {
-        gl.bindBufferBase(gl.UNIFORM_BUFFER, this.bindingPoint, null);
-    }
-
-
-    // implicit methods
-    __create_LayoutSTD140_OffsetMap(): Map<string, number> {
-        let offset = 0;
-        const offsetMap = new Map();
-        for (const member of this.blockMembers) {
-            const { name, type } = member;
-            const size = typeSizes[type];
-            const alignment = typeAlignments[type];
-            const padding = (alignment - (offset % alignment)) % alignment;
-            offset += padding;
-            offsetMap.set(name, offset);
-            offset += size;
-        }
-        return offsetMap;
-    }
-
-    // __create_LayoutSTD140_OffsetMap() should be called before this
-    __calculateSize() {
-        const lastOffset = Array.from(this.offsetMap.values()).pop() as number || 0;
-        const lastItemAlignment = typeAlignments[this.blockMembers[this.blockMembers.length - 1].type];
-        return lastOffset + lastItemAlignment;
-    }
-
-}
+const typeSizes = {
+    'float': 4,
+    'vec2': 8,
+    'vec3': 16, // vec3 takes up same space as vec4 due to alignment
+    'vec4': 16,
+    'mat2': 32, // 2 vec4s (16 * 2)
+    'mat3': 48, // 3 vec4s (16 * 3)
+    'mat4': 64, // 4 vec4s (16 * 4)
+    'int': 4,
+    'ivec2': 8,
+    'ivec3': 16,
+    'ivec4': 16,
+    'uvec4': 16,
+    'uint': 4,
+    'bool': 4,
+};
+const typeAlignments = {
+    'float': 4,
+    'vec2': 8,
+    'vec3': 16,
+    'vec4': 16,
+    'mat2': 16, // aligns to vec4 boundary
+    'mat3': 16, // aligns to vec4 boundary
+    'mat4': 16, // aligns to vec4 boundary
+    'int': 4,
+    'ivec2': 8,
+    'ivec3': 16,
+    'ivec4': 16,
+    'uvec4': 16,
+    'uint': 4,
+    'bool': 4,
+};
+const typeArrayConstructors = {
+    'float': Float32Array,
+    'vec2': Float32Array,
+    'vec3': Float32Array,
+    'vec4': Float32Array,
+    'mat2': Float32Array,
+    'mat3': Float32Array,
+    'mat4': Float32Array,
+    'int': Int32Array,
+    'ivec2': Int32Array,
+    'ivec3': Int32Array,
+    'ivec4': Int32Array,
+    'bool': Float32Array,
+    'uint': Uint32Array,
+    'uvec2': Uint32Array,
+    'uvec3': Uint32Array,
+    'uvec4': Uint32Array,
+};
+// TODO: the input types should be all same for a single block.
+// no need to ask for typed array constructor in the constructor
+// eacher remove it and raise error when different types are used in the same block
+// or implicitly manage multiple blocks with different types
+export class UniformBlockManager {
+    /**
+     *
+     * @param {UniformBlockName} blockName
+     * @param {Array<UniformBlockMember} blockMembers
+     * @param {string} prefix usage name of block in the shader
+     */
+    blockName;
+    blockMembers;
+    bindingPoint;
+    prefix;
+    offsetMap;
+    size;
+    constructor(blockName, blockMembers, bindingPoint, prefix = "") {
+        this.blockName = blockName;
+        this.blockMembers = blockMembers;
+        this.bindingPoint = bindingPoint;
+        this.prefix = prefix;
+        this.offsetMap = this.__create_LayoutSTD140_OffsetMap();
+        this.size = this.__calculateSize();
+    }
+    glslCode() {
+        let code = `layout(std140) uniform ${this.blockName} {`;
+        for (const member of this.blockMembers) {
+            const { name, type } = member;
+            code += `${type} ${this.prefix}${name};`;
+        }
+        if (this.prefix) {
+            code += `} ${this.prefix};`;
+        }
+        else {
+            code += `};`;
+        }
+        return code;
+    }
+    createUBO(gl, bufferWriteType = "STATIC_DRAW") {
+        const ubo = gl.createBuffer();
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        // @ts-ignore
+        gl.bufferData(gl.UNIFORM_BUFFER, this.size, gl[bufferWriteType]);
+        // bind to the configured binding point, not zero
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, this.bindingPoint, ubo);
+        for (const member of this.blockMembers) {
+            const { name, type, value = null } = member;
+            ;
+            const offset = this.offsetMap.get(name);
+            const data = (value === null) ? new typeArrayConstructors[type](typeSizes[type] / 4).fill(NaN) : value;
+            gl.bufferSubData(gl.UNIFORM_BUFFER, offset, data);
+        }
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+        return {
+            ubo,
+            update: (nameValueMap) => this.updateUBO(gl, ubo, nameValueMap),
+            updateSingle: (key, value) => this.updateUboSingle(gl, ubo, key, value),
+            bind: () => this.bind(gl, ubo),
+            unbind: () => this.unbind(gl),
+            free: () => gl.deleteBuffer(ubo),
+        };
+    }
+    updateUboSingle(gl, ubo, key, value) {
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        const offset = this.offsetMap.get(key);
+        if (offset === undefined) {
+            throw new Error(`Uniform block member ${key} not found in offset map.\nPossible members: ${Array.from(this.offsetMap.keys()).join(", ")}`);
+        }
+        const memberType = this.blockMembers.find(member => member.name === key).type;
+        let data;
+        if (Array.isArray(value)) {
+            data = new typeArrayConstructors[memberType](value);
+        }
+        else if (typeof value === 'number') {
+            data = new typeArrayConstructors[memberType]([value]);
+        }
+        else if (value instanceof ArrayBuffer) {
+            data = new typeArrayConstructors[memberType](value);
+        }
+        else if (ArrayBuffer.isView(value) && !(value instanceof DataView)) {
+            data = (typeof value === 'number') ? new typeArrayConstructors[memberType]([value]) : new typeArrayConstructors[memberType](value);
+        }
+        else {
+            throw new Error(`Unsupported value type for ${key}: ${typeof value}.\n Supported types are: number, Array, ArrayBuffer, TypedArray.`);
+        }
+        gl.bufferSubData(gl.UNIFORM_BUFFER, offset, data);
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }
+    updateUBO(gl, ubo, nameValueMap) {
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        for (const [name, value] of nameValueMap.entries()) {
+            const offset = this.offsetMap.get(name);
+            if (offset === undefined) {
+                throw new Error(`Uniform block member ${name} not found in offset map.\nPossible members: ${Array.from(this.offsetMap.keys()).join(", ")}`);
+            }
+            const type = this.blockMembers.find(member => member.name === name).type;
+            let data;
+            if (Array.isArray(value)) {
+                data = new typeArrayConstructors[type](value);
+            }
+            else if (typeof value === 'number') {
+                data = new typeArrayConstructors[type]([value]);
+            }
+            else if (value instanceof ArrayBuffer) {
+                data = new typeArrayConstructors[type](value);
+            }
+            else if (ArrayBuffer.isView(value) && !(value instanceof DataView))
+                data = (typeof value === 'number') ? new typeArrayConstructors[type]([value]) : new typeArrayConstructors[type](value);
+            else {
+                throw new Error(`Unsupported value type for ${name}: ${typeof value}.\n Supported types are: number, Array, ArrayBuffer, TypedArray.`);
+            }
+            gl.bufferSubData(gl.UNIFORM_BUFFER, offset, data);
+        }
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }
+    // call this after linking the program
+    assignBindingPoint(gl, program) {
+        const blockIndex = gl.getUniformBlockIndex(program, this.blockName);
+        gl.uniformBlockBinding(program, blockIndex, this.bindingPoint);
+    }
+    // call this before drawing
+    bind(gl, ubo) {
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, this.bindingPoint, ubo);
+    }
+    // call this right after drawing
+    unbind(gl) {
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, this.bindingPoint, null);
+    }
+    // implicit methods
+    __create_LayoutSTD140_OffsetMap() {
+        let offset = 0;
+        const offsetMap = new Map();
+        for (const member of this.blockMembers) {
+            const { name, type } = member;
+            const size = typeSizes[type];
+            const alignment = typeAlignments[type];
+            const padding = (alignment - (offset % alignment)) % alignment;
+            offset += padding;
+            offsetMap.set(name, offset);
+            offset += size;
+        }
+        return offsetMap;
+    }
+    // __create_LayoutSTD140_OffsetMap() should be called before this
+    __calculateSize() {
+        // compute size as last member's offset + its actual std140 size,
+        // then round the total block size up to a 16-byte multiple per std140.
+        if (this.blockMembers.length === 0)
+            return 0;
+        const names = Array.from(this.offsetMap.keys());
+        const lastName = names[names.length - 1];
+        const lastOffset = this.offsetMap.get(lastName);
+        const lastType = this.blockMembers[this.blockMembers.length - 1].type;
+        const rawSize = lastOffset + typeSizes[lastType];
+        const paddedSize = (rawSize + 15) & ~15; // round up to multiple of 16
+        return paddedSize;
+    }
+}

package/{util/globe-default-gl-states.ts → webglobeplugins/util/globe-default-gl-states.js}

@@ -1,5 +1,4 @@
-
-export function defaultblendfunction(gl: WebGL2RenderingContext): void {
-    gl.blendEquation(gl.FUNC_ADD); // TODO: TESTING THIS
-    gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
-}
+export function defaultblendfunction(gl) {
+    gl.blendEquation(gl.FUNC_ADD); // TODO: TESTING THIS
+    gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+}

package/{util/helper-methods.ts → webglobeplugins/util/helper-methods.js}

@@ -1,9 +1,8 @@
-export function hashColorTo4IntArray(pickedColor: string): [number, number, number, number] {
-
-    const pickedHex = pickedColor.replace('#', '');
-    const pickedR = parseInt(pickedHex.substring(0, 2), 16) / 255;
-    const pickedG = parseInt(pickedHex.substring(2, 4), 16) / 255;
-    const pickedB = parseInt(pickedHex.substring(4, 6), 16) / 255;
-    const pickedA = parseInt(pickedHex.substring(6, 8) || 'FF', 16) / 255;
-    return [pickedR, pickedG, pickedB, pickedA];
-}
+export function hashColorTo4IntArray(pickedColor) {
+    const pickedHex = pickedColor.replace('#', '');
+    const pickedR = parseInt(pickedHex.substring(0, 2), 16) / 255;
+    const pickedG = parseInt(pickedHex.substring(2, 4), 16) / 255;
+    const pickedB = parseInt(pickedHex.substring(4, 6), 16) / 255;
+    const pickedA = parseInt(pickedHex.substring(6, 8) || 'FF', 16) / 255;
+    return [pickedR, pickedG, pickedB, pickedA];
+}