Troika: "많은 수의 열려 있는 WorkerModule 요청, 일부는 반환되지 않을 수 있음" 경고

흠, 해당 경고는 1000개 이상의 열린 작업자 요청이 있을 때까지 트리거되지 않습니다. 매우 많은 수의 텍스트 인스턴스가 있습니까?

하지만 1000을 넘지 않습니다(적어도 의도적으로는 아님)

몇백개 이상

여기 내가 렌더링하는 것이 있습니다

하지만 실제로 필요한 것보다 더 많은 인스턴스를 생성하고 1000개를 넘으면 오류가 발생하기 시작하는 버그가 있다는 말씀이신가요?

내용이 없는 인스턴스를 .visible = false로 설정했습니다.

그러나 나는 그것이 여전히 인스턴스가 존재한다는 것을 의미한다고 생각합니다

사용하지 않는 인스턴스를 완전히 제거하기 위해 .visible 소품을 사용하는 대신 권장하시겠습니까?

아, 그걸로 설명할 수 있겠네요. .sync() 에 대한 모든 호출은 visible:false 인 경우에도 백그라운드에서 작업자에게 계속 발행되며 누적됩니다.

나는 개인적으로 필요에 따라 레이블을 생성/폐기하거나 최소한 숨겨진 레이블에 대한 .sync() 호출을 방지하도록 선택할 것이라고 생각합니다. 이러한 작업자 요청은 모두 동일한 작업자를 사용하므로 숨겨진 레이블을 처리하는 중이면 보이는 레이블의 처리가 지연될 수 있습니다.

그러나 정확한 LabelView 코드를 보지 못한 채 몇 가지 가정을 하고 있습니다. 내 쪽에는 버그가 있을 수 있으므로 찾은 것을 LMK하십시오.

.visible === true일 때만 .sync()를 호출하려고 했습니다.

하지만 여전히 경고를 받고 있습니다

대신 보이는 개체에 대한 인스턴스만 만들고 사용하지 않는 개체를 파괴하면 경고가 사라집니다.

흠, Text 자체는 onBeforeRender에서 sync()만 호출하며, visible=false인 경우 트리거되지 _해서는 안 됩니다.

내가 엿볼 수 있는 모든 곳에서 LabelView 래퍼 코드를 사용할 수 있습니까?

폐쇄 소스 프로젝트의 일부입니다.

그러나 여기에 관련 클래스가 있습니다. 충분할 수 있습니다.

import {Mesh, MeshBasicMaterial} from "three";
import R from "../../../../../../../../../../resources/Namespace";
import BaseView, {ViewType} from "./BaseView";
import {Text} from "troika-three-text";
import {GeometryInstances} from "../instances/GeometryInstances";
import {MaterialInstances} from "../instances/MaterialInstances";

export enum TextAlign {
    left = "left",
    right = "right",
    center = "center",
    justify = "justify",
}

export enum HorizontalAlign {
    left = "left",
    right = "right",
    center = "center",
}

export enum VerticalAlign {
    top = "top",
    topBaseline = "top-baseline",
    middle = "middle",
    bottomBaseline = "bottom-baseline",
    bottom = "bottom",
}

export interface ILabelData {
    content: string;
    fontFace?: string;
    fontSize?: number;
    alignment?: TextAlign;
    horizontalAlign?: HorizontalAlign;
    verticalAlign?: VerticalAlign;
    color?: string;
    opacity?: number;
    backgroundColor?: string;
    highlightable: boolean;
}

export default class LabelView extends BaseView {
    get viewObject() {
        return this._viewObject as any;
    }

    get content() {
        return this.textMesh.text;
    }

    set content(content: string) {
        if (content !== this.textMesh.text) {
            this.textMesh.text = content;
            this.textMesh.visible = !!content;

            this.syncIfVisible();
        }
    }

    private syncIfVisible() {
        // Better for perf: https://github.com/protectwise/troika/issues/112
        if (this.textMesh?.text && this.textMesh?.visible && this._isVisible) {
            this.textMesh.sync();
        }
    }

    set textAlign(alignment: TextAlign) {
        this.textMesh.textAlign = alignment;
        this.syncIfVisible();
    }

    set horizontalAlign(alignment: HorizontalAlign) {
        this.textMesh.anchorX = alignment;
        this.syncIfVisible();
    }

    set verticalAlign(alignment: VerticalAlign) {
        this.textMesh.anchorY = alignment;
        this.syncIfVisible();
    }

    private backgroundMesh: Mesh | undefined;
    private readonly textMesh: any;
    private readonly foregroundColor: string;
    private highlightable: boolean;

    constructor(labelData: ILabelData) {
        super(ViewType.Label);

        this.foregroundColor = labelData.color || R.colors.elements.labels.foreground;

        this.highlightable = labelData.highlightable;

        if (labelData.backgroundColor) {
            this.textMesh = this.createTextMesh(
                labelData.content,
                labelData.fontFace,
                labelData.fontSize,
                labelData.alignment,
                labelData.horizontalAlign,
                labelData.verticalAlign,
                this.foregroundColor,
                labelData.opacity,
                1);

            this.textMesh.addEventListener("synccomplete", () => {
                if (this.backgroundMesh) {
                    this._viewObject.remove(this.backgroundMesh);
                }

                if (this.textMesh.text) {
                    const bounds = this.textMesh.textRenderInfo.blockBounds;
                    this.backgroundMesh =
                        this.createBackgroundBox(bounds[0], bounds[1], bounds[2], bounds[3], 0);
                    this._viewObject.add(this.backgroundMesh);
                }
            });

        } else {
            this.textMesh = this.createTextMesh(
                labelData.content,
                labelData.fontFace,
                labelData.fontSize,
                labelData.alignment,
                labelData.horizontalAlign,
                labelData.verticalAlign,
                this.foregroundColor,
                labelData.opacity,
                0);
        }

        this.syncIfVisible();

        this._viewObject.add(this.textMesh);
    }

    public onFrameRendered(elapsedTime: number) {
        if (this.highlightable) {
            this.setLabelHighlightState();
        }
    }

    private setLabelHighlightState() {
        const labelMaterial = this.textMesh.material as MeshBasicMaterial;
        if (this._isHighlighted) {
            labelMaterial.color.set(R.colors.elements.labels.highlighted);
        } else {
            labelMaterial.color.set(this.foregroundColor);
        }
    }

    private createTextMesh(content: string,
                           fontFace = R.layout.labels.font_face.regular,
                           fontSize = R.layout.labels.font_size,
                           textAlign = TextAlign.center,
                           horizontalAlign = HorizontalAlign.center,
                           verticalAlign = VerticalAlign.middle,
                           color: string,
                           opacity = 1,
                           zLevel: number) {
        const labelMesh = new Text();

        labelMesh.font = fontFace;
        labelMesh.text = content || "";
        labelMesh.fontSize = fontSize;
        labelMesh.position.z = zLevel;
        labelMesh.color = color;
        labelMesh.textAlign = textAlign;
        labelMesh.anchorX = horizontalAlign;
        labelMesh.anchorY = verticalAlign;

        labelMesh.material.opacity = opacity;
        labelMesh.name = "LabelView";

        return labelMesh;
    }

    private createBackgroundBox(startX: number, startY: number, endX: number, endY: number, zLevel: number) {
        const paddingLeft = 1;
        const paddingRight = 2;
        const paddingTop = 1;
        const paddingBottom = 0;

        const width = Math.abs(startX) + Math.abs(endX) + paddingLeft + paddingRight;
        const height = Math.abs(startY) + Math.abs(endY) + (paddingTop + paddingBottom);

        const geometry = GeometryInstances.getInstance().getPlaneGeometryInstance(width, height);
        const material = MaterialInstances.getInstance().backgroundColorMaterial;
        const mesh = new Mesh(geometry, material);

        const posX = ((startX + endX) / 2) + (paddingLeft / 4);
        const posY = ((startY + endY) / 2) - (paddingBottom);

        // The z level of element in accordance with standards defined in resources
        mesh.position.set(posX, posY, zLevel);
        mesh.name = "LabelBackgroundBox";

        return mesh;
    }
}

흠, 내 직감은 .visible이 false로 설정되기 전에 syncIfVisible()이 호출되고 있지만 뷰 시스템이 어떻게 작동하는지 알지 않고는 확실히 말하기 어렵습니다.

내가 주목하고 있는 또 다른 점은 모든 개별 속성 변경(content, textAlign, horizontalAlign 등) 후에 syncIfVisible 호출을 실행하여 작업자에게 필요한 것보다 더 많은 호출을 발행한다는 것입니다. 뷰 시스템에 모든 개별 속성이 설정된 후 단일 동기화 호출을 실행할 수 있는 수명 주기가 있는 경우 훨씬 더 좋습니다.

설명하신 내용을 보면 이 경고가 예상대로 작동하고 있다고 생각합니다. 성능 문제를 올바르게 강조 표시했습니다. 이 문제를 닫습니다. 다르게 생각한다면 자유롭게 다시 열어보십시오. 감사 해요!

이만 돌아가면

따라서 내 장면에 1000개 이상의 텍스트 인스턴스가 있는 것으로 나타났습니다. 그러나 동시에 모든 것이 보이는 것은 아닙니다.

그들 중 대부분은 특정 개체에 마우스를 올려 놓았을 때 나타납니다.

그래서 앞으로 가장 좋은 방법이 무엇인지 궁금합니다.

1. 보이는 텍스트에 대해서만 인스턴스를 만든 다음 보이지 않게 되자마자 마운트를 해제하시겠습니까?
2. 대신 ThreeJS CSS 객체를 사용하시겠습니까?

개인적으로는 첫 번째 옵션을 선택하겠습니다. 내가 틀릴 수는 있지만 장면 그래프에 숨겨진 레이블 개체가 모두 존재하는 것의 이점은 없다고 생각합니다.

알았다

개체를 마우스로 가리킬 때 빠르게 표시할 수 있어야 합니다.

사용 후에 그냥 파괴하고 호버에서 새 항목을 만드는 것이 좋습니다. 아니면 대신 threeJ 장면에서 제거하시겠습니까?

솔직히 어느 쪽이든 눈에 띄는 차이는 없을 것이라고 생각합니다. 문제를 발견한 경우에만 관리 및 최적화가 가장 간단한 것부터 시작하겠습니다.

개인적으로 나는 생성/파괴 접근 방식을 많이 해왔고, 항상 나에게 충분히 빠릅니다.