@pirireis/webglobeplugins 0.15.34 → 0.16.0

package/programs/rings/distancering/paddyflatprogram3d.js

@@ -1,128 +1,149 @@
-"use strict";
-// TODO: Delete this file if it is not needed anymore.
-// 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.mercatorXYToGLPosition +
-//     shaderfunctions.longLatRadToMercator +
-//     shaderfunctions.longLatRadToCartesian3D +
-//     shaderfunctions.circleLimpFromLongLatRadCenterCartesian3D +
-//     shaderfunctions.circleLimpFromLongLatRadCenterMercatorCompass +
-//     shaderfunctions.circleLimpFromLongLatRadCenterMercatorRealDistancePadding +
-//     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;
-// uniform float opacity;
-// out vec2 v_limp;
-// out vec4 v_color;
-// void main() {
-//     float alpha_padding =  z_level * z_level / (pad_range/ 100.0 );
-//     if( flag == 2.0 || flag == 1.0 || radius == 0.0 || alpha_padding < 0.1 || z_level < 3.0 ) return; // 1.0 is hide
-//     v_color = vec4(color.rgb, color.a * alpha_padding * opacity);
-//     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 = circleLimpFromLongLatRadCenterMercatorRealDistancePadding(center, radius_, angle);
-//         limp = circleLimpFromLongLatRadCenterMercatorRealDistance(center, radius_, angle);
-//     }
-//     v_limp = limp;
-//     gl_Position = mercatorXYToGLPosition(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._opacityLocation = this.gl.getUniformLocation(this.program, "opacity");
-//         this._compassLocation = this.gl.getUniformLocation(this.program, "compass");
-//         this._compassMode = 1;
-//         this._opacity = 1.0;
-//         this._padCount = 360;
-//         {
-//             const currentProgram = this.gl.getParameter(this.gl.CURRENT_PROGRAM);
-//             this.gl.useProgram(this.program);
-//             this.gl.uniform1i(this._compassLocation, 1);
-//             this.gl.uniform1f(this._opacityLocation, 1.0);
-//             this.gl.uniform1f(this._padCountLocation, 360)
-//             this.gl.useProgram(currentProgram);
-//         }
-//     }
-//     draw(attrBufferManager, padCount, compass, opacity) {
-//         const { gl, program, _padCountLocation, cameraBlockBindingPoint, cameraBlockTotem, _compassLocation } = this;
-//         gl.useProgram(program);
-//         attrBufferManager.bindPaddingVAO();
-//         cameraBlockTotem.bind(cameraBlockBindingPoint);
-//         // draw instanced
-//         if (padCount !== this._padCount) {
-//             this._padCount = padCount;
-//             // console.log("padCount", padCount);
-//             gl.uniform1f(_padCountLocation, padCount);
-//         }
-//         if (compass !== this._compassMode) {
-//             // console.log("compass", compass);
-//             gl.uniform1i(_compassLocation, compass);
-//             this._compassMode = compass;
-//         }
-//         if (opacity !== this._opacity) {
-//             // console.log("opacity", opacity);
-//             this._opacity = opacity;
-//             gl.uniform1f(this._opacityLocation, opacity);
-//         }
-//         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 const PaddingProgramCache = Object.freeze({
-//     getProgram: (globe) => { return noRegisterGlobeProgramCache.getProgram(globe, Logic) },
-//     releaseProgram: (globe) => { noRegisterGlobeProgramCache.releaseProgram(globe, Logic) }
-// })
+// TODO: Delete this file if it is not needed anymore.
+
+
+// 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.mercatorXYToGLPosition +
+//     shaderfunctions.longLatRadToMercator +
+//     shaderfunctions.longLatRadToCartesian3D +
+//     shaderfunctions.circleLimpFromLongLatRadCenterCartesian3D +
+//     shaderfunctions.circleLimpFromLongLatRadCenterMercatorCompass +
+//     shaderfunctions.circleLimpFromLongLatRadCenterMercatorRealDistancePadding +
+//     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;
+
+// uniform float opacity;
+
+
+// out vec2 v_limp;
+// out vec4 v_color;
+
+
+// void main() {
+
+//     float alpha_padding =  z_level * z_level / (pad_range/ 100.0 );
+//     if( flag == 2.0 || flag == 1.0 || radius == 0.0 || alpha_padding < 0.1 || z_level < 3.0 ) return; // 1.0 is hide
+//     v_color = vec4(color.rgb, color.a * alpha_padding * opacity);
+
+//     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 = circleLimpFromLongLatRadCenterMercatorRealDistancePadding(center, radius_, angle);
+//         limp = circleLimpFromLongLatRadCenterMercatorRealDistance(center, radius_, angle);
+//     }
+//     v_limp = limp;
+//     gl_Position = mercatorXYToGLPosition(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._opacityLocation = this.gl.getUniformLocation(this.program, "opacity");
+//         this._compassLocation = this.gl.getUniformLocation(this.program, "compass");
+//         this._compassMode = 1;
+//         this._opacity = 1.0;
+//         this._padCount = 360;
+//         {
+//             const currentProgram = this.gl.getParameter(this.gl.CURRENT_PROGRAM);
+//             this.gl.useProgram(this.program);
+//             this.gl.uniform1i(this._compassLocation, 1);
+//             this.gl.uniform1f(this._opacityLocation, 1.0);
+//             this.gl.uniform1f(this._padCountLocation, 360)
+//             this.gl.useProgram(currentProgram);
+//         }
+
+//     }
+
+
+//     draw(attrBufferManager, padCount, compass, opacity) {
+//         const { gl, program, _padCountLocation, cameraBlockBindingPoint, cameraBlockTotem, _compassLocation } = this;
+//         gl.useProgram(program);
+//         attrBufferManager.bindPaddingVAO();
+//         cameraBlockTotem.bind(cameraBlockBindingPoint);
+//         // draw instanced
+//         if (padCount !== this._padCount) {
+//             this._padCount = padCount;
+//             // console.log("padCount", padCount);
+//             gl.uniform1f(_padCountLocation, padCount);
+//         }
+//         if (compass !== this._compassMode) {
+//             // console.log("compass", compass);
+//             gl.uniform1i(_compassLocation, compass);
+//             this._compassMode = compass;
+//         }
+//         if (opacity !== this._opacity) {
+//             // console.log("opacity", opacity);
+//             this._opacity = opacity;
+//             gl.uniform1f(this._opacityLocation, opacity);
+//         }
+//         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 const PaddingProgramCache = Object.freeze({
+//     getProgram: (globe) => { return noRegisterGlobeProgramCache.getProgram(globe, Logic) },
+//     releaseProgram: (globe) => { noRegisterGlobeProgramCache.releaseProgram(globe, Logic) }
+// })

package/programs/rings/index.js

@@ -1 +1 @@
-export * from "./distancering";
+export * from "./distancering";

package/programs/rings/partial-ring/piece-of-pie.ts

@@ -0,0 +1,323 @@
+import { createProgram } from "../../../util/webglobjectbuilders";
+import { CameraUniformBlockTotem, CameraUniformBlockString } from "../../totems/index";
+import { noRegisterGlobeProgramCache, globeProgramCache } from "../../programcache";
+import { attributeLoader } from "../../../util/gl-util/buffer/attribute-loader";
+import { UniformBlockManager } from "../../../util/gl-util/uniform-block/manager";
+import { Globe, } from "../../../types";
+import { UBOHandler } from "../../../types";
+
+import {
+    POLE,
+    PI,
+    longLatRadToMercator,
+    mercatorXYToGLPosition,
+    longLatRadToCartesian3D,
+    circleLimpFromLongLatRadCenterCartesian3D_accurate,
+    circleLimpFromLongLatRadCenterMercatorCompass_accurate,
+    //circleLimpFromLongLatRadCenterMercatorRealDistanceNew_accurate,
+    cartesian3DToGLPosition
+} from "../../../util/shaderfunctions/geometrytransformations";
+
+
+
+export type BufferObject = {
+    buffer: WebGLBuffer;
+    stride: number;
+    offset: number;
+}
+
+export type DrawMode = 'LINE_STRIP' | 'TRIANGLE_FAN';
+
+// interface DrawModeMap {
+//     readonly LINE_STRIP: 0;
+//     readonly TRIANGLE_FAN: 1;
+// }
+
+interface ProgramCache {
+    get: (globe: Globe) => Logic;
+    release: (globe: Globe) => void;
+}
+
+/**
+ * TODO:
+ * 1. Triangle face looks at screen. if rotation angle is positive the last vertex must be the faintest.
+ * 
+ */
+
+const uniformBindingPoints = {
+    camera: 0,
+    flexible: 1,
+};
+
+const flexibleBlockManager = new UniformBlockManager(
+    'FlexibleAttributes',
+    [
+        { name: "u_color", type: "vec4", value: new Float32Array([0.12, 1, 0.1, 1]) },
+        { name: "u_opacity", type: "float", value: new Float32Array([1]) },
+
+    ],
+    uniformBindingPoints.flexible,
+);
+
+
+const drawModeMap = Object.freeze({
+    LINE_STRIP: 0,
+    TRIANGLE_FAN: 1,
+});
+
+//${ circleLimpFromLongLatRadCenterMercatorRealDistanceNew_accurate }
+
+const vertexShaderSource: string = `#version 300 es
+
+${CameraUniformBlockString} 
+${PI} 
+${longLatRadToMercator}
+${mercatorXYToGLPosition}
+${longLatRadToCartesian3D}
+${circleLimpFromLongLatRadCenterCartesian3D_accurate}
+${circleLimpFromLongLatRadCenterMercatorCompass_accurate}
+${cartesian3DToGLPosition}
+
+${flexibleBlockManager.glslCode()}
+
+
+uniform float edge_count;
+uniform int draw_mode; // %2 => 0: LINE_STRIP, 1: TRIANGLE_FAN 
+
+in vec2 center2d;
+in vec3 center3d;
+in float start_angle2d; 
+in float tail_angle2d;
+
+in float start_angle3d;
+in float tail_angle3d;
+
+in vec4 color;
+in float radius; // in meter
+in float filling_mode; // 0.0: constant, 1.0: fading, 2.0: hide
+
+out vec2 v_pos;
+out vec4 v_color;
+
+
+void main() {
+    // vid = gl_VertexID;
+    vec4 _color = (color.r == -1.0) ? u_color : color;
+
+    if (filling_mode == 2.0 || radius == 0.0) { return; }
+    float start_angle, tail_angle;
+    if (is3D) {
+        start_angle = start_angle3d;
+        tail_angle = tail_angle3d;
+    } else {
+        start_angle = start_angle2d;
+        tail_angle = tail_angle2d;
+    }
+    float filling_mode_ = filling_mode;
+    if ( draw_mode == 0 && filling_mode == 1.0) {filling_mode_ = 0.0;}
+    float vertexID = float(gl_VertexID);
+    float radius_ = radius;
+    float alpha = u_opacity;
+    if (draw_mode == 1) { // TRIANGLE_FAN
+        if (gl_VertexID == 0) { 
+            radius_ = 0.0; 
+            if ( filling_mode == 1.0 ) { alpha = 0.0; }
+        }
+        vertexID -= 1.0;
+    }
+    float phase = ( vertexID  / (edge_count - 1.0) );
+    
+    if ( filling_mode_ == 1.0 ) {
+        if ( tail_angle < 0.0 ) {
+                v_color = vec4( _color.rgb , _color.a * ( 1.0 - phase ) * alpha );
+            } else {
+                v_color = vec4( _color.rgb , _color.a * phase * alpha );
+        }
+    } else {
+        v_color = vec4( _color.rgb , _color.a * alpha );
+    }
+    if ( filling_mode == 0.0 && draw_mode == 1 ) {
+        v_color.a /= 2.0;
+    }
+    float angle;
+    if ( tail_angle > 0.0 ) { 
+        angle =  tail_angle * (-phase + 1.0) + start_angle;
+        } else {
+        angle = tail_angle * phase + start_angle;
+    }
+    if (is3D) {
+        vec3 pos = circleLimpFromLongLatRadCenterCartesian3D_accurate(center3d, radius_, angle);
+        v_pos = vec2(0.0, 0.0);
+        gl_Position = cartesian3DToGLPosition(pos);
+    }
+    else {
+        vec2 pos2 = circleLimpFromLongLatRadCenterMercatorCompass_accurate(center2d, radius_, angle);
+        v_pos = pos2;
+        gl_Position = mercatorXYToGLPosition(pos2);
+    }
+
+    gl_PointSize = 10.0;
+}`;
+
+const fragmentShaderSource: string = `#version 300 es` + POLE + PI + `
+precision highp float;
+in vec4 v_color;
+in vec2 v_pos;
+out vec4 outColor;
+void main() {
+
+    if ( v_pos.x < -POLE || v_pos.x > POLE || v_pos.y < -POLE || v_pos.y > POLE ) { discard; }
+    outColor = v_color;
+}`;
+
+export const ITEM_SIZE: number = 10;
+
+export class Logic {
+    private globe: Globe;
+    private gl: WebGL2RenderingContext;
+    private _lastMode: number;
+    private _lastEdgeCount: number;
+    private _lastAlphaMultiplier: number;
+    private program: WebGLProgram;
+    private _edgeCountLocation: WebGLUniformLocation | null;
+    private _draw_modeLocation: WebGLUniformLocation | null;
+    private cameraBlockBindingPoint: number;
+    private cameraBlockTotem: any; // Type this based on your CameraUniformBlockTotem implementation
+    private _ubosPublished: UBOHandler[] = [];
+    private _defaultFlexibleUBO: UBOHandler;
+    constructor(globe: Globe) {
+        this.globe = globe;
+        this.gl = globe.gl;
+        this._lastMode = 0;
+        this._lastEdgeCount = 64;
+        this._lastAlphaMultiplier = 1.0;
+
+        this.program = createProgram(this.gl, vertexShaderSource, fragmentShaderSource);
+        const { gl, program } = this;
+        {   // set attributes locations 
+            gl.bindAttribLocation(program, 0, 'center2d');
+            gl.bindAttribLocation(program, 1, 'center3d')
+            gl.bindAttribLocation(program, 2, 'start_angle2d');
+            gl.bindAttribLocation(program, 3, 'tail_angle2d');
+            gl.bindAttribLocation(program, 4, 'start_angle3d');
+            gl.bindAttribLocation(program, 5, 'tail_angle3d');
+            gl.bindAttribLocation(program, 6, 'color');
+            gl.bindAttribLocation(program, 7, 'radius');
+            gl.bindAttribLocation(program, 8, 'filling_mode');
+            // vao
+            // instanced draw read 1 
+        }
+        {   // Uniforms
+            this._edgeCountLocation = gl.getUniformLocation(program, 'edge_count');
+            this._draw_modeLocation = gl.getUniformLocation(program, 'draw_mode');
+            const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+            gl.useProgram(program);
+            gl.uniform1i(this._draw_modeLocation!, this._lastMode);
+            gl.uniform1f(this._edgeCountLocation!, this._lastEdgeCount);
+
+            this.cameraBlockBindingPoint = 0;
+            this.cameraBlockTotem = globeProgramCache.getProgram(globe, CameraUniformBlockTotem);
+            const cameraBlockIndex = gl.getUniformBlockIndex(program, "CameraUniformBlock");
+            gl.uniformBlockBinding(program, cameraBlockIndex, this.cameraBlockBindingPoint);
+
+            flexibleBlockManager.assignBindingPoint(gl, program);
+            this._defaultFlexibleUBO = flexibleBlockManager.createUBO(gl);
+            gl.useProgram(currentProgram);
+        }
+    }
+
+    draw(
+        length: number,
+        vao: WebGLVertexArrayObject,
+        edgeCount: number,
+        drawMode: DrawMode,
+        ubo: UBOHandler | null = null): void {
+        const { gl, program, cameraBlockTotem, cameraBlockBindingPoint } = this;
+
+        gl.useProgram(program);
+        if (drawModeMap[drawMode] !== this._lastMode) {
+            gl.uniform1i(this._draw_modeLocation!, drawModeMap[drawMode]);
+            this._lastMode = drawModeMap[drawMode];
+        }
+        if (edgeCount !== this._lastEdgeCount) {
+            gl.uniform1f(this._edgeCountLocation!, edgeCount);
+            this._lastEdgeCount = edgeCount;
+        }
+
+        if (ubo) {
+            ubo.bind();
+        } else {
+            this._defaultFlexibleUBO.bind();
+        }
+        const overdraw = drawModeMap[drawMode];
+        cameraBlockTotem.bind(cameraBlockBindingPoint);
+        gl.bindVertexArray(vao);
+        gl.drawArraysInstanced(gl[drawMode], 0, edgeCount + overdraw, length);
+        cameraBlockTotem.unbind(cameraBlockBindingPoint);
+        gl.bindVertexArray(null);
+        if (ubo) {
+            ubo.unbind();
+        } else {
+            this._defaultFlexibleUBO.unbind();
+        }
+    }
+
+    free(): void {
+        noRegisterGlobeProgramCache.releaseProgram(this.globe, CameraUniformBlockTotem);
+        this.gl.deleteProgram(this.program);
+        this._defaultFlexibleUBO.free();
+        this._ubosPublished.forEach(ubo => ubo.free()); // TODO: can be called 2 times. is it a problem?
+        this.program = null!;
+    }
+
+    /**
+     * in vec2 center; // long, lat in radian
+    in float start_angle; // the start of partial circle from bearing point
+    in float tail_angle; // the rotation of the partial circle
+    in vec4 color;
+    in float radius; // in meter
+    in float filling_mode; // 0.0: constant, 1.0: fading, 2.0: hide
+     */
+
+    createVAO(
+        center2dObj: BufferObject,
+        center3dObj: BufferObject,
+        startAngle2DObj: BufferObject,
+        tailAngle2DObj: BufferObject,
+        startAngle3DObj: BufferObject,
+        tailAngle3DObj: BufferObject,
+        colorObj: BufferObject,
+        radiusObj: BufferObject,
+        colorModeObj: BufferObject
+    ): WebGLVertexArrayObject {
+        const { gl } = this;
+        const vao = gl.createVertexArray()!;
+        gl.bindVertexArray(vao);
+        attributeLoader(gl, center2dObj, 0, 2, { divisor: 1 });
+        attributeLoader(gl, center3dObj, 1, 3, { divisor: 1 });
+        attributeLoader(gl, startAngle2DObj, 2, 1, { divisor: 1 });
+        attributeLoader(gl, tailAngle2DObj, 3, 1, { divisor: 1 });
+        attributeLoader(gl, startAngle3DObj, 4, 1, { divisor: 1 });
+        attributeLoader(gl, tailAngle3DObj, 5, 1, { divisor: 1 });
+        attributeLoader(gl, colorObj, 6, 4, { divisor: 1, escapeValues: [-1.0, -1.0, -1.0, -1.0] });
+        attributeLoader(gl, radiusObj, 7, 1, { divisor: 1, escapeValues: [-1.0] });
+        attributeLoader(gl, colorModeObj, 8, 1, { divisor: 1, escapeValues: [-1.0] });
+        gl.bindVertexArray(null);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        return vao;
+    }
+
+
+    createUBO() {
+        const { gl } = this;
+        const bufferReadType = gl.DYNAMIC_DRAW;
+        const ubo = flexibleBlockManager.createUBO(gl, "STATIC_DRAW");
+        this._ubosPublished.push(ubo);
+        return ubo;
+    }
+}
+
+export const PieceOfPieProgramCache: ProgramCache = Object.freeze({
+    get: (globe: Globe): Logic => noRegisterGlobeProgramCache.getProgram(globe, Logic),
+    release: (globe: Globe): void => noRegisterGlobeProgramCache.releaseProgram(globe, Logic)
+});