优化 Three.js：ey 技术

代码可以是艺术。无论是巧妙的语法、优雅的数据结构还是精致的交互，都有只有程序员才能看到的美——这很好。

但是代码也可以创造出视觉上令人惊叹的东西，每个人都能欣赏的东西。这就是 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

软导航到另一个页面后：28.6MB（即使该页面是静态 HTML）。

反复来回导航后：内存使用量不断攀升，直到浏览器崩溃。

为什么？因为 Three.js 对象没有被正确处理。尽管进行了广泛的研究，我还是找不到在现代框架中完全清理内存的可靠方法。

这是我找到的最简单的解决方案：在离开带有 Three.js 场景的页面时强制硬重新加载。硬重载让浏览器：

1. 创建一个新的页面上下文。
2. 在旧页面上执行垃圾收集（将清理工作留给浏览器）。

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

如果您使用通用的；组件，您只需要实现一次。

这种方法并不完美——它会禁用特定页面的平滑客户端路由——但是它可以检查内存并防止崩溃。对我来说，这种权衡是值得的。

---

最后的想法

这些优化对我来说效果很好，但问题仍然存在：我们如何在现代框架中正确清理 Three.js 对象？如果您找到了可靠的解决方案，我很乐意听取您的意见！

以上是优化 Three.js：ey 技术的详细内容。更多信息请关注PHP中文网其他相关文章！