Three.js + Luma 实现高效绘制3DGS

最新推荐文章于 2025-03-12 11:31:28 发布

搞GIS图形的sky.

最新推荐文章于 2025-03-12 11:31:28 发布

阅读量1.8k

点赞数 28

分类专栏： threejs 文章标签： javascript 3d 开发语言图形渲染 3dgs

本文链接：https://blog.csdn.net/u013929284/article/details/144213120

版权

threejs 专栏收录该内容

23 篇文章

订阅专栏

之前网上有很多库虽然能绘制，但是效率低下，接下来我们用threejs和luma webgl库来实现在web端进行高效绘制3DGS。以下示例效果是加载了一份3DGS数据，和一个gltf模型。基本能够满帧绘制，效果视频已发到微信公众号。

实现效果

在这里插入图片描述

3DGS介绍

3DGS，即三维高斯溅射技术（3D Gaussian Splashing），是一种先进的三维建模和可视化技术。它主要用于计算机图形学、计算机视觉和相关领域，以实现对三维场景的高效和精确表示。

3D 高斯溅射 (3DGS) 的核心技术是通过数百万个微小的、半透明的椭球体（即“高斯溅射”）来创建和渲染 3D 场景。与依赖多边形或复杂神经网络的传统方法不同，3DGS 利用这些溅射点来表现场景。每个溅射点包含其位置、颜色、大小和透明度的信息。当经过组合后，这些溅射点能高度还原场景的真实感。

Luma介绍

Luma WebGL Library 是一个专为通过 Luma 应用捕获的高保真场景设计的 npm 包，提供了 Gaussian Splatting 技术的 WebGL 实现。它的亮点包括 LumaSplatsWebGL 和集成 Three.js 的 LumaSplatsThree，可以轻松地在现有 3D 框架中加入真实的摄影级元素。

技术分析

Luma WebGL 使用了先进的算法来实现互动渲染。其中 LumaSplatsWebGL 提供了一种高效的 WebGL 渲染方案，而 LumaSplatsThree 则将其无缝融合进 Three.js。此库不仅支持背景移除、场景光照、自定义着色器等功能，还能与 Three.js 的雾效、色调映射等特性协同工作，提供前所未有的视觉体验。

技术应用场景

背景移除：创建干净的前景展示，去除不必要的背景元素。
场景照明：利用 Luma 引擎捕捉的环境信息，照亮您的三维场景，带来身临其境的感受。
VR 集成：结合 VR 设备，让观众完全沉浸在互动环境中。
高性能渲染：针对大规模实例优化，即使在高分辨率下也能保持流畅。

技术特点

易用性：简单安装，快速集成到 Three.js 项目中。
兼容性：与 Three.js 紧密合作，充分利用框架特性。
灵活性：提供定制化功能，如自定义着色器，满足特定需求。
高性能：通过禁用 MSAA 和选择性地开启集成，平衡图像质量和性能。

完整使用代码

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
    <title>3DGS</title>
    <style>
      body   { margin:0; padding:0; overflow:hidden; }
      canvas { filter:brightness(1.1) contrast(90%) saturate(1.2); }
    </style>
  </head>
  <body>
    <script type="importmap">
      {
        "imports": {
          "three": "https://unpkg.com/three@0.157.0/build/three.module.js",
          "three/addons/": "https://unpkg.com/three@0.157.0/examples/jsm/",
          "@lumaai/luma-web": "https://unpkg.com/@lumaai/luma-web@0.2.0/dist/library/luma-web.module.js"
        }
      }
    </script>
    <script type="module">
      import { WebGLRenderer, PerspectiveCamera, Scene, AmbientLight, PointLight, AnimationMixer, Clock } from 'three';
      import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
      import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
      import { LumaSplatsThree } from '@lumaai/luma-web';
      import { Color, FogExp2 } from 'three';


      let renderer = new WebGLRenderer({ antialias: true });
      renderer.domElement.style.position = 'absolute';
      renderer.domElement.style.width = '100%';
      renderer.domElement.style.height = '100%';

      document.body.appendChild(renderer.domElement);

      let camera = new PerspectiveCamera(75, 1, 0.1, 1000);
      camera.position.z = 4.0;
      camera.position.y = 1.2;
      camera.position.x = 1.2;

      let controls = new OrbitControls(camera, renderer.domElement);
      controls.enableDamping = true;

      let scene = new Scene();

      scene.fog = new FogExp2(new Color(0xf8f8f8).convertLinearToSRGB(), 0.15);
      scene.background = scene.fog.color;

      let mixer;
      const clock = new Clock();

      let splat = new LumaSplatsThree({
        source: 'https://lumalabs.ai/capture/286e34aa-ab49-4f60-bb0f-82f38ea2694e'
      });
      scene.add(splat);

      var light = new AmbientLight(0xffffff);
      scene.add(light);

      var pointLight = new PointLight(0xFFFFFF, 1.5, 2000);
      pointLight.position.set(0, 600, 0);
      pointLight.castShadow = true;
      scene.add(pointLight);

      async function loadGLTFModel() {
        const loader = new GLTFLoader();
        try {
          const gltf = await loader.loadAsync('assets/model/model2.glb');
          const model = gltf.scene;

          model.position.set(-1.5, -1.3, 0.5);
          model.scale.set(0.8, 0.8, 0.8);
          model.rotation.set(0, Math.PI / 2.2, 0);

          scene.add(model);

          if (gltf.animations.length > 0) {
            mixer = new AnimationMixer(model);

            const action = mixer.clipAction(gltf.animations[0]);
            action.play();
          }
        } catch (error) {
          console.error('Error loading GLTF model:', error);
        }
      }

      loadGLTFModel();

      function frameLoop() {
        const delta = clock.getDelta();

        if (mixer) {
            mixer.update(delta);
        }

        let canvas = renderer.domElement;
        let width = canvas.clientWidth;
        let height = canvas.clientHeight;

        if (canvas.width !== width || canvas.height !== height) {
            camera.aspect = width / height;
            camera.updateProjectionMatrix();
            renderer.setSize(width, height, false);
        }

        controls.update();
        renderer.render(scene, camera);
    }

    renderer.setAnimationLoop(frameLoop);
</script>
</body>
</html>