@pirireis/webglobeplugins 0.8.6 → 0.8.8

package/rangerings/plugin.js

@@ -52,11 +52,11 @@ import { mapGetOrThrow } from "../util/check/get";
 import { populateFloat32Array } from "../util/jshelpers/data-filler";
 import { RingAccount, ringBigPaddingKeyMethod, ringKeyMethod } from "./ring-account";
 import { CirclePadding3DCache } from "../programs/line-on-globe/degree-padding-around-circle-3d";
-import { LineOnGlobeCache } from '../programs/line-on-globe/naive-accurate';
+import { LineOnGlobeCache } from '../programs/line-on-globe/naive-accurate-flexible';
 import RangeRingAngleText from "./rangeringangletext";
 import { Z_ALPHA_MODE } from "../programs/line-on-globe/util";
 import { ENUM_HIDE } from "./enum";
-
+import { opacityCheck, constraintFloat } from "../util/check/typecheck";
 const CIRCLE_FLAT_EDGE_COUNT = 362; // 360 + 2 for closing the circle and a cutting point
 
 
@@ -274,7 +274,7 @@ class RangeRings {
      * @method setOpacity @param { number } opacity
     */
     setOpacity(opacity) {
-        if (typeof opacity !== "number" || opacity < 0 || opacity > 1) throw new Error("Invalid value for opacity");
+        opacityCheck(opacity);
         this._opacity = opacity;
         this.paddingTextPlugin?.setOpacity(opacity);
         this._textWritersMap.forEach((writer) => writer.setOpacity(opacity));
@@ -378,6 +378,7 @@ class RangeRings {
         );
 
         const obj = function (bufferManagerComp, divisor = 1) {
+            if (bufferManagerComp === null) return null;
             return { 'buffer': bufferManagerComp.bufferManager.buffer, 'stride': 0, 'offset': 0, divisor }
 
         };
@@ -431,8 +432,9 @@ class RangeRings {
             ]
         );
 
-        this._bigPadding3dFlatVAO = this._bigPadding3dFlatProgram.createVAO(
-            ...["circlePoint", "circlePoint3d", "paddingPoint", "paddingPoint3d", "dashRatio", "dashOpacity", "rgba",].map(key => obj(this.bufferManagersCompMapPadding.get(key)))
+        this._bigPadding3dFlatVAO = this._bigPadding3dFlatProgram.createVAO(//"dashRatio", "dashOpacity"
+            ...["circlePoint", "circlePoint3d", "paddingPoint", "paddingPoint3d", null, null, "rgba",].map(key =>
+                (key === null) ? null : obj(this.bufferManagersCompMapPadding.get(key)))
         );
 
         this._padding3dOneDegreeVao = this._padding3dProgram.createVAO(
@@ -575,7 +577,8 @@ class RangeRings {
             // _padding2dProgram.draw(bigPaddingVAO, paddingBufferOrchestrator.length, _opacity);
             if (_oneDegreePadding) _padding2dProgram.draw(_oneDegree2DPaddingVao, bufferOrchestrator.length * CIRCLE_FLAT_EDGE_COUNT, _opacity, _zAlphaOnDegreePadding);
         }
-        _bigPadding3dFlatProgram.draw(_bigPadding3dFlatVAO, paddingBufferOrchestrator.length, _opacity);
+        const drawOptions = { drawRange: { first: 0, count: bufferOrchestrator.length } };
+        _bigPadding3dFlatProgram.draw(_bigPadding3dFlatVAO, drawOptions, _opacity);
         this._textWritersMap.forEach((textWriter) => textWriter.draw());
         gl.enable(gl.DEPTH_TEST);
     }

package/shaders/fragment-toy/firework.js

@@ -0,0 +1,55 @@
+export const firework = `
+float firework(vec2 point_coord, float phase) {
+    float t = phase + 5.0;
+    float z = 6.0;
+    const int n = 53; // particle count
+
+    vec3 startColor = vec3(0.0, 0.64, 0.2);
+    vec3 endColor = vec3(0.06, 0.35, 0.85);
+
+    float startRadius = 0.84;
+    float endRadius = 1.6;
+
+    float power = 0.51;
+    float duration = 4.0;
+
+    vec2 v = z * (2.0 * point_coord - vec2(1.0) );
+
+    vec3 col = vec3(0.0);
+    vec2 pm = v.yx * 2.8;
+
+    float dMax = duration;
+    float evo = (sin(phase * 0.01 + 400.0) * 0.5 + 0.5) * 99.0 + 1.0;
+
+    float mb = 0.0;
+    float mbRadius = 0.0;
+    float sum = 0.0;
+
+    for(int i = 0; i < n; i++) {
+        float d = fract(t * power + 48934.4238 * sin(float(i / int(evo)) * 692.7398));
+
+        float a = 6.28 * float(i) / float(n);
+        float x = d * cos(a) * duration;
+        float y = d * sin(a) * duration;
+
+        float distRatio = d / dMax;
+        mbRadius = mix(startRadius, endRadius, distRatio);
+
+        vec2 p = v - vec2(x, y);
+        mb = mbRadius / dot(p, p);
+
+        sum += mb;
+        col = mix(col, mix(startColor, endColor, distRatio), mb / sum);
+    }
+
+    sum /= float(n);
+    col = normalize(col) * sum;
+    sum = clamp(sum, 0.0, 0.4);
+
+    vec3 tex = vec3(1.0);
+    col *= smoothstep(tex, vec3(0.0), vec3(sum));
+
+    float alpha = sum * 2.5;
+    return clamp(alpha, 0.0, 1.0);
+}
+`

package/shaders/fragment-toy/singularity.js

@@ -0,0 +1,59 @@
+
+
+const singularity = `
+
+vec3 palette(float d){
+    return mix(vec3(0.2, 0.7, 0.9), vec3(1.0, 0.0, 1.0), d);
+}
+
+vec2 rotate(vec2 p, float a){
+    float c = cos(a);
+    float s = sin(a);
+    return p * mat2(c, s, -s, c);
+}
+
+float map(vec3 p){
+    for (int i = 0; i < 4; ++i){
+        float t = u_phase * 0.2;
+        p.xz = rotate(p.xz, t);
+        p.xy = rotate(p.xy, t * 1.89);
+        p.xz = abs(p.xz);
+        p.xz -= 0.85;
+    }
+    return dot(sign(p), p) / 5.0;
+}
+
+vec4 rm(vec3 ro, vec3 rd){
+    float t = 0.0;
+    vec3 col = vec3(0.0);
+    float d;
+    for (float i = 0.0; i < 56.0; i++){
+        vec3 p = ro + rd * t;
+        d = map(p) * 0.5;
+        if (d < 0.02){
+            break;
+        }
+        if (d > 100.0){
+            break;
+        }
+        col += palette(length(p) * 0.1) / (400.0 * d);
+        t += d;
+    }
+    return vec4(col, 1.0 / d * 2.0 );
+}
+
+vec4 singularity(vec2 pointCoord, float u_phase) {
+    vec2 uv = (pointCoord - 0.5); // Normalized coordinates from gl_PointCoord
+    vec3 ro = vec3(0.0, 0.0, -50.0);
+    ro.xz = rotate(ro.xz, u_phase);
+    vec3 cf = normalize(-ro);
+    vec3 cs = normalize(cross(cf, vec3(0.0, 1.0, 0.0)));
+    vec3 cu = normalize(cross(cf, cs));
+
+    vec3 uuv = ro + cf * 3.0 + uv.x * cs + uv.y * cu;
+    vec3 rd = normalize(uuv - ro);
+
+    return rm(ro, rd);
+}`;
+
+export { singularity };

package/types.js

@@ -0,0 +1,16 @@
+/**
+ * @typedef DrawRange
+ * @type {Object}
+ * @property {int} first
+ * @property {int} count
+ * 
+ * @typedef DrawRangeIndexParamsClient
+ * @type {Object}
+ * @property {null|DrawRange} drawRange
+ * @property {null|Int32List} indexes
+ */
+
+
+/**
+ * * @typedef {Array<number>} Color rgba color 0-1 values
+ */

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

@@ -40,7 +40,6 @@ export class BufferManager {
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         for (let offset of offsets) {
             if (offset !== undefined) {
-
                 gl.bufferSubData(gl.ARRAY_BUFFER, offset * offsetMultiplier, emptyBlock);
             }
         }
@@ -108,7 +107,4 @@ export class BufferManager {
         this.gl = null;
         this.isFreed = true;
     }
-}
-
-
-
+}

package/util/account/util.js

@@ -1,12 +1,22 @@
-export const vaoAttributeLoader = (gl, buffer, position, length, stride, offset, divisor = null, type = null) => {
-    if (type === null) {
-        type = gl.FLOAT;
+export const vaoAttributeLoader = (gl, buffer, index, size, stride, offset, divisor = null, type = null) => {
+    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(position);
-    gl.vertexAttribPointer(position, length, type, false, stride, offset);
+    gl.enableVertexAttribArray(index);
+    gl.vertexAttribPointer(index, size, attribType, false, stride, offset);
     if (divisor !== null) {
-        gl.vertexAttribDivisor(position, divisor);
+        gl.vertexAttribDivisor(index, divisor);
     }
 
-}
+}
+
+

package/util/check/typecheck.js

@@ -26,3 +26,14 @@ export const isTextFont = (textFont) => {
 
 }
 
+export const constraintFloat = (x, lowerBound = null, upperBound = null) => {
+    if (typeof x !== "number") throw new Error("type must be numberic");
+    if (lowerBound === null && upperBound === null) return;
+    if (lowerBound !== null && lowerBound > x) throw new Error(`input must be greater than ${lowerBound}`);
+    if (upperBound !== null && x > upperBound) throw new Error(`input must be less than ${upperBound}`);
+}
+
+
+export const isBoolean = (x) => {
+    if (typeof x !== "boolean") throw new TypeError("type must be boolean");
+}

package/util/gl-util/buffer/integrate-buffer.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 } = {}) => {
+    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);
+        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");
+    }
+    console.log("stride", stride, "offset", offset);
+    const attribType = type === null ? gl.FLOAT : type;
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.enableVertexAttribArray(index);
+    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;
+    console.log("createBufferAndReadInfo", buffer, stride, offset);
+    return { buffer, stride, offset };
+}
+
+
+
+const constantFunction = (gl, index, size, escapeValues) => {
+    const func = `vertexAttrib${size}f`;
+    console.log(`Using constant function ${func}`, gl[func], escapeValues);
+    gl[func](index, ...escapeValues);
+}
+
+
+export { attributeLoader, createBufferAndReadInfo };

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

@@ -0,0 +1,59 @@
+
+
+class DrawOptionsClient {
+
+    /**
+     * @typedef DrawOptionsClientAdaptor
+     * @type {Object}
+     * @property {function} setElements
+     * @property {function} setDrawRange
+     * @property {function} free
+     * 
+     * @param {*} gl 
+     * @param {*} adaptorsMap 
+     */
+    constructor(gl, adaptorsMap) {
+        this.gl = gl;
+        this.adaptorsMap = adaptorsMap;
+        this.elementBuffers = new Map();
+    }
+
+    __init() {
+        const { gl, adaptorsMap } = this;
+        // create element buffer for each element buffer type
+        for (const [key, value] of Object.entries(adaptorsMap)) {
+            const elementBuffer = gl.createBuffer();
+            this.elementBuffers.set(key, elementBuffer);
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elementBuffer);
+            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, value, gl.DYNAMIC_DRAW);
+        }
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+
+
+    }
+
+
+    setDrawRange() {
+
+    }
+
+
+    /**
+     * 
+     * @param {null|Int32List|Int32Array} elementIndexes 
+     */
+    setElements(elementIndexes = null) {
+
+    }
+
+    getDrawOptions() {
+
+    }
+
+
+
+
+    free() {
+
+    }
+}

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

@@ -0,0 +1,46 @@
+import './types'
+
+/**
+ * 
+ * @param {WebGL2RenderingContext} gl 
+ * @param {WebGL2RenderingContext.DrawMode} mode 
+ * @param {DrawRangeIndexParams} drawOptions 
+ */
+
+
+// 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 { 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.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+    } else {
+
+        gl.drawArraysInstanced(mode, first, vertexCount, instanceCount);
+    }
+}
+
+
+/**
+ * 
+ * @param {WebGL2RenderingContext} gl 
+ * @param {WebGL2RenderingContext.DrawMode} defaultMode 
+ * @param {DrawRangeIndexParams} drawOptions 
+ */
+
+const drawArrays = (gl, defaultMode, drawOptions) => {
+    const { drawRange, elementBuffer, indexType = 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.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+    } else {
+        gl.drawArrays(mode, first, count);
+    }
+}
+
+export { drawArrays, drawInstanced }

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

@@ -0,0 +1,18 @@
+/**
+ * @typedef DrawRange
+ * @type {Object}
+ * @property {int} first
+ * @property {int} count
+ * 
+ * @typedef DrawRangeIndexParams
+ * @type {Object}
+ * @property {null|DrawRange} drawRange
+ * @property {null|ElementBuffer} elementBuffer 
+ * @property {null|indexType} indexType
+ * @property {null|int} drawMode
+ * 
+ */
+
+
+
+

package/util/gl-util/uniform-block/manager.js

@@ -0,0 +1,176 @@
+import "./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,
+    '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,
+    '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
+};
+
+
+class UniformBlockManager {
+
+    /**
+     * 
+     * @param {UniformBlockName} blockName 
+     * @param {Array<UniformBlockMember} blockMembers 
+     * @param {string} prefix usage name of block in the shader 
+     */
+    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);
+        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);
+            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: this.updateUBO.bind(this, gl, ubo),
+            bind: this.bind.bind(this, gl, ubo),
+            unbind: this.unbind.bind(this, gl),
+            free: () => gl.deleteBuffer(ubo)
+        };
+    }
+
+
+    updateUBO(gl, ubo, 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;
+            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}`);
+            }
+            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() {
+        const lastOffset = Array.from(this.offsetMap.values()).pop();
+        const lastItemAlignment = typeAlignments[this.blockMembers[this.blockMembers.length - 1].type];
+        return lastOffset + lastItemAlignment;
+    }
+
+}
+
+
+export { UniformBlockManager };

package/util/gl-util/uniform-block/roadmap.md

@@ -0,0 +1,70 @@
+# UniformBlock Wrapper
+
+- Uniform shader string
+- bind/unbind
+- set/get uniform value generic
+
+## INPUT
+- uniform block name
+- Array<{type, name}> UniformBlockMembers
+
+
+## PROCESS
+
+- Calculate and save starting offset of each member
+- Create UBO
+- Bind UBO
+- Set uniform value
+
+### Calculate and save starting offset of each member
+
+layout(std140) is a convention. The calculation should be done according to this convention.
+
+
+type | size
+--- | --- 
+float | 4 
+vec2 | 8 
+vec3 | 12 
+vec4 | 16 
+mat2 | 16 
+mat3 | 48 
+mat4 | 64 
+
+A line is 16 bytes aligned. Alignment can be shared if previous member is equal or bigger then the next member and the sum of the sizes are smaller then 16 bytes.
+
+
+
+
+
+
+
+
+
+
+## setMethod
+
+    update({
+        color = null,
+        bboxOffsetRad = null,
+        bboxSizeRad = null,
+        resolution = null,
+        tailLengthRatio = null,
+        wingLengthRatio = null,
+        height = null,
+        opacity = null,
+        noDataValue = null,
+    } = {}) {
+        const { gl, ubo } = this;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        if (color !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 0, new Float32Array(color));
+        if (opacity !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 12, new Float32Array([opacity]));
+        if (bboxOffsetRad !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 16, new Float32Array(bboxOffsetRad));
+        if (bboxSizeRad !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 24, new Float32Array(bboxSizeRad));
+        if (resolution !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 32, new Float32Array(resolution));
+        if (tailLengthRatio !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 40, new Float32Array([tailLengthRatio]));
+        if (wingLengthRatio !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 44, new Float32Array([wingLengthRatio]));
+        if (height !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 48, new Float32Array([height]));
+        if (noDataValue !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 52, new Float32Array([noDataValue]));
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }