Using Vertex Displacement with Normal maps in cables.gl
2.2 هزار بار بازدید -
3 سال پیش
-
Let's explore a neat way
Let's explore a neat way to generate a normal map from your displacement texture and apply them to a geometry mesh. In this video we will create a basic scene from a rectangle and use the Vertex Displacement Map op along with a couple of Image Compose stacks. To generate the normal map in real-time we will use To Normal Map operator.
And a quick note about vertex displacement not mentioned in the video - cables.gl can also use RGB vertex displacement maps, more on that later!
link to bagoof's demo patch:
https://cables.gl/p/atQ9nN
link to ratsnake's patch from screenshot:
https://cables.gl/p/s26w_N
0:00 - intro
0:38 - starting a new patch
1:45 - setting up image compose ops and geometry for displacement map
3:49 - connecting texture to Vertex Displacement Map op
4:41 - mesh setup and visualization of the wireframe
5:52 - adding normals
7:06 - "calculate normals" toggle pluses and minuses
8:39 - generating normals from a texture with To Normal Map op
10:21 - using texture to control normals in a Phong material
11:14 - texture wrap mode tip
12:10 - adding a different light
12:30 - adding a timer
12:55 - using Simple Wireframe op for fun
Vertex Displacement Map documentation:
https://cables.gl/op/Ops.Gl.ShaderEff...
To Normal Map documentation:
https://cables.gl/op/Ops.Gl.TextureEf...
New to cables.gl? check out our channel and start creating your own webgl projects for free
https://cables.gl
And a quick note about vertex displacement not mentioned in the video - cables.gl can also use RGB vertex displacement maps, more on that later!
link to bagoof's demo patch:
https://cables.gl/p/atQ9nN
link to ratsnake's patch from screenshot:
https://cables.gl/p/s26w_N
0:00 - intro
0:38 - starting a new patch
1:45 - setting up image compose ops and geometry for displacement map
3:49 - connecting texture to Vertex Displacement Map op
4:41 - mesh setup and visualization of the wireframe
5:52 - adding normals
7:06 - "calculate normals" toggle pluses and minuses
8:39 - generating normals from a texture with To Normal Map op
10:21 - using texture to control normals in a Phong material
11:14 - texture wrap mode tip
12:10 - adding a different light
12:30 - adding a timer
12:55 - using Simple Wireframe op for fun
Vertex Displacement Map documentation:
https://cables.gl/op/Ops.Gl.ShaderEff...
To Normal Map documentation:
https://cables.gl/op/Ops.Gl.TextureEf...
New to cables.gl? check out our channel and start creating your own webgl projects for free
https://cables.gl
3 سال پیش
در تاریخ 1400/07/22 منتشر شده
است.
2,232
بـار بازدید شده