Procedural textures in WebGL : As a person who knows and worked with I was interested in the kind of tool that allows me to work with complex structures in procedural way. Short intro from the Author glsl shaders There is a presentation from 2016 called: — this one explains the possibility of exporting .mdl data into code that can be later used in custom renderers. GPU Technology Conference “MDL materials to GLSL shaders: theory and practice” glsl shader For the web, such renderer can be , which relies on glsl (webgl). Substance Designer as a texture generation tool can be used with Three.js, it is even mentioned in . Three.js this issue So, what about using in WebGL? Or better to write glsl shaders ? Substance Designer manually Well, it depends… Let’s highlight PROS and CONS of using Substance Designer in WebGL. PROS You can with node-based system easily structure complex materials lets you combine and blend multiple materials Material instancing Library has a lot of cool noises (pic 1.) pic. 1: Library CONS You While lets you work with (parameters), in Substance Designer you can’t export your graph into the glsl code (at least at the moment of writing this article) can’t use the material interactive way. glsl uniforms What you really can do is to combine both ways: the use of Substance Designer for and GLSL for adding making complex textures interaction support. Example Let’s say I want to make a 3D app that lets me draw on top of the metal texture (pic. 2) The way we can make that is to combine with existing static metal material from Substance designer. For adding interaction you need to take existing , edit it (add interaction) and insert in . glsl interaction MeshStandardMaterial code ShaderMaterial pic. 2: Metal material Tutorials There are plenty of Substance Designer tutorials with great explanation and digging into the latest tools and cool tricks that help you create complex materials. — “must have” for the newbie in substance designer tool. If you’re going to learn this tool, you should start there. tutorials Getting started Conclusion If you need to work with complex materials — use Substance Designer. However, it doesn’t support any interaction from Three.js side, at least at this moment. You can’t make Substance Designer material interaction without GLSL in Three.js, but that doesn’t mean you can’t do that at all, that means that you need to use both.
