three.js片段着色器性能问题

three.js
因此，我实现了一种纹理喷溅技术，这是我在这个论坛上发现的。如何创建多纹理地形问题感谢分享您的代码！提示：当您在此论坛发布代码时，请使用反勾号打开和关闭代码部分。这将改进格式和可读性。我已经编辑了你的帖子，所以你可以看到它是如何完成的。
基本上，我用=tbBlend.g*texture2D（texTile2Color，vUv*repeatTile2=mapTexelToLinear（newColor）；”，
替换了默认的map\\u片段着色器代码，但在移动设备上性能相当差。否则，60fps的场景会降到20fps，我的手机会变热。
看到如此强大的影响，我有点惊讶，另一方面，着色器编程我没有太多的经验。
这个着色器代码有什么问题吗？有没有办法优化它？我真的很喜欢这样的结果，因为我可以简单地绘制轨迹之类的，但是哎哟，对性能的影响太大了。
任何帮助都将不胜感激。titansoftime:
有什么方法可以优化它吗？
所用纹理的分辨率有多大？
在移动设备上，所有纹理默认为512x512。nblendmap最初是2048x2048，因此我认为这可能是问题所在。也将其更改为512x512，不>
是的，由于主内存带宽有限，移动GPU上的纹理分辨率可能会成为一个问题。如果进一步调整纹理大小，是否仍然看不到性能改进？例如，到64x64？我知道它不是一个可用的尺寸，它只是用来测试的。
顺便问一下：你在用什么移动设备？
是的，实际纹理减少到64x64会有所不同。降低各向异性过滤似乎也有帮助。与我之前使用的方法（使用“materialmap”（128x128 png，纹理id使用红色值）绘制材质并基于materialindex指定纹理（为此，我使用常规几何体，设置面materialindex，然后稍后转换为BufferGeometry）时得到的55-60fps不同，但是更好（45-52 fps比27-32 fps）。
我的旧方法可以使用1024x1024纹理，没有问题。
我正在用Chrome的三星Galaxy s7 edge进行测试。
我制作了这个问题的复制品。
我最初通过js fiddle进行了尝试，但性能似乎很好。我想也许较小的视口可能是原因，所以我检查了全屏结果，结果也不错。然而，在全屏链接上，我注意到所有内容都非常模糊，有些像素化（至少在移动设备上是这样），与您将视口设置错误时的外观相似。
因此，我只是简单地将JSFIDLE代码复制粘贴到html文件中，问题就出现了。
我注意到，当更多地朝着附近“水”的方向看时，性能会变得更差。奇怪。
同样，装载后的前30秒到分钟似乎运行正常，然后性能良好。这是我一直注意到的。不管怎样，加载后的第一分钟左右运行得非常好。可能是某种移动浏览器节流机制。
无论如何，这就是我所做的：njsfiddle（性能似乎还可以）：https://jsfiddle.net/titansoftime/kewgm30c/16
全屏JSFIDLE（性能似乎正常）：https://jsfiddle.net/titansoftime/kewgm30c/embedded/result7nhtml（问题显而易见）：https://www.titansoftime.com/perftest.html13
将细节增加到1024，各向异性增加到4使它非常引人注目（至少在我的移动设备上）。实际上，各向异性的影响似乎最大。
降低splat纹理分辨率，禁用splat纹理，甚至将角色网格蒙皮设置为false（奇怪的是），所有这些似乎都会使示例在各个角度都达到稳定的60 fps。
希望我能>titansoftime:
将细节增加到1024和4的各向异性使得它非常引人注目（至少在我的移动设备上）。
在我的Pixel 1（2016年10月）和最新的Chrome（73.0.3683.90）和Android 9上，https://www.titansoftime.com/perftest.html以每秒60帧的速度运行5次。三星Galaxy S7 Edge稍旧一些，但硬件相当（高通Snapdragon 820与Snapdragon 821的像素配置相同，RAM相同）。我对这种性能差异感到惊讶。
您能用不同的移动设备进行测试吗？
在桌面（GTX 1080）上试用，性能非常好：n(https://www.titansoftime.com/perftest.html3）
是的，它在我的gtx 1060上运行得很好，因为我实际上已经重写了着色器代码（在应用程序中），以减少推送的纹理数量，并且只使用需要使用的纹理。帮助很大。
我添加的一个明显的优化模式是只使用一个地形平原，而不是重叠两个。我这样做最初只是为了解决ab问题
Fragment Shader Performance Questionn

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使用光线投射动态绘制多边形