@next2d/webgl 1.18.12 → 2.0.0

package/src/VertexArrayObject/usecase/VertexArrayObjectBootUseCase.js

@@ -0,0 +1,18 @@
+import { execute as vertexArrayObjectCreateInstancedVertexArrayObjectUseCase } from "./VertexArrayObjectCreateInstancedVertexArrayObjectUseCase";
+import { $setInstancedVertexArrayObject, $setAttributeWebGLBuffer } from "../../VertexArrayObject";
+/**
+ * @description VertexArrayObjectの起動ユースケース
+ *              VertexArrayObject boot use case
+ *
+ * @param  {WebGL2RenderingContext} gl
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (gl) => {
+    // インスタンス用のバッファをセット
+    // fixed logic
+    $setAttributeWebGLBuffer(gl);
+    // Array Instance用のVertexArrayObjectをセット
+    $setInstancedVertexArrayObject(vertexArrayObjectCreateInstancedVertexArrayObjectUseCase());
+};

package/src/VertexArrayObject/usecase/VertexArrayObjectCreateGradientVertexArrayObjectUseCase.d.ts

@@ -0,0 +1,12 @@
+import type { IVertexArrayObject } from "../../interface/IVertexArrayObject";
+/**
+ * @description インスタンス用の頂点配列オブジェクトを生成します。
+ *              Generates a vertex array object for instances.
+ *
+ * @param  {number} begin
+ * @param  {number} end
+ * @return {IVertexArrayObject}
+ * @method
+ * @protected
+ */
+export declare const execute: (begin: number, end: number) => IVertexArrayObject;

package/src/VertexArrayObject/usecase/VertexArrayObjectCreateGradientVertexArrayObjectUseCase.js

@@ -0,0 +1,27 @@
+import { execute as vertexArrayObjectCreateFillObjectService } from "../service/VertexArrayObjectCreateFillObjectService";
+import { execute as vertexArrayObjectBindService } from "../service/VertexArrayObjectBindService";
+import { $gl } from "../../WebGLUtil";
+import { $vertexBufferData } from "../../VertexArrayObject";
+/**
+ * @description インスタンス用の頂点配列オブジェクトを生成します。
+ *              Generates a vertex array object for instances.
+ *
+ * @param  {number} begin
+ * @param  {number} end
+ * @return {IVertexArrayObject}
+ * @method
+ * @protected
+ */
+export const execute = (begin, end) => {
+    const vertexArrayObject = vertexArrayObjectCreateFillObjectService();
+    vertexArrayObjectBindService(vertexArrayObject);
+    $gl.bindBuffer($gl.ARRAY_BUFFER, vertexArrayObject.vertexBuffer);
+    $vertexBufferData[0] = begin;
+    $vertexBufferData[2] = begin;
+    $vertexBufferData[4] = end;
+    $vertexBufferData[6] = end;
+    $gl.bufferData($gl.ARRAY_BUFFER, $vertexBufferData, $gl.STATIC_DRAW);
+    $gl.enableVertexAttribArray(0);
+    $gl.vertexAttribPointer(0, 2, $gl.FLOAT, false, 0, 0);
+    return vertexArrayObject;
+};

package/src/VertexArrayObject/usecase/VertexArrayObjectCreateInstancedVertexArrayObjectUseCase.d.ts

@@ -0,0 +1,10 @@
+import type { IVertexArrayObject } from "../../interface/IVertexArrayObject";
+/**
+ * @description インスタンス用の頂点配列オブジェクトを生成します。
+ *              Generates a vertex array object for instances.
+ *
+ * @return {IVertexArrayObject}
+ * @method
+ * @protected
+ */
+export declare const execute: () => IVertexArrayObject;

package/src/VertexArrayObject/usecase/VertexArrayObjectCreateInstancedVertexArrayObjectUseCase.js

@@ -0,0 +1,51 @@
+import { execute as vertexArrayObjectCreateFillObjectService } from "../service/VertexArrayObjectCreateFillObjectService";
+import { execute as vertexArrayObjectBindService } from "../service/VertexArrayObjectBindService";
+import { $gl } from "../../WebGLUtil";
+import { renderQueue } from "@next2d/render-queue";
+import { $attributeWebGLBuffer } from "../../VertexArrayObject";
+/**
+ * @description インスタンス用の頂点配列オブジェクトを生成します。
+ *              Generates a vertex array object for instances.
+ *
+ * @return {IVertexArrayObject}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    const vertexArrayObject = vertexArrayObjectCreateFillObjectService();
+    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
+    ]), $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);
+    // texture rectangle
+    $gl.enableVertexAttribArray(1);
+    $gl.vertexAttribPointer(1, 4, $gl.FLOAT, false, 88, 0);
+    $gl.vertexAttribDivisor(1, 1);
+    // texture width, height and viewport width, height
+    $gl.enableVertexAttribArray(2);
+    $gl.vertexAttribPointer(2, 4, $gl.FLOAT, false, 88, 16);
+    $gl.vertexAttribDivisor(2, 1);
+    // matrix tx, ty
+    $gl.enableVertexAttribArray(3);
+    $gl.vertexAttribPointer(3, 2, $gl.FLOAT, false, 88, 32);
+    $gl.vertexAttribDivisor(3, 1);
+    // matrix scale0, rotate0, scale1, rotate1
+    $gl.enableVertexAttribArray(4);
+    $gl.vertexAttribPointer(4, 4, $gl.FLOAT, false, 88, 40);
+    $gl.vertexAttribDivisor(4, 1);
+    // mulColor
+    $gl.enableVertexAttribArray(5);
+    $gl.vertexAttribPointer(5, 4, $gl.FLOAT, false, 88, 56);
+    $gl.vertexAttribDivisor(5, 1);
+    // addColor
+    $gl.enableVertexAttribArray(6);
+    $gl.vertexAttribPointer(6, 4, $gl.FLOAT, false, 88, 72);
+    $gl.vertexAttribDivisor(6, 1);
+    return vertexArrayObject;
+};

package/src/VertexArrayObject/usecase/VertexArrayObjectCreateRectVertexArrayObjectUseCase.d.ts

@@ -0,0 +1,10 @@
+import type { IVertexArrayObject } from "../../interface/IVertexArrayObject";
+/**
+ * @description 矩形描画用のVertexArrayObjectを生成します。
+ *              Generates a VertexArrayObject for rectangle drawing.
+ *
+ * @return {IVertexArrayObject}
+ * @method
+ * @protected
+ */
+export declare const execute: () => IVertexArrayObject;

package/src/VertexArrayObject/usecase/VertexArrayObjectCreateRectVertexArrayObjectUseCase.js

@@ -0,0 +1,24 @@
+import { execute as vertexArrayObjectCreateFillObjectService } from "../service/VertexArrayObjectCreateFillObjectService";
+import { execute as vertexArrayObjectBindService } from "../service/VertexArrayObjectBindService";
+import { $gl } from "../../WebGLUtil";
+/**
+ * @description 矩形描画用のVertexArrayObjectを生成します。
+ *              Generates a VertexArrayObject for rectangle drawing.
+ *
+ * @return {IVertexArrayObject}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    const vertexArrayObject = vertexArrayObjectCreateFillObjectService();
+    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
+    ]);
+    $gl.bufferData($gl.ARRAY_BUFFER, vertexBufferData, $gl.STATIC_DRAW);
+    $gl.enableVertexAttribArray(0);
+    $gl.vertexAttribPointer(0, 2, $gl.FLOAT, false, 0, 0);
+    return vertexArrayObject;
+};

package/src/VertexArrayObject/usecase/VertexArrayObjectGetFillObjectUseCase.d.ts

@@ -0,0 +1,10 @@
+import type { IVertexArrayObject } from "../../interface/IVertexArrayObject";
+/**
+ * @description 塗り用のVertexArrayObjectを返却
+ *              Returns a VertexArrayObject for filling
+ *
+ * @return {IVertexArrayObject}
+ * @method
+ * @protected
+ */
+export declare const execute: () => IVertexArrayObject;

package/src/VertexArrayObject/usecase/VertexArrayObjectGetFillObjectUseCase.js

@@ -0,0 +1,33 @@
+import { $objectPool } from "../../VertexArrayObject";
+import { $gl } from "../../WebGLUtil";
+import { execute as vertexArrayObjectCreateFillObjectService } from "../service/VertexArrayObjectCreateFillObjectService";
+import { execute as vertexArrayObjectBindService } from "../service/VertexArrayObjectBindService";
+/**
+ * @description 塗り用のVertexArrayObjectを返却
+ *              Returns a VertexArrayObject for filling
+ *
+ * @return {IVertexArrayObject}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    if ($objectPool.length) {
+        return $objectPool.pop();
+    }
+    const vertexArrayObject = vertexArrayObjectCreateFillObjectService();
+    vertexArrayObjectBindService(vertexArrayObject);
+    $gl.bindBuffer($gl.ARRAY_BUFFER, vertexArrayObject.vertexBuffer);
+    $gl.enableVertexAttribArray(0);
+    $gl.enableVertexAttribArray(1);
+    $gl.enableVertexAttribArray(2);
+    $gl.enableVertexAttribArray(3);
+    $gl.enableVertexAttribArray(4);
+    $gl.enableVertexAttribArray(5);
+    $gl.vertexAttribPointer(0, 2, $gl.FLOAT, false, 68, 0); // vertex
+    $gl.vertexAttribPointer(1, 2, $gl.FLOAT, false, 68, 8); // bezier or uv
+    $gl.vertexAttribPointer(2, 4, $gl.FLOAT, false, 68, 16); // color
+    $gl.vertexAttribPointer(3, 3, $gl.FLOAT, false, 68, 32); // matrix_a
+    $gl.vertexAttribPointer(4, 3, $gl.FLOAT, false, 68, 44); // matrix_b
+    $gl.vertexAttribPointer(5, 3, $gl.FLOAT, false, 68, 56); // matrix_c
+    return vertexArrayObject;
+};

package/src/VertexArrayObject/usecase/VertexArrayObjectGetGradientObjectUseCase.d.ts

@@ -0,0 +1,12 @@
+import type { IVertexArrayObject } from "../../interface/IVertexArrayObject";
+/**
+ * @description グラデーション用の頂点配列オブジェクトを生成
+ *              Generates a vertex array object for gradient
+ *
+ * @param  {number} begin
+ * @param  {number} end
+ * @return {IVertexArrayObject}
+ * @method
+ * @protected
+ */
+export declare const execute: (begin: number, end: number) => IVertexArrayObject;

package/src/VertexArrayObject/usecase/VertexArrayObjectGetGradientObjectUseCase.js

@@ -0,0 +1,34 @@
+import { $vertexBufferData } from "../../VertexArrayObject";
+import { $gl } from "../../WebGLUtil";
+import { execute as vertexArrayObjectCreateGradientVertexArrayObjectUseCase } from "./VertexArrayObjectCreateGradientVertexArrayObjectUseCase";
+/**
+ * @type {IVertexArrayObject}
+ * @private
+ */
+let $gradientVertexArrayObject;
+/**
+ * @description グラデーション用の頂点配列オブジェクトを生成
+ *              Generates a vertex array object for gradient
+ *
+ * @param  {number} begin
+ * @param  {number} end
+ * @return {IVertexArrayObject}
+ * @method
+ * @protected
+ */
+export const execute = (begin, end) => {
+    if (!$gradientVertexArrayObject) {
+        $gradientVertexArrayObject = vertexArrayObjectCreateGradientVertexArrayObjectUseCase(begin, end);
+    }
+    else {
+        if ($vertexBufferData[0] !== begin
+            || $vertexBufferData[4] !== end) {
+            $vertexBufferData[0] = begin;
+            $vertexBufferData[2] = begin;
+            $vertexBufferData[4] = end;
+            $vertexBufferData[6] = end;
+            $gl.bufferSubData($gl.ARRAY_BUFFER, 0, $vertexBufferData);
+        }
+    }
+    return $gradientVertexArrayObject;
+};

package/src/VertexArrayObject.d.ts

@@ -0,0 +1,80 @@
+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
+ *
+ * @type {IVertexArrayObject[]}
+ * @protected
+ */
+export declare const $objectPool: IVertexArrayObject[];
+/**
+ * @description Stroke用のVertexArrayObjectの再利用のための配列のオブジェクトプール
+ *             Object pool of array for reusing VertexArrayObject for Stroke
+ *
+ * @type {IStrokeVertexArrayObject[]}
+ * @protected
+ */
+export declare const $strokeObjectPool: IStrokeVertexArrayObject[];
+/**
+ * @description 頂点バッファのデータ、
+ *             Vertex buffer data
+ *
+ * @type {Float32Array}
+ * @protected
+ */
+export declare const $vertexBufferData: Float32Array;
+/**
+ * @description インスタンス用のWebGLBuffer
+ *              WebGLBuffer for instance
+ *
+ * @type {WebGLBuffer}
+ * @protected
+ */
+export declare let $attributeWebGLBuffer: WebGLBuffer;
+/**
+ * @description インスタンス用のWebGLBufferをセット
+ *              Set the WebGLBuffer for the instance
+ *
+ * @param  {WebGL2RenderingContext} gl
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const $setAttributeWebGLBuffer: (gl: WebGL2RenderingContext) => void;
+/**
+ * @description インスタンス用のVertexArrayObject
+ *              VertexArrayObject for instance
+ *
+ * @type {IVertexArrayObject}
+ * @protected
+ */
+export declare let $instancedVertexArrayObject: IVertexArrayObject;
+/**
+ * @description インスタンス用のVertexArrayObjectをセット
+ *              Set the VertexArrayObject for the instance
+ *
+ * @param  {IVertexArrayObject} vertex_array_object
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const $setInstancedVertexArrayObject: (vertex_array_object: IVertexArrayObject) => void;
+/**
+ * @description 矩形描画用のVertexArrayObjectを返却
+ *              Returns the VertexArrayObject for rectangle drawing
+ *
+ * @return {IVertexArrayObject}
+ * @method
+ * @protected
+ */
+export declare const $getRectVertexArrayObject: () => IVertexArrayObject;

package/src/VertexArrayObject.js

@@ -0,0 +1,103 @@
+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
+ *
+ * @type {IVertexArrayObject[]}
+ * @protected
+ */
+export const $objectPool = [];
+/**
+ * @description Stroke用のVertexArrayObjectの再利用のための配列のオブジェクトプール
+ *             Object pool of array for reusing VertexArrayObject for Stroke
+ *
+ * @type {IStrokeVertexArrayObject[]}
+ * @protected
+ */
+export const $strokeObjectPool = [];
+/**
+ * @description 頂点バッファのデータ、
+ *             Vertex buffer data
+ *
+ * @type {Float32Array}
+ * @protected
+ */
+export const $vertexBufferData = new Float32Array([0, 0, 0, 1, 1, 0, 1, 1]);
+/**
+ * @description インスタンス用のWebGLBuffer
+ *              WebGLBuffer for instance
+ *
+ * @type {WebGLBuffer}
+ * @protected
+ */
+export let $attributeWebGLBuffer;
+/**
+ * @description インスタンス用のWebGLBufferをセット
+ *              Set the WebGLBuffer for the instance
+ *
+ * @param  {WebGL2RenderingContext} gl
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const $setAttributeWebGLBuffer = (gl) => {
+    $attributeWebGLBuffer = gl.createBuffer();
+};
+/**
+ * @description インスタンス用のVertexArrayObject
+ *              VertexArrayObject for instance
+ *
+ * @type {IVertexArrayObject}
+ * @protected
+ */
+export let $instancedVertexArrayObject;
+/**
+ * @description インスタンス用のVertexArrayObjectをセット
+ *              Set the VertexArrayObject for the instance
+ *
+ * @param  {IVertexArrayObject} vertex_array_object
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const $setInstancedVertexArrayObject = (vertex_array_object) => {
+    $instancedVertexArrayObject = vertex_array_object;
+};
+/**
+ * @description 矩形描画用のVertexArrayObject
+ *              VertexArrayObject for rectangle drawing
+ *
+ * @type {IVertexArrayObject}
+ * @protected
+ */
+let $rectVertexArrayObject;
+/**
+ * @description 矩形描画用のVertexArrayObjectを返却
+ *              Returns the VertexArrayObject for rectangle drawing
+ *
+ * @return {IVertexArrayObject}
+ * @method
+ * @protected
+ */
+export const $getRectVertexArrayObject = () => {
+    if (!$rectVertexArrayObject) {
+        $rectVertexArrayObject = vertexArrayObjectCreateRectVertexArrayObjectUseCase();
+    }
+    return $rectVertexArrayObject;
+};