@next2d/webgl 1.18.12 → 3.0.0

package/src/Context/usecase/ContextPatternBitmapFillUseCase.js

@@ -0,0 +1,54 @@
+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 { execute as stencilSetMaskModeService } from "../../Stencil/service/StencilSetMaskModeService";
+import { execute as stencilSetFillModeService } from "../../Stencil/service/StencilSetFillModeService";
+import { execute as stencilEnableSampleAlphaToCoverageService } from "../../Stencil/service/StencilEnableSampleAlphaToCoverageService";
+import { execute as stencilDisableSampleAlphaToCoverageService } from "../../Stencil/service/StencilDisableSampleAlphaToCoverageService";
+import { $bitmapData } from "../../Bitmap";
+import { $context } from "../../WebGLUtil";
+/**
+ * @description ビットマップパターンのシェーダーを実行します。
+ *              Execute the bitmap pattern 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 (cached)
+    stencilSetMaskModeService();
+    const useGrid = !!grid_data;
+    const coverageShader = variantsShapeMaskShaderService(useGrid);
+    if (grid_data) {
+        shaderManagerSetMaskUniformService(coverageShader, grid_data);
+    }
+    stencilEnableSampleAlphaToCoverageService();
+    shaderManagerFillUseCase(coverageShader, vertex_array_object, offset, index_count);
+    stencilDisableSampleAlphaToCoverageService();
+    // 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 (cached)
+    stencilSetFillModeService();
+    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,61 @@
+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 { execute as stencilSetMaskModeService } from "../../Stencil/service/StencilSetMaskModeService";
+import { execute as stencilSetFillModeService } from "../../Stencil/service/StencilSetFillModeService";
+import { execute as stencilEnableSampleAlphaToCoverageService } from "../../Stencil/service/StencilEnableSampleAlphaToCoverageService";
+import { execute as stencilDisableSampleAlphaToCoverageService } from "../../Stencil/service/StencilDisableSampleAlphaToCoverageService";
+import { execute as stencilResetService } from "../../Stencil/service/StencilResetService";
+import { $gradientData } from "../../Gradient";
+import { $gl, $inverseMatrix, $context, $poolFloat32Array6, $enableStencilTest, $disableStencilTest } 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();
+    // Reset stencil cache before disabling stencil test
+    stencilResetService();
+    $disableStencilTest();
+    const textureObject = gradientLUTGenerateShapeTextureUseCase(stops, interpolation);
+    textureManagerBind0UseCase(textureObject);
+    $enableStencilTest();
+    $gl.stencilMask(0xff);
+    // mask setting (cached)
+    stencilSetMaskModeService();
+    const useGrid = !!grid_data;
+    const coverageShader = variantsShapeMaskShaderService(useGrid);
+    if (grid_data) {
+        shaderManagerSetMaskUniformService(coverageShader, grid_data);
+    }
+    stencilEnableSampleAlphaToCoverageService();
+    shaderManagerFillUseCase(coverageShader, vertex_array_object, offset, index_count);
+    stencilDisableSampleAlphaToCoverageService();
+    // draw shape setting (cached)
+    stencilSetFillModeService();
+    $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);
+};

package/src/Context.d.ts

@@ -0,0 +1,76 @@
+import type { IAttachmentObject } from "./interface/IAttachmentObject";
+import type { IBlendMode } from "./interface/IBlendMode";
+import type { IBounds } from "./interface/IBounds";
+import type { Node } from "@next2d/texture-packer";
+export declare class Context {
+    readonly $stack: Float32Array[];
+    readonly $matrix: Float32Array;
+    $clearColorR: number;
+    $clearColorG: number;
+    $clearColorB: number;
+    $clearColorA: number;
+    $mainAttachmentObject: IAttachmentObject | null;
+    readonly $stackAttachmentObject: IAttachmentObject[];
+    globalAlpha: number;
+    globalCompositeOperation: IBlendMode;
+    imageSmoothingEnabled: boolean;
+    $fillStyle: Float32Array;
+    $strokeStyle: Float32Array;
+    readonly maskBounds: IBounds;
+    thickness: number;
+    caps: number;
+    joints: number;
+    miterLimit: number;
+    newDrawState: boolean;
+    constructor(gl: WebGL2RenderingContext, samples: number, device_pixel_ratio?: number);
+    clearTransferBounds(): void;
+    updateBackgroundColor(red: number, green: number, blue: number, alpha: number): void;
+    fillBackgroundColor(): void;
+    resize(width: number, height: number, cache_clear?: boolean): void;
+    clearRect(x: number, y: number, w: number, h: number): void;
+    bind(attachment_object: IAttachmentObject): void;
+    save(): void;
+    restore(): void;
+    setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void;
+    transform(a: number, b: number, c: number, d: number, e: number, f: number): void;
+    reset(): void;
+    beginPath(): void;
+    moveTo(x: number, y: number): void;
+    lineTo(x: number, y: number): void;
+    quadraticCurveTo(cx: number, cy: number, x: number, y: number): void;
+    fillStyle(red: number, green: number, blue: number, alpha: number): void;
+    strokeStyle(red: number, green: number, blue: number, alpha: number): void;
+    closePath(): void;
+    arc(x: number, y: number, radius: number): void;
+    bezierCurveTo(cx1: number, cy1: number, cx2: number, cy2: number, x: number, y: number): void;
+    fill(): void;
+    gradientFill(type: number, stops: number[], matrix: Float32Array, spread: number, interpolation: number, focal: number): void;
+    bitmapFill(pixels: Uint8Array, matrix: Float32Array, width: number, height: number, repeat: boolean, smooth: boolean): void;
+    stroke(): void;
+    gradientStroke(type: number, stops: number[], matrix: Float32Array, spread: number, interpolation: number, focal: number): void;
+    bitmapStroke(pixels: Uint8Array, matrix: Float32Array, width: number, height: number, repeat: boolean, smooth: boolean): void;
+    clip(): void;
+    get currentAttachmentObject(): IAttachmentObject | null;
+    get atlasAttachmentObject(): IAttachmentObject;
+    createNode(width: number, height: number): Node;
+    removeNode(node: Node): void;
+    beginNodeRendering(node: Node): void;
+    endNodeRendering(): void;
+    drawFill(): void;
+    drawDisplayObject(node: Node, x_min: number, y_min: number, x_max: number, y_max: number, color_transform: Float32Array): void;
+    drawArraysInstanced(): void;
+    clearArraysInstanced(): void;
+    transferMainCanvas(): void;
+    drawPixels(node: Node, pixels: Uint8Array): void;
+    drawElement(node: Node, element: OffscreenCanvas | ImageBitmap, _flipY?: boolean): void;
+    beginMask(): void;
+    setMaskBounds(x_min: number, y_min: number, x_max: number, y_max: number): void;
+    endMask(): void;
+    leaveMask(): void;
+    useGrid(grid_data: Float32Array | null): void;
+    applyFilter(node: Node, unique_key: string, updated: boolean, width: number, height: number, is_bitmap: boolean, matrix: Float32Array, color_transform: Float32Array, blend_mode: IBlendMode, bounds: Float32Array, params: Float32Array): void;
+    containerBeginLayer(width: number, height: number): void;
+    containerEndLayer(blend_mode: IBlendMode, matrix: Float32Array, color_transform: Float32Array | null, use_filter: boolean, filter_bounds: Float32Array | null, filter_params: Float32Array | null, unique_key: string, filter_key: string): void;
+    containerDrawCachedFilter(blend_mode: IBlendMode, matrix: Float32Array, color_transform: Float32Array, filter_bounds: Float32Array, unique_key: string, filter_key: string): void;
+    createImageBitmap(width: number, height: number): Promise<ImageBitmap>;
+}