@pirireis/webglobeplugins 0.9.1 → 0.9.3

package/tests/Math/junction/arc-plane.test.ts

@@ -0,0 +1,129 @@
+import { Plane, Line, Vec3, Quaternion } from '../../../Math/types';
+import { plane } from '../../../Math/plane';
+import { line } from '../../../Math/line';
+import { arc } from '../../../Math/arc';
+import { vec3 } from '../../../Math/vec3';
+import { quaternion } from '../../../Math/quaternion';
+import { planePlaneJuction } from '../../../Math/juction/plane-plane';
+import { arcSlice } from '../../../Math/juction/arc-plane';
+import { EPSILON } from '../../../Math/constants';
+
+
+const arcIn = arc.create(vec3.create(0, 0, 1), vec3.create(1, 0, 0));
+const arcOut = arc.create(vec3.create(0, 0, 1), vec3.create(1, 0, 0));
+const arcExpected = arc.create(vec3.create(0, 0, 1), vec3.create(1, 0, 0));
+const junctionPlane = plane.create(vec3.create(0, 0, 1), 0);
+
+const r2 = Math.sqrt(2) / 2;
+const r3 = Math.sqrt(3) / 3;
+
+beforeAll(() => {
+    // Initialize any necessary data or state before running the tests
+    arc.set(arcIn, vec3.create(0, 0, 1), vec3.create(1, 0, 0));
+    arc.set(arcOut, vec3.create(0, 0, 1), vec3.create(1, 0, 0));
+
+    plane.set(junctionPlane, vec3.create(0, 0, 1), 0);
+
+});
+
+
+
+
+
+test('arcSlice - No intersection 1', () => {
+    junctionPlane.distance = 2; // Set distance to ensure no intersection
+    const result = arcSlice(arcOut, arcIn, junctionPlane);
+    expect(result).toBe(false);
+});
+
+
+
+test('arcSlice - Full intersection 1', () => {
+    junctionPlane.distance = 0; // Set distance to ensure full intersection
+    const result = arcSlice(arcOut, arcIn, junctionPlane);
+    expect(result).toBe(true);
+    const isEqual = arc.equals(arcOut, arcExpected);
+    expect(isEqual).toBe(true);
+});
+
+
+test('arcSlice-1', () => {
+    // Set up a case where the arc intersects with the plane
+
+
+    const r3 = Math.sqrt(3);
+    const juctionNormal = vec3.create(r3, r3, r3);
+
+    plane.set(junctionPlane, juctionNormal, 0);
+
+    const result = arcSlice(arcOut, arcIn, junctionPlane);
+    expect(result).toBe(true);
+});
+
+
+test('arcSlice - Plane intersection line is out of sphere', () => {
+    // Set up a case where the arc intersects with the plane
+
+    const point1 = vec3.create(0, 1, 0);
+    const point2 = vec3.create(0, 0, 1);
+    arc.set(arcIn, point1, point2);
+
+    const juctionNormal = vec3.create(r3, r3, r3);
+
+    const closestPoint = vec3.create(r2, r2, 0);
+    const distance = vec3.dot(juctionNormal, closestPoint) + EPSILON;
+    plane.set(junctionPlane, juctionNormal, distance);
+
+    const result = arcSlice(arcOut, arcIn, junctionPlane);
+    expect(result).toBe(false);
+});
+
+
+test("arcSlice - Planes are parallel", () => {
+
+    const point1 = vec3.create(0, 1, 0);
+    const point2 = vec3.create(0, 0, 1);
+    arc.set(arcIn, point1, point2);
+
+    plane.fromValues(junctionPlane, 1, 0, 0, 0.3); // Set a plane parallel to the arc's normal
+    const result = arcSlice(arcOut, arcIn, junctionPlane);
+    expect(result).toBe(false); // Expect no intersection
+
+    junctionPlane.distance = -0.3;
+
+    const result2 = arcSlice(arcOut, arcIn, junctionPlane);
+    expect(result2).toBe(true); // Expect no intersection
+    const isEqual = arc.equals(arcOut, arcIn);
+    expect(isEqual).toBe(true); // Expect the output arc to be equal to the input arc
+});
+
+
+test("arcSlice - Arc sliced in half", () => {
+
+    const point1 = vec3.create(0, 1, 0);
+    const point2 = vec3.create(0, 0, 1);
+    arc.set(arcIn, point1, point2);
+
+    expect(vec3.equals(arcIn.normal, vec3.create(1, 0, 0))).toBe(true); // Arc normal should be (1, 0, 0)
+
+    plane.fromValues(junctionPlane, 0, -r2, r2, 0); // Set a plane parallel to the arc's normal
+
+    const result = arcSlice(arcOut, arcIn, junctionPlane);
+    expect(result).toBe(true); // Expect an intersection
+    const expectedPoint1 = vec3.create(0, r2, r2);
+    const expectedPoint2 = vec3.create(0, 0, 1);
+    arc.set(arcExpected, expectedPoint1, expectedPoint2);
+    const isEqual = arc.equals(arcOut, arcExpected);
+    expect(isEqual).toBe(true); // Expect the output arc to be equal to the expected arc
+});
+
+
+// test("arcSlice - Arc sliced in middle", () => {
+//     const point1 = vec3.create(0, 1, 0);
+//     const point2 = vec3.create(0, 0, 1);
+//     arc.set(arcIn, point1, point2);
+
+
+//     plane.fromValues(junctionPlane, 0, r2, r2, )
+
+// });

package/tests/Math/junction/plane-plane.test.ts

@@ -0,0 +1,82 @@
+import { Plane, Line, Vec3, Quaternion } from '../../../Math/types';
+import { plane } from '../../../Math/plane';
+import { line } from '../../../Math/line';
+import { vec3 } from '../../../Math/vec3';
+import { quaternion } from '../../../Math/quaternion';
+import { planePlaneJuction } from '../../../Math/juction/plane-plane';
+
+
+let plane1: Plane;
+let plane2: Plane;
+let intersectionLine: Line;
+let quaternion1: Quaternion;
+
+beforeAll(() => {
+    plane1 = plane.create();
+    plane2 = plane.create();
+    intersectionLine = line.create();
+    quaternion1 = quaternion.create();
+});
+
+
+test('plane-plane intersection - parallel planes', () => {
+    plane.fromValues(plane1, 0, 0, 1, 5); // Plane: z = 5
+    plane.fromValues(plane2, 0, 0, 1, 10); // Plane: z = 10
+    const result = planePlaneJuction(intersectionLine, plane1, plane2);
+    expect(result).toBe(false);
+});
+
+test('plane-plane intersection - intersecting planes', () => {
+    plane.fromValues(plane1, 0, 0, 1, 5); // Plane: z = 5
+    plane.fromValues(plane2, 1, 0, 0, 3); // Plane: x = 3
+
+    const result = planePlaneJuction(intersectionLine, plane1, plane2);
+    expect(result).toBe(true);
+    expect(vec3.equals(intersectionLine.direction, vec3.create(0, 1, 0))).toBe(true);
+    expect(vec3.equals(intersectionLine.origin, vec3.create(3, 0, 5))).toBe(true);
+});
+
+
+test('plane-plane intersection - rotating a plane', () => {
+    // plane1 z = 5
+    plane.fromValues(plane1, 0, 0, 1, 5);
+
+    // plane2 x = 3, for the start
+    vec3.randomUnit(plane2.normal);
+    plane2.distance = 3;
+
+    const result = planePlaneJuction(intersectionLine, plane1, plane2);
+    expect(result).toBe(true);
+    const quaRotateLine = line.clone(intersectionLine);
+
+    const step = 90;
+    quaternion.fromAxisAngle(quaternion1, plane1.normal, Math.PI / step); // Rotate 90 degrees around Y-axis
+
+
+    for (let i = 0; i < step; i++) {
+
+        vec3.applyQuaternion(plane2.normal, plane2.normal, quaternion1);
+
+        const result = planePlaneJuction(intersectionLine, plane1, plane2);
+
+
+        line.applyQuaternion(quaRotateLine, quaRotateLine, quaternion1);
+
+        expect(result).toBe(true);
+        expect(vec3.equals(intersectionLine.direction, quaRotateLine.direction)).toBe(true);
+        expect(line.contains(intersectionLine, quaRotateLine.origin)).toBe(true);
+    }
+});
+
+test("plane-plane intersection 1", () => {
+    const r2 = Math.sqrt(2) / 2;
+    plane.fromValues(plane1, 1, 0, 0, 0);
+    plane.fromValues(plane2, 0, -r2, r2, 0);
+    const result = planePlaneJuction(intersectionLine, plane1, plane2);
+
+    expect(result).toBe(true);
+    console.log(intersectionLine);
+    expect(vec3.equals(intersectionLine.direction, vec3.create(0, r2, r2)) || vec3.equals(intersectionLine.direction, vec3.create(0, -r2, -r2))
+    ).toBe(true);
+    expect(line.contains(intersectionLine, vec3.create(0, 0, 0))).toBe(true);
+});

package/tests/Math/plane.test.ts

@@ -1,45 +1,43 @@
-import { Plane } from '../../Math/plane';
-import { Vector3D } from '../../Math/vector3d';
-import { Ray } from '../../Math/ray';
+import { Plane, Vec3 } from "../../Math/types";
+import { vec3 } from "../../Math/vec3";
+import { plane } from "../../Math/plane";
 
 
-const _0vector: Vector3D = new Vector3D(0, 0, 1);
-const _1vector: Vector3D = new Vector3D(0, 0, 1);
-const _3vector: Vector3D = new Vector3D(0, 0, 1);
-const _0ray: Ray = new Ray(new Vector3D(0, 0, 0), new Vector3D(1, 0, 0));;
-const _0plane: Plane = new Plane(new Vector3D(1, 0, 0), 0);;
-const _1plane: Plane = new Plane(new Vector3D(1, 0, 0), 0);;
-
+const _planeA = /*@__PURE__*/ plane.create(vec3.create(1, 0, 0), 0);
+const _planeB = /*@__PURE__*/ plane.create(vec3.create(0, 1, 0), 0);
+const _vecA = /*@__PURE__*/ vec3.create(1, 0, 0);
 
 beforeAll(() => {
-    _0vector.randomUnit();
-    _1vector.randomUnit();
-    _3vector.randomUnit();
-    _0plane.setFromPoints(_0vector, _1vector, _3vector);
-    _3vector.randomUnit();
-    _1plane.setFromPoints(_0vector, _1vector, _3vector);
+    vec3.set(_vecA, 1, 0, 0);
+    plane.set(_planeA, vec3.create(1, 0, 0), 0);
+    plane.set(_planeB, vec3.create(0, 1, 0), 0);
 });
 
+test("Plane: getUnitSphereRadiusAngle", () => {
+    const angleA = plane.getUnitSphereRadiusAngle(_planeA);
+    const angleB = plane.getUnitSphereRadiusAngle(_planeB);
 
-
-
-test("Plane Intersection => Ray", () => {
-    let result = Ray.fromTwoPlanes(_0plane, _1plane, _0ray);
-    expect(result).toBeInstanceOf(Ray);
-    if (result) {
-        expect(_0ray.contains(_0vector)).toBe(true);
-        expect(_0ray.contains(_1vector)).toBe(true);
-    }
+    expect(angleA).toBeCloseTo(Math.PI / 2, 5); // 90 degrees
+    expect(angleB).toBeCloseTo(Math.PI / 2, 5); // 90 degrees
 });
 
-test("set from a normal and a point", () => {
-    const normal = new Vector3D(1, 0, 0);
-    const point = new Vector3D(1, 2, 3);
 
-    _0plane.setFromNormalAndPoint(normal, point);
-    expect(_0plane.normal.equals(normal)).toBe(true);
+test("Plane: getUnitSphereRadiusAngle 1", () => {
 
-    expect(_0plane.constant).toBe(point.dot(normal));
-});
+    vec3.set(_vecA, 1, 1, 0);
+    vec3.normalize(_vecA, _vecA);
+    const distance = Math.sqrt(2) / 2; // Distance from origin to the plane
+    plane.set(_planeA, _vecA, distance);
+    const angleA = plane.getUnitSphereRadiusAngle(_planeA);
+    expect(angleA).toBeCloseTo(Math.PI / 4, 5); // 45 degrees
 
+    for (let i = 0; i < 100; i++) {
+        const distance = Math.random();
 
+        const angle = Math.acos(distance);
+        vec3.randomUnit(_vecA)
+        plane.set(_planeA, _vecA, distance);
+        const angleA = plane.getUnitSphereRadiusAngle(_planeA);
+        expect(angleA).toBeCloseTo(angle, 5); // Check if the angle is close to the expected value
+    }
+});  

package/tests/Math/vec3.test.ts

@@ -0,0 +1,14 @@
+import { Vec3 } from "../../Math/types";
+import { vec3 } from "../../Math/vec3";
+
+test("vec3.create", () => {
+    const v = vec3.create(1, 2, 3);
+    expect(v).toEqual([1, 2, 3]);
+});
+
+
+test("vec3.length", () => {
+    const v = vec3.create(3, 4, 0);
+    const length = vec3.length(v);
+    expect(length).toBe(5);
+});

package/timetracks/plugin-line-strip.js

@@ -13,12 +13,14 @@ import PointProgram from './programpoint-line-strip';
      *  a1x, a1y, a1z, a1time, a1r, a1g, a1b, a1time, a3time,
      *  a2x, a2y, a2z, a2time, a2r, a2g, a2b, a1time, a3time, 
      *  a3x, a3y, a3z, a3time, a3r, a3g, a3b, a1time, a3time,
-     *  0, 0, 0, 0, -1, -1, -1, 0, 0,
+     *  NaN, NaN, NaN, NaN,    NaN, NaN, NaN, NaN,    NaN,
      *  b1x, b1y, b1z, b1time, b1r, b1g, b1b, b1time, b2time, 
      *  b2x, b2y, b2z, b2time, b2r, b2g, b2b, BstartTime, BendTime
      * ]
      * there is a cutting point between A and B
      * 
+     * x, y is xy coordinates are in between 0, +1 for -180 to +180 longitude and -90 to +90 latitude
+     * z is height in meters
 */
 
 

package/{types.js → types.ts}

@@ -13,4 +13,5 @@
 
 /**
  * * @typedef {Array<number>} Color rgba color 0-1 values
- */
+ */
+

package/util/account/{index.js → index.ts}

@@ -2,6 +2,5 @@ import BufferOffsetManager from './bufferoffsetmanager.js';
 
 export { BufferOffsetManager };
 
+export * from './single-attribute-buffer-management/index';
 
-
-export * from './single-attribute-buffer-management';

package/util/account/single-attribute-buffer-management/buffer-orchestrator.js

@@ -1,34 +1,3 @@
-
-
-/**
- * OffsetManager
- * 1) Capacity
- * 2) Offset account
- * 3) Command Buffers in its regisration list. 
- * 
- * How insertBulk works:
- * 0) autoExtendBuffers..
- * 1) assign offset to all keys if not already assigned.
- * 2) send item list to each buffer manager and let them do their job. 
- *          This cannot work. BufferManager does not know the which data to insert.
- *          Solutions:
- *          1) selectMethod: insertBulk(items, offsets, selectMethod)
- *             selectMethod(item) => itemToBlock(item)
- *          2) att1manager.insertBulk(items.map(item => this.att1ItemToBlock(item)), offsets)
- *   Idea about future:
- *      insert first tombstone.length items one by one.
- *      insert the rest in a big float32array. IT CAN BE DONE
- * 3) DrawRender
- * 
- * How autoExtendBuffers works:
- * 1) if incoming items length is greater then space left in buffer, calculate new capacity and extend all buffers.
- * 
- * 
- 
-*/
-
-
-
 const EXTRA_SIZE = 10;
 
 export class BufferOrchestrator {

package/util/account/single-attribute-buffer-management/index.ts

@@ -0,0 +1,13 @@
+import { BufferOrchestrator } from "./buffer-orchestrator";
+import { BufferManager } from "./buffer-manager";
+import { ObjectStore } from "./object-store";
+
+type BufferManagement = Map<string, {
+    bufferManager: BufferManager,
+    adaptor: (item: any) => Float32Array,
+}>;
+
+
+export { BufferOrchestrator, BufferManager, ObjectStore, BufferManagement };
+
+

package/util/gl-util/buffer/{integrate-buffer.js → attribute-loader.ts}

@@ -1,3 +1,5 @@
+import './types';
+
 
 /**
  * @typedef BufferAndReadInfo Buffers can be intertwined or interleaved.
@@ -21,7 +23,19 @@
  * @returns 
  */
 
-const attributeLoader = (gl, bufferAndReadInfo, index, size, { divisor = null, type = null, escapeValues = null, normalized = false } = {}) => {
+
+
+const attributeLoader = (
+    gl: WebGL2RenderingContext,
+    bufferAndReadInfo: BufferAndReadInfo | null,
+    index: number,
+    size: number,
+    {
+        divisor = null,
+        type = null,
+        escapeValues = null,
+        normalized = false
+    }: AttributeLoaderOptions = {}) => {
     if (size < 1 || size > 4) throw new Error("Size must be between 1 and 4");
     if (bufferAndReadInfo == null) {
         if (escapeValues !== null) constantFunction(gl, index, size, escapeValues);
@@ -38,7 +52,6 @@ const attributeLoader = (gl, bufferAndReadInfo, index, size, { divisor = null, t
     if (stride < 0 || offset < 0) {
         throw new Error("Stride and offset must be non-negative");
     }
-    console.log("stride", stride, "offset", offset);
     const attribType = type === null ? gl.FLOAT : type;
     gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
     gl.enableVertexAttribArray(index);
@@ -46,7 +59,6 @@ const attributeLoader = (gl, bufferAndReadInfo, index, size, { divisor = null, t
     if (divisor !== null) {
         gl.vertexAttribDivisor(index, divisor);
     }
-
 }
 
 /**
@@ -56,15 +68,14 @@ const attributeLoader = (gl, bufferAndReadInfo, index, size, { divisor = null, t
  * @param {number} offset 
  * @returns {BufferAndReadInfo}
  */
-const createBufferAndReadInfo = (buffer, stride = 0, offset = 0) => {
+const createBufferAndReadInfo = (buffer: WebGLBuffer, stride: number = 0, offset: number = 0): BufferAndReadInfo => {
     if (buffer == null) return null;
-    console.log("createBufferAndReadInfo", buffer, stride, offset);
     return { buffer, stride, offset };
 }
 
 
 
-const constantFunction = (gl, index, size, escapeValues) => {
+const constantFunction = (gl: WebGL2RenderingContext, index: number, size: number, escapeValues: Array<number>) => {
     const func = `vertexAttrib${size}f`;
     console.log(`Using constant function ${func}`, gl[func], escapeValues);
     gl[func](index, ...escapeValues);

package/util/gl-util/buffer/index.ts

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

package/util/gl-util/buffer/types.ts

@@ -0,0 +1,13 @@
+
+type BufferAndReadInfo = {
+    buffer: WebGLBuffer;
+    stride: number;
+    offset: number;
+}
+
+type AttributeLoaderOptions = {
+    divisor?: number | null;
+    type?: number | null;
+    escapeValues?: Array<number> | null;
+    normalized?: boolean;
+}

package/util/gl-util/draw-options/methods.js

@@ -10,11 +10,11 @@ import './types'
 
 // first and element effects the vertexID, which is unfortunately not effected
 const drawInstanced = (gl, mode, drawOptions, vertexCount) => {
-    const { drawRange, indexType = gl.UNSIGNED_INT } = drawOptions;
+    const { drawRange, elementBufferIndexType = gl.UNSIGNED_INT } = drawOptions;
     const { first = 0, count: instanceCount = 1 } = drawRange;
     if (first > 0 || drawOptions.elementBuffer) {
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, drawOptions.elementBuffer);
-        gl.drawElementsInstanced(mode, vertexCount, indexType, first, instanceCount);
+        gl.drawElementsInstanced(mode, vertexCount, elementBufferIndexType, first, instanceCount);
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
     } else {
 
@@ -31,12 +31,12 @@ const drawInstanced = (gl, mode, drawOptions, vertexCount) => {
  */
 
 const drawArrays = (gl, defaultMode, drawOptions) => {
-    const { drawRange, elementBuffer, indexType = gl.UNSIGNED_INT, drawMode = null } = drawOptions;
+    const { drawRange, elementBuffer, elementBufferIndexType = gl.UNSIGNED_INT, drawMode = null } = drawOptions;
     const { first, count } = drawRange;
     const mode = drawMode ?? defaultMode;
     if (elementBuffer) {
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elementBuffer);
-        gl.drawElements(mode, count, indexType, first);
+        gl.drawElements(mode, count, elementBufferIndexType, first);
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
     } else {
         gl.drawArrays(mode, first, count);

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

@@ -14,5 +14,15 @@
  */
 
 
+type DrawRange = {
+    first: number;
+    count: number;
+};
 
+type DrawRangeIndexParams = {
+    drawRange: DrawRange;
+    elementBuffer?: WebGLBuffer;
+    elementBufferIndexType?: number;
+    drawMode?: number;
+};
 

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

@@ -55,7 +55,15 @@ class UniformBlockManager {
      * @param {Array<UniformBlockMember} blockMembers 
      * @param {string} prefix usage name of block in the shader 
      */
-    constructor(blockName, blockMembers, bindingPoint, prefix = "") {
+
+    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;
@@ -81,7 +89,7 @@ class UniformBlockManager {
     }
 
 
-    createUBO(gl, bufferWriteType = "STATIC_DRAW") {
+    createUBO(gl: WebGL2RenderingContext, bufferWriteType = "STATIC_DRAW"): UBOHandler {
         const ubo = gl.createBuffer();
         gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
         gl.bufferData(gl.UNIFORM_BUFFER, this.size, gl[bufferWriteType]);
@@ -97,23 +105,25 @@ class UniformBlockManager {
 
         return { // TODO typedef this, encapsulate this in a class or something, ask ai
             ubo,
-            update: this.updateUBO.bind(this, gl, ubo),
-            bind: this.bind.bind(this, gl, ubo),
-            unbind: this.unbind.bind(this, gl),
-            free: () => gl.deleteBuffer(ubo)
+            update: (nameValueMap: NameValueMap) => this.updateUBO(gl, ubo, nameValueMap),
+            bind: () => this.bind(gl, ubo),
+            unbind: () => this.unbind(gl),
+            free: () => gl.deleteBuffer(ubo),
         };
     }
 
 
-    updateUBO(gl, ubo, nameValueMap) {
+    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);
-            const type = this.blockMembers.find(member => member.name === name).type;
             if (offset === undefined) {
                 throw new Error(`Uniform block member ${name} not found in offset map.`);
             }
-            let data;
+            console.log("Updating UBO member:", name, "with value:", value, "at offset:", offset);
+            const type = this.blockMembers.find(member => member.name === name).type;
+            console.log("Type of member:", name, "is", type);
+            let data: Float32Array | Int32Array | ArrayBuffer | DataView;
             if (Array.isArray(value)) {
                 data = new typeArrayConstructors[type](value);
             } else if (typeof value === 'number') {
@@ -125,30 +135,31 @@ class UniformBlockManager {
             else {
                 throw new Error(`Unsupported value type for ${name}: ${typeof value}`);
             }
+            console.log("Data to be uploaded:", data);
             gl.bufferSubData(gl.UNIFORM_BUFFER, offset, data);
         }
         gl.bindBuffer(gl.UNIFORM_BUFFER, null);
     }
 
     // call this after linking the program
-    assignBindingPoint(gl, program) {
+    assignBindingPoint(gl: WebGL2RenderingContext, program: WebGLProgram) {
         const blockIndex = gl.getUniformBlockIndex(program, this.blockName);
         gl.uniformBlockBinding(program, blockIndex, this.bindingPoint);
     }
 
     // call this before drawing
-    bind(gl, ubo) {
+    bind(gl: WebGL2RenderingContext, ubo: WebGLBuffer) {
         gl.bindBufferBase(gl.UNIFORM_BUFFER, this.bindingPoint, ubo);
     }
 
     // call this right after drawing
-    unbind(gl) {
+    unbind(gl: WebGL2RenderingContext) {
         gl.bindBufferBase(gl.UNIFORM_BUFFER, this.bindingPoint, null);
     }
 
 
     // implicit methods
-    __create_LayoutSTD140_OffsetMap() {
+    __create_LayoutSTD140_OffsetMap(): Map<string, number> {
         let offset = 0;
         const offsetMap = new Map();
         for (const member of this.blockMembers) {

package/util/gl-util/uniform-block/types.ts

@@ -0,0 +1,27 @@
+/**
+ * @typedef {string} UniformBlockName
+ *
+ * @typedef {string} GLSLType | mat4, mat3, vec4, vec3, vec2, float, int, bool
+ * @typedef {{name: string, type: GLSLType, value: null|Float32Array}} UniformBlockMember
+ * 
+ */
+
+
+type UniformBlockName = string;
+type GLSLType = "mat4" | "mat3" | "vec4" | "vec3" | "vec2" | "float" | "int" | "bool";
+type UniformBlockMember = {
+    name: string;
+    type: GLSLType;
+    value: Float32Array | null;
+};
+
+
+type NameValueMap = Map<string, Array<number> | DataView | ArrayBuffer>;
+
+type UBOHandler = {
+    ubo: WebGLBuffer;
+    update: (nameValueMap: Map<string, any>) => void;
+    bind: () => void;
+    unbind: () => void;
+    free: () => void;
+};