@next2d/webgl 1.18.12 → 2.0.0

package/src/Context/usecase/ContextPatternBitmapFillUseCase.js

@@ -0,0 +1,55 @@
+import { execute as variantsShapeMaskShaderService } from "../../Shader/Variants/Shape/service/VariantsShapeMaskShaderService";
+import { execute as shaderManagerSetMaskUniformService } from "../../Shader/ShaderManager/service/ShaderManagerSetMaskUniformService";
+import { execute as shaderManagerFillUseCase } from "../../Shader/ShaderManager/usecase/ShaderManagerFillUseCase";
+import { execute as variantsBitmapShaderService } from "../../Shader/Variants/Bitmap/service/VariantsBitmapShaderService";
+import { execute as shaderManagerSetBitmapFillUniformService } from "../../Shader/ShaderManager/service/ShaderManagerSetBitmapFillUniformService";
+import { execute as textureManagerCreateFromPixelsUseCase } from "../../TextureManager/usecase/TextureManagerCreateFromPixelsUseCase";
+import { execute as textureManagerReleaseTextureObjectUseCase } from "../../TextureManager/usecase/TextureManagerReleaseTextureObjectUseCase";
+import { $bitmapData } from "../../Bitmap";
+import { $gl, $context } from "../../WebGLUtil";
+/**
+ * @description 放射状グラデーションのシェーダーを実行します。
+ *              Execute the radial gradient shader.
+ *
+ * @param  {IVertexArrayObject} vertex_array_object
+ * @param  {number} offset
+ * @param  {number} index_count
+ * @param  {Float32Array | null} [grid_data=null]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (vertex_array_object, offset, index_count, grid_data) => {
+    // mask setting
+    $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);
+    $gl.colorMask(false, false, false, false);
+    const useGrid = !!grid_data;
+    const coverageShader = variantsShapeMaskShaderService(useGrid);
+    if (grid_data) {
+        shaderManagerSetMaskUniformService(coverageShader, grid_data);
+    }
+    $gl.enable($gl.SAMPLE_ALPHA_TO_COVERAGE);
+    shaderManagerFillUseCase(coverageShader, vertex_array_object, offset, index_count);
+    $gl.disable($gl.SAMPLE_ALPHA_TO_COVERAGE);
+    // bitmap setting
+    const pixels = $bitmapData.shift();
+    const matrix = $bitmapData.shift();
+    const width = $bitmapData.shift();
+    const height = $bitmapData.shift();
+    const repeat = $bitmapData.shift();
+    const smooth = $bitmapData.shift();
+    const textureObject = textureManagerCreateFromPixelsUseCase(width, height, pixels, smooth);
+    $context.save();
+    $context.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+    // draw shape setting
+    $gl.stencilFunc($gl.NOTEQUAL, 0, 0xff);
+    $gl.stencilOp($gl.KEEP, $gl.ZERO, $gl.ZERO);
+    $gl.colorMask(true, true, true, true);
+    const shaderManager = variantsBitmapShaderService(repeat, useGrid);
+    shaderManagerSetBitmapFillUniformService(shaderManager, width, height, grid_data);
+    shaderManagerFillUseCase(shaderManager, vertex_array_object, offset, index_count);
+    $context.restore();
+    textureManagerReleaseTextureObjectUseCase(textureObject);
+};

package/src/Context/usecase/ContextRadialGradientFillUseCase.d.ts

@@ -0,0 +1,14 @@
+import type { IVertexArrayObject } from "../../interface/IVertexArrayObject";
+/**
+ * @description 放射状グラデーションのシェーダーを実行します。
+ *              Execute the radial gradient shader.
+ *
+ * @param  {IVertexArrayObject} vertex_array_object
+ * @param  {number} offset
+ * @param  {number} index_count
+ * @param  {Float32Array | null} [grid_data=null]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (vertex_array_object: IVertexArrayObject, offset: number, index_count: number, grid_data: Float32Array | null) => void;

package/src/Context/usecase/ContextRadialGradientFillUseCase.js

@@ -0,0 +1,59 @@
+import { execute as variantsShapeMaskShaderService } from "../../Shader/Variants/Shape/service/VariantsShapeMaskShaderService";
+import { execute as shaderManagerSetMaskUniformService } from "../../Shader/ShaderManager/service/ShaderManagerSetMaskUniformService";
+import { execute as shaderManagerFillUseCase } from "../../Shader/ShaderManager/usecase/ShaderManagerFillUseCase";
+import { execute as gradientLUTGenerateShapeTextureUseCase } from "../../Shader/GradientLUTGenerator/usecase/GradientLUTGenerateShapeTextureUseCase";
+import { execute as textureManagerBind0UseCase } from "../../TextureManager/usecase/TextureManagerBind0UseCase";
+import { execute as variantsGradientShapeShaderUseCase } from "../../Shader/Variants/Gradient/usecase/VariantsGradientShapeShaderUseCase";
+import { execute as shaderManagerSetGradientFillUniformService } from "../../Shader/ShaderManager/service/ShaderManagerSetGradientFillUniformService";
+import { $gradientData } from "../../Gradient";
+import { $gl, $inverseMatrix, $context, $poolFloat32Array6 } from "../../WebGLUtil";
+/**
+ * @description 放射状グラデーションのシェーダーを実行します。
+ *              Execute the radial gradient shader.
+ *
+ * @param  {IVertexArrayObject} vertex_array_object
+ * @param  {number} offset
+ * @param  {number} index_count
+ * @param  {Float32Array | null} [grid_data=null]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (vertex_array_object, offset, index_count, grid_data) => {
+    const stops = $gradientData.shift();
+    const matrix = $gradientData.shift();
+    const spread = $gradientData.shift();
+    const interpolation = $gradientData.shift();
+    const focal = $gradientData.shift();
+    $gl.disable($gl.STENCIL_TEST);
+    const textureObject = gradientLUTGenerateShapeTextureUseCase(stops, interpolation);
+    textureManagerBind0UseCase(textureObject);
+    $gl.enable($gl.STENCIL_TEST);
+    $gl.frontFace($gl.CCW);
+    $gl.stencilMask(0xff);
+    // mask setting
+    $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);
+    $gl.colorMask(false, false, false, false);
+    const useGrid = !!grid_data;
+    const coverageShader = variantsShapeMaskShaderService(useGrid);
+    if (grid_data) {
+        shaderManagerSetMaskUniformService(coverageShader, grid_data);
+    }
+    $gl.enable($gl.SAMPLE_ALPHA_TO_COVERAGE);
+    shaderManagerFillUseCase(coverageShader, vertex_array_object, offset, index_count);
+    $gl.disable($gl.SAMPLE_ALPHA_TO_COVERAGE);
+    $gl.stencilFunc($gl.NOTEQUAL, 0, 0xff);
+    $gl.stencilOp($gl.KEEP, $gl.ZERO, $gl.ZERO);
+    $gl.colorMask(true, true, true, true);
+    $context.save();
+    $context.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+    const prevMatrix = $context.$stack[$context.$stack.length - 1];
+    const inverseMatrix = $inverseMatrix($context.$matrix);
+    const shaderManager = variantsGradientShapeShaderUseCase(true, Boolean(focal), spread, useGrid);
+    shaderManagerSetGradientFillUniformService(shaderManager, 1, prevMatrix, inverseMatrix, focal, grid_data);
+    $context.restore();
+    $poolFloat32Array6(inverseMatrix);
+    shaderManagerFillUseCase(shaderManager, vertex_array_object, offset, index_count);
+};

package/src/Context/usecase/ContextResizeUseCase.d.ts

@@ -0,0 +1,14 @@
+import type { Context } from "../../Context";
+/**
+ * @description メインのアタッチメントオブジェクトをリサイズする
+ *              Resize the main attachment object
+ *
+ * @param  {Context} context
+ * @param  {number} width
+ * @param  {number} height
+ * @param  {boolean} [cache_clear=true]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (context: Context, width: number, height: number, cache_clear?: boolean) => void;

package/src/Context/usecase/ContextResizeUseCase.js

@@ -0,0 +1,43 @@
+import { execute as frameBufferManagerReleaseAttachmentObjectUseCase } from "../../FrameBufferManager/usecase/FrameBufferManagerReleaseAttachmentObjectUseCase";
+import { execute as frameBufferManagerGetAttachmentObjectUseCase } from "../../FrameBufferManager/usecase/FrameBufferManagerGetAttachmentObjectUseCase";
+import { execute as frameBufferManagerUnBindAttachmentObjectService } from "../../FrameBufferManager/service/FrameBufferManagerUnBindAttachmentObjectService";
+import { execute as atlasManagerResetUseCase } from "../../AtlasManager/usecase/AtlasManagerResetUseCase";
+/**
+ * @description メインのアタッチメントオブジェクトをリサイズする
+ *              Resize the main attachment object
+ *
+ * @param  {Context} context
+ * @param  {number} width
+ * @param  {number} height
+ * @param  {boolean} [cache_clear=true]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (context, width, height, cache_clear = true) => {
+    // clear InstacedArray
+    context.clearArraysInstanced();
+    if (context.$stackAttachmentObject.length) {
+        for (let idx = 0; idx < context.$stackAttachmentObject.length; ++idx) {
+            const attachmentObject = context.$stackAttachmentObject[idx];
+            if (!attachmentObject) {
+                continue;
+            }
+            frameBufferManagerReleaseAttachmentObjectUseCase(attachmentObject);
+        }
+    }
+    else {
+        if (context.$mainAttachmentObject) {
+            frameBufferManagerReleaseAttachmentObjectUseCase(context.$mainAttachmentObject);
+        }
+    }
+    // reset node
+    if (cache_clear) {
+        atlasManagerResetUseCase();
+    }
+    // unbind
+    frameBufferManagerUnBindAttachmentObjectService();
+    // new attachment object
+    context.$mainAttachmentObject = frameBufferManagerGetAttachmentObjectUseCase(width, height, true);
+    context.bind(context.$mainAttachmentObject);
+};

package/src/Context/usecase/ContextStrokeUseCase.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description ストロークを描画
+ *              Draw a stroke
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: () => void;

package/src/Context/usecase/ContextStrokeUseCase.js

@@ -0,0 +1,22 @@
+import { $getVertices } from "../../PathCommand";
+import { execute as meshStrokeGenerateUseCase } from "../../Mesh/usecase/MeshStrokeGenerateUseCase";
+import { $addFillBuffer, $fillTypes, $fillBufferIndexes } from "../../Mesh";
+/**
+ * @description ストロークを描画
+ *              Draw a stroke
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    const vertices = $getVertices(true);
+    if (!vertices.length) {
+        return;
+    }
+    $fillTypes.push("fill");
+    const mesh = meshStrokeGenerateUseCase(vertices);
+    $addFillBuffer(mesh.buffer);
+    // 塗りのインデックスを追加
+    $fillBufferIndexes.push(mesh.indexCount);
+};