iOS 上的 ThreeJS 多纹理与 ShaderMaterial 问题

Question

我需要有关 Threejs 着色器的帮助。我有一架飞机，我必须在其中混合 10 种不同的纹理；现在我使用 ShaderMaterial 并传递接下来用于组合的所有纹理。这是我的片段着色器代码

vec3 CFull = texture2D(tFull, vUv).rgb;
vec3 CIndustria = texture2D(tIndustria, vUv ).rgb;
vec3 CCave = texture2D(tCave, vUv).rgb;
vec3 CRifiuti = texture2D(tRifiuti, vUv).rgb;
vec3 CEdile = texture2D(tEdile, vUv).rgb;
vec3 CEventi = texture2D(tEventi, vUv).rgb;
vec3 CMarine = texture2D(tMarine, vUv).rgb;
vec3 COil = texture2D(tOil, vUv).rgb;
vec3 CStrade = texture2D(tStrade, vUv).rgb;
vec3 CVerde = texture2D(tVerde, vUv).rgb; 

c = CFull * CIndustria * CCave * CRifiuti * CEdile * CEventi * CMarine * COil * CStrade * CVerde;
gl_FragColor = vec4(c, 1.0);

它在 Android 或桌面上运行良好，但在 iOS 上不起作用。如果我只使用 4/5 纹理，它也适用于 iOS...

可能是因为太重了没用？您对优化我的代码有什么建议吗？（或其他解决方案）

Answer 1

WebGL 规范 requires the browser to support at least 8 combined texture units。我假设您的 iOS 设备满足 8 的最低要求，但您要求 10。

您可以在 iOS 设备上访问 webglreport.com 并查找“Textures > Max Combined Texture Image Units”以查看它的最大支持是多少。例如，我的桌面最多允许 32 个，但我的 iPhone 限制较低。

如果你对纹理所做的只是将它们相乘，你可以使用 2D <canvas> 上下文，将它们混合在一起，然后使用 THREE.CanvasTexture 转换分层 canvas 到一个单一的纹理中，你可以在 Three.js

中使用

iOS 上的 ThreeJS 多纹理与 ShaderMaterial 问题

ThreeJS multiple Texture with ShaderMaterial problem on iOS

javascript

shader

fragment-shader

ios

three.js