@pirireis/webglobeplugins 0.0.1

package/programs/totems/camerauniformblock.js

@@ -0,0 +1,129 @@
+export const CameraUniformBlockString = `
+layout(std140) uniform CameraUniformBlock {
+    mat4 view; // 64 bytes           0
+    mat4 projection; // 64 bytes     64
+    vec3 translate; // 12 bytes      128
+    bool is3D; // 4 bytes            140
+    vec2 mapWH; // 8 bytes           144
+    vec2 screenWH; //  8 bytes       152
+    float z_level; // 4 bytes        160 | 164
+}; // 11 lines
+`;
+
+
+
+export default class
+
+    CameraUniformBlockTotem {
+
+
+    constructor() {
+        this.id = "CameraUniformBlockTotem"
+        this.description = `Sets a uniform block and provides buffer for it. The following is the glsl uniform block:` + CameraUniformBlockString;
+        this.gl = null;
+        this.globe = null;
+        this.ubo = null;
+    }
+
+
+    init(globe, gl) {
+        this.gl = gl;
+        this.globe = globe;
+        this.ubo = this._createUBO();
+        this.traslateFloat32 = new Float32Array(3);
+        this.mapWHFloat32 = new Float32Array(2);
+        this.setGeometry();
+        this.resize();
+    }
+
+
+    _createUBO() {
+        const { gl } = this;
+        const ubo = gl.createBuffer();
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        gl.bufferData(gl.UNIFORM_BUFFER, 164, gl.STREAM_DRAW);
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, 0, ubo);
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+        return ubo;
+    }
+
+
+    resize() {
+        const { gl, globe, ubo } = this;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 152, new Float32Array([globe.api_ScrW(), globe.api_ScrH()]));
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }
+
+
+    setGeometry() {
+        const { gl, globe, ubo } = this;
+        const is3D = globe.api_GetCurrentGeometry() === 0;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 140, new Float32Array([is3D]));
+    }
+
+    draw3D(projection, modelView, translate) {
+
+        const { gl, traslateFloat32, ubo, mapWHFloat32, globe } = this;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        {   // view, projection, translate
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 0, modelView);
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 64, projection);
+            traslateFloat32.set([translate.x, translate.y, translate.z], 0);
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 128, traslateFloat32);
+        }
+        {
+            // zoom level
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 160, new Float32Array([globe.api_GetCurrentLODWithDecimal()]));
+        }
+        {   // mapWH
+            if (globe.api_GetCurrentGeometry() === 1) {
+                const { width, height } = globe.api_GetCurrentWorldWH();
+                mapWHFloat32.set([width, height]);
+                gl.bufferSubData(gl.UNIFORM_BUFFER, 144, mapWHFloat32);
+            }
+        }
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }
+
+
+    getUBO() {
+        return this.ubo;
+    }
+
+
+    bind(bindingPoint) {
+        const { gl, ubo } = this;
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, ubo);
+
+    }
+
+    unbind(bindingPoint) {
+        const { gl } = this;
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, null);
+    }
+
+
+    free() {
+        const { gl, ubo } = this;
+        gl.deleteBuffer(ubo);
+    }
+
+    readBuffer() {
+        const result = new Float32Array(41);
+        this.gl.bindBuffer(this.gl.UNIFORM_BUFFER, this.ubo);
+        this.gl.getBufferSubData(this.gl.UNIFORM_BUFFER, 0, result);
+        this.gl.bindBuffer(this.gl.UNIFORM_BUFFER, null);
+        return {
+            view: result.slice(0, 16),
+            projection: result.slice(16, 32),
+            translate: result.slice(32, 35),
+            is3D: result[35],
+            mapWH: result.slice(36, 38),
+            screenWH: result.slice(38, 40),
+            z_level: result[40]
+        }
+    }
+}
+

package/programs/totems/index.js

@@ -0,0 +1,2 @@
+import CameraUniformBlockTotem, { CameraUniformBlockString } from "./camerauniformblock";
+export { CameraUniformBlockTotem, CameraUniformBlockString };

package/programs/util.js

@@ -0,0 +1,17 @@
+
+
+export function longlatbbox2normalbbox({ minLon = -180, maxLon = 180, minLat = -90, maxLat = 90 } = {}) {
+    // x
+    const horOffset = (minLon) * Math.PI / 180;
+    const horSize = (maxLon - minLon) * Math.PI / 180;
+    // y
+    const vertOffset = (90 - maxLat) * Math.PI / 180;
+    const vertSize = (maxLat - minLat) * Math.PI / 180;
+
+    const result = {
+        bboxOffsetRad: new Float32Array([horOffset, vertOffset]),
+        bboxSizeRad: new Float32Array([horSize, vertSize])
+    };
+    console.log("longlatbbox2normalbbox", result);
+    return result;
+}

package/programs/vectorfields/index.js

@@ -0,0 +1,3 @@
+import PingPongBufferManager from './pingpongbuffermanager';
+export * from './logics';
+export { PingPongBufferManager };

package/programs/vectorfields/logics/drawrectangleparticles.js

@@ -0,0 +1,125 @@
+import { createProgram } from "../../../util";
+import { UBO_BINDING_POINT, shaderUboSource } from "./ubo.js";
+import { glProgramCache } from "../../programcache.js";
+/**
+ * [+] ubo 
+ */
+
+const vertexShaderSource = `#version 300 es
+precision highp float;
+`+ shaderUboSource + `
+uniform sampler2D u_vector_field;
+in vec2 in_position;
+out vec3 base_color;
+vec2 lookup_wind(const vec2 uv) { // gerek kalmayabilir. sampler linear methodu ayni isi yapiyor 
+    // return texture(u_vector_field, uv).rg; // lower-res hardware filtering
+    vec2 res = vec2(textureSize(u_vector_field, 0));
+    vec2 px = 1.0 / res;
+    vec2 vc = (floor(uv * res)) * px;
+    vec2 f = fract(uv * res);
+    vec2 tl = texture(u_vector_field, vc).rg;
+    vec2 tr = texture(u_vector_field, vc + vec2(px.x, 0)).rg;
+    vec2 bl = texture(u_vector_field, vc + vec2(0, px.y)).rg;
+    vec2 br = texture(u_vector_field, vc + px).rg;
+    return mix(mix(tl, tr, f.x), mix(bl, br, f.x), f.y);
+}
+
+
+void main(){
+    vec2 direction_vector = lookup_wind(in_position);
+    if (direction_vector.r == 0.0 && direction_vector.g == 0.0){ return;}
+
+    vec2 limp;
+    if ( 0 == gl_VertexID) { limp = -tail_wing_base_limp; }
+    else if ( 1 == gl_VertexID) { limp = vec2( tail_wing_base_limp.x, -tail_wing_base_limp.y); }
+    else if ( 2 == gl_VertexID) { limp = tail_wing_base_limp; }
+    else  { limp = vec2(-tail_wing_base_limp.x,  tail_wing_base_limp.y); } // if ( 3 == gl_VertexID)
+
+    limp = (limp  * mat2( 
+        direction_vector.x, -direction_vector.y,
+        direction_vector.y, direction_vector.x)) / draw_texture_size;
+
+    vec2 pos = in_position * 2.0 - 1.0;
+    gl_Position = vec4(pos + limp, 0.0, 1.0);
+    base_color = color;
+}`;
+
+
+const fragmentShaderSource = `#version 300 es
+precision highp float;
+out vec4 outColor;
+in vec3 base_color;
+void main(){
+    outColor = vec4(base_color, 1.0);
+}`;
+
+
+class Logic {
+
+    constructor(gl) {
+        this.gl = gl;
+        [this.program,
+        this._vector_field_location] = this._createProgram();
+        // this.decoyBuffer = new DecoyBufferManager(gl);
+    }
+
+    _createProgram() {
+        const gl = this.gl;
+        const program = createProgram(gl, vertexShaderSource, fragmentShaderSource);
+        // ubo point
+        const ubo_location = gl.getUniformBlockIndex(program, 'UBO');
+        gl.uniformBlockBinding(program, ubo_location, UBO_BINDING_POINT);
+        return [program, gl.getUniformLocation(program, 'u_vector_field')];
+    }
+
+
+
+    /**
+     * @param {*} bufferManager | PingPongBufferManager
+     * @param {*} vectorTexture | RG32F texture R: x, G: y
+     * @param {*} uboManager | WaveParticalUboManager under ubo.js
+     */
+    draw(bufferManager, vectorTexture, uboManager) {
+        const { gl, program } = this;
+        gl.useProgram(program);
+        gl.bindVertexArray(bufferManager.getSourceVao());
+        // gl.bindVertexArray(this.decoyBuffer.getSourceVao());
+
+        uboManager.bind();
+
+        gl.activeTexture(gl.TEXTURE0);
+        gl.uniform1i(this._vector_field_location, 0);
+        gl.bindTexture(
+            gl.TEXTURE_2D,
+            vectorTexture
+        );
+        gl.drawArraysInstanced(gl.TRIANGLE_FAN, 0, 4, bufferManager.length);
+        gl.drawArraysInstanced(gl.POINTS, 0, 4, bufferManager.length);
+        gl.bindVertexArray(null);
+        uboManager.unbind();
+    }
+
+    free() {
+        this.gl.deleteProgram(this.program);
+        this.program = null;
+    }
+
+}
+
+
+export default class {
+    constructor(gl) {
+        this.gl = gl;
+        this.logic = glProgramCache.getProgram(gl, Logic);
+    }
+
+    draw(bufferManager, vectorTexture, uboManager) {
+        this.logic.draw(bufferManager, vectorTexture, uboManager);
+    }
+
+    free() {
+        glProgramCache.releaseProgram(this.logic);
+        this.logic = null;
+        this.gl = null;
+    }
+}

package/programs/vectorfields/logics/index.js

@@ -0,0 +1,5 @@
+import PixelBasedMove from './pixelbased';
+import DrawRectangleParticles from './drawrectangleparticles';
+import { WaveParticalUboManager } from './ubo';
+
+export { PixelBasedMove, DrawRectangleParticles, WaveParticalUboManager };

package/programs/vectorfields/logics/pixelbased.js

@@ -0,0 +1,161 @@
+import { createShader } from "../../../util";
+import { UBO_SIZE, UBO_BINDING_POINT, shaderUboSource } from "./ubo.js";
+import { glProgramCache } from "../../programcache";
+
+// program output is buffer
+// TODO: Mechanism for randomness
+//  drop out mechanism
+//  random particle position mechanism
+
+const vertexShaderSource = `#version 300 es
+` + shaderUboSource + `
+
+uniform sampler2D vector_field;
+in vec2 in_position;
+out vec2 out_position;
+
+// float random(vec2 st){
+//     float t = dot(st, vec2(12.9898,78.233));
+//     return fract(sin(t) * (t+43758.5453123));
+// }
+
+
+const vec3 rand_constants = vec3(12.9898, 78.233, 4375.85453);
+float random(const vec2 co) {
+    float t = dot(rand_constants.xy, co);
+    return fract(sin(t) * (rand_constants.z + t));
+}
+
+vec2 lookup_wind(const vec2 uv) { // gerek kalmayabilir. sampler linear methodu ayni isi yapiyor
+    // return texture(vector_field, uv).rg; // lower-res hardware filtering
+    vec2 res = vec2(textureSize(vector_field, 0));
+    if (res.x == 0.0 || res.y == 0.0){ return vec2(0.0);}
+    vec2 px = 1.0 / res;
+    vec2 vc = (floor(uv * res)) * px;
+    vec2 f = fract(uv * res);
+    vec2 tl = texture(vector_field, vc).rg;
+    vec2 tr = texture(vector_field, vc + vec2(px.x, 0)).rg;
+    vec2 bl = texture(vector_field, vc + vec2(0, px.y)).rg;
+    vec2 br = texture(vector_field, vc + px).rg;
+    if (tl.x == 0.0 && tl.y == 0.0){ return vec2(0.0);}
+    if (tr.x == 0.0 && tr.y == 0.0){ return vec2(0.0);}
+    if (bl.x == 0.0 && bl.y == 0.0){ return vec2(0.0);}
+    if (br.x == 0.0 && br.y == 0.0){ return vec2(0.0);}
+    return mix(mix(tl, tr, f.x), mix(bl, br, f.x), f.y);
+}
+
+
+vec2 random_position(vec2 st){
+    return vec2(random(st), random(st + 1.0));
+}
+
+
+void main(){
+    vec2 vec = lookup_wind(in_position).xy;
+    if (vec.x == 0.0 && vec.y == 0.0){
+        out_position = random_position(in_position);
+        return;
+    }
+    float random_value = random(in_position + random_seed);
+    if (random_value < drop_rate){ //TODO: more sophisticated drop out mechanism mi
+        out_position = random_position(in_position);
+        return;
+    }
+    out_position = in_position - (vec / draw_texture_size)  * range; //*0.0014
+}
+`;
+
+
+const fragmentShaderSource = `#version 300 es
+precision highp float;
+void main(){
+}`;
+
+
+class Logic {
+    constructor(gl) {
+        this.gl = gl;
+        [this.program, this._vector_field_location] = this._createProgram();
+
+    }
+
+    /**
+     * @param {*} bufferManager | PingPongBufferManager
+     * @param {*} vectorTexture RG32F texture R: x, G: y
+     * @param {*} uboManager | WaveParticalUboManager under ubo.js
+     */
+    move(bufferManager, vectorTexture, uboManager) {
+        const { gl, program, _vector_field_location } = this;
+        gl.useProgram(program);
+        gl.enable(gl.RASTERIZER_DISCARD);
+        gl.bindVertexArray(bufferManager.getSourceVao());
+        gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, bufferManager.getTargetTF());
+        gl.beginTransformFeedback(gl.POINTS);
+        uboManager.bind();
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, vectorTexture);
+        gl.uniform1i(_vector_field_location, 0);
+        gl.drawArraysInstanced(gl.POINTS, 0, 1, bufferManager.length);
+        gl.endTransformFeedback();
+        gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, null);
+        gl.bindVertexArray(null);
+        uboManager.unbind();
+        gl.disable(gl.RASTERIZER_DISCARD);
+    }
+
+
+    // -- private methods
+
+    _createProgram() {
+        const gl = this.gl;
+        const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
+        const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
+        const program = gl.createProgram();
+        gl.attachShader(program, vertexShader);
+        gl.attachShader(program, fragmentShader);
+        gl.transformFeedbackVaryings(
+            program,
+            ["out_position"],
+            gl.SEPARATE_ATTRIBS
+        );
+        gl.linkProgram(program);
+        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+            throw new Error(gl.getProgramParameter(program));
+        }
+        const ubo_location = gl.getUniformBlockIndex(program, 'UBO');
+        gl.uniformBlockBinding(program, ubo_location, UBO_BINDING_POINT);
+        return [program, gl.getUniformLocation(program, 'vector_field')];;
+    }
+
+    free() {
+        this.gl.deleteProgram(this.program);
+        this.program = null;
+    }
+
+    getInPositionLocation() {
+        return this.gl.getAttribLocation(this.program, 'in_position');
+    }
+}
+
+
+export default class {
+    constructor(gl) {
+        this.gl = gl;
+        this.logic = glProgramCache.getProgram(gl, Logic);
+    }
+
+    move(bufferManager, vectorTexture, uboManager) {
+        this.logic.move(bufferManager, vectorTexture, uboManager);
+    }
+
+    free() {
+        glProgramCache.releaseProgram(this.gl, Logic);
+        this.program = null;
+        this.gl = null;
+    }
+
+
+    getInPositionLocation() {
+        return this.logic.getInPositionLocation();
+    }
+}

package/programs/vectorfields/logics/ubo.js

@@ -0,0 +1,64 @@
+const UBO_BINDING_POINT = 0;
+const INITIAL_UBO_DATA = new Float32Array([93.17, 0.2, 1.0, 7.0, 1.0, 1.0, 1.0, 0.05, 2000, 2000]);
+const shaderUboSource = `
+layout(std140) uniform UBO {
+    float random_seed;
+    float range;
+    vec2 tail_wing_base_limp;
+    vec3 color;
+    float drop_rate;
+    vec2 draw_texture_size;
+};`;
+
+const UBO_SIZE = 40;
+
+class WaveParticalUboManager {
+
+    constructor(gl) {
+        this.gl = gl;
+        this.ubo = this._createBuffer();
+        this._data = null;
+    }
+
+
+    update({ range, random_seed, tail_wing_base_limp, draw_texture_size, drop_rate, color }) {
+        const { gl, ubo } = this;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        if (random_seed !== undefined) gl.bufferSubData(gl.UNIFORM_BUFFER, 0, new Float32Array([random_seed]));
+        if (range !== undefined) gl.bufferSubData(gl.UNIFORM_BUFFER, 4, new Float32Array([range]));
+        if (tail_wing_base_limp !== undefined) gl.bufferSubData(gl.UNIFORM_BUFFER, 8, new Float32Array(tail_wing_base_limp));
+        if (color !== undefined) gl.bufferSubData(gl.UNIFORM_BUFFER, 16, new Float32Array(color));
+        if (drop_rate !== undefined) gl.bufferSubData(gl.UNIFORM_BUFFER, 28, new Float32Array([drop_rate]));
+        if (draw_texture_size !== undefined) gl.bufferSubData(gl.UNIFORM_BUFFER, 32, new Float32Array(draw_texture_size));
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }
+
+
+
+    _createBuffer() {
+        const gl = this.gl;
+        const buffer = gl.createBuffer();
+        gl.bindBuffer(gl.UNIFORM_BUFFER, buffer);
+        gl.bufferData(gl.UNIFORM_BUFFER, INITIAL_UBO_DATA, gl.STATIC_DRAW);
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+        return buffer;
+    }
+
+
+    bind() {
+        const { gl, ubo } = this;
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, UBO_BINDING_POINT, ubo);
+    }
+
+    unbind() {
+        const gl = this.gl;
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, UBO_BINDING_POINT, null);
+    }
+
+    free() {
+        const { gl, _buffer } = this;
+        gl.deleteBuffer(_buffer);
+    }
+}
+
+export { WaveParticalUboManager, UBO_SIZE, UBO_BINDING_POINT, shaderUboSource };

package/programs/vectorfields/pingpongbuffermanager.js

@@ -0,0 +1,80 @@
+/**
+ * Manages PingPong Buffers.
+ * Updated positions are written to the target buffer.
+ * Then source and target buffers are swapped.
+ * 
+ * update coords and draw particles programs will use this class.
+ */
+
+export default class {
+    constructor(gl, particleCount, inPositionLocation = 0) {
+        this.gl = gl;
+        this._inPositionLocation = inPositionLocation;
+        this._buffers = [gl.createBuffer(), gl.createBuffer()];
+        this._tfs = this._createTransformFeedbacksAndBindBuffers();
+        this._vaos = this._createVaos();
+        this.setParticleCount(particleCount);
+        this._index = 0;
+    }
+
+    setParticleCount(count) {
+        const gl = this.gl;
+        this.length = count;
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._buffers[0]);
+        gl.bufferData(gl.ARRAY_BUFFER, randomNumbers(this.length * 2), gl.DYNAMIC_DRAW);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._buffers[1]);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.length * 2), gl.DYNAMIC_DRAW);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        this._index = 0;
+    }
+
+    _createTransformFeedbacksAndBindBuffers() {
+        const gl = this.gl;
+        const tfs = [gl.createTransformFeedback(), gl.createTransformFeedback()];
+        tfs.forEach((tf, idx) => {
+            gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, tf);
+            gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, this._buffers[idx]);
+        });
+        gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, null);
+        return tfs;
+    }
+
+    _createVaos() {
+        const gl = this.gl;
+        const vaos = [gl.createVertexArray(), gl.createVertexArray()];
+        vaos.forEach((vao, idx) => { // TODO: try with single vao for both buffers
+            gl.bindVertexArray(vao);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this._buffers[idx]);
+            gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+            gl.vertexAttribDivisor(0, 1);
+            gl.enableVertexAttribArray(this._inPositionLocation);
+            gl.bindVertexArray(null);
+        });
+        return vaos;
+    }
+
+    getSourceVao() { return this._vaos[this._index]; }
+    getTargetVao() { return this._vaos[1 - this._index]; }
+    sourceBuffer() { return this._buffers[this._index]; }
+    targetBuffer() { return this._buffers[1 - this._index]; }
+    getTargetTF() { return this._tfs[1 - this._index]; }
+    swap() { this._index = 1 - this._index; }
+
+    free() {
+        this.gl.deleteBuffer(this._buffers[0]);
+        this.gl.deleteBuffer(this._buffers[1]);
+        this.gl.deleteTransformFeedback(this._tfs[0]);
+        this.gl.deleteTransformFeedback(this._tfs[1]);
+        this.gl.deleteVertexArray(this._vaos[0]);
+        this.gl.deleteVertexArray(this._vaos[1]);
+    }
+}
+
+function randomNumbers(count) {
+    const result = new Float32Array(count);
+    const random = Math.random;
+    for (let i = 0; i < count; i++) {
+        result[i] = random() * 2 - 1;
+    }
+    return result;
+}

package/rangerings/index.js

@@ -0,0 +1,3 @@
+import RangeRings from './rangerings';
+
+export { RangeRings };

package/rangerings/rangerings.js

@@ -0,0 +1,88 @@
+import { rings } from "../programs";
+
+const { CircleFlatProgram, PaddyFlatProgram, CirclePaddySharedBuffer } = rings;
+
+
+/**
+ * @typedef RangeRingData
+ * @property {number} centerX
+ * @property {number} centerY
+ * @property {Array<Ring>} rings
+ * 
+ * @typedef Ring
+ * @property {number} radius
+ * @property {number} padding
+ * @property {[number, number, number]} color
+ * 
+ */
+
+/**
+ * TODO: Tasarim dusunceleri
+ * Static Dynamic icin farkli pluginler olusturulabilir. 
+ * Boylelikle bir pluginin iki bufferManageri yonetmesi gerekmez. 
+ */
+
+export default class {
+
+    constructor(id, padCount = 12, compass = 0, circleEdgeCount = 72) {
+        this.id = id;
+        this.compass = compass;
+        this.padCount = padCount;
+        this.circleEdgeCount = circleEdgeCount;
+        this.bufferManager = null;
+    }
+
+    init(globe, gl) {
+        this.gl = gl;
+        this.globe = globe;
+        this.circleFlatProgram = new CircleFlatProgram(globe, gl);
+        this.paddyFlatProgram = new PaddyFlatProgram(globe, gl);
+    }
+
+    free() {
+        this.circleFlatProgram.free();
+        this.paddyFlatProgram.free();
+        if (this.bufferManager !== null) {
+            this.bufferManager.free();
+        }
+    }
+
+
+    draw3D() {
+        const { circleFlatProgram, paddyFlatProgram, padCount, bufferManager, compass, gl, circleEdgeCount } = this;
+        // if (globe.api_GetCurrentGeometry() === 0) return; // do not draw in 3D mode
+        if (this.bufferManager !== null && bufferManager.length > 0) {
+            gl.disable(gl.DEPTH_TEST);
+            // gl.enable(gl.BLEND);
+            // gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+            circleFlatProgram.draw(bufferManager, compass, circleEdgeCount);
+            paddyFlatProgram.draw(bufferManager, padCount, compass);
+            gl.enable(gl.DEPTH_TEST);
+        }
+    }
+
+    setPadCount(padCount) {
+        this.padCount = padCount;
+    }
+
+    /**
+     * @param {RangeRingData} rangeRingData
+     * 0 compass limps
+     * other real distance limp
+     */
+    setCampass(compass) {
+        this.compass = compass;
+    }
+
+    initilizeBufferManager(initialRingCapacity, bufferDrawType) {
+        const { gl, globe } = this
+        this.bufferDrawType = bufferDrawType;
+        this.bufferManager = new CirclePaddySharedBuffer(gl, globe, { bufferType: this.bufferDrawType, initialRingCapacity: initialRingCapacity });
+        return this.bufferManager;
+    }
+
+    getBufferManager() {
+        return this.bufferManager;
+    }
+
+}