Skip to content

Commit

Permalink
#154 webglをv2へ移行(WIP)
Browse files Browse the repository at this point in the history
  • Loading branch information
ienaga committed Aug 25, 2024
1 parent f6a1a48 commit db1c537
Show file tree
Hide file tree
Showing 23 changed files with 726 additions and 85 deletions.
52 changes: 26 additions & 26 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -45,14 +45,14 @@
"htmlparser2": "^9.1.0"
},
"devDependencies": {
"@types/node": "^22.4.2",
"@types/node": "^22.5.0",
"@typescript-eslint/eslint-plugin": "^8.2.0",
"@typescript-eslint/parser": "^8.2.0",
"@vitest/web-worker": "^2.0.5",
"eslint": "^9.9.0",
"eslint": "^9.9.1",
"eslint-plugin-unused-imports": "^4.1.3",
"fflate": "^0.8.2",
"jsdom": "^24.1.1",
"jsdom": "^25.0.0",
"typescript": "^5.5.4",
"vite": "^5.4.2",
"vitest": "^2.0.5"
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
import type { DisplayObject } from "../../DisplayObject";
import type { Shape } from "../../Shape";
import { Matrix } from "@next2d/geom";
import { execute as shapeGetCalcBoundsMatrixUseCase } from "../../Shape/usecase/ShapeGetCalcBoundsMatrixUseCase";
import { execute as displayObjectGetRawMatrixUseCase } from "../../DisplayObject/usecase/DisplayObjectGetRawMatrixUseCase";
import {
$getArray,
$poolArray
} from "@next2d/share";

/**
* @description DisplayObjectのマスク描画範囲を計算して、マスク描画が実行可能かどうかを返します。
* Calculate the mask drawing area of DisplayObject and return whether the mask drawing is executable.
*
* @param {DisplayObject} display_object
* @param {Float32Array} matrix
* @param {number} renderer_width
* @param {number} renderer_height
* @param {number} point_x
* @param {number} point_y
* @return {boolean}
* @method
* @protected
*/
export const execute = <D extends DisplayObject>(
display_object: D,
matrix: Float32Array,
renderer_width: number,
renderer_height: number,
point_x: number,
point_y: number
): number[] | null => {

let bounds: number[] | null = null;

const rawMatrix = displayObjectGetRawMatrixUseCase(display_object);
const tMatrix = rawMatrix
? Matrix.multiply(matrix, rawMatrix)
: matrix;

switch (true) {

case display_object.isShape:
bounds = shapeGetCalcBoundsMatrixUseCase(
(display_object as unknown as Shape).graphics, tMatrix
);
break;

case display_object.isContainerEnabled:
// todo
break;

case display_object.isText:
// todo
break;

case display_object.isVideo:
// todo
break;

default:
break;

}

if (tMatrix !== matrix) {
Matrix.release(tMatrix);
}

if (!bounds) {
return null;
}

const xMin = bounds[0];
const xMax = bounds[2];
const width = Math.abs(xMax - xMin);
if (!width) {
return null;
}

const yMin = bounds[1];
const yMax = bounds[3];
const height = Math.abs(yMax - yMin);
if (!height) {
return null;
}

if (point_x > xMin + width
|| point_y > yMin + height
|| xMin > renderer_width
|| yMin > renderer_height
) {
return null;
}

return bounds;
};
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import type { Shape } from "../../Shape";
import { execute as displayObjectGetRawColorTransformUseCase } from "../../DisplayObject/usecase/DisplayObjectGetRawColorTransformUseCase";
import { execute as displayObjectGetRawMatrixUseCase } from "../../DisplayObject/usecase/DisplayObjectGetRawMatrixUseCase";
import { execute as shapeGenerateRenderQueueUseCase } from "../../Shape/usecase/ShapeGenerateRenderQueueUseCase";
import { execute as shapeGenerateClipQueueUseCase } from "../../Shape/usecase/ShapeGenerateClipQueueUseCase";
import { execute as displayObjectIsMaskReflectedInDisplayUseCase } from "../../DisplayObject/usecase/DisplayObjectIsMaskReflectedInDisplayUseCase";
import {
$clamp,
$RENDERER_CONTAINER_TYPE
Expand Down Expand Up @@ -40,7 +42,6 @@ export const execute = <P extends DisplayObjectContainer>(
point_y: number
): void => {

render_queue.push($RENDERER_CONTAINER_TYPE);
if (!display_object_container.visible) {
render_queue.push(0);
return ;
Expand Down Expand Up @@ -90,6 +91,9 @@ export const execute = <P extends DisplayObjectContainer>(
return ;
}

render_queue.push(1);
render_queue.push($RENDERER_CONTAINER_TYPE);

const filters = display_object_container.filters;
const blendMode = display_object_container.blendMode;

Expand All @@ -101,15 +105,17 @@ export const execute = <P extends DisplayObjectContainer>(
// todo
}

//
render_queue.push(1);


const colorTransform = isLayer
? tColorTransform
: new Float32Array([1, 1, 1, 1, 0, 0, 0, 0]);

const changed = display_object_container.changed;
render_queue.push(children.length);

let clipDepth = 0;
let canRenderMask = true;
for (let idx = 0; idx < children.length; ++idx) {

const child = children[idx] as DisplayObject;
Expand All @@ -118,6 +124,63 @@ export const execute = <P extends DisplayObjectContainer>(
}

render_queue.push(child.placeId, child.clipDepth);
if (clipDepth && child.placeId > clipDepth) {
clipDepth = 0;
canRenderMask = true;
}

if (!canRenderMask) {
continue;
}

if (child.clipDepth) {

clipDepth = child.clipDepth;

// マスクの描画開始判定
const bounds = displayObjectIsMaskReflectedInDisplayUseCase(
child,
tMatrix,
rendererWidth,
rendererHeight,
point_x,
point_y
);

canRenderMask = bounds ? true : false;
render_queue.push(+canRenderMask);

if (!bounds) {
continue;
}

render_queue.push(...bounds);
switch (true) {

case child.isContainerEnabled: // 0x00
break;

case child.isShape: // 0x01
shapeGenerateClipQueueUseCase(
child as Shape,
render_queue,
tMatrix
);
break;

case child.isText: // 0x02
break;

case child.isVideo: // 0x03
break;

default:
break;
}

continue;
}

switch (true) {

case child.isContainerEnabled: // 0x00
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import type { Shape } from "../../Shape";
import { Matrix } from "@next2d/geom";
import { $RENDERER_SHAPE_TYPE } from "../../DisplayObjectUtil";
import { execute as displayObjectGetRawMatrixUseCase } from "../../DisplayObject/usecase/DisplayObjectGetRawMatrixUseCase";

/**
* @description renderer workerに渡すShapeのマスク描画データを生成
* Generate mask drawing data of Shape to pass to renderer worker
*
* @param {Shape} shape
* @param {array} render_queue
* @param {Float32Array} matrix
* @return {void}
* @method
* @protected
*/
export const execute = (
shape: Shape,
render_queue: number[],
matrix: Float32Array
): void => {

render_queue.push($RENDERER_SHAPE_TYPE);

// transformed matrix(tMatrix)
const rawMatrix = displayObjectGetRawMatrixUseCase(shape);
const tMatrix = rawMatrix
? Matrix.multiply(matrix, rawMatrix)
: matrix;

render_queue.push(...tMatrix);
if (tMatrix !== matrix) {
Matrix.release(tMatrix);
}

const hasGrid: boolean = rawMatrix && shape.scale9Grid
? Math.abs(rawMatrix[1]) < 0.001 && Math.abs(rawMatrix[2]) < 0.0001
: false;

render_queue.push(+hasGrid);

const buffer = shape.graphics.buffer;
render_queue.push(buffer.length, ...buffer);
};
Loading

0 comments on commit db1c537

Please sign in to comment.