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的区别和使用 的相关文章

  • 将 A 框架与 Three.js 相结合

    我想知道 是否可以将 Three js 元素添加到 A 框架场景中 假设 A frame 是基于 Three js 构建的 并且 three Version 0 74 0 登录到你的控制台这不应该是一件奇怪的事情 对吧 我在我的 A 框架场
  • Threejs + Vanilla JS 和 React-Three-Fiber + Create-React-App 之间的颜色差异

    这已经困扰我一段时间了 为什么 React Three Fiber 中的材质颜色看起来比 Threejs 中暗淡 两种实现中的对象及其属性是相同的 Threejs 版本相同 在新引导中实施 create react app 没有额外的依赖项
  • 深度图三.js

    Three js中有没有办法获取深度图 我感兴趣的是制作类似于 Kinect 为给定场景制作的东西 我遇到了一种不使用颜色和雾来模仿这一点的黑客方法 但这并不理想 因为它会使用两个不同的场景并且会因光照而变化 我认为执行此操作的另一种方法是
  • 在 React 中渲染 Three.js 元素?

    我正在尝试制作一个渲染 Three js 场景的 React 组件 但是 每当我尝试安装组件而不是看到正在渲染的任何类型的场景时 我只看到文本 object HTMLCanvasElement 正在显示 这是我的组件 import Reac
  • Three.js StereoEffect 显示 2 只眼睛的网格

    我有一个使用 StereoEffect 渲染器的 THREE js 场景 但是 当我向场景添加新网格时 它们会显示在两只眼睛上 而不是为每只眼睛重复显示 我相信 THREE js 应该自动完成 我不必自己复制它们 我尝试复制它们 但这是很多
  • 在 Three.js 中获取 Object3D 的大小

    我的场景中有这个 3D 对象 var icon new THREE Object3D var iconTexture THREE ImageUtils loadTexture images icon png iconMaterial new
  • 在 TypeScript 中使用三个 Js + OrbitControl

    我无法得到this http www example com 在 TypeScript 中使用上述组合的示例 I have and 在我的html中和打字稿文件
  • Three.js - 如何翻译几何图形

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

    我正在尝试使用 tree js 自定义几何图形生成一个正方形 但是这段代码 var cubeGeo new THREE Geometry cubeGeo vertices push new THREE Vector3 25 25 25 cu
  • 在 Webpack 中使用 Three.js 以便我可以使用 OrbitControls 的正确方法是什么?

    在我的 webpack 配置中 resolve alias three path resolve node modules three build three js OrbitControls path resolve node modul
  • 渲染 ThreeJS 应用程序第一帧时的性能问题

    目前 当我渲染以下内容时 我的 ThreeJS 应用程序的性能受到很大影响第一帧 它会导致 Edge 和 IE 11 浏览器冻结 5 秒 并弹出窗口指示 此窗口没有响应 这可能会吓到我的用户 使用 Chrome 的性能分析器 问题似乎来自几
  • 无面点云 (PLY) 文件的 Web 查看器

    我在尝试Three Js https github com mrdoob three js 用于通过网络查看 PLY 文件 使用这个例子 http threejs org examples webgl loader ply html作为参考
  • 如何在 Three.js 中进入全屏?

    我已经尝试了数十种不同的方法几个小时 但没有一个有效 如下所示 document body addEventListener keydown function THREEx FullScreen request false 如何让Three
  • 计算顶点法线

    我正在使用 3d 修改器https github com foo123 MOD3 https github com foo123 MOD3弯曲一个立方体 几何体更新 顶点位置更改 后 灯光不会更新 立方体仍然着色 就好像没有任何变化一样 所
  • 将 FBX 文件转换为 .gltf 后,模型非常小,为什么?

    问题 将 FBX 文件转换为 gltf 后 模型非常小 为什么 我尝试用以下方法缩放模型frontObject scale set 1000 1000 1000 但我收到以下错误 TypeError Cannot read property
  • Three.js - 重叠层闪烁

    当多个物体重叠在同一平面上时 它们开始闪烁 如何告诉渲染器将其中一个对象放在前面 我尝试使用 renderDepth 但它只能部分起作用 请参阅此处的示例 http liveweave com ahTdFQ http liveweave c
  • Three.js:为相机添加灯光

    我想移动和旋转相机 但将点光源保持在相对于相机的相同位置 我读过很多帖子 说您可以将灯光对象添加到相机而不是场景中 就像这样 pointLight new THREE PointLight 0xffffff pointLight posit
  • 是否可以将立方体环境贴图绕 Y 轴旋转 180 度?

    我想旋转立方体贴图Y轴旋转 180 度 scene new THREE Scene scene background new THREE CubeTextureLoader setPath path to my docs load posX
  • ThreeJS 我的 GLTF 在主机服务器上加载速度太慢?

    我目前正在创建一个包含 3D Market Place 功能的网站 唉 我在实现这个网站的主要功能时遇到了麻烦 这是网站 阿尔法状态 https www openstring studios com https www openstring
  • Three.js WebGL 从着色器绘制圆形自定义填充和边框颜色

    我将 Three js 与 WebGLRenderer 一起使用 我试图找出或查看如何使用 CircleGeometry 绘制圆圈的示例 并能够从顶点或片段着色器控制其填充和边框颜色 如果不使用图像作为纹理 这是否可能 抱歉 如果这真的很简

随机推荐