Skip to content
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

fix: render bugs caused by diff algorithm and pre-comp #53

Merged
merged 5 commits into from
Dec 19, 2023
Merged

fix: render bugs caused by diff algorithm and pre-comp #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
72221b2
fix: render sprite incorrectly caused by diff algorithm when config r…
RGCHN Dec 17, 2023
f4b0782
fix: 蒙版在预合成上的穿透问题
RGCHN Dec 18, 2023
36e153d
chore: 更换 demo 页链接
RGCHN Dec 19, 2023
40eac18
fix: 修复重复引用预合成的贴图提前销毁问题
RGCHN Dec 19, 2023
30581eb
chore: 优化代码格式
RGCHN Dec 19, 2023
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
33 changes: 21 additions & 12 deletions packages/effects-core/src/composition-source-manager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export class CompositionSourceManager implements Disposable {
imgUsage: Record<string, number[]>;
textures: Texture[];
jsonScene?: spec.JSONScene;
mask: number;
mask = 0;
RGCHN marked this conversation as resolved.
Show resolved Hide resolved
textureOptions: Record<string, any>[];

constructor (
Expand Down Expand Up @@ -76,7 +76,6 @@ export class CompositionSourceManager implements Disposable {
this.totalTime = totalTime ?? 0;
this.imgUsage = imgUsage ?? {};
this.textures = cachedTextures;
this.mask = 0;
listOrder = 0;
this.textureOptions = textureOptions;
this.sourceContent = this.getContent(this.composition);
Expand All @@ -103,7 +102,7 @@ export class CompositionSourceManager implements Disposable {

private assembleItems (composition: spec.Composition) {
const items: any[] = [];
let mask = this.mask;
let mask = this.mask++;
RGCHN marked this conversation as resolved.
Show resolved Hide resolved

if (isNaN(mask)) {
mask = 0;
RGCHN marked this conversation as resolved.
Show resolved Hide resolved
Expand Down Expand Up @@ -131,13 +130,7 @@ export class CompositionSourceManager implements Disposable {
renderContent.renderer = this.changeTex(renderContent.renderer);

if (!renderContent.renderer.mask) {
const maskMode = renderContent.renderer.maskMode;

if (maskMode === spec.MaskMode.MASK) {
renderContent.renderer.mask = ++mask;
} else if (maskMode === spec.MaskMode.OBSCURED || maskMode === spec.MaskMode.REVERSE_OBSCURED) {
renderContent.renderer.mask = mask;
}
this.processMask(renderContent.renderer, this.mask);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The processMask method is called with this.mask which is post-incremented in the assembleItems method. This could lead to confusion about the value being passed. It would be clearer to increment mask before passing it to processMask to ensure the intended value is used.

- let mask = this.mask++;
- this.processMask(renderContent.renderer, this.mask);
+ let mask = ++this.mask;
+ this.processMask(renderContent.renderer, mask);
Committable suggestion

❗ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
this.processMask(renderContent.renderer, this.mask);
let mask = ++this.mask;
this.processMask(renderContent.renderer, mask);

}

const split = renderContent.splits && !renderContent.textureSheetAnimation && renderContent.splits[0];
Expand Down Expand Up @@ -185,18 +178,21 @@ export class CompositionSourceManager implements Disposable {

// 处理预合成的渲染顺序
if (option.type === spec.ItemType.composition) {
const maskRef = ++this.mask;
const refId = (item.content as spec.CompositionContent).options.refId;

if (!this.refCompositions.get(refId)) {
throw new Error('Invalid Ref Composition id: ' + refId);
}
const ref = this.getContent(this.refCompositions.get(refId)!);

if (!this.refCompositionProps.has(refId)) {
this.refCompositionProps.set(refId, this.getContent(this.refCompositions.get(refId)!) as unknown as VFXItemProps);
this.refCompositionProps.set(refId, ref as unknown as VFXItemProps);
RGCHN marked this conversation as resolved.
Show resolved Hide resolved
}
const ref = this.refCompositionProps.get(refId)!;

ref.items.forEach((item: Record<string, any>) => {
item.listIndex = listOrder++;
this.processMask(item.content, maskRef);
});
option.items = ref.items;

Expand Down Expand Up @@ -240,6 +236,19 @@ export class CompositionSourceManager implements Disposable {
}
}

/**
* 处理蒙版和遮挡关系写入 stencil 的 ref 值
*/
private processMask (renderer: Record<string, number>, maskRef: number) {
if (!renderer.mask) {
const maskMode: spec.MaskMode = renderer.maskMode;

if (maskMode !== spec.MaskMode.NONE) {
renderer.mask = maskRef;
}
}
}

dispose (): void {
this.textureOptions = [];
this.textures = [];
Expand Down
24 changes: 10 additions & 14 deletions packages/effects-core/src/plugins/sprite/sprite-mesh.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,24 +194,20 @@ export class SpriteMesh {
const uSizeStart = start + 4;
const uQuatStart = start + 8;
const uColorStart = start + 12;

if (!selfData.visible && !init) {
mainDataArray[uSizeStart + 2] = -1;

return;
}

const uColor = selfData.color || [mainDataArray[uColorStart], mainDataArray[uColorStart + 1], mainDataArray[uColorStart + 2], mainDataArray[uColorStart + 3]];

// if (selfData.startSize) {
// selfData.transform.scaleBy(1 / selfData.startSize[0], 1 / selfData.startSize[1], 1);
// }

const tempPos = new Vector3();
const tempQuat = new Quaternion();
const tempScale = new Vector3();
const uColor = selfData.color || [mainDataArray[uColorStart], mainDataArray[uColorStart + 1], mainDataArray[uColorStart + 2], mainDataArray[uColorStart + 3]];

selfData.transform.assignWorldTRS(tempPos, tempQuat, tempScale);
if (selfData.visible) {
selfData.transform.assignWorldTRS(tempPos, tempQuat, tempScale);
} else {
if (!init) {
mainDataArray[uSizeStart + 2] = -1;

return;
}
}

const uPos = [...tempPos.toArray(), 0];
const uSize = [...tempScale.toArray(), 0];
Expand Down
4 changes: 2 additions & 2 deletions web-packages/demo/src/single.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const container = document.getElementById('J-container');
try {
const player = createPlayer();

const comp = await player.loadScene(json);
await player.loadScene(json);
} catch (e) {
console.error('biz', e);
}
Expand All @@ -21,7 +21,7 @@ function createPlayer () {
container,
interactive: true,
// renderFramework: 'webgl',
env: 'editor',
// env: 'editor',
notifyTouch: true,
onPausedByItem: data => {
console.info('onPausedByItem', data);
Expand Down
Loading