Optimierung von Three.js: ey-Techniken

Code kann Kunst sein. Ob es sich um clevere Syntax, elegante Datenstrukturen oder raffinierte Interaktionen handelt, es gibt Schönheit, die nur Programmierer sehen – und das ist in Ordnung.

Aber Code kann auch etwas visuell Beeindruckendes schaffen, etwas, das jeder schätzen kann. Hier glänzen Tools wie Three.js. Three.js kann jedoch umfangreich sein, insbesondere wenn es in einer dynamischen Webseite verwendet wird, auf die Geräte mit unterschiedlicher Rechenleistung zugreifen.

Wenn Sie wie ich mehrere Three.js-Szenen zu Ihrer Website hinzufügen (wie ich es auf didof.dev tue), benötigen Sie Optimierungen. Hier sind drei praktische Techniken, um die Leistung unter Kontrolle zu halten.

Ursprünglich auf meinem Blog gepostet.

Laden Sie Szenen nur bei Bedarf

Laden Sie keine Szene, wenn sie nicht sichtbar ist. Dies gilt für alle schweren grafischen Komponenten. Das beste Tool hierfür ist IntersectionObserver, das erkennt, wenn ein Element in das Ansichtsfenster eintritt. So gehe ich in SvelteKit damit um:

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

Halten Sie Szenen außer Sichtweite an

Wenn eine Szene nicht sichtbar ist, beenden Sie das Rendern. Die meisten Tutorials konzentrieren sich auf eine einzelne Vollbildszene, aber bei Websites mit mehreren Szenen spart das Anhalten ausgeblendeter Szenen Ressourcen.

Hier ist ein Ausschnitt, der IntersectionObserver verwendet, um die Animationsschleife einer Szene zu steuern:

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

Wieder einmal kommt uns unser Freund IntersectionObserver zu Hilfe.

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

Passen Sie die Shader-Arbeitslast an die Größe des Ansichtsfensters an

Geräte mit kleineren Bildschirmen sind oft weniger leistungsstark. Passen Sie die Rechenlast Ihres Shaders entsprechend an. Reduzieren Sie beispielsweise die Anzahl der in einem Fraktal-Shader verwendeten Oktaven basierend auf der Breite des Ansichtsfensters:

aus dem Browser...

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

...durch three.js...

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

...endlich im Shader.

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

Dieser Ansatz gleicht Leistung und visuelle Qualität dynamisch aus.

Lassen Sie den Browser-Griff aufräumen

Hier wird es knifflig. Three.js bereinigt den Speicher nicht automatisch und Sie müssen Objekte wie Geometrien, Texturen und Materialien manuell verfolgen und entsorgen. Wenn Sie dies überspringen, erhöht sich der Speicherverbrauch jedes Mal, wenn Sie weg und zurück navigieren, was schließlich zum Absturz des Browsers führen kann.

Lassen Sie mich auf meiner Homepage mitteilen, was ich beobachtet habe:

Anfängliche Speichernutzung: 22,4 MB

Nach Soft-Navigation zu einer anderen Seite: 28,6 MB (obwohl diese Seite statisches HTML war).

Nach mehrmaligem Hin- und Hernavigieren: Die Speichernutzung stieg weiter an, bis der Browser abstürzte.

Warum? Weil Three.js-Objekte nicht ordnungsgemäß entsorgt wurden. Und trotz umfangreicher Recherchen konnte ich keinen zuverlässigen Weg finden, den Speicher in modernen Frameworks vollständig zu bereinigen.

Hier ist die einfachste Lösung, die ich gefunden habe: Erzwingen Sie ein hartes Neuladen, wenn Sie Seiten mit Three.js-Szenen verlassen. Ein Hard-Reload lässt den Browser:

1. Erstellen Sie einen neuen Seitenkontext.
2. Führen Sie eine Speicherbereinigung auf der alten Seite durch (überlassen Sie die Bereinigung dem Browser).

In SvelteKit ist dies mit data-sveltekit-reload ganz einfach. Aktivieren Sie es einfach für Seiten mit Szenen:

server.page.ts der Homepage

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

Für Navigationslinks übergeben Sie diesen Wert dynamisch:

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

Wenn Sie einen generischen Komponente, Sie müssen dies nur einmal implementieren.

Dieser Ansatz ist nicht perfekt – er deaktiviert das reibungslose clientseitige Routing für bestimmte Seiten – aber er hält den Speicher unter Kontrolle und verhindert Abstürze. Für mich lohnt sich dieser Kompromiss.

---

Letzte Gedanken

Diese Optimierungen haben für mich gut funktioniert, aber die Frage bleibt: Wie bereinigen wir Three.js-Objekte in modernen Frameworks richtig? Wenn Sie eine zuverlässige Lösung gefunden haben, würde ich mich freuen, von Ihnen zu hören!

Das obige ist der detaillierte Inhalt vonOptimierung von Three.js: ey-Techniken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!