Three.js 최적화: ey 기술-JS 튜토리얼-php.cn

코드는 예술이 될 수 있습니다. 기발한 구문, 우아한 데이터 구조, 세련된 상호 작용 등 프로그래머만이 볼 수 있는 아름다움이 있습니다. 그것도 괜찮습니다.

그러나 코드는 시각적으로 놀라운 것, 즉 모두가 감상할 수 있는 것을 만들 수도 있습니다. Three.js와 같은 도구가 빛나는 곳입니다. 그러나 Three.js는 특히 다양한 컴퓨팅 성능을 갖춘 장치에서 액세스하는 동적 웹 페이지에서 사용될 때 무거울 수 있습니다.

나처럼 사이트에 여러 Three.js 장면을 추가하는 경우(나처럼 didof.dev에서) 최적화가 필요합니다. 성능을 유지하기 위한 세 가지 실용적인 기술은 다음과 같습니다.

원본은 제 블로그에 올렸습니다.

필요할 때만 장면 로드

표시되지 않는 장면은 로드하지 마세요. 이는 무거운 그래픽 구성 요소에 적용됩니다. 이를 위한 가장 좋은 도구는 요소가 뷰포트에 들어오는 시기를 감지하는 IntersectionObserver입니다. SvelteKit에서 처리하는 방법은 다음과 같습니다.

<script lang="ts">
    import { browser } from '$app/environment';
    import { onMount } from 'svelte';

    let ref: HTMLDivElement;
    let download = $state(false);
    if (browser)
        onMount(() => {
            const observer = new IntersectionObserver(([entry]) => {
                if (entry.isIntersecting) {
                    download = true;

                    // we need this once only
                    observer.disconnect();
                }
            });
            // ref has been bound by Svelte since we are in onMount
            observer.observe(ref);

            return () => observer.disconnect();
        });
</script>

<div bind:this={ref}>
    {#if download}
        <!-- let SvelteKit handle the code splitting -->
        {#await import('./three-scene.svelte')}
            Loading
        {:then module}
            <module.default />
        {:catch error}
            <div>{error}</div>
        {/await}
    {/if}
</div>

로그인 후 복사

보이지 않는 장면 일시 정지

장면이 표시되지 않으면 렌더링을 중지하세요. 대부분의 튜토리얼은 단일 전체 화면 장면에 중점을 두지만 여러 장면이 있는 사이트의 경우 숨겨진 장면을 일시 중지하면 리소스가 절약됩니다.

다음은 IntersectionObserver를 사용하여 장면의 애니메이션 루프를 제어하는 스니펫입니다.

function tick() {
    const elapsedTime = clock.getElapsedTime();

    // Update your scene (e.g. set uniforms, move/rotate geometries...)

    renderer.render(scene, camera);
}

// Start the rendering
renderer.setAnimationLoop(tick);

로그인 후 복사

다시 한 번 우리 친구 IntersectionObserver가 도와줍니다.

let clock: THREE.Clock;
let renderer: THREE.WebGLRenderer;

if (browser)
    onMount(() => {
        const observer = new IntersectionObserver(([entry]) => {
            if (entry.isIntersecting) {
                clock.start();
                renderer.setAnimationLoop(tick); // resume
            } else {
                clock.stop();
                renderer.setAnimationLoop(null); // pause
            }
        });
        observer.observe(canvas);

        // Scene setup...

        return () => {
            observer.disconnect();

            // Other cleanup...
        };
    });

로그인 후 복사

뷰포트 크기에 맞게 셰이더 작업 부하 조정

화면이 작은 기기는 성능이 떨어지는 경우가 많습니다. 이에 따라 셰이더의 계산 작업량을 조정하세요. 예를 들어 뷰포트 너비를 기준으로 프랙탈 셰이더에 사용되는 옥타브 수를 줄이세요.

브라우저에서...

<script lang="ts">
    import ThreeScene from "./three-scene.svelte";
    import { browser } from '$app/environment';

    const octaves = browser ? (window.innerWidth <= 680 ? 2 : 4) : 1
</script>

<ThreeScene {octaves} />

로그인 후 복사

... three.js를 통해...

const material = new THREE.ShaderMaterial({
    vertexShader,
    fragmentShader,
    uniforms: {
        uOctaves: new Three.Uniform(octaves) // coming as $prop
    }
});

로그인 후 복사

...드디어 셰이더에서.

uniform float uOctaves;

for(float i = 0.0; i <= uOctaves; i++)
{
    elevation += simplexNoise2d(warpedPosition * uPositionFrequency * pow(2.0, i)) /  pow(2.0, i + 1.0);
}

로그인 후 복사

이러한 접근 방식은 성능과 시각적 품질의 균형을 동적으로 조정합니다.

브라우저 핸들을 정리하자

여기서 문제가 발생합니다. Three.js는 메모리를 자동으로 정리하지 않으며 기하학, 질감, 재료와 같은 객체를 수동으로 추적하고 폐기해야 합니다. 이를 건너뛰면 페이지에서 뒤로 이동할 때마다 메모리 사용량이 증가하여 결국 브라우저가 중단됩니다.

제가 홈페이지에서 관찰한 내용을 공유하겠습니다.

초기 메모리 사용량: 22.4MB

Optimizing Three.js: ey Techniques

다른 페이지로 소프트 탐색한 후: 28.6MB(해당 페이지가 정적 HTML인 경우에도)

Optimizing Three.js: ey Techniques

앞으로 계속 탐색한 후: 브라우저가 충돌할 때까지 메모리 사용량이 계속 증가했습니다.

Optimizing Three.js: ey Techniques

왜요? Three.js 객체가 제대로 처리되지 않았기 때문입니다. 그리고 광범위한 연구에도 불구하고 최신 프레임워크에서 메모리를 완전히 정리할 수 있는 안정적인 방법을 찾지 못했습니다.

제가 찾은 가장 간단한 해결책은 다음과 같습니다. Three.js 장면이 있는 페이지를 떠날 때 강제로 다시 로드하세요. 강제 다시 로드를 통해 브라우저는 다음을 수행할 수 있습니다.

새 페이지 컨텍스트를 만듭니다.
이전 페이지에서 가비지 수집을 수행합니다(정리 작업은 브라우저에 맡김).

SvelteKit에서는 data-sveltekit-reload를 사용하면 쉽습니다. 장면이 있는 페이지에 대해 활성화하세요.

홈페이지의 server.page.ts

<script lang="ts">
    import { browser } from '$app/environment';
    import { onMount } from 'svelte';

    let ref: HTMLDivElement;
    let download = $state(false);
    if (browser)
        onMount(() => {
            const observer = new IntersectionObserver(([entry]) => {
                if (entry.isIntersecting) {
                    download = true;

                    // we need this once only
                    observer.disconnect();
                }
            });
            // ref has been bound by Svelte since we are in onMount
            observer.observe(ref);

            return () => observer.disconnect();
        });
</script>

<div bind:this={ref}>
    {#if download}
        <!-- let SvelteKit handle the code splitting -->
        {#await import('./three-scene.svelte')}
            Loading
        {:then module}
            <module.default />
        {:catch error}
            <div>{error}</div>
        {/await}
    {/if}
</div>

로그인 후 복사

탐색 링크의 경우 이 값을 동적으로 전달하세요.

function tick() {
    const elapsedTime = clock.getElapsedTime();

    // Update your scene (e.g. set uniforms, move/rotate geometries...)

    renderer.render(scene, camera);
}

// Start the rendering
renderer.setAnimationLoop(tick);

로그인 후 복사