@next2d/webgl 1.15.0 → 1.17.0

package/dist/TextureManager.d.ts

@@ -1,20 +1,70 @@
+import type { CachePositionImpl } from "./interface/CachePositionImpl";
+import type { GridImpl } from "./interface/GridImpl";
 /**
  * @class
  */
 export declare class TextureManager {
+    _$maxWidth: number;
+    _$maxHeight: number;
+    private _$objectPoolArea;
+    private _$activeTexture;
     private readonly _$gl;
     private readonly _$objectPool;
     private readonly _$boundTextures;
-    private _$objectPoolArea;
-    private _$activeTexture;
-    _$maxWidth: number;
-    _$maxHeight: number;
+    private readonly _$atlasNodes;
+    private readonly _$atlasTextures;
+    private readonly _$positionObjectArray;
+    private readonly _$nodeObjectArray;
+    private readonly _$atlasCacheMap;
     /**
      * @param {WebGL2RenderingContext} gl
      * @constructor
      * @public
      */
     constructor(gl: WebGL2RenderingContext);
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    createTextureAtlas(): void;
+    /**
+     * @param  {number} index
+     * @return {WebGLTexture}
+     * @method
+     * @public
+     */
+    getAtlasTexture(index: number): WebGLTexture;
+    /**
+     * @param  {number} x
+     * @param  {number} y
+     * @param  {number} w
+     * @param  {number} h
+     * @return {object}
+     * @method
+     * @public
+     */
+    getNode(x: number, y: number, w: number, h: number): GridImpl;
+    /**
+     * @param  {number} width
+     * @param  {number} height
+     * @return {object}
+     * @method
+     * @public
+     */
+    createCachePosition(width: number, height: number): CachePositionImpl;
+    /**
+     * @param {object}
+     * @method
+     * @public
+     */
+    releasePosition(position: CachePositionImpl): void;
+    /**
+     * @return {void}
+     * @method
+     * @private
+     */
+    clearCache(): void;
     /**
      * @param  {number} width
      * @param  {number} height

package/dist/TextureManager.js

@@ -1,3 +1,4 @@
+import { $RENDER_SIZE } from "./Const";
 /**
  * @class
  */
@@ -8,6 +9,9 @@ export class TextureManager {
      * @public
      */
     constructor(gl) {
+        // init setting
+        gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
         /**
          * @type {WebGL2RenderingContext}
          * @private
@@ -47,8 +51,241 @@ export class TextureManager {
          * @private
          */
         this._$maxHeight = 0;
-        this._$gl.pixelStorei(this._$gl.UNPACK_ALIGNMENT, 1);
-        this._$gl.pixelStorei(this._$gl.UNPACK_FLIP_Y_WEBGL, true);
+        /**
+         * @type {array}
+         * @private
+         */
+        this._$atlasTextures = [];
+        /**
+         * @type {array}
+         * @private
+         */
+        this._$atlasCacheMap = new Map();
+        /**
+         * @type {array}
+         * @private
+         */
+        this._$positionObjectArray = [];
+        /**
+         * @type {array}
+         * @private
+         */
+        this._$nodeObjectArray = [];
+        /**
+         * @type {array}
+         * @private
+         */
+        this._$atlasNodes = new Map();
+    }
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    createTextureAtlas() {
+        const texture = this._$gl.createTexture();
+        texture.width = $RENDER_SIZE;
+        texture.height = $RENDER_SIZE;
+        this._$gl.activeTexture(this._$gl.TEXTURE3);
+        this._$gl.bindTexture(this._$gl.TEXTURE_2D, texture);
+        this._$gl.texParameteri(this._$gl.TEXTURE_2D, this._$gl.TEXTURE_WRAP_S, this._$gl.CLAMP_TO_EDGE);
+        this._$gl.texParameteri(this._$gl.TEXTURE_2D, this._$gl.TEXTURE_WRAP_T, this._$gl.CLAMP_TO_EDGE);
+        this._$gl.texParameteri(this._$gl.TEXTURE_2D, this._$gl.TEXTURE_MIN_FILTER, this._$gl.NEAREST);
+        this._$gl.texParameteri(this._$gl.TEXTURE_2D, this._$gl.TEXTURE_MAG_FILTER, this._$gl.NEAREST);
+        this._$gl.texStorage2D(this._$gl.TEXTURE_2D, 1, this._$gl.RGBA8, $RENDER_SIZE, $RENDER_SIZE);
+        this._$gl.bindTexture(this._$gl.TEXTURE_2D, null);
+        if (this._$activeTexture > -1) {
+            this._$gl.activeTexture(this._$activeTexture);
+        }
+        // init array
+        const index = this._$atlasTextures.length;
+        this._$atlasNodes.set(index, []);
+        this._$atlasCacheMap.set(index, []);
+        this._$atlasTextures.push(texture);
+    }
+    /**
+     * @param  {number} index
+     * @return {WebGLTexture}
+     * @method
+     * @public
+     */
+    getAtlasTexture(index) {
+        return this._$atlasTextures[index];
+    }
+    /**
+     * @param  {number} x
+     * @param  {number} y
+     * @param  {number} w
+     * @param  {number} h
+     * @return {object}
+     * @method
+     * @public
+     */
+    getNode(x, y, w, h) {
+        const node = this._$nodeObjectArray.length
+            ? this._$nodeObjectArray.pop()
+            : {
+                "x": 0,
+                "y": 0,
+                "w": 0,
+                "h": 0
+            };
+        node.x = x;
+        node.y = y;
+        node.w = w;
+        node.h = h;
+        return node;
+    }
+    /**
+     * @param  {number} width
+     * @param  {number} height
+     * @return {object}
+     * @method
+     * @public
+     */
+    createCachePosition(width, height) {
+        const object = this._$positionObjectArray.length
+            ? this._$positionObjectArray.pop()
+            : {
+                "index": 0,
+                "x": 0,
+                "y": 0,
+                "w": 0,
+                "h": 0
+            };
+        // init
+        object.x = object.y = 0;
+        object.w = width;
+        object.h = height;
+        // search
+        for (const [index, nodes] of this._$atlasNodes) {
+            // root node
+            if (!nodes.length) {
+                if (width > height) {
+                    if ($RENDER_SIZE - width - 1 > 0) {
+                        nodes.push(this.getNode(width + 1, 0, $RENDER_SIZE - width - 1, height));
+                    }
+                    if ($RENDER_SIZE - height - 1 > 0) {
+                        nodes.push(this.getNode(0, height + 1, $RENDER_SIZE, $RENDER_SIZE - height - 1));
+                    }
+                }
+                else {
+                    if ($RENDER_SIZE - height - 1 > 0) {
+                        nodes.push(this.getNode(0, height + 1, width, $RENDER_SIZE - height - 1));
+                    }
+                    if ($RENDER_SIZE - width - 1 > 0) {
+                        nodes.push(this.getNode(width + 1, 0, $RENDER_SIZE - width - 1, $RENDER_SIZE));
+                    }
+                }
+                object.index = index;
+                const caches = this._$atlasCacheMap.get(object.index);
+                caches.push(object);
+                return object;
+            }
+            const length = nodes.length;
+            for (let idx = 0; idx < length; ++idx) {
+                const node = nodes[idx];
+                // no hit
+                if (width > node.w || height > node.h) {
+                    continue;
+                }
+                object.index = index;
+                object.x = node.x;
+                object.y = node.y;
+                const caches = this._$atlasCacheMap.get(object.index);
+                caches.push(object);
+                // division
+                if (node.w !== width || node.h !== height) {
+                    if (width > height) {
+                        if (node.h - height - 1 > 0) {
+                            nodes.push(this.getNode(node.x, node.y + height + 1, node.w, node.h - height - 1));
+                        }
+                        if (node.w - width - 1 > 0) {
+                            node.x = node.x + width + 1;
+                            node.w = node.w - width - 1;
+                            node.h = height;
+                        }
+                        else {
+                            nodes.splice(idx, 1);
+                            this._$nodeObjectArray.push(node);
+                        }
+                    }
+                    else {
+                        if (node.w - width - 1 > 0) {
+                            nodes.push(this.getNode(node.x + width + 1, node.y, node.w - width - 1, node.h));
+                        }
+                        if (node.h - height - 1 > 0) {
+                            node.y = node.y + height + 1;
+                            node.w = width;
+                            node.h = node.h - height - 1;
+                        }
+                        else {
+                            nodes.splice(idx, 1);
+                            this._$nodeObjectArray.push(node);
+                        }
+                    }
+                }
+                else {
+                    nodes.splice(idx, 1);
+                    this._$nodeObjectArray.push(node);
+                }
+                return object;
+            }
+        }
+        // ヒットしない場合は新しいtextureを生成
+        const index = this._$atlasTextures.length;
+        this.createTextureAtlas();
+        const nodes = this._$atlasNodes.get(index);
+        if (width > height) {
+            if ($RENDER_SIZE - width - 1 > 0) {
+                nodes.push(this.getNode(width + 1, 0, $RENDER_SIZE - width - 1, height));
+            }
+            if ($RENDER_SIZE - height - 1 > 0) {
+                nodes.push(this.getNode(0, height + 1, $RENDER_SIZE, $RENDER_SIZE - height - 1));
+            }
+        }
+        else {
+            if ($RENDER_SIZE - height - 1 > 0) {
+                nodes.push(this.getNode(0, height + 1, width, $RENDER_SIZE - height - 1));
+            }
+            if ($RENDER_SIZE - width - 1 > 0) {
+                nodes.push(this.getNode(width + 1, 0, $RENDER_SIZE - width - 1, $RENDER_SIZE));
+            }
+        }
+        object.index = index;
+        const caches = this._$atlasCacheMap.get(object.index);
+        caches.push(object);
+        return object;
+    }
+    /**
+     * @param {object}
+     * @method
+     * @public
+     */
+    releasePosition(position) {
+        var _a;
+        if (!this._$atlasNodes.has(position.index)) {
+            return;
+        }
+        // 先頭にrootとして再登録
+        (_a = this
+            ._$atlasNodes
+            .get(position.index)) === null || _a === void 0 ? void 0 : _a.unshift(this.getNode(position.x, position.y, position.w, position.h));
+        // pool
+        this._$positionObjectArray.push(position);
+    }
+    /**
+     * @return {void}
+     * @method
+     * @private
+     */
+    clearCache() {
+        for (const caches of this._$atlasCacheMap.values()) {
+            caches.length = 0;
+        }
+        for (const caches of this._$atlasNodes.values()) {
+            caches.length = 0;
+        }
     }
     /**
      * @param  {number} width
@@ -64,8 +301,6 @@ export class TextureManager {
         texture.area = 0;
         texture.dirty = true;
         texture.smoothing = true;
-        texture._$offsetX = 0;
-        texture._$offsetY = 0;
         this.bind0(texture, false);
         this._$gl.texParameteri(this._$gl.TEXTURE_2D, this._$gl.TEXTURE_WRAP_S, this._$gl.CLAMP_TO_EDGE);
         this._$gl.texParameteri(this._$gl.TEXTURE_2D, this._$gl.TEXTURE_WRAP_T, this._$gl.CLAMP_TO_EDGE);

package/dist/VertexArrayObjectManager.d.ts

@@ -1,5 +1,6 @@
 import type { CapsStyleImpl } from "./interface/CapsStyleImpl";
 import type { JointStyleImpl } from "./interface/JointStyleImpl";
+import type { WebGLShaderInstance } from "./shader/WebGLShaderInstance";
 /**
  * @class
  */
@@ -16,12 +17,23 @@ export declare class VertexArrayObjectManager {
     private readonly _$strokeAttrib_type;
     private readonly _$vertexBufferData;
     private readonly _$commonVertexArray;
+    private readonly _$instanceVertexArray;
+    private readonly _$attributeVertexBuffer;
+    private _$attributeBuffer;
     /**
      * @param {WebGL2RenderingContext} gl
      * @constructor
      * @public
      */
     constructor(gl: WebGL2RenderingContext);
+    /**
+     * @param  {number} begin
+     * @param  {number} end
+     * @return {WebGLVertexArrayObject}
+     * @method
+     * @private
+     */
+    _$getCommonVertexArray(): WebGLVertexArrayObject;
     /**
      * @param  {number} begin
      * @param  {number} end
@@ -79,6 +91,13 @@ export declare class VertexArrayObjectManager {
      * @public
      */
     bind(vertex_array?: WebGLVertexArrayObject | null): void;
+    /**
+     * @param  {WebGLShaderInstance} instance
+     * @return {void}
+     * @method
+     * @public
+     */
+    bindInstnceArray(instance: WebGLShaderInstance): void;
     /**
      * @return {void}
      * @method

package/dist/VertexArrayObjectManager.js

@@ -74,12 +74,64 @@ export class VertexArrayObjectManager {
          * @private
          */
         this._$vertexBufferData = new Float32Array([0, 0, 0, 1, 1, 0, 1, 1]);
+        /**
+         * @type {WebGLBuffer}
+         * @private
+         */
+        this._$attributeVertexBuffer = gl.createBuffer();
+        /**
+         * @type {Float32Array}
+         * @private
+         */
+        this._$attributeBuffer = new Float32Array(22);
+        /**
+         * @type {WebGLVertexArrayObject}
+         * @private
+         */
+        this._$instanceVertexArray = this._$getCommonVertexArray();
         /**
          * @type {WebGLVertexArrayObject}
          * @private
          */
         this._$commonVertexArray = this._$getVertexArray(0, 1);
     }
+    /**
+     * @param  {number} begin
+     * @param  {number} end
+     * @return {WebGLVertexArrayObject}
+     * @method
+     * @private
+     */
+    _$getCommonVertexArray() {
+        const vertexArray = this._$gl.createVertexArray();
+        this.bind(vertexArray);
+        const vertexBuffer = this._$gl.createBuffer();
+        this._$gl.bindBuffer(this._$gl.ARRAY_BUFFER, vertexBuffer);
+        this._$gl.bufferData(this._$gl.ARRAY_BUFFER, new Float32Array([0, 0, 0, 1, 1, 0, 1, 1]), this._$gl.STATIC_DRAW);
+        this._$gl.enableVertexAttribArray(0);
+        this._$gl.vertexAttribPointer(0, 2, this._$gl.FLOAT, false, 0, 0);
+        this._$gl.bindBuffer(this._$gl.ARRAY_BUFFER, this._$attributeVertexBuffer);
+        this._$gl.bufferData(this._$gl.ARRAY_BUFFER, this._$attributeBuffer.byteLength, this._$gl.DYNAMIC_DRAW);
+        this._$gl.enableVertexAttribArray(1);
+        this._$gl.vertexAttribPointer(1, 4, this._$gl.FLOAT, false, 88, 0);
+        this._$gl.vertexAttribDivisor(1, 1);
+        this._$gl.enableVertexAttribArray(2);
+        this._$gl.vertexAttribPointer(2, 4, this._$gl.FLOAT, false, 88, 16);
+        this._$gl.vertexAttribDivisor(2, 1);
+        this._$gl.enableVertexAttribArray(3);
+        this._$gl.vertexAttribPointer(3, 2, this._$gl.FLOAT, false, 88, 32);
+        this._$gl.vertexAttribDivisor(3, 1);
+        this._$gl.enableVertexAttribArray(4);
+        this._$gl.vertexAttribPointer(4, 4, this._$gl.FLOAT, false, 88, 40);
+        this._$gl.vertexAttribDivisor(4, 1);
+        this._$gl.enableVertexAttribArray(5);
+        this._$gl.vertexAttribPointer(5, 4, this._$gl.FLOAT, false, 88, 56);
+        this._$gl.vertexAttribDivisor(5, 1);
+        this._$gl.enableVertexAttribArray(6);
+        this._$gl.vertexAttribPointer(6, 4, this._$gl.FLOAT, false, 88, 72);
+        this._$gl.vertexAttribDivisor(6, 1);
+        return vertexArray;
+    }
     /**
      * @param  {number} begin
      * @param  {number} end
@@ -89,9 +141,6 @@ export class VertexArrayObjectManager {
      */
     _$getVertexArray(begin, end) {
         const vertexArray = this._$gl.createVertexArray();
-        if (!vertexArray) {
-            throw new Error("the WebGLVertexArrayObject is null.");
-        }
         this.bind(vertexArray);
         const vertexBuffer = this._$gl.createBuffer();
         this._$gl.bindBuffer(this._$gl.ARRAY_BUFFER, vertexBuffer);
@@ -117,14 +166,8 @@ export class VertexArrayObjectManager {
             }
         }
         const vertexArray = this._$gl.createVertexArray();
-        if (!vertexArray) {
-            throw new Error("the WebGLVertexArrayObject is null.");
-        }
         this.bind(vertexArray);
         const vertexBuffer = this._$gl.createBuffer();
-        if (!vertexBuffer) {
-            throw new Error("the WebGLBuffer is null.");
-        }
         vertexArray.vertexBuffer = vertexBuffer;
         vertexArray.vertexLength = 0;
         this._$gl.bindBuffer(this._$gl.ARRAY_BUFFER, vertexBuffer);
@@ -147,21 +190,12 @@ export class VertexArrayObjectManager {
             }
         }
         const vertexArray = this._$gl.createVertexArray();
-        if (!vertexArray) {
-            throw new Error("the WebGLVertexArrayObject is null.");
-        }
         this.bind(vertexArray);
         const vertexBuffer = this._$gl.createBuffer();
-        if (!vertexBuffer) {
-            throw new Error("the WebGLBuffer is null.");
-        }
         vertexArray.vertexBuffer = vertexBuffer;
         vertexArray.vertexLength = 0;
         this._$gl.bindBuffer(this._$gl.ARRAY_BUFFER, vertexBuffer);
         const indexBuffer = this._$gl.createBuffer();
-        if (!indexBuffer) {
-            throw new Error("the WebGLBuffer is null.");
-        }
         vertexArray.indexBuffer = indexBuffer;
         vertexArray.indexLength = 0;
         this._$gl.bindBuffer(this._$gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
@@ -255,6 +289,23 @@ export class VertexArrayObjectManager {
         this._$boundVertexArray = vertex_array;
         this._$gl.bindVertexArray(vertex_array);
     }
+    /**
+     * @param  {WebGLShaderInstance} instance
+     * @return {void}
+     * @method
+     * @public
+     */
+    bindInstnceArray(instance) {
+        // bind vao
+        this.bind(this._$instanceVertexArray);
+        this._$gl.bindBuffer(this._$gl.ARRAY_BUFFER, this._$attributeVertexBuffer);
+        if (instance.attributes.length > this._$attributeBuffer.length) {
+            this._$attributeBuffer = new Float32Array(instance.attributes.length);
+            this._$gl.bufferData(this._$gl.ARRAY_BUFFER, this._$attributeBuffer.byteLength, this._$gl.DYNAMIC_DRAW);
+        }
+        this._$attributeBuffer.set(instance.attributes);
+        this._$gl.bufferSubData(this._$gl.ARRAY_BUFFER, 0, this._$attributeBuffer.subarray(0, instance.attributes.length));
+    }
     /**
      * @return {void}
      * @method

package/dist/interface/BlendModeImpl.d.ts

@@ -0,0 +1 @@
+export type BlendModeImpl = "copy" | "add" | "alpha" | "darken" | "difference" | "erase" | "hardlight" | "invert" | "layer" | "lighten" | "multiply" | "normal" | "overlay" | "screen" | "subtract";

package/dist/interface/BlendModeImpl.js

@@ -0,0 +1 @@
+export {};

package/dist/interface/CachePositionImpl.d.ts

@@ -0,0 +1,11 @@
+export interface CachePositionImpl {
+    index: number;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    filterState?: boolean;
+    matrix?: string;
+    offsetX?: number;
+    offsetY?: number;
+}

package/dist/interface/CachePositionImpl.js

@@ -0,0 +1 @@
+export {};

package/dist/interface/PointImpl.d.ts

@@ -0,0 +1,4 @@
+export interface PointImpl {
+    x: number;
+    y: number;
+}

package/dist/interface/PointImpl.js

@@ -0,0 +1 @@
+export {};

package/dist/shader/CanvasToWebGLShader.d.ts

@@ -1,4 +1,5 @@
 import { WebGLShaderUniform } from "./WebGLShaderUniform";
+import { WebGLShaderInstance } from "./WebGLShaderInstance";
 import type { CanvasToWebGLContext } from "../CanvasToWebGLContext";
 /**
  * @class
@@ -8,15 +9,22 @@ export declare class CanvasToWebGLShader {
     private readonly _$context;
     private readonly _$program;
     private readonly _$uniform;
+    private _$instance;
     /**
-     * @param   {WebGL2RenderingContext} gl
-     * @param   {CanvasToWebGLContext}  context
-     * @param   {string} vertex_source
-     * @param   {string} fragment_source
+     * @param {WebGL2RenderingContext} gl
+     * @param {CanvasToWebGLContext} context
+     * @param {string} vertex_source
+     * @param {string} fragment_source
      * @constructor
      * @public
      */
     constructor(gl: WebGL2RenderingContext, context: CanvasToWebGLContext, vertex_source: string, fragment_source: string);
+    /**
+     * @return {WebGLShaderInstance}
+     * @readonly
+     * @public
+     */
+    get instance(): WebGLShaderInstance;
     /**
      * @return {WebGLShaderUniform}
      * @readonly
@@ -36,6 +44,12 @@ export declare class CanvasToWebGLShader {
      * @private
      */
     _$attachProgram(): void;
+    /**
+     * @param  {WebGLShaderInstance} instance
+     * @method
+     * @public
+     */
+    drawArraysInstanced(instance: WebGLShaderInstance): void;
     /**
      * @return {void}
      * @method

package/dist/shader/CanvasToWebGLShader.js

@@ -1,14 +1,15 @@
 import { WebGLShaderUniform } from "./WebGLShaderUniform";
+import { WebGLShaderInstance } from "./WebGLShaderInstance";
 import { $getProgramId } from "@next2d/share";
 /**
  * @class
  */
 export class CanvasToWebGLShader {
     /**
-     * @param   {WebGL2RenderingContext} gl
-     * @param   {CanvasToWebGLContext}  context
-     * @param   {string} vertex_source
-     * @param   {string} fragment_source
+     * @param {WebGL2RenderingContext} gl
+     * @param {CanvasToWebGLContext} context
+     * @param {string} vertex_source
+     * @param {string} fragment_source
      * @constructor
      * @public
      */
@@ -33,6 +34,23 @@ export class CanvasToWebGLShader {
          * @private
          */
         this._$uniform = new WebGLShaderUniform(gl, this._$program);
+        /**
+         * @type {WebGLShaderInstance}
+         * @default null
+         * @private
+         */
+        this._$instance = null;
+    }
+    /**
+     * @return {WebGLShaderInstance}
+     * @readonly
+     * @public
+     */
+    get instance() {
+        if (!this._$instance) {
+            this._$instance = new WebGLShaderInstance();
+        }
+        return this._$instance;
     }
     /**
      * @return {WebGLShaderUniform}
@@ -51,21 +69,12 @@ export class CanvasToWebGLShader {
      */
     _$createProgram(vertex_source, fragment_source) {
         const program = this._$gl.createProgram();
-        if (!program) {
-            throw new Error("WebGL program error");
-        }
         // control number
         program.id = $getProgramId();
         const vertexShader = this._$gl.createShader(this._$gl.VERTEX_SHADER);
-        if (!vertexShader) {
-            throw new Error("WebGL vertex shader error");
-        }
         this._$gl.shaderSource(vertexShader, vertex_source);
         this._$gl.compileShader(vertexShader);
         const fragmentShader = this._$gl.createShader(this._$gl.FRAGMENT_SHADER);
-        if (!fragmentShader) {
-            throw new Error("WebGL fragment shader error");
-        }
         this._$gl.shaderSource(fragmentShader, fragment_source);
         this._$gl.compileShader(fragmentShader);
         this._$gl.attachShader(program, vertexShader);
@@ -88,6 +97,19 @@ export class CanvasToWebGLShader {
             this._$gl.useProgram(this._$program);
         }
     }
+    /**
+     * @param  {WebGLShaderInstance} instance
+     * @method
+     * @public
+     */
+    drawArraysInstanced(instance) {
+        // setup
+        this._$attachProgram();
+        // bind data
+        this._$context.vao.bindInstnceArray(instance);
+        // draw
+        this._$gl.drawArraysInstanced(this._$gl.TRIANGLE_STRIP, 0, 4, instance.count);
+    }
     /**
      * @return {void}
      * @method
@@ -148,8 +170,7 @@ export class CanvasToWebGLShader {
         // draw fill
         const indexRanges = vertex_array_object.indexRanges;
         const range = indexRanges[indexRanges.length - 1];
-        const count = range.first + range.count;
-        this._$gl.drawArrays(this._$gl.TRIANGLES, 0, count);
+        this._$gl.drawArrays(this._$gl.TRIANGLES, 0, range.first + range.count);
     }
     /**
      * @param  {WebGLVertexArrayObject} vertex_array