22b How to color terrain from heightmap three.js
Learn how to color terrain made from a heightmap using shaders in three.js.
Timestamps:
00:00 Intro/demo
00:10 Boilerplate three.js code
00:38 How to load heightmap in three.js
00:57 Quick explanation of how to color vertices with shaders three.js
01:27 What is a smoothstep function? three.js
01:48 Make uniforms for color and displacement of vertices three.js
02:40 Create shaderMaterial and ground three.js
03:40 Boilerplate code: animate loop and window resize function
03:48 Make vertex shader to get vertex positions three.js
05:37 Make fragment shader to color terrain by height three.js
Resources:
ShaderMaterial doc:
https://threejs.org/docs/?q=shader#ap...
Book of Shaders:
https://thebookofshaders.com/
Smoothstep demo:
https://www.shadertoy.com/view/lsVSRD
Beginner's guide to coding graphics shaders:
https://gamedevelopment.tutsplus.com/...
Credits:
vertex normals image
https://commons.wikimedia.org/wiki/Fi...
English: Vertex normals of a polygonal mesh. The normals are the average of the normals of the adjoining faces.
Date 3 October 2012, 20:22:15
Source Own work
Author Anders Sandberg
