My experience with Substance Designer in web 3D

Procedural textures in WebGL

Short intro from the Author: As a person who knows and worked with glsl shaders I was interested in the kind of tool that allows me to work with complex structures in procedural way.

There is a presentation from GPU Technology Conference 2016 called: “MDL materials to GLSL shaders: theory and practice” — this one explains the possibility of exporting .mdl data into glsl shader code that can be later used in custom renderers.

For the web, such renderer can be Three.js, which relies on glsl (webgl). Substance Designer as a texture generation tool can be used with Three.js, it is even mentioned in this issue.

So, what about using Substance Designer in WebGL? Or better to write glsl shaders manually?

Well, it depends… Let’s highlight PROS and CONS of using Substance Designer in WebGL.

PROS

• You can easily structure complex materials with node-based system
• Material instancing lets you combine and blend multiple materials
• Library has a lot of cool noises (pic 1.)

pic. 1: Library

CONS

• You can’t use the material interactive way. While glsl lets you work with uniforms (parameters), in Substance Designer you can’t export your graph into the glsl code (at least at the moment of writing this article)

What you really can do is to combine both ways: the use of Substance Designer for making complex textures and GLSL for adding 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 glsl interaction with existing static metal material from Substance designer. For adding interaction you need to take existing MeshStandardMaterial code, edit it (add interaction) and insert in 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.

Getting started tutorials — “must have” for the newbie in substance designer tool. If you’re going to learn this tool, you should start there.

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.