首页 > 其他分享 >three.js使用Instanced Draw+Frustum Cull+LOD来渲染大场景(开源)

three.js使用Instanced Draw+Frustum Cull+LOD来渲染大场景(开源)

时间:2024-04-23 11:45:04浏览次数:32  
标签:Cull Draw LOD Instanced 物体 Frustum

大家好,本文使用three.js实现了渲染大场景,在移动端也有较好的性能,并给出了代码,分析了关键点,感谢大家~

关键词:three.js、Instanced Draw、大场景、LOD、Frustum Cull、优化、Web3D、WebGL、开源

代码:Github

我正在承接Web3D数字孪生项目,具体介绍可看承接各种Web3D业务

加QQ群交流:106047770

目录

需求描述

数字孪生项目通常需要渲染超大场景,比如智慧城市就需要渲染一片城市区域,甚至整个城市

渲染大场景所需要的技术点包括:

  • Instanced Draw
    一个Draw Call批量渲染物体,物体可以有不同的Transform、Color
  • Frustum Cull
    剔除视椎体外的物体
  • Occlusion Cull
    剔除被遮挡的物体(WebGL1不支持)
  • LOD
    根据物体到相机的距离,显示不同Level的物体。越远的越粗糙,越近的越细致
  • GPU Driven Pipeline
    把前几个优化都放到GPU中来做,并且物体可以有更多差异(需要WebGPU)
  • Space Partition
    使用Octree、BVH、BSP等加速结构来划分场景,在Cull、碰撞检测、Ray Picking等操作时查询加速结构而不是遍历所有物体,从而提高性能
  • Multi Thread Render
    开一个渲染线程来渲染
  • AssetBundle、Stream Load
    划分为多个场景包,动态、流式加载

本文使用Instanced Draw+Frustum Cull+LOD来渲染大场景,最终实现效果演示:

image

场景总三角面数是千万级,总物体数量是1万(PC端)/5000(移动端)
动态物体数量是800(PC端)/400(移动端)

其中,树使用了Instanced Draw+LOD,白色立方体使用了Instanced Draw

可以把相机拉进、拉远,可看到不同Level的树

移动相机,可看到红框内的Triangles在变化(大概在几十万到几百万),这是Frustum Cull后的三角面数

在5年前的中配手机上,FPS可达15左右

下面开始实现各个关键点,给出实现的思路:

Instanced Draw

比如要将克隆的1000个Mesh改为Instanced的,则保留它们作为source,并创建一个InstancedMesh,count设为1000,写入1000个Mesh的世界矩阵;然后隐藏source,显示InstancedMesh
之所以保留source,是因为可以用它们来做碰撞检测、Ray Picking等单个Mesh的操作

值得注意的是物体可能是多材质的Object3D(如树),所以要将其中的每个Mesh拆分到一组Instanced Draw中。举例来说,如果树有个3个材质(即3个子Mesh),则需要创建3个InstancedMesh,然后将所有树的第一个材质的Mesh对应到第一个InstancedMesh中,其余的以此类推

Frustum Cull

image

如上图所示,实现Instanced Draw+Frustum Cull的原理是将要剔除的物体移到InstancedMesh的instanceMatrix的最后,并将count减1

值得注意的是要将three.js默认的对单个Object3D的frustum cull关闭(即将source的frustumCulled设为false)

另外,我们直接遍历所有的待剔除物体来进行Fustum Cull检测,没有使用Octree等加速结构
相关的讨论请参考:
Linear search vs Octree (Frustum cull)

LOD

image

如上图所示,假设车有3个Level的LOD层级,我们希望离相机越远,显示越高的Level(Geometry、Material越简单)

我们需要创建3个InstanceMesh,分别对应不同的Level,如下图所示:
image

参考资料

InstancedMesh2 - Easy handling and frustum culling

What is a more straightforward way to do instance culling?

Linear search vs Octree (Frustum cull)

100kTrees

LOD + Instancing

LOD with Instancing and Multi-Material Meshes

Three.js InstancedMesh performance optimizations - DevLog 10

标签:Cull,Draw,LOD,Instanced,物体,Frustum
From: https://www.cnblogs.com/chaogex/p/18152526

相关文章

  • 使用 Docker 部署 Draw.io 在线流程图系统
    1)介绍Draw.ioGitHub:https://github.com/jgraph/drawioDraw.io是一款开源的绘制流程图的工具,拥有大量免费素材和模板。程序本身支持中文在内的多国语言,创建的文档可以导出到多种网盘或本地。无论是创建流程图、组织结构图、网络拓扑图还是其他类型的图表,Draw.io基本都能满足......
  • UE UDebugDrawService 使用心得
    图片来源:(7)UnrealEngine5Tutorial-NPCAIPart3:MassAIAnimated-YouTube有这样一个Debug信息是非常酷也非常有用的东西绘制逻辑位于GameplayDebuggerCategory_Mass.cpp,代码非常的长,这里就不展示了源码流程如下图 前方施工中……......
  • lodash已死?radash最全使用介绍(附源码说明)—— Array方法篇(3)
    前言我们已经介绍了radash的相关信息和部分Array相关方法,详情可前往主页查看;本篇我们继续介绍radash中Array的相关方法;下期我们将介绍解析radash中剩余的Array相关方法,并整理出Array方法使用目录,包括文章说明和脑图说明。Radash的Array相关方法详解iterate:把一个函数迭代......
  • 52 Things: Number 18: Draw a diagram (or describe) the ECB, CBC and CTR modes of
    52Things-Number18:Drawadiagram(ordescribe)theECB,CBCandCTRmodesofoperation52件事-第18件:绘制(或描述)ECB、CBC和CTR的操作模式Thisisthelatestinaseriesofblogpoststoaddressthelistof '52ThingsEveryPhDStudentShouldKnow' todo......
  • CDR2024破解序列号Crack免费下载最新CorelDraw2024安装包
    CorelDRAW是一款功能强大的矢量图形制作和排版软件,主要面向绘图设计师和印刷输出人员。它提供了一整套的绘图工具,包括圆形、矩形、多边形、方格、螺旋线等,并配合塑形工具,可以对各种基本图形作出更多的变化,如圆角矩形,弧、扇形、星形等。同时,CorelDRAW还提供了无缝的图形、版面、......
  • P4112DrawingPointsDivOne
    二分具有单调性,考虑二分答案对于\(x\)考虑怎么\(check\),可以暴力的展开\(x\)次,再缩小\(x\)次,如果得到的结果和初始状态相同,那么就合法,否则不合法//Author:xiaruizeconstintN=1e3+10;intn;piia[N];bools[N][N],cur[N][N],mp[N][N];boolcheck(intx)......
  • CorelDRAW2024全网最详细独家讲解新版本新功能
    各位粉丝大家好,为了让大家更深入的了解CorelDRAW2024新版的各项新功能,我们独家邀请到了Corel中国专家名师张苏老师,策划并录制30分钟全中文讲解栏目!干货满满,全程演示,一览CorelDRAW2024新版的各项新功能!不容错过!干货!Corel专家团讲师张苏老师详细拆解2024新版功能,带你感受2024......
  • CF1929B Sasha and the Drawing 题解
    CF1929B题意给定一个\(n\timesn\)的正方形,已知正方形最多有\(4\timesn-2\)条对角线,要求要有至少\(k\)条对角线经过至少一块黑色方格,求至少要将几条对角线涂成黑色。分析分类讨论:当\(k<=4\timesn-4\)时,就只需要在上下两侧图就行,所以答案是\([\frac{k}{2}]\)。当......
  • 常见的常见免费开源绘图工具对比 draw.io/Excalidraw/Lucidchart/yEd Graph Editor/D
    拓展阅读常见免费开源绘图工具OmniGraffle创建精确、美观图形的工具UML-架构图入门介绍starUMLUML绘制工具starUML入门介绍PlantUML是绘制uml的一个开源项目UML等常见图绘制工具绘图工具draw.io/diagrams.net免费在线图表编辑器绘图工具excalidraw介绍绘......
  • lodash已死?radash最全使用介绍(附源码说明)—— Array方法篇(2)
    前言前篇我们已经介绍了radash的相关信息和部分Array相关方法,详情可前往主页查看;本篇我们继续介绍radash中Array的其他相关方法;Radash的Array相关方法详解first:获取数组第一项,不存在返回默认值使用说明参数:目标数组,或者传递两个参数空数组和默认值;返回值:传......