@363045841yyt/klinechart-core 0.7.3

package/dist/engine/renderers/webgl/candleSurface.js

@@ -0,0 +1,811 @@
+const RECT_VERTEX_SHADER_SOURCE = `#version 300 es
+precision mediump float;
+
+in vec2 a_unit;
+in vec4 a_rect;
+
+uniform vec2 u_resolution;
+uniform float u_scrollX;
+
+void main() {
+    vec2 position = vec2(
+        a_rect.x - u_scrollX + a_unit.x * a_rect.z,
+        a_rect.y + a_unit.y * a_rect.w
+    );
+
+    vec2 zeroToOne = position / u_resolution;
+    vec2 clip = vec2(
+        zeroToOne.x * 2.0 - 1.0,
+        1.0 - zeroToOne.y * 2.0
+    );
+
+    gl_Position = vec4(clip, 0.0, 1.0);
+}`;
+const LINE_VERTEX_SHADER_SOURCE = `#version 300 es
+precision mediump float;
+
+in vec2 a_position;
+
+uniform vec2 u_resolution;
+uniform float u_scrollX;
+
+void main() {
+    vec2 position = vec2(a_position.x - u_scrollX, a_position.y);
+    vec2 zeroToOne = position / u_resolution;
+    vec2 clip = vec2(
+        zeroToOne.x * 2.0 - 1.0,
+        1.0 - zeroToOne.y * 2.0
+    );
+
+    gl_Position = vec4(clip, 0.0, 1.0);
+}`;
+const FRAGMENT_SHADER_SOURCE = `#version 300 es
+precision mediump float;
+
+uniform vec4 u_color;
+out vec4 outColor;
+
+void main() {
+    outColor = u_color;
+}`;
+const UNIT_QUAD = new Float32Array([
+    0, 0,
+    1, 0,
+    0, 1,
+    0, 1,
+    1, 0,
+    1, 1,
+]);
+export class CandleWebGLSurface {
+    shared;
+    handles = null;
+    logicalWidth = 0;
+    logicalHeight = 0;
+    available = false;
+    rectCapacity = 0;
+    rectScratch = new Float32Array(0);
+    region = null;
+    constructor(shared) {
+        this.shared = shared;
+        this.handles = this.initRectHandles();
+        this.available = this.handles !== null;
+    }
+    isAvailable() {
+        return this.available;
+    }
+    getCanvas() {
+        return this.shared.getCanvas();
+    }
+    setRegion(region) {
+        this.region = region;
+    }
+    resize(width, height, _dpr) {
+        this.logicalWidth = width;
+        this.logicalHeight = height;
+    }
+    clear() {
+        if (!this.region || this.logicalWidth <= 0 || this.logicalHeight <= 0)
+            return;
+        this.shared.clearRegion(this.region);
+    }
+    compositeTo(ctx, options = {}) {
+        if (!this.region)
+            return;
+        this.shared.compositeRegionTo(ctx, this.region, options);
+    }
+    /** 直接传入已打包的 Float32Array：每 4 个元素为一组 (x, y, width, height) */
+    drawRectBuffer(rectData, rectCount, color, scrollLeft) {
+        const handles = this.handles;
+        if (!handles || rectCount === 0 || this.logicalWidth <= 0 || this.logicalHeight <= 0) {
+            return false;
+        }
+        const colorValue = parseColor(color);
+        if (!colorValue)
+            return false;
+        const floatCount = rectCount * 4;
+        const gl = this.shared.getGL();
+        if (!gl || !this.region || !this.shared.bindRegion(this.region))
+            return false;
+        gl.useProgram(handles.program);
+        gl.bindVertexArray(handles.vao);
+        gl.bindBuffer(gl.ARRAY_BUFFER, handles.rectBuffer);
+        if (this.rectCapacity < floatCount) {
+            this.rectCapacity = nextBufferFloatCapacity(floatCount);
+            gl.bufferData(gl.ARRAY_BUFFER, this.rectCapacity * Float32Array.BYTES_PER_ELEMENT, gl.DYNAMIC_DRAW);
+        }
+        gl.bufferSubData(gl.ARRAY_BUFFER, 0, rectData);
+        if (colorValue[3] === 1) {
+            gl.disable(gl.BLEND);
+        }
+        else {
+            gl.enable(gl.BLEND);
+        }
+        gl.uniform2f(handles.resolutionLocation, this.logicalWidth, this.logicalHeight);
+        gl.uniform1f(handles.scrollXLocation, scrollLeft);
+        gl.uniform4f(handles.colorLocation, colorValue[0], colorValue[1], colorValue[2], colorValue[3]);
+        gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, rectCount);
+        gl.bindVertexArray(null);
+        return true;
+    }
+    drawRects(rects, color, scrollLeft) {
+        const handles = this.handles;
+        if (!handles || !rects.length || this.logicalWidth <= 0 || this.logicalHeight <= 0) {
+            return false;
+        }
+        const floatCount = rects.length * 4;
+        if (this.rectScratch.length < floatCount) {
+            this.rectScratch = new Float32Array(nextBufferFloatCapacity(floatCount));
+        }
+        for (let i = 0; i < rects.length; i++) {
+            const rect = rects[i];
+            const offset = i * 4;
+            this.rectScratch[offset] = rect.x;
+            this.rectScratch[offset + 1] = rect.y;
+            this.rectScratch[offset + 2] = rect.width;
+            this.rectScratch[offset + 3] = rect.height;
+        }
+        return this.drawRectBuffer(this.rectScratch.subarray(0, floatCount), rects.length, color, scrollLeft);
+    }
+    destroy() {
+        const handles = this.handles;
+        if (!handles)
+            return;
+        const gl = this.shared.getGL();
+        if (gl) {
+            const { program, vao, unitBuffer, rectBuffer } = handles;
+            gl.deleteBuffer(unitBuffer);
+            gl.deleteBuffer(rectBuffer);
+            gl.deleteVertexArray(vao);
+            gl.deleteProgram(program);
+        }
+        this.handles = null;
+        this.available = false;
+    }
+    initRectHandles() {
+        const gl = this.shared.getGL();
+        if (!gl)
+            return null;
+        const vertexShader = createShader(gl, gl.VERTEX_SHADER, RECT_VERTEX_SHADER_SOURCE);
+        const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER_SOURCE);
+        if (!vertexShader || !fragmentShader) {
+            if (vertexShader)
+                gl.deleteShader(vertexShader);
+            if (fragmentShader)
+                gl.deleteShader(fragmentShader);
+            return null;
+        }
+        const program = createProgram(gl, vertexShader, fragmentShader);
+        gl.deleteShader(vertexShader);
+        gl.deleteShader(fragmentShader);
+        if (!program)
+            return null;
+        const vao = gl.createVertexArray();
+        const unitBuffer = gl.createBuffer();
+        const rectBuffer = gl.createBuffer();
+        if (!vao || !unitBuffer || !rectBuffer) {
+            if (vao)
+                gl.deleteVertexArray(vao);
+            if (unitBuffer)
+                gl.deleteBuffer(unitBuffer);
+            if (rectBuffer)
+                gl.deleteBuffer(rectBuffer);
+            gl.deleteProgram(program);
+            return null;
+        }
+        const resolutionLocation = gl.getUniformLocation(program, 'u_resolution');
+        const scrollXLocation = gl.getUniformLocation(program, 'u_scrollX');
+        const colorLocation = gl.getUniformLocation(program, 'u_color');
+        if (!resolutionLocation || !scrollXLocation || !colorLocation) {
+            gl.deleteBuffer(unitBuffer);
+            gl.deleteBuffer(rectBuffer);
+            gl.deleteVertexArray(vao);
+            gl.deleteProgram(program);
+            return null;
+        }
+        const unitLocation = gl.getAttribLocation(program, 'a_unit');
+        const rectLocation = gl.getAttribLocation(program, 'a_rect');
+        if (unitLocation < 0 || rectLocation < 0) {
+            gl.deleteBuffer(unitBuffer);
+            gl.deleteBuffer(rectBuffer);
+            gl.deleteVertexArray(vao);
+            gl.deleteProgram(program);
+            return null;
+        }
+        gl.bindVertexArray(vao);
+        gl.bindBuffer(gl.ARRAY_BUFFER, unitBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, UNIT_QUAD, gl.STATIC_DRAW);
+        gl.enableVertexAttribArray(unitLocation);
+        gl.vertexAttribPointer(unitLocation, 2, gl.FLOAT, false, 0, 0);
+        gl.vertexAttribDivisor(unitLocation, 0);
+        gl.bindBuffer(gl.ARRAY_BUFFER, rectBuffer);
+        gl.enableVertexAttribArray(rectLocation);
+        gl.vertexAttribPointer(rectLocation, 4, gl.FLOAT, false, 16, 0);
+        gl.vertexAttribDivisor(rectLocation, 1);
+        gl.bindVertexArray(null);
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        return {
+            program,
+            vao,
+            unitBuffer,
+            rectBuffer,
+            resolutionLocation,
+            scrollXLocation,
+            colorLocation,
+        };
+    }
+}
+export class LineWebGLSurface {
+    shared;
+    handles = null;
+    logicalWidth = 0;
+    logicalHeight = 0;
+    dpr = 1;
+    available = false;
+    vertexCapacity = 0;
+    fillScratch = new Float32Array(0);
+    lineScratch = new Float32Array(0);
+    region = null;
+    msaaTargets = null;
+    // Geometry cache: 以 points 数组引用 + halfWidth 为 key，避免每帧重算法线/miter
+    geoCache = new WeakMap();
+    constructor(shared) {
+        this.shared = shared;
+        this.handles = this.initLineHandles();
+        this.available = this.handles !== null;
+    }
+    isAvailable() {
+        return this.available;
+    }
+    getCanvas() {
+        return this.shared.getCanvas();
+    }
+    setRegion(region) {
+        this.region = region;
+    }
+    resize(width, height, dpr) {
+        this.logicalWidth = width;
+        this.logicalHeight = height;
+        this.dpr = dpr;
+    }
+    clear() {
+        if (!this.region || this.logicalWidth <= 0 || this.logicalHeight <= 0)
+            return;
+        this.shared.clearRegion(this.region);
+    }
+    compositeTo(ctx, options = {}) {
+        if (!this.region)
+            return;
+        this.shared.compositeRegionTo(ctx, this.region, options);
+    }
+    drawLineStrips(lines, scrollLeft) {
+        const handles = this.handles;
+        if (!handles || lines.length === 0 || this.logicalWidth <= 0 || this.logicalHeight <= 0) {
+            return false;
+        }
+        const gl = this.shared.getGL();
+        const region = this.region;
+        if (!gl || !region)
+            return false;
+        const drawCmds = [];
+        let totalFloats = 0;
+        for (const line of lines) {
+            if (line.points.length < 2)
+                return false;
+            const colorValue = parseColor(line.color);
+            if (!colorValue)
+                return false;
+            if (line.width === 1) {
+                const { vertexCount, vertices } = this.getThinLineVertices(line.points);
+                drawCmds.push({ colorValue, mode: gl.LINE_STRIP, firstVertex: totalFloats / 2, pointCount: vertexCount });
+                totalFloats += vertices.length;
+            }
+            else {
+                const geometry = this.getLineGeometry(line);
+                if (!geometry)
+                    return false;
+                drawCmds.push({ colorValue, mode: gl.TRIANGLES, firstVertex: totalFloats / 2, pointCount: geometry.vertexCount });
+                totalFloats += geometry.vertices.length;
+            }
+        }
+        if (this.lineScratch.length < totalFloats) {
+            this.lineScratch = new Float32Array(nextBufferFloatCapacity(totalFloats));
+        }
+        let floatOffset = 0;
+        for (const line of lines) {
+            const vertices = line.width === 1
+                ? this.getThinLineVertices(line.points).vertices
+                : this.getLineGeometry(line).vertices;
+            this.lineScratch.set(vertices, floatOffset);
+            floatOffset += vertices.length;
+        }
+        const physical = this.shared.getPhysicalRegion(region);
+        const msaaTargets = physical ? this.ensureLineMsaaTargets(gl, physical) : null;
+        const useMsaa = msaaTargets !== null;
+        if (useMsaa) {
+            gl.bindFramebuffer(gl.FRAMEBUFFER, msaaTargets.msaaFramebuffer);
+            gl.viewport(0, 0, msaaTargets.widthPx, msaaTargets.heightPx);
+            gl.disable(gl.SCISSOR_TEST);
+            gl.clearColor(0, 0, 0, 0);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+        }
+        else if (!this.shared.bindRegion(region)) {
+            return false;
+        }
+        gl.useProgram(handles.basic.program);
+        gl.bindVertexArray(handles.basic.vao);
+        gl.bindBuffer(gl.ARRAY_BUFFER, handles.basic.vertexBuffer);
+        if (this.vertexCapacity < totalFloats) {
+            this.vertexCapacity = nextBufferFloatCapacity(totalFloats);
+            gl.bufferData(gl.ARRAY_BUFFER, this.vertexCapacity * Float32Array.BYTES_PER_ELEMENT, gl.DYNAMIC_DRAW);
+        }
+        gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.lineScratch.subarray(0, totalFloats));
+        gl.uniform2f(handles.basic.resolutionLocation, this.logicalWidth, this.logicalHeight);
+        gl.uniform1f(handles.basic.scrollXLocation, scrollLeft);
+        for (const cmd of drawCmds) {
+            gl.uniform4f(handles.basic.colorLocation, cmd.colorValue[0], cmd.colorValue[1], cmd.colorValue[2], cmd.colorValue[3]);
+            gl.drawArrays(cmd.mode, cmd.firstVertex, cmd.pointCount);
+        }
+        gl.bindVertexArray(null);
+        if (useMsaa && msaaTargets && physical) {
+            this.resolveLineMsaaToSharedRegion(gl, msaaTargets, physical);
+        }
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        return true;
+    }
+    getThinLineVertices(points) {
+        let widthMap = this.geoCache.get(points);
+        if (widthMap) {
+            const cached = widthMap.get(0);
+            if (cached)
+                return cached;
+        }
+        else {
+            widthMap = new Map();
+            this.geoCache.set(points, widthMap);
+        }
+        const vertexCount = points.length;
+        const vertices = new Float32Array(vertexCount * 2);
+        let writeIndex = 0;
+        for (const point of points) {
+            vertices[writeIndex++] = point.x;
+            vertices[writeIndex++] = point.y;
+        }
+        const result = { vertices, vertexCount };
+        widthMap.set(0, result);
+        return result;
+    }
+    getLineGeometry(line) {
+        const halfWidth = line.width / 2;
+        let widthMap = this.geoCache.get(line.points);
+        if (widthMap) {
+            const cached = widthMap.get(halfWidth);
+            if (cached)
+                return cached;
+        }
+        else {
+            widthMap = new Map();
+            this.geoCache.set(line.points, widthMap);
+        }
+        const geometry = buildJoinedPolylineGeometry(line.points, halfWidth);
+        if (geometry)
+            widthMap.set(halfWidth, geometry);
+        return geometry;
+    }
+    drawFilledBand(band, color, scrollLeft) {
+        const handles = this.handles;
+        const pointCount = Math.min(band.upperPoints.length, band.lowerPoints.length);
+        if (!handles || pointCount < 2 || this.logicalWidth <= 0 || this.logicalHeight <= 0) {
+            return false;
+        }
+        const colorValue = parseColor(color);
+        if (!colorValue)
+            return false;
+        const vertexCount = pointCount * 2;
+        const floatCount = vertexCount * 2;
+        if (this.fillScratch.length < floatCount) {
+            this.fillScratch = new Float32Array(nextBufferFloatCapacity(floatCount));
+        }
+        let writeIndex = 0;
+        for (let i = 0; i < pointCount; i++) {
+            const upper = band.upperPoints[i];
+            const lower = band.lowerPoints[i];
+            this.fillScratch[writeIndex++] = upper.x;
+            this.fillScratch[writeIndex++] = upper.y;
+            this.fillScratch[writeIndex++] = lower.x;
+            this.fillScratch[writeIndex++] = lower.y;
+        }
+        const gl = this.shared.getGL();
+        if (!gl || !this.region || !this.shared.bindRegion(this.region))
+            return false;
+        gl.useProgram(handles.basic.program);
+        gl.bindVertexArray(handles.basic.vao);
+        gl.bindBuffer(gl.ARRAY_BUFFER, handles.basic.vertexBuffer);
+        if (this.vertexCapacity < floatCount) {
+            this.vertexCapacity = nextBufferFloatCapacity(floatCount);
+            gl.bufferData(gl.ARRAY_BUFFER, this.vertexCapacity * Float32Array.BYTES_PER_ELEMENT, gl.DYNAMIC_DRAW);
+        }
+        gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.fillScratch.subarray(0, floatCount));
+        gl.uniform2f(handles.basic.resolutionLocation, this.logicalWidth, this.logicalHeight);
+        gl.uniform1f(handles.basic.scrollXLocation, scrollLeft);
+        gl.uniform4f(handles.basic.colorLocation, colorValue[0], colorValue[1], colorValue[2], colorValue[3]);
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, vertexCount);
+        gl.bindVertexArray(null);
+        return true;
+    }
+    destroy() {
+        const handles = this.handles;
+        const gl = this.shared.getGL();
+        if (gl) {
+            this.destroyLineMsaaTargets(gl);
+        }
+        if (!handles) {
+            this.vertexCapacity = 0;
+            return;
+        }
+        if (gl) {
+            const { basic } = handles;
+            gl.deleteBuffer(basic.vertexBuffer);
+            gl.deleteVertexArray(basic.vao);
+            gl.deleteProgram(basic.program);
+        }
+        this.handles = null;
+        this.available = false;
+        this.vertexCapacity = 0;
+    }
+    ensureLineMsaaTargets(gl, physical) {
+        const preferredSamples = 4;
+        const maxSamples = Number(gl.getParameter(gl.MAX_SAMPLES)) || 0;
+        const samples = Math.max(1, Math.min(preferredSamples, maxSamples));
+        if (samples <= 1)
+            return null;
+        const existing = this.msaaTargets;
+        if (existing
+            && existing.widthPx === physical.widthPx
+            && existing.heightPx === physical.heightPx
+            && existing.samples === samples) {
+            return existing;
+        }
+        this.destroyLineMsaaTargets(gl);
+        const msaaFramebuffer = gl.createFramebuffer();
+        const msaaColorRenderbuffer = gl.createRenderbuffer();
+        const resolveFramebuffer = gl.createFramebuffer();
+        const resolveTexture = gl.createTexture();
+        if (!msaaFramebuffer || !msaaColorRenderbuffer || !resolveFramebuffer || !resolveTexture) {
+            if (msaaFramebuffer)
+                gl.deleteFramebuffer(msaaFramebuffer);
+            if (msaaColorRenderbuffer)
+                gl.deleteRenderbuffer(msaaColorRenderbuffer);
+            if (resolveFramebuffer)
+                gl.deleteFramebuffer(resolveFramebuffer);
+            if (resolveTexture)
+                gl.deleteTexture(resolveTexture);
+            return null;
+        }
+        gl.bindFramebuffer(gl.FRAMEBUFFER, msaaFramebuffer);
+        gl.bindRenderbuffer(gl.RENDERBUFFER, msaaColorRenderbuffer);
+        gl.renderbufferStorageMultisample(gl.RENDERBUFFER, samples, gl.RGBA8, physical.widthPx, physical.heightPx);
+        gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, msaaColorRenderbuffer);
+        if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+            gl.deleteFramebuffer(msaaFramebuffer);
+            gl.deleteRenderbuffer(msaaColorRenderbuffer);
+            gl.deleteFramebuffer(resolveFramebuffer);
+            gl.deleteTexture(resolveTexture);
+            return null;
+        }
+        gl.bindFramebuffer(gl.FRAMEBUFFER, resolveFramebuffer);
+        gl.bindTexture(gl.TEXTURE_2D, resolveTexture);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, physical.widthPx, physical.heightPx, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, resolveTexture, 0);
+        if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            gl.bindTexture(gl.TEXTURE_2D, null);
+            gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+            gl.deleteFramebuffer(msaaFramebuffer);
+            gl.deleteRenderbuffer(msaaColorRenderbuffer);
+            gl.deleteFramebuffer(resolveFramebuffer);
+            gl.deleteTexture(resolveTexture);
+            return null;
+        }
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+        const targets = {
+            samples,
+            widthPx: physical.widthPx,
+            heightPx: physical.heightPx,
+            msaaFramebuffer,
+            msaaColorRenderbuffer,
+            resolveFramebuffer,
+            resolveTexture,
+        };
+        this.msaaTargets = targets;
+        return targets;
+    }
+    destroyLineMsaaTargets(gl) {
+        const targets = this.msaaTargets;
+        if (!targets)
+            return;
+        gl.deleteFramebuffer(targets.msaaFramebuffer);
+        gl.deleteRenderbuffer(targets.msaaColorRenderbuffer);
+        gl.deleteFramebuffer(targets.resolveFramebuffer);
+        gl.deleteTexture(targets.resolveTexture);
+        this.msaaTargets = null;
+    }
+    resolveLineMsaaToSharedRegion(gl, targets, physical) {
+        gl.bindFramebuffer(gl.READ_FRAMEBUFFER, targets.msaaFramebuffer);
+        gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, targets.resolveFramebuffer);
+        gl.blitFramebuffer(0, 0, targets.widthPx, targets.heightPx, 0, 0, targets.widthPx, targets.heightPx, gl.COLOR_BUFFER_BIT, gl.NEAREST);
+        gl.bindFramebuffer(gl.READ_FRAMEBUFFER, targets.resolveFramebuffer);
+        gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, null);
+        const destY = this.shared.getCanvas().height - physical.sourceY - physical.heightPx;
+        gl.disable(gl.SCISSOR_TEST);
+        gl.blitFramebuffer(0, 0, targets.widthPx, targets.heightPx, physical.sourceX, destY, physical.sourceX + physical.widthPx, destY + physical.heightPx, gl.COLOR_BUFFER_BIT, gl.NEAREST);
+        gl.bindFramebuffer(gl.READ_FRAMEBUFFER, null);
+        gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, null);
+    }
+    initLineHandles() {
+        const gl = this.shared.getGL();
+        if (!gl)
+            return null;
+        const vertexShader = createShader(gl, gl.VERTEX_SHADER, LINE_VERTEX_SHADER_SOURCE);
+        const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER_SOURCE);
+        if (!vertexShader || !fragmentShader) {
+            if (vertexShader)
+                gl.deleteShader(vertexShader);
+            if (fragmentShader)
+                gl.deleteShader(fragmentShader);
+            return null;
+        }
+        const program = createProgram(gl, vertexShader, fragmentShader);
+        gl.deleteShader(vertexShader);
+        gl.deleteShader(fragmentShader);
+        if (!program)
+            return null;
+        const vao = gl.createVertexArray();
+        const vertexBuffer = gl.createBuffer();
+        if (!vao || !vertexBuffer) {
+            if (vao)
+                gl.deleteVertexArray(vao);
+            if (vertexBuffer)
+                gl.deleteBuffer(vertexBuffer);
+            gl.deleteProgram(program);
+            return null;
+        }
+        const resolutionLocation = gl.getUniformLocation(program, 'u_resolution');
+        const scrollXLocation = gl.getUniformLocation(program, 'u_scrollX');
+        const colorLocation = gl.getUniformLocation(program, 'u_color');
+        if (!resolutionLocation || !scrollXLocation || !colorLocation) {
+            gl.deleteBuffer(vertexBuffer);
+            gl.deleteVertexArray(vao);
+            gl.deleteProgram(program);
+            return null;
+        }
+        const positionLocation = gl.getAttribLocation(program, 'a_position');
+        if (positionLocation < 0) {
+            gl.deleteBuffer(vertexBuffer);
+            gl.deleteVertexArray(vao);
+            gl.deleteProgram(program);
+            return null;
+        }
+        gl.bindVertexArray(vao);
+        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+        gl.enableVertexAttribArray(positionLocation);
+        gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+        gl.bindVertexArray(null);
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        return {
+            basic: {
+                program,
+                vao,
+                vertexBuffer,
+                resolutionLocation,
+                scrollXLocation,
+                colorLocation,
+            },
+        };
+    }
+}
+function nextBufferFloatCapacity(required) {
+    let capacity = 1;
+    while (capacity < required) {
+        capacity <<= 1;
+    }
+    return capacity;
+}
+function buildJoinedPolylineGeometry(points, halfWidth) {
+    if (points.length < 2)
+        return null;
+    // 使用固定结构数组，避免动态对象分配
+    const normals = new Array(points.length - 1);
+    let validSegmentCount = 0;
+    // 第一遍：计算所有法线（用 sqrt 替代 hypot，缓存逆长度）
+    for (let i = 0; i < points.length - 1; i++) {
+        const start = points[i];
+        const end = points[i + 1];
+        const dx = end.x - start.x;
+        const dy = end.y - start.y;
+        const lenSq = dx * dx + dy * dy;
+        if (lenSq <= 0) {
+            normals[i] = { nx: 0, ny: 0, valid: false };
+            continue;
+        }
+        const invLen = 1 / Math.sqrt(lenSq);
+        normals[i] = { nx: -dy * invLen, ny: dx * invLen, valid: true };
+        validSegmentCount++;
+    }
+    if (validSegmentCount === 0)
+        return null;
+    // 预分配顶点数组：每对有效相邻点生成12个float（6个顶点 * 2个坐标）
+    const maxVerticesFloats = (points.length - 1) * 12;
+    const vertices = new Float32Array(maxVerticesFloats);
+    let vertexWriteIndex = 0;
+    // 计算 miter 并直接写入顶点
+    for (let i = 0; i < points.length - 1; i++) {
+        const curr = points[i];
+        const next = points[i + 1];
+        const prevNormal = i > 0 ? normals[i - 1] : null;
+        const currNormal = normals[i];
+        if (!currNormal.valid)
+            continue;
+        if (!prevNormal && !currNormal.valid)
+            continue;
+        // 计算 curr 点的 miter 法线
+        let miterNX = 0;
+        let miterNY = 0;
+        if (prevNormal?.valid && currNormal.valid) {
+            miterNX = prevNormal.nx + currNormal.nx;
+            miterNY = prevNormal.ny + currNormal.ny;
+            const miterLenSq = miterNX * miterNX + miterNY * miterNY;
+            if (miterLenSq > 1e-12) {
+                const invMiter = 1 / Math.sqrt(miterLenSq);
+                miterNX *= invMiter;
+                miterNY *= invMiter;
+                const dot = miterNX * currNormal.nx + miterNY * currNormal.ny;
+                const scale = 1 / Math.max(0.2, Math.abs(dot));
+                miterNX *= scale;
+                miterNY *= scale;
+            }
+            else {
+                miterNX = currNormal.nx;
+                miterNY = currNormal.ny;
+            }
+        }
+        else if (currNormal.valid) {
+            miterNX = currNormal.nx;
+            miterNY = currNormal.ny;
+        }
+        else if (prevNormal?.valid) {
+            miterNX = prevNormal.nx;
+            miterNY = prevNormal.ny;
+        }
+        else {
+            continue;
+        }
+        // 计算 next 点的法线（用于下一对点）
+        let nextMiterNX = currNormal.nx;
+        let nextMiterNY = currNormal.ny;
+        const nextNormal = i < points.length - 2 ? normals[i + 1] : null;
+        if (nextNormal?.valid && currNormal.valid) {
+            nextMiterNX = currNormal.nx + nextNormal.nx;
+            nextMiterNY = currNormal.ny + nextNormal.ny;
+            const miterLenSq = nextMiterNX * nextMiterNX + nextMiterNY * nextMiterNY;
+            if (miterLenSq > 1e-12) {
+                const invMiter = 1 / Math.sqrt(miterLenSq);
+                nextMiterNX *= invMiter;
+                nextMiterNY *= invMiter;
+                const dot = nextMiterNX * nextNormal.nx + nextMiterNY * nextNormal.ny;
+                const scale = 1 / Math.max(0.2, Math.abs(dot));
+                nextMiterNX *= scale;
+                nextMiterNY *= scale;
+            }
+            else {
+                nextMiterNX = currNormal.nx;
+                nextMiterNY = currNormal.ny;
+            }
+        }
+        // 计算四个角点
+        const leftAX = curr.x + miterNX * halfWidth;
+        const leftAY = curr.y + miterNY * halfWidth;
+        const rightAX = curr.x - miterNX * halfWidth;
+        const rightAY = curr.y - miterNY * halfWidth;
+        const leftBX = next.x + nextMiterNX * halfWidth;
+        const leftBY = next.y + nextMiterNY * halfWidth;
+        const rightBX = next.x - nextMiterNX * halfWidth;
+        const rightBY = next.y - nextMiterNY * halfWidth;
+        // 写入两个三角形（6个顶点）
+        vertices[vertexWriteIndex++] = leftAX;
+        vertices[vertexWriteIndex++] = leftAY;
+        vertices[vertexWriteIndex++] = rightAX;
+        vertices[vertexWriteIndex++] = rightAY;
+        vertices[vertexWriteIndex++] = leftBX;
+        vertices[vertexWriteIndex++] = leftBY;
+        vertices[vertexWriteIndex++] = leftBX;
+        vertices[vertexWriteIndex++] = leftBY;
+        vertices[vertexWriteIndex++] = rightAX;
+        vertices[vertexWriteIndex++] = rightAY;
+        vertices[vertexWriteIndex++] = rightBX;
+        vertices[vertexWriteIndex++] = rightBY;
+    }
+    if (vertexWriteIndex === 0)
+        return null;
+    return {
+        vertices: vertexWriteIndex === maxVerticesFloats ? vertices : vertices.subarray(0, vertexWriteIndex),
+        vertexCount: vertexWriteIndex / 2,
+    };
+}
+function createShader(gl, type, source) {
+    const shader = gl.createShader(type);
+    if (!shader)
+        return null;
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        return shader;
+    }
+    gl.deleteShader(shader);
+    return null;
+}
+function createProgram(gl, vertexShader, fragmentShader) {
+    const program = gl.createProgram();
+    if (!program)
+        return null;
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
+    if (gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        return program;
+    }
+    gl.deleteProgram(program);
+    return null;
+}
+const colorCache = new Map();
+function parseColor(color) {
+    const cached = colorCache.get(color);
+    if (cached)
+        return cached;
+    const normalized = color.trim().toLowerCase();
+    let result = null;
+    if (normalized.startsWith('rgba(')) {
+        const values = normalized.slice(5, -1).split(',').map((part) => Number(part.trim()));
+        if (values.length === 4 && values.every((value) => Number.isFinite(value))) {
+            result = [values[0] / 255, values[1] / 255, values[2] / 255, values[3]];
+        }
+    }
+    else if (normalized.startsWith('rgb(')) {
+        const values = normalized.slice(4, -1).split(',').map((part) => Number(part.trim()));
+        if (values.length === 3 && values.every((value) => Number.isFinite(value))) {
+            result = [values[0] / 255, values[1] / 255, values[2] / 255, 1];
+        }
+    }
+    else if (normalized.startsWith('#')) {
+        const hex = normalized.slice(1);
+        if (hex.length === 6) {
+            result = [
+                Number.parseInt(hex.slice(0, 2), 16) / 255,
+                Number.parseInt(hex.slice(2, 4), 16) / 255,
+                Number.parseInt(hex.slice(4, 6), 16) / 255,
+                1,
+            ];
+        }
+        else if (hex.length === 3) {
+            result = [
+                Number.parseInt(hex[0] + hex[0], 16) / 255,
+                Number.parseInt(hex[1] + hex[1], 16) / 255,
+                Number.parseInt(hex[2] + hex[2], 16) / 255,
+                1,
+            ];
+        }
+    }
+    if (result)
+        colorCache.set(color, result);
+    return result;
+}
+//# sourceMappingURL=candleSurface.js.map