three.js推荐的雪碧或网格配料方法是什么？

如果要添加一组对象，如精灵或网格，则添加的对象越多，渲染速度就会非常快。超过几百个单独的精灵会导致大的FPS下降。如果我使用bufferGeometry，就可以毫无问题地呈现成千上万个形状。
添加精灵非常容易设置，而且我可以轻松地为每个实例提供不同的属性。
添加bufferGeometry很难设置，并且很难为每个子网格提供不同的属性，如材质、纹理、动态位置，旋转等。
对于高效渲染一组具有不同材质/纹理的不同网格，建议采用什么方法？我在这里看到了一个实例化蒙皮网格的例子：ngithub.com/mrdoob/three.jsdiv>div>h4>已实现3.InstancedMesh45div>0*mrdoob:instancing*div>打开使用3:37 PM，UTC星期一，2019年9月16日
使用7:37 AM，巴黎星期一，div
使用9:37 AM，2019年9月16日，洛杉矶，星期一，2019年9月16日，n12:37 AM>。它们可以共享相同的纹理，但每个形状/四边形将能够显示不同的字符，并且在文本更改时不会泄漏内存。
我希望能够分别创建网格并为其指定材质，变换和UV，然后将它们批处理在一起，以便进行有效的渲染。n- 输入文本“Hello World”n- n- 分割文本，为每个字符创建精灵/四边形/网格，旋转每个字符sprite，批量绘制sprites/quads/meshes，li，ul，div，adevart:，虽然这些动画都是不同的，但是看起来它们都有相同的纹理，因为所有的实例共享相同的材质，所以它们都是一样的。li，p>正确的。当使用InstancedMesh（或一般的实例化渲染）时，没有办法避免这种情况。adevart:，我想做的是分别创建网格，并为它们指定材质、变换和UV，然后将它们批处理在一起，以获得高效的渲染。，three.js不支持自动批处理，因此应用程序必须执行此任务。你可以试着从BufferGeometryUtils.MergeBufferGeometry（）46通过合并共享同一材质的所有几何体。通过这种方式，您可以通过一次绘图调用来渲染合并的几何体，这可以显著提高性能。谢谢，MergeBufferGeometrics的效率是否足以调用每一帧？例如，我是否可以维护一个精灵列表，并对其UV、缩放、旋转设置动画，并在每个帧上调用“合并”来绘制它们？缓冲几何测量是否允许每个子网具有不同的不透明度？在Pixi中，我可以分别渲染几千个精灵，给每个精灵一个单独的变换和不透明度，它以60FPS的速度运行。当我试着在3JS中做同样的事情时，它会在几百个精灵的作用下下降到30FPS。两者都在使用webGL。我将检查他们的源代码，看看Pixi是如何进行sprite渲染的，我希望在ThreeJS中也能以同样的方式进行渲染。adevart:谢谢，mergeBufferGeometics是否足够高效地调用每一帧？不是真的，因为相关的开销太高了。这意味着您将创建新的WebGL缓冲区每个更新步骤，这是您通常想要避免的（想法是创建一次，然后重用它）。adevart:当我尝试在ThreeJS中执行相同操作时，它会在几百个sprite中降至每秒30帧。three.js没有针对sprite渲染进行优化。问题是，即使纹理共享一个公共图像（例如，精灵表），引擎当前也会为Texture的每个实例创建一个WebGLTexture对象，这可能会导致非常高的内存分配。除了draw调用之外，这是sprite渲染环境中最常见的性能问题。但是，我们正在尝试解决此问题。相关公关：https://github.com/mrdoob/three.js/pull/1794958我不确定我是否理解这个问题。不透明度是在材质级别上定义的。如果bufferedGeometry有一个具有纹理的单个材质，并且纹理具有不同级别的透明度，则每个子网格可以具有不同的UV，并将以不同级别的透明度显示。是否有方法使用变量而不是像顶点那样的UV来设置此透明度阿尔法？也许我可以有一个单独的阿尔法贴图和它自己的UV？自定义着色器可能是一条路。three.js没有针对sprite渲染进行优化。问题是，即使纹理共享一个公共图像（例如，精灵表），引擎当前也会为Texture的每个实例创建一个WebGLTexture对象，这可能会导致非常高的内存分配。接下来是draw调用，这是sprite渲染中最常见的性能问题。但是，我们正在尝试解决此问题。相关公关：https://github.com/mrdoob/three.js/pull/179496这很好，你正在处理内存问题，谢谢你，这将是一个很大的帮助。我看到的多个精灵的性能问题是使用同一个纹理实例，所以对于>对于>我快速查看了Pixi渲染器代码，看起来他们有一个自动配料系统：github.compixijs/pixi.js/blob/52df29c6e48f5ecd370da2b8b0aec04dd34ba62c/packages/core/src/Renderer.js 16import { AbstractRenderer } from \"./AbstractRenderer\";import { sayHello, isWebGLSupported } from \"@pixi/utils\";import { MaskSystem } from \"./mask/MaskSystem\";import { StencilSystem } from \"./mask/StencilSystem\";import { ScissorSystem } from \"./mask/ScissorSystem\";import { FilterSystem } from \"./filters/FilterSystem\";import { FramebufferSystem } from \"./framebuffer/FramebufferSystem\";import { RenderTextureSystem } from \"./renderTexture/RenderTextureSystem\";import { TextureSystem } from \"./textures/TextureSystem\";import { ProjectionSystem } from \"./projection/ProjectionSystem\";import { StateSystem } from \"./state/StateSystem\";import { GeometrySystem } from \"./geometry/GeometrySystem\";import { ShaderSystem } from \"./shader/ShaderSystem\";import { ContextSystem } from \"./context/ContextSystem\";import { BatchSystem } from \"./batch/BatchSystem\";import { TextureGCSystem } from \"./textures/TextureGCSystem\";import { RENDERER_TYPE } from \"@pixi/constants\";import { UniformGroup } from \"./shader/UniformGroup\";import { Matrix } from \"@pixi/math\";import { Runner } from \"@pixi/runner\";+/pre>此文件已被截断。显示原始的GitHubpixijs/pixi.js8 HTML5创建引擎：用最快、最灵活的2dwebgl渲染器创建漂亮的数字内容。-小精灵/pixi.js“此渲染器通过自动管理WebGLBatch来工作”它似乎构建了一个绘制调用池。它构建了一个着色器，该着色器“基于指向“uSampler”中纹理的“aTextureId”属性为每个顶点着色”。这使具有不同纹理的对象能够在同一绘制调用中绘制。”看起来它们在场景中迭代，并检查哪些几何体/纹理可以批处理在一起，然后渲染这些批处理。在整个场景中进行批处理是最理想的，但通常只有几个重的对象需要提供。我想我会先在bufferedGeometry周围做一个包装，然后更新几何体/UV。也许可以使用自定义着色器来使用多个纹理和alpha值。嗨，我面临着完全相同的问题…拥有TSNE云的（几百个）文本标签，threejs在使用“常规”精灵时速度非常慢。@阿德瓦特：您最终是否围绕bufferedGeometry创建了包装器？不，不幸的是，我从来没有抽出时间来做包装，我只是坚持使用100个以下的精灵来做我正在做的事情，而且性能还不错。我的计划是在场景中创建一组网格/精灵，迭代所有这些网格，并在缓冲区中创建顶点。然后在我修改单独网格的位置时镜像顶点变换。有很多事情需要解决，比如在全局空间中放置缓冲区，以及获得单独对象顶点的正确全局变换。如果单独的对象并非全部透明，如何处理透明度。如何处理从缓冲区添加/删除对象，只需将删除的字体隐藏在屏幕外或重新构建缓冲区即可。我找到了一个字体库，该库仅对单个文本块执行类似操作：使用换行符将bmfont文件呈现为三个jsJam3/三个bmfont文本github.comJam3/三个bmfont text/blob/e17efbe4e9392a83d4c5ee35c67eca5a11a13395/index.js==“string”）>此文件已被截断。显示原始在其更新功能中，他们获取一系列文本图示符，从单独的精灵中计算位置和UV，然后将这些数组设置为TextGeometry类的属性，该类扩展了BufferGeometry类。对于文本云，而不仅仅是使用字母/图示符位置，它还需要单词位置当计算位置属性并将其传递到缓冲区时，它将考虑单词的位置。可以将单词设置为组并向组中添加字母，然后获取精灵角的世界位置并使用缓冲区中的位置。如果将未缓冲的单词组设置为不可见，ThreeJS将不会呈现它，这将有助于调试字母/单词位置，方法是将其设置为可见。@adevart我将查看三个bmfont文本，虽然我不确定在我的情况下，这是否是一种可行的方法，因为我的应用程序应该能够以各种可能的语言显示文本，并且我必须加载不同的字体。感谢您的详细更新，如果您需要大量Sprite，你可以将Points甚至InstancedMesh与billboard shader一起使用是的，bmfont不适合多种语言，因为位图字体的字符集有限，最好将文本渲染为不同语言的画布纹理。如果每个单词都有单独的纹理，那就意味着每个单词都有不同的材质，我认为这是无法批量处理的。您可以在同一纹理中放置多个单词，但这会很快耗尽空间。云动画中的角色数量有限。如果每个字符都有128 x 128纹理在e空间中，2k纹理将允许256个唯一字符。每个角色都可以渲染到2k画布纹理中，单个纹理可以指定给缓冲网格。然后缓冲网格顶点将是具有UV的字母，UV与画布纹理中的角色匹配。如果纹理中的空间不足，则需要较大的纹理、较小的字母或单独的缓冲网格，可能需要多个材质。一个单独的网格或材质将意味着一个额外的绘制调用，但两个将比几百个更好。这种方法将更好地扩展到其他语言。我认为：Troika-3d-text:library for SDF text rendering 12Troika看起来像一个不错的库，它使用上述方法，将文本块中使用的字母缓存到纹理图谱。默认为64x64大小的字母，允许2k精灵表中包含1024个字符。有符号距离字段明暗器（bmfont库也使用这些）将有助于保持文本清晰，即使字母较小。github.comprotectwise/troika/blob/a222aa0faeca0899b3f75a75c880d668a62f061/packages/troika三text/src/TextBuilder.js4导入{Color，DataTexture，LinearFilter，LuminanceFormat}从“三个”导入{defineWorkerModule，“troika worker utils”中的EnableWorkerModule}从“/worker”导入{createSDFGenerator}/SDFGenerator.js“从“./worker”导入{createFontProcessor}”/FontProcessor.js“从“/worker/G”导入{createGlyphSegmentsQuadtree}”lyphSegmentsQuadtree.js“//选择语法分析器impl：导入fontParser来自“./worker/FontParser”_Typr.js“//导入fontParser从>中，此文件已被截断。show original它对字符使用InstancedBufferGeometry，并将字符从字体文件解析到Uint缓冲区，然后将其放入2k纹理缓冲区。我发现将字符渲染到画布纹理中比较容易，因为它不需要手动加载字体（它的字体与CSS相同），而且你可以得到很多东西，比如笔画、斜体、粗体、阴影等等。要让单词在同一个缓冲区中处于不同的位置，就需要一个单词位置值来偏移组但由于该方法使用单一纹理图集和材质，因此更容易单独生成单词并将其合并到单个几何体中。不过，使用位置偏移可以提供更多的控制
What is the recommended way to do sprite or mesh batching?n

three.js推荐的雪碧或网格配料方法是什么？

three.js[已解决]正交摄影机的变换控件：gizmos缩放问题

three.js多次渲染同一模型（obj模型），FPS要低得多

three.js可缩放场景背景

three.js移动导入的Gltf模型

three.js平面明暗处理的问题

three.js如何渲染立方体材质？

three.js如何创建要在网格中拟合的线段

three.jsGLTFLoader.js这是我的登记簿错误

three.js使用threejs的光流

three.js使用光线投射动态绘制多边形