ThreeJS中InstancedMesh和InterleavedBuffer的区别和使用

2024-03-25

任何人都可以帮助我们解决 Threejs 中 InstancedMesh 和 InterleavedBuffer 之间的区别吗?我对这两个主题都感到困惑,任何人都可以让我知道哪种是渲染大量几何图形的优化方法。

提前致谢。


实例化渲染和交错缓冲区是两个独立的事物。您可以单独或组合使用这两种技术。

三.实例化网格 https://threejs.org/docs/index.html#api/en/objects/InstancedMesh为实例化渲染提供了方便的接口。当您必须使用相同的材​​质和几何形状但使用不同的世界变换来渲染大量对象时,此方法非常有用。THREE.InstancedMesh允许您通过减少绘制调用的数量来提高应用程序的性能。因此,您可以一次绘制所有对象,而不是使用单个绘制调用来绘制每个对象。

交错缓冲器 https://threejs.org/docs/index.html#api/en/core/InterleavedBuffer提供了以交错方式管理顶点数据的可能性。这样做的动机是为了提高 GPU 上的缓存命中量。如果您对这种方法背后的理论更感兴趣,我建议您搜索“数组结构与结构数组”。后一种适用于InterleavedBuffer.

一般来说,这两种技术的性能优势取决于具体的用例。根据我的个人经验,交错缓冲区的好处很难衡量,因为性能改进取决于相应的 GPU。在许多情况下,我发现使用交错缓冲区时 FPS 没有差异。但是,如果绘制调用量很高并且您通过使用实例渲染来降低它,则更容易看到性能改进。

three.js提供了这两种技术的示例。webgl_buffergeometry_instancing_interleaved https://threejs.org/examples/webgl_buffergeometry_instancing_interleaved演示了一个组合。

three.js R114

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ThreeJS中InstancedMesh和InterleavedBuffer的区别和使用 的相关文章

  • THREE.BufferGeometry - 访问面索引和面法线

    在 BufferGeometry 中 有没有一种方法可以访问面索引和法线而不转换为几何图形 手头的几何体是由 Threejs 编辑器创建的 SphereBufferGeometry 我只需要读取面部索引和法线 而不需要修改它们 Buffer
  • 关于扩展 GAS 电子表格用途的问题

    I would like to offer the opportunity to view output from the same data in a spreadsheet TBA http glasier hk blazer scri
  • 在 Three.js 中的 MeshPhongMaterial 或 MeshLambertMaterial 上投射阴影

    我觉得我在这里缺少一些简单的东西 I used JSFiddle 作者 WestLangley http jsfiddle net 4Txgp 234 它演示了如何将物体的阴影投射到平面上 当飞机只填充颜色时 一切都会按预期进行 var g
  • 在三个js中使用鼠标悬停更改网格的颜色

    我已经编写了一个 WebGL 脚本 该脚本使用 jsonloader 和 Three js 显示多个网格 现在我想添加 MouseOver 和 onClick 事件 第一个是当鼠标悬停在网格上时简单地更改网格的颜色 function ren
  • OBJLoader 的异步问题 - 等待 XHR 完成加载

    如何使 OBJLoader 简单地返回对象而不是将其添加到场景中 我遇到了同步问题 我的代码没有等待 XHR 请求完成 从而引发错误 以下示例显示了该问题 var loader new THREE OBJLoader return a me
  • 如何从 cdn THREE.js 加载 GLTFLoader

    我在弄清楚如何让 GLTFLoader 在 THREE js 中工作时遇到一些问题 我不明白如何使用 CDN 站点来托管文件 我尝试过使用网络上示例的链接 但这并没有完成我的工作 我在另一篇文章中读到 GLTFLoader 文件必须与我正在
  • 如何让Three.js全屏显示?

    我想用 Three js 制作游戏 但如何使其全屏显示 我看见本文 http learningthreejs com blog 2011 11 17 lets make a 3d game make it fullscreen 并且我在代码
  • 该浏览器无法识别 React Three Fiber 网格标签

    我正在关注 Youtube 上的 3d 作品集教程 但遇到了这个错误 在这里 我尝试渲染网格 但控制台显示警告 此元素在此浏览器中无法识别 浏览器正在渲染其余部分 但这部分代码没有被渲染 这是代码块 const Computers gt c
  • Three.js ShaderMaterial 灯光问题

    你好 这是我的代码的一部分 地球仪 function createGlobe var normalMap THREE ImageUtils loadTexture images earth normal 2048 jpg var surfa
  • 具有材质颜色的三个 js 动画搅拌机模型

    我有一个导出的 三个 js json 格式 搅拌机模型 该模型有一些带有颜色的材料 如果我使用 THREE MorphAnimMesh 和 THREE MeshPhongMaterial 动画工作正常 但没有材质颜色 如果我使用 THREE
  • 如何在 Three.js 上覆盖 HTML 文本/按钮?

    好的 很新three js在这里 但我正在努力实现谷歌所拥有的https beinternetawesome withgoogle com interland https beinternetawesome withgoogle com i
  • 给定 3D 空间中的一条线,如何找到从它到一点的角度?

    我在 3D 空间中有两组点 我想画一条穿过两组点的中心的线 然后找到从该线到每个点的角度 从那里开始 我将根据两个角度的接近程度来确定两组中的匹配点 我知道如何找到每组点的中心 只需将它们平均在一起 并且我知道如何将它们匹配 甚至考虑到它们
  • Threejs + Vanilla JS 和 React-Three-Fiber + Create-React-App 之间的颜色差异

    这已经困扰我一段时间了 为什么 React Three Fiber 中的材质颜色看起来比 Threejs 中暗淡 两种实现中的对象及其属性是相同的 Threejs 版本相同 在新引导中实施 create react app 没有额外的依赖项
  • 如何在 Three.js 中将 geoJSON 绘制为网格而不是线条,并填充颜色?

    我正在使用 Three js 制作一个地球仪 并将添加一些数据层 所有图层都将从 geoJSON 创建 我已将其设置为使地球仪 第一个数据文件 包含国家 地区 显示为线条 这使用三GeoJSON https github com jdomi
  • THREE.js 导入的模型不应用面部纹理

    我正在尝试导入使用 THREEJS 导出器从搅拌机导出的模型 到目前为止 模型已加载并出现在我的场景中 并且正确应用了材质 汽车应为黄色 玻璃应为透明 但它并没有将我的纹理应用到以 tga 形式保存的汽车上 如果我不将纹理包含在模型所在的服
  • 三.js Raycaster intersectObjects

    我正在尝试修改这个例子 https github com timoxley threejs blob master examples webgl morphtargets md2 control html来自 Three js 通过鼠标点击
  • 一次性渲染阴影

    考虑到阴影投射的成本 我想知道对于动态定位的静态对象 例如 程序城市 是否有一个功能或可能 实验性的方法可以在 Three js 中仅渲染一次阴影贴图 甚至在 webgl 中 因此 结果可以在静态对象的下一帧中免费使用 仅当物体移动时才会进
  • 在 Three.js 中获取 Object3D 的大小

    我的场景中有这个 3D 对象 var icon new THREE Object3D var iconTexture THREE ImageUtils loadTexture images icon png iconMaterial new
  • Three.js 设置并读取相机外观向量

    而不是使用camera rotation或lookAt 函数旋转相机 我想将外观矢量直接传递给相机 是否可以直接设置相机外观矢量以及是否可以从相机读取外观矢量 相机没有 外观矢量 因此无法设置它 但是 您可以构造一个point通过将您的外观
  • Three.js - 如何翻译几何图形

    我有一个脚本 可以定位各种宽度 高度和深度的立方体 并且正在努力根据 xAxis yAxis 和 zAxis 也有所不同 将它们准确地排列起来 var geometry new THREE BoxGeometry width height

随机推荐