Skip to content

develop #279

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ienaga merged 9 commits into from
Apr 19, 2026
Merged

develop #279

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
b0a47ed
#275 WebGL版のリファクタリング
ienaga Apr 18, 2026
2d5a43a
#277 WebGPU版のリファクタリング
ienaga Apr 18, 2026
2fb97ba
#278 メインスレッドのグラデーションの詰め込みを改修
ienaga Apr 18, 2026
6c432d0
#274 update packages
ienaga Apr 18, 2026
f82e65f
#274 キャッシュ処理でのフィルター描画崩れを改修
ienaga Apr 18, 2026
d55c036
#274 e2eのテストケースを追加
ienaga Apr 18, 2026
7a7cc31
#274 SpriteへのColorMatrixFilter適用を改修
ienaga Apr 19, 2026
23332dc
#274 バージョン情報を更新
ienaga Apr 19, 2026
1638803
#274 ユニットテストを追加
ienaga Apr 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 100 additions & 0 deletions e2e/pages/filter/color-matrix-cacheasbitmap-child.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Next2D E2E - ColorMatrixFilter parent with cacheAsBitmap child</title>
<script defer type="module" src="/src/index.ts"></script>
<style>
body { margin: 0; padding: 0; background: #333333; }
</style>
</head>
<body>
<script type="module">
window.addEventListener("DOMContentLoaded", async () => {
const root = await next2d.createRootMovieClip(800, 500, 60);
const { Shape, Sprite } = next2d.display;
const { ColorMatrixFilter } = next2d.filters;
const { Matrix } = next2d.geom;

// slime-ten-puzzle の SelectTime5Atom 相当: 複数子を持つ横長スプライト
const buildAtom = () => {
const inner = new Sprite();

const body = new Shape();
body.graphics.beginFill(0x88AACC, 1.0).drawRoundRect(0, 0, 180, 60, 30, 30).endFill();
inner.addChild(body);

const text5 = new Shape();
text5.graphics.beginFill(0xFFFFFF, 1.0).drawRect(40, 11, 12, 38).endFill();
inner.addChild(text5);

const text0a = new Shape();
text0a.graphics.beginFill(0xFFFFFF, 1.0).drawCircle(90, 30, 12).endFill();
inner.addChild(text0a);

const text0b = new Shape();
text0b.graphics.beginFill(0xFFFFFF, 1.0).drawCircle(130, 30, 12).endFill();
inner.addChild(text0b);

return inner;
};

const sepia = [
0.25, 0, 0, 0, 0,
0, 0.25, 0, 0, 0,
0, 0, 0.25, 0, 0,
0, 0, 0, 1, 0
];

// 1. 子にcacheAsBitmap + 親にフィルター（問題再現狙い）
const wrap1 = new Sprite();
const atom1 = buildAtom();
atom1.cacheAsBitmap = new Matrix(1.5, 0, 0, 1.5, 0, 0);
atom1.x = -90;
atom1.y = -30;
wrap1.addChild(atom1);
wrap1.x = 200;
wrap1.y = 80;
wrap1.filters = [new ColorMatrixFilter(sepia)];
root.addChild(wrap1);

// 2. 比較用: cacheAsBitmapなし + 親にフィルター
const wrap2 = new Sprite();
const atom2 = buildAtom();
atom2.x = -90;
atom2.y = -30;
wrap2.addChild(atom2);
wrap2.x = 200;
wrap2.y = 200;
wrap2.filters = [new ColorMatrixFilter(sepia)];
root.addChild(wrap2);

// 3. 比較用: cacheAsBitmapあり + フィルターなし
const wrap3 = new Sprite();
const atom3 = buildAtom();
atom3.cacheAsBitmap = new Matrix(1.5, 0, 0, 1.5, 0, 0);
atom3.x = -90;
atom3.y = -30;
wrap3.addChild(atom3);
wrap3.x = 200;
wrap3.y = 320;
root.addChild(wrap3);

// 4. 比較用: 子にフィルターを直接適用
const wrap4 = new Sprite();
const atom4 = buildAtom();
atom4.x = -90;
atom4.y = -30;
atom4.cacheAsBitmap = new Matrix(1.5, 0, 0, 1.5, 0, 0);
atom4.filters = [new ColorMatrixFilter(sepia)];
wrap4.addChild(atom4);
wrap4.x = 500;
wrap4.y = 80;
root.addChild(wrap4);

window.__E2E_RENDER_COMPLETE__ = true;
});
</script>
</body>
</html>
119 changes: 119 additions & 0 deletions e2e/pages/filter/color-matrix-sprite-transformed.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Next2D E2E - ColorMatrixFilter on Sprite with transformed Shapes (issue #274)</title>
<script defer type="module" src="/src/index.ts"></script>
<style>
body { margin: 0; padding: 0; background: #333333; }
</style>
</head>
<body>
<script type="module">
window.addEventListener("DOMContentLoaded", async () => {
const root = await next2d.createRootMovieClip(600, 400, 60);
const { Shape, Sprite } = next2d.display;
const { ColorMatrixFilter } = next2d.filters;

// セピア調のColorMatrix（適用確認用）
const sepia = [
0.393, 0.769, 0.189, 0, 0,
0.349, 0.686, 0.168, 0, 0,
0.272, 0.534, 0.131, 0, 0,
0, 0, 0, 1, 0
];

// 各Shapeにscale+rotation(=Matrix相当)を個別適用しつつSpriteに複数addChildするヘルパー
const buildTransformedChildrenSprite = (x, y) => {
const sprite = new Sprite();
sprite.x = x;
sprite.y = y;

// Shape1: 赤い矩形をスケール1.5倍&15deg回転&移動
const shape1 = new Shape();
shape1.graphics
.beginFill(0xFF0000, 1.0)
.drawRect(0, 0, 60, 40)
.endFill();
shape1.scaleX = 1.5;
shape1.scaleY = 1.5;
shape1.rotation = 15;
shape1.x = 20;
shape1.y = 30;
sprite.addChild(shape1);

// Shape2: 緑の円をスケール1.2倍&-20deg回転&移動
const shape2 = new Shape();
shape2.graphics
.beginFill(0x00FF00, 1.0)
.drawCircle(30, 30, 25)
.endFill();
shape2.scaleX = 1.2;
shape2.scaleY = 1.2;
shape2.rotation = -20;
shape2.x = 100;
shape2.y = 40;
sprite.addChild(shape2);

// Shape3: 青い矩形を非等倍拡大&30deg回転&移動
const shape3 = new Shape();
shape3.graphics
.beginFill(0x0066FF, 1.0)
.drawRect(0, 0, 40, 40)
.endFill();
shape3.scaleX = 2.0;
shape3.scaleY = 1.0;
shape3.rotation = 30;
shape3.x = 40;
shape3.y = 110;
sprite.addChild(shape3);

// Shape4: 黄色い矩形を縮小&-45deg回転&移動
const shape4 = new Shape();
shape4.graphics
.beginFill(0xFFFF00, 1.0)
.drawRect(0, 0, 60, 30)
.endFill();
shape4.scaleX = 0.8;
shape4.scaleY = 1.3;
shape4.rotation = -45;
shape4.x = 160;
shape4.y = 120;
sprite.addChild(shape4);

return sprite;
};

// ===== 参照用: フィルターなし =====
const reference = buildTransformedChildrenSprite(30, 30);
root.addChild(reference);

// ===== 再現対象: Sprite全体に ColorMatrixFilter =====
// 期待: 参照と同じ領域にセピア調で正しく表示される
// バグ: 左上1/4のみ描画 & セピア未適用
const withFilter = buildTransformedChildrenSprite(320, 30);
withFilter.filters = [new ColorMatrixFilter(sepia)];
root.addChild(withFilter);

// ===== 確認用: Sprite自身もスケーリング =====
const withFilterScaled = buildTransformedChildrenSprite(30, 220);
withFilterScaled.scaleX = 0.7;
withFilterScaled.scaleY = 0.7;
withFilterScaled.filters = [new ColorMatrixFilter(sepia)];
root.addChild(withFilterScaled);

// ===== 確認用: ネストしたSprite =====
const outer = new Sprite();
outer.x = 320;
outer.y = 220;
const inner = buildTransformedChildrenSprite(0, 0);
outer.addChild(inner);
outer.filters = [new ColorMatrixFilter(sepia)];
root.addChild(outer);

window.__E2E_RENDER_COMPLETE__ = true;
});
</script>
</body>
</html>
94 changes: 94 additions & 0 deletions e2e/pages/filter/filters-cacheasbitmap-child.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Next2D E2E - 全フィルターに対する cacheAsBitmap子の回帰確認 (issue #274)</title>
<script defer type="module" src="/src/index.ts"></script>
<style>
body { margin: 0; padding: 0; background: #333333; }
</style>
</head>
<body>
<script type="module">
window.addEventListener("DOMContentLoaded", async () => {
const root = await next2d.createRootMovieClip(960, 720, 60);
const { Shape, Sprite } = next2d.display;
const {
BlurFilter, DropShadowFilter, GlowFilter, BevelFilter,
ColorMatrixFilter, ConvolutionFilter,
GradientGlowFilter, GradientBevelFilter
} = next2d.filters;
const { Matrix } = next2d.geom;

// slime-ten-puzzle SelectTime5Atom 相当: 横長の複数子構成Sprite
const buildAtom = () => {
const inner = new Sprite();
const body = new Shape();
body.graphics.beginFill(0x88AACC, 1.0).drawRoundRect(0, 0, 180, 60, 30, 30).endFill();
inner.addChild(body);
const bar = new Shape();
bar.graphics.beginFill(0xFFFFFF, 1.0).drawRect(40, 11, 12, 38).endFill();
inner.addChild(bar);
const dotA = new Shape();
dotA.graphics.beginFill(0xFFFFFF, 1.0).drawCircle(90, 30, 12).endFill();
inner.addChild(dotA);
const dotB = new Shape();
dotB.graphics.beginFill(0xFFFFFF, 1.0).drawCircle(130, 30, 12).endFill();
inner.addChild(dotB);
return inner;
};

const sepia = [
0.25, 0, 0, 0, 0,
0, 0.25, 0, 0, 0,
0, 0, 0.25, 0, 0,
0, 0, 0, 1, 0
];

const entries = [
{ label: "no filter", filters: null },
{ label: "Blur", filters: [new BlurFilter(8, 8, 1)] },
{ label: "DropShadow", filters: [new DropShadowFilter(4, 45, 0x000000, 0.8, 6, 6, 1, 1)] },
{ label: "Glow", filters: [new GlowFilter(0xFFFF00, 1.0, 10, 10, 2, 1)] },
{ label: "Bevel", filters: [new BevelFilter(4, 45, 0xFFFFFF, 1, 0x000000, 1, 6, 6, 1, 1)] },
{ label: "ColorMatrix(sepia)", filters: [new ColorMatrixFilter(sepia)] },
{ label: "Convolution(blur)", filters: [new ConvolutionFilter(3, 3, [
1,1,1,
1,1,1,
1,1,1
], 9)] },
{ label: "GradientGlow", filters: [new GradientGlowFilter(
0, 45, [0xFFFFFF, 0xFFAA00], [0, 1], [0, 255], 8, 8, 2, 1, "outer"
)] },
{ label: "GradientBevel", filters: [new GradientBevelFilter(
4, 45, [0xFFFFFF, 0x000000], [1, 1], [0, 255], 8, 8, 2, 1
)] }
];

const cols = 3;
const cellW = 310;
const cellH = 230;
entries.forEach((entry, idx) => {
const col = idx % cols;
const row = Math.floor(idx / cols);

const wrap = new Sprite();
const atom = buildAtom();
atom.cacheAsBitmap = new Matrix(1.5, 0, 0, 1.5, 0, 0);
atom.x = -90;
atom.y = -30;
wrap.addChild(atom);
wrap.x = 110 + col * cellW;
wrap.y = 80 + row * cellH;
if (entry.filters) {
wrap.filters = entry.filters;
}
root.addChild(wrap);
});

window.__E2E_RENDER_COMPLETE__ = true;
});
</script>
</body>
</html>
Loading
Loading