Three.js使用InstancedMesh实现性能优化

three,js,使用,instancedmesh,实现,性能,优化 · 浏览次数 : 302

小编点评

**代码生成步骤：** 1. **导入三库：**三个库用于创建场景、渲染和控制对象。 2. **加载数据：**使用 fetch 获取 JSON 文件中的数据并将其解析为三个对象。 3. **创建实例：**使用 Mesh 创建多个实例，每个实例都包含一个 cylinderGeometry 和一个 MeshBasicMaterial。 4. **设置材质：**使用 setColorAt 设置每个实例的颜色。 5. **设置矩阵：**使用 setMatrixAt 设置每个实例的矩阵。 6. **添加实例：**将所有实例添加到场景中。 7. **启动动画：**使用 animate 方法定期渲染场景，并设置实例的颜色和矩阵。 8. **监听鼠标事件：**在鼠标移动事件中设置鼠标位置，并更新实例的颜色和矩阵。 **排版建议：** * 使用排版工具，例如格式化器或美化器，格式化输出的内容。 * 使用缩排符号，缩短变量和参数名称。 * 使用行号，使代码更易读。 * 使用注释，解释代码的含义。

正文

1. 引言

有这么一种场景：需要渲染一座桥，桥有很多桥柱，桥柱除了位置与倾斜角度不完全相同外，其他均相同，由于桥柱数量很大，使用three.js绘制较为卡顿，如何优化？注意，要求后续能选中某个桥柱

2. 概念

2.1 合并几何体

three.js官方教程里提到，大量对象的优化 - three.js manual (threejs.org)，使用合并几何体

为什么合并几何体能优化绘制大量对象时的性能呢？

这得引出一个概念：绘制调用（draw call）

绘制调用（draw call）是指渲染引擎向GPU发送绘制命令的过程，每个绘制调用都会告诉GPU绘制一个或多个三维物体或几何体

在图形渲染中，绘制调用的数量对性能有很大影响，较少的绘制调用通常意味着更高的性能，因为GPU在处理绘制调用时需要切换上下文和状态，这会导致一定的开销

在three.js中，由于绘制一个几何体需要调用一次draw call，绘制很多几何体就很消耗性能，所以合并多个几何体为一个几何体能减少draw call，从而实现绘制性能优化

合并几何体会有一个突出的问题：无法单独选择其中某个几何体

由于多个几何体合并为一个几何体，所以已经无法选择原来的某个几何体，即无法拾取单个几何体

考虑到后续需要能选中桥柱，这个方案舍弃

2.2 InstancedMesh

three.js官方API文档是这样解释：

实例化网格（InstancedMesh），一种具有实例化渲染支持的特殊版本的Mesh。你可以使用 InstancedMesh 来渲染大量具有相同几何体与材质、但具有不同世界变换的物体。 使用 InstancedMesh 将帮助你减少 draw call 的数量，从而提升你应用程序的整体渲染性能

桥柱除了位置与倾斜角度不完全相同外，其他均相同，符合InstancedMesh的要求，同时InstancedMesh是可以选择单个物体的，可以参考这个官方示例：three.js examples (threejs.org)

关于InstancedMesh，更为详细的解释可参考官方文档：InstancedMesh – three.js docs (threejs.org)

综上，笔者选用InstancedMesh来进行桥柱渲染优化，本文记述在three.js中使用InstancedMesh来实现绘制大量几何体的性能优化

3. 初始情况

初始情况下使用多个几何体来加载桥柱，其实就是多个圆柱体，数量为10980

示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,
    body,
    canvas {
      height: 100%;
      width: 100%;
      margin: 0;
    }
  </style>

</head>

<body>
  <canvas id="canvas"></canvas>

  <script type="importmap">
		{
			"imports": {
				"three": "https://unpkg.com/three/build/three.module.js",
				"three/addons/": "https://unpkg.com/three/examples/jsm/"
			}
		}
	</script>

  <script type="module">
    import * as THREE from 'three';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
    import Stats from 'three/addons/libs/stats.module.js'

    const scene = new THREE.Scene();

    const raycaster = new THREE.Raycaster();
    const mouse = new THREE.Vector2(1, 1);
    let mesh;
    const color = new THREE.Color();
    const white = new THREE.Color().setHex(0xffffff);

    // 创建性能监视器
    let stats = new Stats();
    // 将监视器添加到页面中
    document.body.appendChild(stats.domElement)

    const canvas = document.querySelector('#canvas');
    const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 100000);
    camera.position.z = 5;
    camera.position.y = 60;
    camera.position.x = -1500;

    const renderer = new THREE.WebGLRenderer({
      canvas: document.querySelector('#canvas'),
      antialias: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight, false)

    const controls = new OrbitControls(camera, renderer.domElement);

    function animate() {
      // 更新帧数
      stats.update()

      if (scene.children.length > 0) {
        raycaster.setFromCamera(mouse, camera);
        const intersections = raycaster.intersectObject(scene, true);
        if (intersections.length > 0) {
          // 获取第一个相交的物体
          const intersectedObject = intersections[0].object;

          // 更新物体的颜色
          intersectedObject.material.color.set(0xff0000); // 设置为红色
        }
      }

      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    }
    animate();

    let count = 0
    let matrixList = []
    fetch("./数据.json").then(res => res.json()).then(res => {
      const name = Object.keys(res)
      for (let index = 0; index < 60; index++) {

        name.filter(item => item.includes("直立桩基")).forEach(item => {
          res[item].forEach(element => {
            const geometry = new THREE.CylinderGeometry(element.diameter / 2000, element.diameter / 2000, (element.height - element.depth) / 1000, 32);
            const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
            const cylinder = new THREE.Mesh(geometry, material);

            const originalHeight = cylinder.geometry.parameters.height;
            cylinder.geometry.translate(0, -originalHeight / 2, 0);

            cylinder.position.set(element.x / 1000 * Math.random(), (element.z + element.height) / 1000, element.y / 1000)
            scene.add(cylinder);
            count++
          });
        })
      }
      console.log(count)
    })

    function onMouseMove(event) {
      event.preventDefault();
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
    }
    document.addEventListener('mousemove', onMouseMove);
  </script>
</body>

</html>

结果如下：

image-20230727171954824

在笔者的电脑上只有20FPS，拾取功能（选择单个柱子）正常

4. InstanceMesh优化

InstanceMesh在概念上可以理解为这是一组几何体，只需根据instance id即可在这一组InstanceMesh上找到这个几何体，所以InstanceMesh的使用方法主要就是根据InstanceMesh和instance id来确定选择的是那个几何体，从而进行位置变换、设置颜色等

更为详细的InstanceMesh使用方法可参考官方文档和示例：

笔者将上述代码修改为使用InstanceMesh的代码，主体代码如下：

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import Stats from 'three/addons/libs/stats.module.js'

const scene = new THREE.Scene();

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2(1, 1);
let mesh;
const color = new THREE.Color();
const white = new THREE.Color().setHex(0xffffff);

// 创建性能监视器
let stats = new Stats();
// 将监视器添加到页面中
document.body.appendChild(stats.domElement)

const canvas = document.querySelector('#canvas');
const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 100000);
camera.position.z = 5;
camera.position.y = 60;
camera.position.x = -1500;

const renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector('#canvas'),
    antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight, false)

const controls = new OrbitControls(camera, renderer.domElement);

function animate() {
    // 更新帧数
    stats.update()

    if (mesh) {
        raycaster.setFromCamera(mouse, camera);

        const intersection = raycaster.intersectObject(mesh);

        if (intersection.length > 0) {
            const instanceId = intersection[0].instanceId;
            console.log(instanceId)
            mesh.setColorAt(instanceId, new THREE.Color(0xff0000));
            mesh.instanceColor.needsUpdate = true;
        }
    }

    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

let count = 0
let matrixList = []
fetch("./数据.json").then(res => res.json()).then(res => {
    const name = Object.keys(res)
    for (let index = 0; index < 60; index++) {

        name.filter(item => item.includes("直立桩基")).forEach(item => {
            res[item].forEach(element => {
                count++
                matrixList.push(new THREE.Matrix4().makeTranslation(element.x / 1000 * Math.random(), (element.z + element.height) / 1000, element.y / 1000))
            });
        })
    }
    console.log(count)

    const element = {
        diameter: 1200,
        depth: 72000
    }
    const geometry = new THREE.CylinderGeometry(element.diameter / 2000, element.diameter / 2000, element.depth / 1000, 32);
    const material = new THREE.MeshBasicMaterial({ color: 0xffffff });

    mesh = new THREE.InstancedMesh(geometry, material, count);

    for (let i = 0; i < count; i++) {
        mesh.setColorAt(i, color);
        mesh.setMatrixAt(i, matrixList[i]);
    }
    scene.add(mesh);
})

function onMouseMove(event) {
    event.preventDefault();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
}
document.addEventListener('mousemove', onMouseMove);

image-20230727173402116

在笔者的电脑上有60FPS，拾取功能（选择单个柱子）正常

5. 参考

[1] 大量对象的优化 - three.js manual (threejs.org)

[2] three.js 性能优化的几种方法 - 可爱的黑精灵 - 博客园 (cnblogs.com)

[3] InstancedMesh – three.js docs (threejs.org)

[4] three.js/examples/webgl_instancing_raycast.html at master · mrdoob/three.js (github.com)

[5] three.js examples (threejs.org)

three js 使用 instancedmesh 实现 性能 优化

与Three.js使用InstancedMesh实现性能优化相似的内容：

Three.js使用InstancedMesh实现性能优化

本文记述在three.js中使用InstancedMesh来实现绘制大量几何体的性能优化

three js 使用 instancedmesh
302
Three.js中实现对InstanceMesh的碰撞检测

1. 概述 之前的文章提到，在Three.js中使用InstanceMesh来实现性能优化，可以实现单个Mesh的拾取功能 那，能不能实现碰撞检测呢？肯定是可以的，不过Three.js中并没有直接的API可以实现对InstanceMesh的碰撞检测，需要手动实现 回顾本文的描述的Three.js的场

碰撞 InstanceMesh js Three
21
Three.js的基础使用

本文描述Three.js的基础使用与搭建一个场景

three js 基础 使用
67
Three.js实现可透视的水面效果

本文描述使用Three.js实现可透视的水面效果

three js 实现 透视
413
three.js高性能渲染室外场景

大家好，本文在相关文章的基础上，使用three.js渲染了高性能的室外场景，在移动端也有较好的性能，并给出了代码，分析了关键点，感谢大家~ 关键词：three.js、Web3D、WebGL、室外场景、Instanced Draw、大场景、LOD、Frustum Cull、优化、开源 代码：Githu

three js
0
如何使用webgl(three.js)实现煤矿隧道、井下人员定位、掘进面、纵采面可视化解决方案——第十九课（一）

three.js、webgl、3D煤矿隧道、三维井下人员定位、掘进面三维可视化、纵采面可视化、采集面可视化展示、设备检测、数字孪生、物联网3D、3d建筑、3d库房,bim管理系统

如何 使用 webgl three
35
three.js实现相机碰撞，相机不穿墙壁、物体

大家好，本文实现了相机碰撞检测，使相机不穿墙壁、物体，并给出了思路和代码，感谢大家~ 关键词：数字孪生、three.js、Web3D、WebGL、相机碰撞、游戏相机 我正在承接Web3D数字孪生项目，具体介绍可看承接各种Web3D业务 目录实现原理参考资料 实现前： 移动第三人称相机时，相机可能会穿

three js
0
基于 Three.js 的 3D 模型加载优化

作为一个3D的项目，从用户打开页面到最终模型的渲染加载的时间也会比普通的H5项目要更长一些，从而造成大量的用户流失。为了提升首屏加载的转化率，需要尽可能的降低loading的时间。这里就分享一些我们在模型加载优化方面的心得。

three js 3d
2
第135篇:Three.js基础入门

好家伙,这东西太帅了,我要学会 先放张帅图(都是用three.js做出来的,这我学习动力直接拉满) 还有另外一个 Junni is... 帧数太高,录不了 开始学习 官方文档 1.Three.js是什么? Three.js是一款运行在浏览器中的 3D 引擎（基于WebGL的API的封装），你可以用它

three js 基础 入门
82
Three.js中实现一个OBBHelper

本文参考Box3Helper源码，并写出一个OBBHelper

three js 实现 一个
314
# 热门排行
微软 New Bing AI 申请与使用保姆级教程（免魔法） ChatGPT API使用介绍 ChatGPT开发实战 一篇带你了解如何使用纯前端类Excel表格构建现金流量表 手把手教你玩转 Excel 数据透视表 为什么 C# 可能是最好的第一编程语言 .NET 入门到高级路线 提高工作效率的神器：基于前端表格实现Chrome Excel扩展插件 React + Springboot + Quartz，从0实现Excel报表自动化 用Echarts实现前端表格引用从属关系可视化
© PmDaddy. 2023 PmDaddy教程网 All rights reserved.