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.

My experience with Substance Designer in web 3D

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Component system in interactive 3D of web

3 Common Types of 3D Sensors: Stereo, Structured Light, and ToF

3D Models at City Scale!

3D Technology: Explore to Know How It Benefited Businesses

6 Best Web 3.0 Trends We Will See in 2023

8 Editors To Get Started Writing Python

Component system in interactive 3D of web

3 Common Types of 3D Sensors: Stereo, Structured Light, and ToF

3D Models at City Scale!

3D Technology: Explore to Know How It Benefited Businesses

6 Best Web 3.0 Trends We Will See in 2023

8 Editors To Get Started Writing Python

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps