Workflow

WebGL material workflow

Use compact procedural maps and predictable channel settings for Three.js, custom WebGL renderers, and browser-based material previews.

Export target

Channel setup

Use sRGB color space for the visible base color texture in Three.js or the equivalent color conversion in custom shaders.

Sample normal maps as data textures and tune normal scale in the material rather than rebaking the texture.

Keep roughness and AO linear. In Three.js, AO also needs UV2 or matching secondary UV handling.

Enable repeat wrapping for seamless materials and set repeat values in code so the same export can cover different asset sizes.

Use GLB when you want a quick carrier material. Use individual PNG maps when your renderer owns the shader and texture binding.

Assign sRGB to color maps and keep roughness, normal, height, and AO as linear data textures.

Set wrapS and wrapT to repeat for seamless surfaces, then control scale through material repeat values or shader uniforms.

Test resolution, compression, and number of channels on the target device before using large map sets in production.

If AO has no visible effect in Three.js, confirm the geometry has the UV set required by the material.

A base color map treated as linear can look too dark; data maps treated as sRGB can break roughness or normal response.

Browser scenes are sensitive to texture memory. Use the smallest resolution that survives the camera distance.

For quick material review, yes. For production renderers, individual maps often give better control over compression, loading, and shader inputs.

Yes. Set the texture wrapping mode to repeat and control repeat scale on the material or texture instance.