Necesito ayuda con shaders en Threejs. Tengo un avión donde debo tener una mezcla entre 10 texturas diferentes; ahora uso ShaderMaterial y paso todas las texturas que luego se usan para combinar. Aquí mi código Fragment Shader
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);Funciona bien en Android o escritorio, pero en iOS no funciona. Si uso solo textura 4/5, también funciona en iOS ...
¿Tal vez no funciona porque es demasiado pesado? ¿Tienes algún consejo para optimizar mi código? (u otras soluciones)
La especificación WebGL requiere que el navegador admita al menos 8 unidades de textura combinadas . Supongo que su dispositivo iOS cumple con el requisito mínimo de 8, pero está solicitando 10.
Puede visitar webglreport.com en su dispositivo iOS y buscar "Texturas > Unidades de imagen de textura combinadas máximas" para ver cuál es su compatibilidad máxima. Por ejemplo, mi computadora de escritorio permite hasta 32, pero el límite de mi iPhone es más bajo.
Si todo lo que está haciendo con las texturas es multiplicarlas, puede usar un contexto de <canvas> 2D, combinarlas allí y luego usar THREE.CanvasTexture para convertir el lienzo en capas en una sola textura que puede usar en Three.js