@pirireis/webglobeplugins 0.0.1

package/programs/rings/distancering/circlepaddysharedbuffer.js

@@ -0,0 +1,502 @@
+/**
+ * ring data model 
+ *  [centerX, centerY, range, padding, r, g, b, a, hide]
+ * 
+ *  Buffer is initialized with ring capacity and buffer is created with that capacity. It might be called buffer orphaning.
+ * 
+ * */
+const RING_SIZE = 9;
+
+export default class {
+    /**
+     * @param {WebGL2RenderingContext} gl
+     * @param {Object} options
+     * @param {Number} options.initialRingCapacity
+     * @param {String} options.bufferType - "static" or "dynamic"
+     * */
+    constructor(gl, globe, { initialRingCapacity = 20, bufferType = "static", implicitExtentionRate = 1.2 } = {}) {
+        this.gl = gl;
+        this.globe = globe;
+        this._capacity = initialRingCapacity;
+        this._ringCounter = 0;
+        this._length = 0;
+
+        this._centerMap = new Map(); // key, new MAP(x,y, rings:[])
+        this._ringOffsets = new Map();
+        this._removedRingsOffsetStack = [];
+
+        this._bufferType = gl[bufferType.toUpperCase()];
+        this.implicitExtentionRate = implicitExtentionRate;
+        this.buffer = gl.createBuffer();
+
+        { // initilize data
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+            gl.bufferData(gl.ARRAY_BUFFER, initialRingCapacity * 4 * RING_SIZE, this._bufferType);
+            gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        }
+
+        {
+            this._circleVAO = gl.createVertexArray();
+            gl.bindVertexArray(this._circleVAO);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+            gl.enableVertexAttribArray(0);
+            gl.vertexAttribPointer(0, 2, gl.FLOAT, false, RING_SIZE * 4, 0);
+            gl.enableVertexAttribArray(1);
+            gl.vertexAttribPointer(1, 1, gl.FLOAT, false, RING_SIZE * 4, 2 * 4);
+            gl.enableVertexAttribArray(2);
+            gl.vertexAttribPointer(2, 4, gl.FLOAT, false, RING_SIZE * 4, 4 * 4);
+            gl.enableVertexAttribArray(3);
+            gl.vertexAttribPointer(3, 3, gl.FLOAT, false, RING_SIZE * 4, 8 * 4);
+
+            // set divisors to 1
+            gl.vertexAttribDivisor(0, 1);
+            gl.vertexAttribDivisor(1, 1);
+            gl.vertexAttribDivisor(2, 1);
+            gl.vertexAttribDivisor(3, 1);
+            gl.bindVertexArray(null);
+        }
+
+        {
+            this._paddingVAO = gl.createVertexArray();
+            gl.bindVertexArray(this._paddingVAO);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+            gl.enableVertexAttribArray(0);
+            gl.vertexAttribPointer(0, 2, gl.FLOAT, false, RING_SIZE * 4, 0);
+            gl.enableVertexAttribArray(1);
+            gl.vertexAttribPointer(1, 1, gl.FLOAT, false, RING_SIZE * 4, 2 * 4);
+            gl.enableVertexAttribArray(2);
+            gl.vertexAttribPointer(2, 1, gl.FLOAT, false, RING_SIZE * 4, 3 * 4);
+            gl.enableVertexAttribArray(3);
+            gl.vertexAttribPointer(3, 4, gl.FLOAT, false, RING_SIZE * 4, 4 * 4);
+            gl.enableVertexAttribArray(4);
+            gl.vertexAttribPointer(4, 3, gl.FLOAT, false, RING_SIZE * 4, 8 * 4);
+            gl.vertexAttribDivisor(0, 1);
+            gl.vertexAttribDivisor(1, 1);
+            gl.vertexAttribDivisor(2, 1);
+            gl.vertexAttribDivisor(3, 1);
+            gl.vertexAttribDivisor(4, 1);
+            gl.bindVertexArray(null);
+        }
+    }
+
+    /**
+     * @param {String} centerID
+     * @param {Object} options
+     * @param {Number} options.x
+     * @param {Number} options.y
+     * */
+    registerCenter(centerID, { x = 0, y = 0 } = {}) {
+        this._centerMap.set(centerID, new Map(
+            [
+                ["x", x],
+                ["y", y],
+                ["rings", []] // ring keys
+            ]
+        ));
+    }
+
+    /**
+     * 
+     * @param {null | number} newCapacity if null, vacuum defragmentation is applied -> capacity is set to the current ring count
+     */
+    defrag(newCapacity = null) {
+        const { _removedRingsOffsetStack, _ringOffsets } = this;
+        _removedRingsOffsetStack.sort();
+        this._capacity = newCapacity || this._ringCounter;
+        const arrayToLoad = new Float32Array(this._capacity * RING_SIZE);
+        const bufferData = this._getBufferData();
+        let arrayOffset = 0;
+        const newRingOffsets = new Map();
+        for (const [key, offset] of _ringOffsets) {
+            const ringOffset = offset / 4
+            const ringData = bufferData.slice(ringOffset, ringOffset + RING_SIZE);
+            arrayToLoad.set(ringData, arrayOffset);
+            newRingOffsets.set(key, arrayOffset * 4);
+            arrayOffset += RING_SIZE;
+        }
+        const { gl, buffer } = this;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, arrayToLoad, this._bufferType);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        this._ringOffsets = newRingOffsets;
+        this._removedRingsOffsetStack = [];
+        this._length = this._ringCounter;
+    }
+
+    extendBuffer(newCapacity) {
+        if (this._capacity >= newCapacity) {
+            console.warn("New capacity is smaller than the current capacity");
+            return;
+        }
+        this._capacity = newCapacity;
+        const { gl, buffer } = this;
+        const bufferData = this._getBufferData();
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, newCapacity * RING_SIZE * 4, this._bufferType);
+        gl.bufferSubData(gl.ARRAY_BUFFER, 0, bufferData);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    }
+
+    checkCapacity(sizeLeft = 1) {
+        return sizeLeft <= this._capacity - this._ringCounter;
+    }
+
+    capacityLeft() {
+        return this._capacity - this._ringCounter;
+    }
+
+    get capacity() {
+        return this._capacity;
+    }
+
+    get length() {
+        return this._length;
+    }
+
+    get ringCount() {
+        return this._ringCounter;
+    }
+
+
+    /**
+     * @typedef centerIdringIdRadiusPaddingRgbaHide
+     * @property {String} centerID
+     * @property {String} ringID
+     * @property {Number} radius
+     * @property {Number} padding
+     * @property {Array<Number>} rgba - [r,g,b,a]
+     * @param {Array<centerIdringIdRadiusPaddingRgbaHide>} centerIdringIdRadiusPaddingRgbaHideList
+     * */
+    insertRings(centerIdringIdRadiusPaddingRgbaHideList) {
+        { // capacity check
+            this._implicitExtendBufferInNeed(centerIdringIdRadiusPaddingRgbaHideList.length);
+        }
+        const { gl, buffer } = this;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        for (let { centerID, ringID, radius, padding, rgba, hide = false } of centerIdringIdRadiusPaddingRgbaHideList) {
+            if (!this._centerMap.has(centerID)) {
+                console.warn("Center is not registered yet");
+                return;
+            }
+            const x = this._centerMap.get(centerID).get("x");
+            const y = this._centerMap.get(centerID).get("y");
+            const bufferData = new Float32Array([x, y, radius, padding, ...rgba, hide ? 1 : 0]);
+            const key = this._ringKey(centerID, ringID);
+            let offset;
+            if (!this._ringOffsets.has(key)) {
+                offset = this._nextBufferOffset();
+                this._ringOffsets.set(key, offset);
+                this._centerMap.get(centerID).get("rings").push(key);
+            } else {
+                offset = this._ringOffsets.get(key);
+            }
+            gl.bufferSubData(gl.ARRAY_BUFFER, offset, bufferData);
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        this.globe.DrawRender();
+    }
+
+
+    /**
+     * @typedef centerIDringID
+     * @property {String} centerID
+     * @property {String} ringID
+     * @param {Array<centerIDringID>} centerIDringIDs 
+     * @returns 
+     */
+    removeRings(centerIDringIDs) {
+        const { gl, buffer } = this;
+        const zero = new Float32Array([0]);
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        for (let { centerID, ringID } of centerIDringIDs) {
+            if (!this._centerMap.has(centerID)) {
+                console.warn("Center is not registered yet");
+                return;
+            }
+            const key = this._ringKey(centerID, ringID);
+            if (!this._ringOffsets.has(key)) {
+                console.warn("Ring is not registered yet");
+                return;
+            }
+            const offset = this._ringOffsets.get(key);
+            this._removedRingsOffsetStack.push(offset);
+            this._ringOffsets.delete(key);
+            //  set range to 0, 3rd index of float32array 
+            gl.bufferSubData(gl.ARRAY_BUFFER, offset + 8, zero);
+            this._centerMap.get(centerID).get("rings").splice(this._centerMap.get(centerID).get("rings").indexOf(key), 1);
+            this._ringCounter--;
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        this.globe.DrawRender();
+    }
+
+    /**
+     * @param {Array<string>} centerIDs
+     * */
+    removeCenters(centerIDs) {
+        const { gl, buffer } = this;
+        const zero = new Float32Array([0]);
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        for (let centerID of centerIDs) {
+            if (!this._centerMap.has(centerID)) {
+                console.warn("Center is not registered yet");
+                return;
+            }
+            const center = this._centerMap.get(centerID);
+            const rings = center.get("rings");
+            for (let i = 0; i < rings.length; i++) {
+                // set range to 0, 3rd index of float32array
+                const offset = this._ringOffsets.get(rings[i]);
+                gl.bufferSubData(gl.ARRAY_BUFFER, offset + 8, zero);
+                this._removedRingsOffsetStack.push(offset);
+                this._ringOffsets.delete(rings[i]);
+            }
+            this._ringCounter -= rings.length;
+            this._centerMap.delete(centerID);
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        this.globe.DrawRender();
+    }
+
+
+    /**
+     * @typedef centerIDxyList
+     * @property {String} centerID
+     * @property {Number} x mercator x
+     * @property {Number} y mercator y
+     * @param {*} centerIDxyList 
+     */
+    updateCentersXY(centerIDxyList) {
+        const { gl, buffer } = this;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        for (let { centerID, x, y } of centerIDxyList) {
+            const center = this._centerMap.get(centerID);
+            center.set("x", x);
+            center.set("y", y);
+            const xyBlock = new Float32Array([x, y]);
+            const rings = center.get("rings");
+            for (let i = 0; i < rings.length; i++) {
+                const offset = this._ringOffsets.get(rings[i]);
+                gl.bufferSubData(gl.ARRAY_BUFFER, offset, xyBlock);
+            }
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        this.globe.DrawRender();
+
+    }
+
+
+    /**
+     * 
+     * @typedef centerData
+     * @property {String} centerID
+     * @property {Array<Number>} rgba - [r,g,b,a] - default undefined
+     * @property {Number} padding - default undefined
+     * @property {Boolean} hide - default undefined
+     * @param {Array<centerData>} centerDatas 
+     * @returns 
+     */
+    updateCenters(centerDatas) {
+        const { gl, buffer } = this;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        for (let { centerID, padding, rgba, hide } of centerDatas) {
+            const rings = this._centerMap.get(centerID).get("rings");
+            for (let i = 0; i < rings.length; i++) {
+                const offset = this._ringOffsets.get(rings[i]);
+                if (padding !== undefined) gl.bufferSubData(gl.ARRAY_BUFFER, offset + 12, new Float32Array([padding]));
+                if (rgba !== undefined) gl.bufferSubData(gl.ARRAY_BUFFER, offset + 16, new Float32Array(rgba));
+                if (hide !== undefined) gl.bufferSubData(gl.ARRAY_BUFFER, offset + 32, new Float32Array([hide ? 1 : 0]));
+            }
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        this.globe.DrawRender();
+    }
+
+
+
+    insertBulk(rangeRingDatas) {
+        const { gl, buffer } = this;
+        { // capacity check
+            let incomingRingSize = 0;
+            for (let { rings } of rangeRingDatas) {
+                incomingRingSize += rings.length;
+                // It should check if ring is already registered but for now it is not implemented. 
+                // Reasons: increase in complexity and performance
+            }
+            this._implicitExtendBufferInNeed(incomingRingSize);
+        }
+
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        for (let { centerID, x, y, rings } of rangeRingDatas) {
+            if (!this._centerMap.has(centerID)) {
+                this.registerCenter(centerID, { x, y })
+            } else {
+                const rings = this._centerMap.get(centerID).get("rings");
+                const xy = new Float32Array([x, y]);
+                for (let i = 0; i < rings.length; i++) {
+                    const offset = this._ringOffsets.get(rings[i]);
+                    gl.bufferSubData(gl.ARRAY_BUFFER, offset, xy);
+                }
+            }
+            for (let { ringID, radius, padding, rgba, hide = false } of rings) {
+                const key = this._ringKey(centerID, ringID);
+                const bufferData = new Float32Array([x, y, radius, padding, ...rgba, hide ? 1 : 0]);
+                if (!this._ringOffsets.has(key)) {
+                    const offset = this._nextBufferOffset();
+                    gl.bufferSubData(gl.ARRAY_BUFFER, offset, bufferData);
+
+                    this._ringOffsets.set(key, offset);
+                    this._centerMap.get(centerID).get("rings").push(key);
+                } else {
+                    const offset = this._ringOffsets.get(key);
+                    gl.bufferSubData(gl.ARRAY_BUFFER, offset, bufferData);
+
+                }
+            }
+
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        this.globe.DrawRender();
+    }
+
+    updateRing(centerID, ringID, { radius, padding, rgba, hide } = {}) {
+        if (!this._centerMap.has(centerID)) {
+            console.warn("Center is not registered yet");
+            return;
+        }
+        const key = this._ringKey(centerID, ringID);
+        if (!this._ringOffsets.has(key)) {
+            console.warn("Ring is not registered yet");
+            return;
+        }
+        if (!this.checkCapacity()) {
+            this._implicitExtendBufferInNeed(1);
+        }
+        const { gl, buffer } = this;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        const offset = this._ringOffsets.get(key);
+        if (radius !== undefined) gl.bufferSubData(gl.ARRAY_BUFFER, offset + 8, new Float32Array([radius]));
+        if (padding !== undefined) gl.bufferSubData(gl.ARRAY_BUFFER, offset + 12, new Float32Array([padding]));
+        if (rgba !== undefined) gl.bufferSubData(gl.ARRAY_BUFFER, offset + 16, new Float32Array(rgba));
+        if (hide !== undefined) gl.bufferSubData(gl.ARRAY_BUFFER, offset + 32, new Float32Array([hide ? 1 : 0]));
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        this.globe.DrawRender();
+    }
+
+
+    // ----------------- INTERNAL METHODS ----------------- //
+
+
+    bindCircleVAO() {
+        this.gl.bindVertexArray(this._circleVAO);
+    }
+
+    bindPaddingVAO() {
+        this.gl.bindVertexArray(this._paddingVAO);
+    }
+
+
+    free() {
+        this.gl.deleteBuffer(this.buffer);
+        this.gl.deleteVertexArray(this._circleVAO);
+        this.gl.deleteVertexArray(this._paddingVAO);
+    }
+
+    // ----------------- PRIVATE METHODS ----------------- //
+
+    _getBufferData() {
+        const { gl, buffer } = this;
+        const size = new Float32Array(this._length * RING_SIZE);
+        const bufferData = new Float32Array(size);
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.getBufferSubData(gl.ARRAY_BUFFER, 0, bufferData);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        return bufferData;
+    }
+
+    _ringKey(centerID, ringID) {
+        return `C=${centerID},R=${ringID}`;
+    }
+
+
+
+    _nextBufferOffset() {
+        if (!this.checkCapacity()) {
+            throw new Error("Buffer is full");
+            return;
+        }
+        let offset;
+        if (this._removedRingsOffsetStack.length > 0) {
+            offset = this._removedRingsOffsetStack.pop();
+        } else {
+            offset = this._ringCounter * RING_SIZE * 4;
+            this._length++;
+        }
+        this._ringCounter++;
+        return offset;
+    }
+
+
+    _implicitExtendBufferInNeed(incomingRingSize) {
+        console.log("implicitExtendBufferInNeed", { incomingRingSize, "capacity left": this.capacityLeft(), "capacity": this._capacity, "ring counter": this._ringCounter });
+        const overCapacity = incomingRingSize - this.capacityLeft();
+        if (overCapacity <= 0) return;
+        const newCapacity = Math.ceil((this._capacity + overCapacity) * this.implicitExtentionRate);
+        this.extendBuffer(newCapacity);
+    }
+
+
+    async readRing(centerID, ringID) {
+        const key = this._ringKey(centerID, ringID);
+        if (!this._ringOffsets.has(key)) {
+            console.warn("Ring is not registered yet");
+            return;
+        }
+        const offset = this._ringOffsets.get(key);
+        const { gl, buffer } = this;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        const bufferData = new Float32Array(9);
+        gl.getBufferSubData(gl.ARRAY_BUFFER, offset, bufferData);
+        return {
+            centerX: bufferData[0],
+            centerY: bufferData[1],
+            range: bufferData[2],
+            padding: bufferData[3],
+            rgba: [bufferData[4], bufferData[5], bufferData[6], bufferData[7]],
+            hide: bufferData[8]
+        }
+    }
+
+
+
+    /**
+     * TODOS:
+     * - bulk ring registration. This must be managed here to avoid binding and unbinding buffer multiple times
+     * - bulk centers and rings registration
+     * 
+     * - Check capacity on extend buffer and collect garbage
+     * - set length to the filled part of the buffer. used for draw calls
+     * */
+
+    /**
+     * collectGarbage with Defragmantation
+     * Basic idea: on unregistration the last ring is moved to the removed ring's place. length is decreased by 1
+     * Optimization: Reading buffer is expensive. So bulk defragmentation is needed to work with this approach 
+     * */
+}
+
+
+/**
+ * Documentation
+ * 
+ * Methods:
+ * - insertRings(centerIdringIdRadiusPaddingRgbaHide)
+ * - removeRings(centerIDringIDs)
+ * - removeCenters(centerIDs)
+ * - updateCentersXY(centerIDxyList)
+ * - updateCenters(centerDatas)
+ * - insertBulk(rangeRingDatas)
+ * - updateRing(centerID, ringID, { radius, padding, rgba, hide })
+ * - readRing(centerID, ringID)
+ * 
+ */

package/programs/rings/distancering/index.js

@@ -0,0 +1,5 @@
+import CircleFlatProgram from './circleflatprogram';
+import PaddyFlatProgram from './paddyflatprogram';
+import CirclePaddySharedBuffer from './circlepaddysharedbuffer';
+
+export default { CircleFlatProgram, PaddyFlatProgram, CirclePaddySharedBuffer }

package/programs/rings/distancering/paddyflatprogram.js

@@ -0,0 +1,131 @@
+import { createProgram, shaderfunctions } from "../../../util";
+import CameraUniformBlockTotem, { CameraUniformBlockString } from "../../totems/camerauniformblock";
+import { globeProgramCache, noRegisterGlobeProgramCache } from "../../programcache";
+
+const vertexShader = `#version 300 es ` +
+    shaderfunctions.PI +
+    shaderfunctions.R +
+    shaderfunctions.POLE +
+    CameraUniformBlockString +
+    shaderfunctions.mercatorXYTo2DPoint +
+    shaderfunctions.longLatRadToMercator +
+    shaderfunctions.longLatRadToCartesian3D +
+    shaderfunctions.circleLimpFromLongLatRadCenterCartesian3D +
+    shaderfunctions.circleLimpFromLongLatRadCenterMercatorCompass +
+    shaderfunctions.circleLimpFromLongLatRadCenterMercatorRealDistance + `
+
+in vec2 center;
+in float radius;
+in float pad_range;
+in vec4 color;
+in float flag;
+
+uniform int compass;
+uniform float pad_count;
+
+out vec2 v_limp;
+out vec4 v_color;
+
+
+void main() {   
+    if( flag == 1.0 || radius == 0.0 ) return; // 1.0 is hide 
+    v_color = color;
+    gl_PointSize = 2.0;
+
+    float odd = mod(float(gl_VertexID), 2.0);
+    float index = (float(gl_VertexID)- odd ) / 2.0;
+    float angle = 3.1415926535897932384626433832795 * 2.0 * (index / pad_count );
+    float radius_ = radius - (pad_range * odd);
+
+    if ( is3D){  
+        gl_Position = projection * view * vec4(
+            circleLimpFromLongLatRadCenterCartesian3D( center, radius_, angle) - translate, 1.0);
+        v_limp = vec2(0.0, 0.0);
+        return;
+    }
+    vec2 limp;
+    if ( compass == 1 ){
+        limp = circleLimpFromLongLatRadCenterMercatorCompass(center , radius_, angle);
+    } else {
+        limp = circleLimpFromLongLatRadCenterMercatorRealDistance(center, radius_, angle);
+    }
+    v_limp = limp;
+    gl_Position = mercatorXYTo2DPoint(limp);
+}`;
+
+const fragmentShader = `#version 300 es
+precision highp float; `+
+    shaderfunctions.POLE + `
+in vec4 v_color;
+in vec2 v_limp;
+out vec4 outColor;
+void main() {
+    if ( v_limp.x < -POLE || v_limp.x > POLE || v_limp.y < -POLE || v_limp.y > POLE ){ discard; }
+    outColor = v_color;
+}`;
+
+class Logic {
+    constructor(globe) {
+        this.globe = globe;
+        this.gl = globe.gl;
+        this.program = createProgram(this.gl, vertexShader, fragmentShader);
+        { // bind positions so bufferManager can use them
+            this.gl.bindAttribLocation(this.program, 0, "center");
+            this.gl.bindAttribLocation(this.program, 1, "radius");
+            this.gl.bindAttribLocation(this.program, 2, "pad_range");
+            this.gl.bindAttribLocation(this.program, 3, "color");
+            this.gl.bindAttribLocation(this.program, 4, "flag");
+        }
+        this.cameraBlockBindingPoint = 0;
+        const cameraBlockIndex = this.gl.getUniformBlockIndex(this.program, "CameraUniformBlock");
+        this.gl.uniformBlockBinding(this.program, cameraBlockIndex, this.cameraBlockBindingPoint);
+        this.cameraBlockTotem = globeProgramCache.getProgram(globe, CameraUniformBlockTotem);
+        this._padCountLocation = this.gl.getUniformLocation(this.program, "pad_count");
+
+        this._compassLocation = this.gl.getUniformLocation(this.program, "compass");
+
+        {
+            const currentProgram = this.gl.getParameter(this.gl.CURRENT_PROGRAM);
+            this.gl.useProgram(this.program);
+            this.gl.uniform1i(this._compassLocation, 1);
+            this.gl.useProgram(currentProgram);
+        }
+
+    }
+
+
+    draw(attrBufferManager, padCount, compass) {
+        const { gl, program, _padCountLocation, cameraBlockBindingPoint, cameraBlockTotem, _compassLocation } = this;
+        gl.useProgram(program);
+        attrBufferManager.bindPaddingVAO();
+        cameraBlockTotem.bind(cameraBlockBindingPoint);
+        // draw instanced
+        gl.uniform1f(_padCountLocation, padCount);
+        gl.uniform1i(_compassLocation, compass);
+        gl.drawArraysInstanced(gl.LINES, 0, padCount * 2, attrBufferManager.length);
+        gl.bindVertexArray(null);
+        cameraBlockTotem.unbind(cameraBlockBindingPoint);
+    }
+
+    free() {
+        this.gl.deleteProgram(this.program);
+        globeProgramCache.releaseProgram(this.globe, CameraUniformBlockTotem);
+    }
+}
+
+
+
+export default class {
+    constructor(globe, gl) {
+        this.gl = gl;
+        this.logic = noRegisterGlobeProgramCache.getProgram(globe, Logic);
+    }
+
+    draw(attrBufferManager, padCount, compass) {
+        this.logic.draw(attrBufferManager, padCount, compass);
+    }
+
+    free() {
+        noRegisterGlobeProgramCache.releaseProgram(this.gl, Logic);
+    }
+}

package/programs/rings/index.js

@@ -0,0 +1,9 @@
+import CirclePaddySharedBuffer from './distancering/circlepaddysharedbuffer';
+import CircleFlatProgram from './distancering/circleflatprogram';
+import PaddyFlatProgram from './distancering/paddyflatprogram';
+
+export default {
+    CirclePaddySharedBuffer,
+    CircleFlatProgram,
+    PaddyFlatProgram,
+};