Mengoptimumkan Three.js: Teknik ey

Kod boleh jadi seni. Sama ada dalam sintaks yang bijak, struktur data yang elegan atau interaksi yang diperhalusi, terdapat keindahan yang hanya dilihat oleh pengaturcara—dan tidak mengapa.

Tetapi kod juga boleh mencipta sesuatu yang menakjubkan secara visual, sesuatu yang semua orang boleh hargai. Di sinilah alat seperti Three.js bersinar. Walau bagaimanapun, Three.js boleh menjadi berat, terutamanya apabila digunakan dalam halaman web dinamik yang diakses oleh peranti dengan kuasa pengiraan yang berbeza-beza.

Jika anda seperti saya, menambahkan berbilang adegan Three.js ke tapak anda (seperti yang saya lakukan di didof.dev), anda memerlukan pengoptimuman. Berikut ialah tiga teknik praktikal untuk memastikan prestasi terkawal.

Asal disiarkan di blog saya.

Muatkan Adegan Hanya Apabila Diperlukan

Jangan muatkan adegan jika ia tidak kelihatan. Ini terpakai kepada mana-mana komponen grafik yang berat. Alat terbaik untuk ini ialah IntersectionObserver, yang mengesan apabila elemen memasuki viewport. Begini cara saya mengendalikannya dalam 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>

Jeda Adegan Tiada Pandangan

Jika adegan tidak kelihatan, hentikan memaparkannya. Kebanyakan tutorial menumpukan pada satu adegan skrin penuh, tetapi untuk tapak dengan berbilang adegan, menjeda adegan tersembunyi menjimatkan sumber.

Berikut ialah coretan menggunakan IntersectionObserver untuk mengawal gelung animasi adegan:

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);

Sekali lagi, rakan kami IntersectionObserver datang membantu kami.

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...
        };
    });

Laraskan Beban Kerja Shader untuk Saiz Viewport

Peranti dengan skrin yang lebih kecil selalunya kurang berkuasa. Sesuaikan beban kerja pengiraan shader anda dengan sewajarnya. Contohnya, kurangkan bilangan oktaf yang digunakan dalam peneduh fraktal berdasarkan lebar port pandangan:

daripada penyemak imbas...

<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} />

...melalui tiga.js...

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

...akhirnya, dalam lorek.

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);
}

Pendekatan ini mengimbangi prestasi dan kualiti visual secara dinamik.

Biarkan Pemegang Pelayar Bersih

Di sinilah keadaan menjadi rumit. Three.js tidak membersihkan memori secara automatik dan anda perlu menjejak dan melupuskan objek seperti geometri, tekstur dan bahan secara manual. Jika anda melangkau ini, penggunaan memori bertambah setiap kali anda menavigasi pergi dan balik, akhirnya menyebabkan penyemak imbas ranap.

Izinkan saya berkongsi perkara yang saya perhatikan di halaman utama saya:

Penggunaan memori awal: 22.4MB

Selepas navigasi lembut ke halaman lain: 28.6MB (walaupun halaman itu adalah HTML statik).

Selepas navigasi berulang-ulang ke sana ke mari: Penggunaan memori terus meningkat sehingga penyemak imbas ranap.

Kenapa? Kerana objek Three.js tidak dilupuskan dengan betul. Dan walaupun penyelidikan yang meluas, saya tidak dapat mencari cara yang boleh dipercayai untuk membersihkan memori sepenuhnya dalam rangka kerja moden.

Berikut ialah penyelesaian paling mudah yang saya temui: paksa muat semula keras apabila meninggalkan halaman dengan adegan Three.js. Muat semula keras membolehkan penyemak imbas:

1. Buat konteks halaman baharu.
2. Lakukan kutipan sampah pada halaman lama (meninggalkan pembersihan kepada penyemak imbas).

Dalam SvelteKit, ini mudah dengan data-sveltekit-reload. Hanya dayakannya untuk halaman dengan adegan:

server.page.ts laman utama

<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>

Untuk pautan navigasi, hantar nilai ini secara dinamik:

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);

Jika anda menggunakan komponen, anda hanya perlu melaksanakan ini sekali sahaja.

Pendekatan ini tidak sempurna—ia melumpuhkan penghalaan sisi klien yang lancar untuk halaman tertentu—tetapi menjaga ingatan dan menghalang ranap. Bagi saya, pertukaran itu berbaloi.

---

Fikiran Akhir

Pengoptimuman ini telah berfungsi dengan baik untuk saya, tetapi persoalannya kekal: bagaimanakah kita membersihkan objek Three.js dengan betul dalam rangka kerja moden? Jika anda telah menemui penyelesaian yang boleh dipercayai, saya ingin mendengar daripada anda!

Atas ialah kandungan terperinci Mengoptimumkan Three.js: Teknik ey. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!