Three.js の最適化: テクニック-jsチュートリアル-php.cn

コードは芸術になり得ます。巧妙な構文、エレガントなデータ構造、洗練されたインタラクションのいずれであっても、プログラマーだけが認識できる美しさがあります。それはそれで問題ありません。

しかし、コードは視覚的に素晴らしいもの、誰もが認めるものを作成することもできます。ここで、Three.js のようなツールが威力を発揮します。ただし、Three.js は、特にさまざまな計算能力を持つデバイスからアクセスされる動的な Web ページで使用する場合、重くなる可能性があります。

あなたが私と同じように、サイトに複数の Three.js シーンを追加する場合 (didof.dev で行うように)、最適化が必要になります。ここでは、パフォーマンスを維持するための 3 つの実践的なテクニックを紹介します。

元々は私のブログに投稿されました。

必要な場合にのみシーンをロードする

シーンが表示されていない場合は、シーンをロードしないでください。これは、重いグラフィックコンポーネントに当てはまります。これに最適なツールは 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>

ログイン後にコピー

視界外のシーンを一時停止する

シーンが表示されない場合は、レンダリングを停止します。ほとんどのチュートリアルは 1 つの全画面シーンに焦点を当てていますが、複数のシーンがあるサイトの場合は、非表示のシーンを一時停止するとリソースが節約されます。

これは、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);

ログイン後にコピー