What are shaders used for?

Questions
1

i am trying to create a cloth fabric (cotton or wool in nature) , from my little understanding of three JS i feel this can be solved using shaders, but then when i google what shaders are, they explain that shaders are used to create shadows. I am so confused, please what really are shaders used for.

2

I recommend the Book of Shaders often. It’s not a simple question but they do a fairly good job of explaining this: https://thebookofshaders.com/01/.

In short, all of the above. Shaders are code that your graphics card understands, and the visible appearance of anything (materials, shadows, lighting) will ultimately involve shaders. That doesn’t necessarily mean you need to write shaders yourself; three.js and other engines can generate them for you in many cases. But custom effects require custom shaders.

3

How can i make threejs generate it for me ?

4

Shaders are generated when you use any of the THREE.Material classes, and they are modified when you use other threejs features like shadows and animation. For example, MeshStandardMaterial:

var material = new THREE.MeshStandardMaterial({
  color: 0xff0000,
  roughness: 1,
  metalness: 0
});
var mesh = new THREE.Mesh( geometry, material );
5

ohh now i get, but do you think it is possible to achieve through cotton fabric look and feel with shaders, or i can easily achieve it with maps ?

6

A good cloth appearance is very hard to do in realtime engines like three.js (or Unity + Unreal for that matter), and there’s no complete solution yet. If you find an example that’s close enough to what you want on a site like Sketchfab, maybe others can suggest how it was made… these are advanced shaders, so I’d suggest using the builtin Material classes instead.

Otherwise I’d suggest reading pages like these on PBR and fabric materials:

You could also get a free trial of something like Substance Painter (which exports to glTF) and see how how your results look.

7

I covered this topic in some of my articles, if interested there might be some useful information that could ease you into other reading:

1 Like