Workflow
Workflow matériau WebGL
Utilisez des maps procédurales compactes et des canaux prévisibles pour Three.js, les renderers WebGL personnalisés et les previews matériau dans le navigateur.
- Cible
- Three.js / WebGL personnalisé
- Parcours recommandé
- GLB pour chargement rapide ou PNG pour shaders personnalisés
- Sortie principale
- Matériau GLB ou maps PNG individuelles
Configuration des canaux
Color map
Utilisez l'espace sRGB pour la texture base color visible dans Three.js, ou une conversion équivalente dans vos shaders.
Normal
Échantillonnez les normal maps comme textures de données et ajustez normal scale dans le matériau plutôt que de rebaker la texture.
Roughness et AO
Gardez roughness et AO en linéaire. Dans Three.js, AO demande aussi UV2 ou une gestion équivalente d'UV secondaires.
Repeat et wrapping
Activez repeat wrapping pour les surfaces seamless et définissez repeat en code afin que le même export couvre plusieurs tailles d'assets.
Étapes d'import
Choisir GLB ou fichiers de maps
Utilisez GLB pour un matériau porteur rapide. Utilisez des PNG individuels quand le renderer possède son shader et son binding de textures.
Configurer le color space
Assignez sRGB aux maps de couleur et gardez roughness, normal, height et AO comme textures de données linéaires.
Activer le repeat
Réglez wrapS et wrapT sur repeat pour les surfaces seamless, puis contrôlez l'échelle via repeat du matériau ou des uniforms.
Profiler le budget de maps
Testez résolution, compression et nombre de canaux sur l'appareil cible avant d'utiliser de grands sets en production.
Contrôles courants
UV2 manquant pour AO
Si AO n'a aucun effet visible dans Three.js, confirmez que la géométrie possède l'UV set requis par le matériau.
colorSpace incorrect
Une base color traitée en linéaire peut être trop sombre ; des maps de données traitées en sRGB peuvent casser roughness ou normal.
Trop de grandes maps
Les scènes navigateur sont sensibles à la mémoire texture. Utilisez la plus petite résolution qui tient à la distance caméra.
FAQ du workflow
GLB est-il le chemin WebGL le plus simple ?
Pour une revue rapide, oui. Pour des renderers de production, des maps individuelles donnent souvent plus de contrôle sur compression, chargement et entrées shader.
Les maps seamless peuvent-elles se répéter dans Three.js ?
Oui. Réglez le wrapping mode sur repeat et contrôlez repeat scale sur le matériau ou la texture.