@next2d/webgl 2.0.0 → 3.0.1

package/src/Shader/Vertex/VertexShaderSource.js

@@ -1,8 +1,3 @@
-/**
- * @return {string}
- * @method
- * @static
- */
 export const TEXTURE_TEMPLATE = () => {
     return `#version 300 es
 
@@ -17,11 +12,6 @@ void main() {
     gl_Position = vec4(position, 0.0, 1.0);
 }`;
 };
-/**
- * @return {string}
- * @method
- * @static
- */
 export const VECTOR_TEMPLATE = () => {
     return `#version 300 es
 
@@ -36,11 +26,6 @@ void main() {
     gl_Position = vec4(position.x, -position.y, 0.0, 1.0);
 }`;
 };
-/**
- * @return {string}
- * @method
- * @static
- */
 export const BLEND_MATRIX_TEMPLATE = () => {
     return `#version 300 es
 
@@ -70,11 +55,6 @@ void main() {
     gl_Position = vec4(position.x, -position.y, 0.0, 1.0);
 }`;
 };
-/**
- * @return {string}
- * @method
- * @static
- */
 export const BLEND_TEMPLATE = () => {
     return `#version 300 es
 
@@ -98,11 +78,6 @@ void main() {
     gl_Position = vec4(position.x, -position.y, 0.0, 1.0);
 }`;
 };
-/**
- * @return {string}
- * @method
- * @static
- */
 export const INSTANCE_TEMPLATE = () => {
     return `#version 300 es
 

package/src/Shader/Vertex/VertexShaderSourceFill.d.ts

@@ -1,76 +1,11 @@
-/**
- * @return {string}
- * @method
- * @static
- */
 export declare const ATTRIBUTE_BEZIER_ON: () => string;
-/**
- * @returns {string}
- * @method
- * @static
- */
 export declare const ATTRIBUTE_MATRIX_ON: () => string;
-/**
- * @return {string}
- * @method
- * @static
- */
 export declare const VARYING_UV_ON: () => string;
-/**
- * @return {string}
- * @method
- * @static
- */
 export declare const VARYING_BEZIER_ON: () => string;
-/**
- * @return {string}
- * @method
- * @static
- */
 export declare const STATEMENT_UV_ON: () => string;
-/**
- * @return {string}
- * @method
- * @static
- */
 export declare const STATEMENT_BEZIER_ON: () => string;
-/**
- * @return {string}
- * @method
- * @static
- */
 export declare const ATTRIBUTE_COLOR_ON: () => string;
-/**
- * @return {string}
- * @method
- * @static
- */
 export declare const VARYING_COLOR_ON: () => string;
-/**
- * @return {string}
- * @method
- * @static
- */
 export declare const STATEMENT_COLOR_ON: () => string;
-/**
- * @description 各種、塗りのシェーダのテンプレートを返却
- *              Returns a template for various fill shaders
- *
- * @param  {number}  highp_length
- * @param  {boolean} with_uv
- * @param  {boolean} for_mask
- * @param  {boolean} is_grid_enabled
- * @return {string}
- * @method
- * @static
- */
 export declare const FILL_TEMPLATE: (highp_length: number, with_uv: boolean, for_mask: boolean, is_grid_enabled: boolean) => string;
-/**
- * @description 矩形の塗りのシェーダのテンプレートを返却
- *              Returns a template for filling rectangles
- *
- * @return {string}
- * @method
- * @static
- */
 export declare const FILL_RECT_TEMPLATE: () => string;

package/src/Shader/Vertex/VertexShaderSourceFill.js

@@ -1,43 +1,18 @@
 import { FUNCTION_GRID_OFF, FUNCTION_GRID_ON } from "./VertexShaderLibrary";
-/**
- * @return {string}
- * @method
- * @static
- */
 export const ATTRIBUTE_BEZIER_ON = () => {
     return "layout (location = 1) in vec2 a_bezier;";
 };
-/**
- * @returns {string}
- * @method
- * @static
- */
 export const ATTRIBUTE_MATRIX_ON = () => {
     return `layout (location = 3) in vec3 a_matrix0;
 layout (location = 4) in vec3 a_matrix1;
 layout (location = 5) in vec3 a_matrix2;`;
 };
-/**
- * @return {string}
- * @method
- * @static
- */
 export const VARYING_UV_ON = () => {
     return "out vec2 v_uv;";
 };
-/**
- * @return {string}
- * @method
- * @static
- */
 export const VARYING_BEZIER_ON = () => {
     return "out vec2 v_bezier;";
 };
-/**
- * @return {string}
- * @method
- * @static
- */
 export const STATEMENT_UV_ON = () => {
     return `
     mat3 uv_matrix = mat3(
@@ -52,50 +27,18 @@ export const STATEMENT_UV_ON = () => {
     );
     v_uv = (inverse_matrix * uv_matrix * vec3(a_vertex, 1.0)).xy;`;
 };
-/**
- * @return {string}
- * @method
- * @static
- */
 export const STATEMENT_BEZIER_ON = () => {
     return "v_bezier = a_bezier;";
 };
-/**
- * @return {string}
- * @method
- * @static
- */
 export const ATTRIBUTE_COLOR_ON = () => {
     return "layout (location = 2) in vec4 a_color;";
 };
-/**
- * @return {string}
- * @method
- * @static
- */
 export const VARYING_COLOR_ON = () => {
     return "out vec4 v_color;";
 };
-/**
- * @return {string}
- * @method
- * @static
- */
 export const STATEMENT_COLOR_ON = () => {
     return "v_color = a_color;";
 };
-/**
- * @description 各種、塗りのシェーダのテンプレートを返却
- *              Returns a template for various fill shaders
- *
- * @param  {number}  highp_length
- * @param  {boolean} with_uv
- * @param  {boolean} for_mask
- * @param  {boolean} is_grid_enabled
- * @return {string}
- * @method
- * @static
- */
 export const FILL_TEMPLATE = (highp_length, with_uv, for_mask, is_grid_enabled) => {
     const bezierAttribute = for_mask
         ? ATTRIBUTE_BEZIER_ON()
@@ -148,14 +91,6 @@ void main() {
     gl_Position = vec4(pos.x, -pos.y, 0.0, 1.0);
 }`;
 };
-/**
- * @description 矩形の塗りのシェーダのテンプレートを返却
- *              Returns a template for filling rectangles
- *
- * @return {string}
- * @method
- * @static
- */
 export const FILL_RECT_TEMPLATE = () => {
     return `#version 300 es
 layout (location = 0) in vec2 a_vertex;

package/src/Stencil/service/StencilDisableSampleAlphaToCoverageService.d.ts

@@ -0,0 +1 @@
+export declare const execute: () => void;

package/src/Stencil/service/StencilDisableSampleAlphaToCoverageService.js

@@ -0,0 +1,8 @@
+import { $gl } from "../../WebGLUtil";
+import { $sampleAlphaToCoverageEnabled, $setSampleAlphaToCoverageEnabled } from "../../Stencil";
+export const execute = () => {
+    if ($sampleAlphaToCoverageEnabled) {
+        $setSampleAlphaToCoverageEnabled(false);
+        $gl.disable($gl.SAMPLE_ALPHA_TO_COVERAGE);
+    }
+};

package/src/Stencil/service/StencilEnableSampleAlphaToCoverageService.d.ts

@@ -0,0 +1 @@
+export declare const execute: () => void;

package/src/Stencil/service/StencilEnableSampleAlphaToCoverageService.js

@@ -0,0 +1,8 @@
+import { $gl } from "../../WebGLUtil";
+import { $sampleAlphaToCoverageEnabled, $setSampleAlphaToCoverageEnabled } from "../../Stencil";
+export const execute = () => {
+    if (!$sampleAlphaToCoverageEnabled) {
+        $setSampleAlphaToCoverageEnabled(true);
+        $gl.enable($gl.SAMPLE_ALPHA_TO_COVERAGE);
+    }
+};

package/src/Stencil/service/StencilResetService.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description ステンシル状態キャッシュをリセット
+ *              Reset stencil state cache
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: () => void;

package/src/Stencil/service/StencilResetService.js

@@ -0,0 +1,14 @@
+import { $resetStencilMode, $setColorMaskEnabled, $setSampleAlphaToCoverageEnabled } from "../../Stencil";
+/**
+ * @description ステンシル状態キャッシュをリセット
+ *              Reset stencil state cache
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    $resetStencilMode();
+    $setColorMaskEnabled(true);
+    $setSampleAlphaToCoverageEnabled(false);
+};

package/src/Stencil/service/StencilSetFillModeService.d.ts

@@ -0,0 +1 @@
+export declare const execute: () => void;

package/src/Stencil/service/StencilSetFillModeService.js

@@ -0,0 +1,13 @@
+import { $gl } from "../../WebGLUtil";
+import { $currentStencilMode, $setStencilMode, $colorMaskEnabled, $setColorMaskEnabled, STENCIL_MODE_FILL } from "../../Stencil";
+export const execute = () => {
+    if ($currentStencilMode !== STENCIL_MODE_FILL) {
+        $setStencilMode(STENCIL_MODE_FILL);
+        $gl.stencilFunc($gl.NOTEQUAL, 0, 0xff);
+        $gl.stencilOp($gl.KEEP, $gl.ZERO, $gl.ZERO);
+    }
+    if (!$colorMaskEnabled) {
+        $setColorMaskEnabled(true);
+        $gl.colorMask(true, true, true, true);
+    }
+};

package/src/Stencil/service/StencilSetMaskModeService.d.ts

@@ -0,0 +1 @@
+export declare const execute: () => void;

package/src/Stencil/service/StencilSetMaskModeService.js

@@ -0,0 +1,14 @@
+import { $gl } from "../../WebGLUtil";
+import { $currentStencilMode, $setStencilMode, $colorMaskEnabled, $setColorMaskEnabled, STENCIL_MODE_MASK } from "../../Stencil";
+export const execute = () => {
+    if ($currentStencilMode !== STENCIL_MODE_MASK) {
+        $setStencilMode(STENCIL_MODE_MASK);
+        $gl.stencilFunc($gl.ALWAYS, 0, 0xff);
+        $gl.stencilOpSeparate($gl.FRONT, $gl.KEEP, $gl.KEEP, $gl.INCR_WRAP);
+        $gl.stencilOpSeparate($gl.BACK, $gl.KEEP, $gl.KEEP, $gl.DECR_WRAP);
+    }
+    if ($colorMaskEnabled) {
+        $setColorMaskEnabled(false);
+        $gl.colorMask(false, false, false, false);
+    }
+};

package/src/Stencil.d.ts

@@ -0,0 +1,9 @@
+export declare let $currentStencilMode: number;
+export declare const STENCIL_MODE_MASK: number;
+export declare const STENCIL_MODE_FILL: number;
+export declare const $setStencilMode: (mode: number) => void;
+export declare const $resetStencilMode: () => void;
+export declare let $colorMaskEnabled: boolean;
+export declare const $setColorMaskEnabled: (enabled: boolean) => void;
+export declare let $sampleAlphaToCoverageEnabled: boolean;
+export declare const $setSampleAlphaToCoverageEnabled: (enabled: boolean) => void;

package/src/Stencil.js

@@ -0,0 +1,17 @@
+export let $currentStencilMode = 0;
+export const STENCIL_MODE_MASK = 1;
+export const STENCIL_MODE_FILL = 2;
+export const $setStencilMode = (mode) => {
+    $currentStencilMode = mode;
+};
+export const $resetStencilMode = () => {
+    $currentStencilMode = 0;
+};
+export let $colorMaskEnabled = true;
+export const $setColorMaskEnabled = (enabled) => {
+    $colorMaskEnabled = enabled;
+};
+export let $sampleAlphaToCoverageEnabled = false;
+export const $setSampleAlphaToCoverageEnabled = (enabled) => {
+    $sampleAlphaToCoverageEnabled = enabled;
+};

package/src/StencilBufferObject/usecase/StencilBufferObjectAcquireObjectUseCase.js

@@ -15,14 +15,22 @@ export const execute = (width, height) => {
     if (!$objectPool.length) {
         return stencilBufferObjectCreateService();
     }
+    let bestIdx = -1;
+    let bestArea = Infinity;
     for (let idx = 0; idx < $objectPool.length; ++idx) {
-        const stencilBufferObject = $objectPool[idx];
-        if (stencilBufferObject.width !== width
-            || stencilBufferObject.height !== height) {
-            continue;
+        const obj = $objectPool[idx];
+        if (obj.width >= width && obj.height >= height) {
+            if (obj.area < bestArea) {
+                bestArea = obj.area;
+                bestIdx = idx;
+            }
         }
-        $objectPool.splice(idx, 1);
-        return stencilBufferObject;
     }
-    return $objectPool.shift();
+    if (bestIdx !== -1) {
+        const obj = $objectPool[bestIdx];
+        $objectPool[bestIdx] = $objectPool[$objectPool.length - 1];
+        $objectPool.pop();
+        return obj;
+    }
+    return $objectPool.pop();
 };

package/src/TextureManager/usecase/TextureManagerGetMainTextureFromBoundsUseCase.js

@@ -1,7 +1,7 @@
 import { execute as textureManagerGetTextureUseCase } from "./TextureManagerGetTextureUseCase";
 import { execute as textureManagerBind0UseCase } from "./TextureManagerBind0UseCase";
-import { $context, $gl } from "../../WebGLUtil";
-import { $getDrawBitmapFrameBuffer, $readFrameBuffer } from "../../FrameBufferManager";
+import { $context, $gl, $enableScissorTest, $disableScissorTest } from "../../WebGLUtil";
+import { $drawBitmapFramebuffer, $readFrameBuffer } from "../../FrameBufferManager";
 /**
  * @type {ITextureObject}
  * @private
@@ -24,8 +24,7 @@ export const execute = (x, y, width, height) => {
     // メインのアタッチメントオブジェクトをセット
     const mainAttachmentObject = $context.$mainAttachmentObject;
     $context.bind(mainAttachmentObject);
-    const drawBitmapFrameBuffer = $getDrawBitmapFrameBuffer();
-    $gl.bindFramebuffer($gl.FRAMEBUFFER, drawBitmapFrameBuffer);
+    $gl.bindFramebuffer($gl.FRAMEBUFFER, $drawBitmapFramebuffer);
     // 描画先のテクスチャを更新
     if (!$mainTextureObject
         || $mainTextureObject.width !== mainAttachmentObject.width
@@ -36,12 +35,12 @@ export const execute = (x, y, width, height) => {
     $gl.framebufferTexture2D($gl.FRAMEBUFFER, $gl.COLOR_ATTACHMENT0, $gl.TEXTURE_2D, $mainTextureObject.resource, 0);
     $gl.bindFramebuffer($gl.FRAMEBUFFER, null);
     $gl.bindFramebuffer($gl.READ_FRAMEBUFFER, $readFrameBuffer);
-    $gl.bindFramebuffer($gl.DRAW_FRAMEBUFFER, drawBitmapFrameBuffer);
-    $gl.enable($gl.SCISSOR_TEST);
+    $gl.bindFramebuffer($gl.DRAW_FRAMEBUFFER, $drawBitmapFramebuffer);
+    $enableScissorTest();
     $gl.scissor(x, mainAttachmentObject.height - y - height, width + 1, height + 1);
     // execute
     $gl.blitFramebuffer(0, 0, mainAttachmentObject.width, mainAttachmentObject.height, 0, 0, mainAttachmentObject.width, mainAttachmentObject.height, $gl.COLOR_BUFFER_BIT, $gl.NEAREST);
-    $gl.disable($gl.SCISSOR_TEST);
+    $disableScissorTest();
     $gl.bindFramebuffer($gl.FRAMEBUFFER, $readFrameBuffer);
     if (currentAttachmentObject) {
         $context.bind(currentAttachmentObject);

package/src/VertexArrayObject/service/VertexArrayObjectCreateFillObjectService.js

@@ -1,5 +1,4 @@
-import { $gl } from "../../WebGLUtil";
-import { $getId } from "../../VertexArrayObject";
+import { $gl, $getUUID } from "../../WebGLUtil";
 /**
  * @description 新規のVertexArrayObjectを生成する
  *              Create a new VertexArrayObject
@@ -10,7 +9,7 @@ import { $getId } from "../../VertexArrayObject";
  */
 export const execute = () => {
     return {
-        "id": $getId(),
+        "id": $getUUID(),
         "resource": $gl.createVertexArray(),
         "vertexBuffer": $gl.createBuffer(),
         "vertexLength": 0

package/src/VertexArrayObject/usecase/VertexArrayObjectBindAttributeUseCase.js

@@ -20,8 +20,10 @@ export const execute = () => {
     $gl.bindBuffer($gl.ARRAY_BUFFER, $attributeWebGLBuffer);
     if (renderQueue.buffer.length > $attributeBufferLength) {
         $attributeBufferLength = renderQueue.buffer.length;
+        // STREAM_DRAW: 毎フレーム更新されるデータに最適
+        // STREAM_DRAW: Optimal for data updated every frame
         $gl.bufferData($gl.ARRAY_BUFFER, $attributeBufferLength * 4, // renderQueue.buffer.byteLength
-        $gl.DYNAMIC_DRAW);
+        $gl.STREAM_DRAW);
     }
-    $gl.bufferSubData($gl.ARRAY_BUFFER, 0, renderQueue.buffer.subarray(0, renderQueue.offset));
+    $gl.bufferSubData($gl.ARRAY_BUFFER, 0, renderQueue.buffer, 0, renderQueue.offset);
 };

package/src/VertexArrayObject/usecase/VertexArrayObjectBindFillMeshUseCase.js

@@ -18,7 +18,9 @@ export const execute = () => {
     $gl.bindBuffer($gl.ARRAY_BUFFER, vertexArrayObject.vertexBuffer);
     if (vertexArrayObject.vertexLength < buffer.length) {
         vertexArrayObject.vertexLength = $upperPowerOfTwo(buffer.length);
-        $gl.bufferData($gl.ARRAY_BUFFER, vertexArrayObject.vertexLength * 4, $gl.DYNAMIC_DRAW);
+        // STREAM_DRAW: 毎フレーム更新されるデータに最適
+        // STREAM_DRAW: Optimal for data updated every frame
+        $gl.bufferData($gl.ARRAY_BUFFER, vertexArrayObject.vertexLength * 4, $gl.STREAM_DRAW);
     }
     $gl.bufferSubData($gl.ARRAY_BUFFER, 0, buffer.subarray(0, offset));
     return vertexArrayObject;

package/src/VertexArrayObject/usecase/VertexArrayObjectCreateInstancedVertexArrayObjectUseCase.js

@@ -16,13 +16,15 @@ export const execute = () => {
     vertexArrayObjectBindService(vertexArrayObject);
     $gl.bindBuffer($gl.ARRAY_BUFFER, vertexArrayObject.vertexBuffer);
     $gl.bufferData($gl.ARRAY_BUFFER, new Float32Array([
-        0, 0, 1, 0, 0, 1,
-        1, 1, 0, 1, 1, 0
+        0, 0, 1, 0, 1, 1,
+        0, 0, 1, 1, 0, 1
     ]), $gl.STATIC_DRAW);
     $gl.enableVertexAttribArray(0);
     $gl.vertexAttribPointer(0, 2, $gl.FLOAT, false, 0, 0);
     $gl.bindBuffer($gl.ARRAY_BUFFER, $attributeWebGLBuffer);
-    $gl.bufferData($gl.ARRAY_BUFFER, renderQueue.buffer.length, $gl.DYNAMIC_DRAW);
+    // STREAM_DRAW: 毎フレーム更新されるインスタンスデータに最適
+    // STREAM_DRAW: Optimal for instance data updated every frame
+    $gl.bufferData($gl.ARRAY_BUFFER, renderQueue.buffer.length, $gl.STREAM_DRAW);
     // texture rectangle
     $gl.enableVertexAttribArray(1);
     $gl.vertexAttribPointer(1, 4, $gl.FLOAT, false, 88, 0);

package/src/VertexArrayObject/usecase/VertexArrayObjectCreateRectVertexArrayObjectUseCase.js

@@ -14,8 +14,8 @@ export const execute = () => {
     vertexArrayObjectBindService(vertexArrayObject);
     $gl.bindBuffer($gl.ARRAY_BUFFER, vertexArrayObject.vertexBuffer);
     const vertexBufferData = new Float32Array([
-        0, 0, 1, 0, 0, 1,
-        1, 1, 0, 1, 1, 0
+        0, 0, 1, 0, 1, 1,
+        0, 0, 1, 1, 0, 1
     ]);
     $gl.bufferData($gl.ARRAY_BUFFER, vertexBufferData, $gl.STATIC_DRAW);
     $gl.enableVertexAttribArray(0);

package/src/VertexArrayObject.d.ts

@@ -1,14 +1,5 @@
 import type { IVertexArrayObject } from "./interface/IVertexArrayObject";
 import type { IStrokeVertexArrayObject } from "./interface/IStrokeVertexArrayObject";
-/**
- * @description VertexArrayObject管理用のユニークIDを返却
- *              Returns a unique ID for managing VertexArrayObject
- *
- * @return {number}
- * @method
- * @protected
- */
-export declare const $getId: () => number;
 /**
  * @description VertexArrayObjectの再利用のための配列のオブジェクトプール
  *              Object pool of array for reusing VertexArrayObject

package/src/VertexArrayObject.js

@@ -1,20 +1,4 @@
 import { execute as vertexArrayObjectCreateRectVertexArrayObjectUseCase } from "./VertexArrayObject/usecase/VertexArrayObjectCreateRectVertexArrayObjectUseCase";
-/**
- * @type {number}
- * @private
- */
-let $id = 0;
-/**
- * @description VertexArrayObject管理用のユニークIDを返却
- *              Returns a unique ID for managing VertexArrayObject
- *
- * @return {number}
- * @method
- * @protected
- */
-export const $getId = () => {
-    return $id++;
-};
 /**
  * @description VertexArrayObjectの再利用のための配列のオブジェクトプール
  *              Object pool of array for reusing VertexArrayObject