目錄
一、示例
先上圖（無視蕾姆醬）
二、教程
廢話不多說了，即使你不看理解那部分的解釋，無法理解這些代碼到底是怎麼做到的也沒關係，只要按照步驟來也能寫出來。
算是面向小白的基礎教程。
1.第一步，寫一個頂點着色器
頂點着色器大部分情況下是通用的，直接複製下段代碼即可
<script id="vertexShader" type="x-shader/x-vertex">
void main() {
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_Position = projectionMatrix * mvPosition;
}
</script>
理解：
注意，變量vUv非常重要，片元着色器通過vUv來辨別紋理圖的位置。因爲我們沒有用網頁中的場景座標（分辨率）來解決問題，而是使用了紋理相關的座標。
2.在ShaderToy上選一個自己喜歡的Shader
ShaerToy地址：https://www.shadertoy.com/
點擊瀏覽就會出來非常多的預覽圖
這裏我選擇的非常受歡迎的海洋相關的Shader：https://www.shadertoy.com/view/Ms2SD1
在Shadertoy裏有非常多好玩有趣或者漂亮的Shader，都是大佬們的傑作。找到你喜歡的Shader複製就好。原Shader代碼如下：
const int NUM_STEPS = 8;
const float PI = 3.141592;
const float EPSILON = 1e-3;
#define EPSILON_NRM (0.1 / iResolution.x)
#define AA
// sea
const int ITER_GEOMETRY = 3;
const int ITER_FRAGMENT = 5;
const float SEA_HEIGHT = 0.6;
const float SEA_CHOPPY = 4.0;
const float SEA_SPEED = 0.8;
const float SEA_FREQ = 0.16;
const vec3 SEA_BASE = vec3(0.0,0.09,0.18);
const vec3 SEA_WATER_COLOR = vec3(0.8,0.9,0.6)*0.6;
#define SEA_TIME (1.0 + iTime * SEA_SPEED)
const mat2 octave_m = mat2(1.6,1.2,-1.2,1.6);
// math
mat3 fromEuler(vec3 ang) {
vec2 a1 = vec2(sin(ang.x),cos(ang.x));
vec2 a2 = vec2(sin(ang.y),cos(ang.y));
vec2 a3 = vec2(sin(ang.z),cos(ang.z));
mat3 m;
m[0] = vec3(a1.y*a3.y+a1.x*a2.x*a3.x,a1.y*a2.x*a3.x+a3.y*a1.x,-a2.y*a3.x);
m[1] = vec3(-a2.y*a1.x,a1.y*a2.y,a2.x);
m[2] = vec3(a3.y*a1.x*a2.x+a1.y*a3.x,a1.x*a3.x-a1.y*a3.y*a2.x,a2.y*a3.y);
return m;
}
float hash( vec2 p ) {
float h = dot(p,vec2(127.1,311.7));
return fract(sin(h)*43758.5453123);
}
float noise( in vec2 p ) {
vec2 i = floor( p );
vec2 f = fract( p );
vec2 u = f*f*(3.0-2.0*f);
return -1.0+2.0*mix( mix( hash( i + vec2(0.0,0.0) ),
hash( i + vec2(1.0,0.0) ), u.x),
mix( hash( i + vec2(0.0,1.0) ),
hash( i + vec2(1.0,1.0) ), u.x), u.y);
}
// lighting
float diffuse(vec3 n,vec3 l,float p) {
return pow(dot(n,l) * 0.4 + 0.6,p);
}
float specular(vec3 n,vec3 l,vec3 e,float s) {
float nrm = (s + 8.0) / (PI * 8.0);
return pow(max(dot(reflect(e,n),l),0.0),s) * nrm;
}
// sky
vec3 getSkyColor(vec3 e) {
e.y = (max(e.y,0.0)*0.8+0.2)*0.8;
return vec3(pow(1.0-e.y,2.0), 1.0-e.y, 0.6+(1.0-e.y)*0.4) * 1.1;
}
// sea
float sea_octave(vec2 uv, float choppy) {
uv += noise(uv);
vec2 wv = 1.0-abs(sin(uv));
vec2 swv = abs(cos(uv));
wv = mix(wv,swv,wv);
return pow(1.0-pow(wv.x * wv.y,0.65),choppy);
}
float map(vec3 p) {
float freq = SEA_FREQ;
float amp = SEA_HEIGHT;
float choppy = SEA_CHOPPY;
vec2 uv = p.xz; uv.x *= 0.75;
float d, h = 0.0;
for(int i = 0; i < ITER_GEOMETRY; i++) {
d = sea_octave((uv+SEA_TIME)*freq,choppy);
d += sea_octave((uv-SEA_TIME)*freq,choppy);
h += d * amp;
uv *= octave_m; freq *= 1.9; amp *= 0.22;
choppy = mix(choppy,1.0,0.2);
}
return p.y - h;
}
float map_detailed(vec3 p) {
float freq = SEA_FREQ;
float amp = SEA_HEIGHT;
float choppy = SEA_CHOPPY;
vec2 uv = p.xz; uv.x *= 0.75;
float d, h = 0.0;
for(int i = 0; i < ITER_FRAGMENT; i++) {
d = sea_octave((uv+SEA_TIME)*freq,choppy);
d += sea_octave((uv-SEA_TIME)*freq,choppy);
h += d * amp;
uv *= octave_m; freq *= 1.9; amp *= 0.22;
choppy = mix(choppy,1.0,0.2);
}
return p.y - h;
}
vec3 getSeaColor(vec3 p, vec3 n, vec3 l, vec3 eye, vec3 dist) {
float fresnel = clamp(1.0 - dot(n,-eye), 0.0, 1.0);
fresnel = pow(fresnel,3.0) * 0.5;
vec3 reflected = getSkyColor(reflect(eye,n));
vec3 refracted = SEA_BASE + diffuse(n,l,80.0) * SEA_WATER_COLOR * 0.12;
vec3 color = mix(refracted,reflected,fresnel);
float atten = max(1.0 - dot(dist,dist) * 0.001, 0.0);
color += SEA_WATER_COLOR * (p.y - SEA_HEIGHT) * 0.18 * atten;
color += vec3(specular(n,l,eye,60.0));
return color;
}
// tracing
vec3 getNormal(vec3 p, float eps) {
vec3 n;
n.y = map_detailed(p);
n.x = map_detailed(vec3(p.x+eps,p.y,p.z)) - n.y;
n.z = map_detailed(vec3(p.x,p.y,p.z+eps)) - n.y;
n.y = eps;
return normalize(n);
}
float heightMapTracing(vec3 ori, vec3 dir, out vec3 p) {
float tm = 0.0;
float tx = 1000.0;
float hx = map(ori + dir * tx);
if(hx > 0.0) return tx;
float hm = map(ori + dir * tm);
float tmid = 0.0;
for(int i = 0; i < NUM_STEPS; i++) {
tmid = mix(tm,tx, hm/(hm-hx));
p = ori + dir * tmid;
float hmid = map(p);
if(hmid < 0.0) {
tx = tmid;
hx = hmid;
} else {
tm = tmid;
hm = hmid;
}
}
return tmid;
}
vec3 getPixel(in vec2 coord, float time) {
vec2 uv = coord / iResolution.xy;
uv = uv * 2.0 - 1.0;
uv.x *= iResolution.x / iResolution.y;
// ray
vec3 ang = vec3(sin(time*3.0)*0.1,sin(time)*0.2+0.3,time);
vec3 ori = vec3(0.0,3.5,time*5.0);
vec3 dir = normalize(vec3(uv.xy,-2.0)); dir.z += length(uv) * 0.14;
dir = normalize(dir) * fromEuler(ang);
// tracing
vec3 p;
heightMapTracing(ori,dir,p);
vec3 dist = p - ori;
vec3 n = getNormal(p, dot(dist,dist) * EPSILON_NRM);
vec3 light = normalize(vec3(0.0,1.0,0.8));
// color
return mix(
getSkyColor(dir),
getSeaColor(p,n,light,dir,dist),
pow(smoothstep(0.0,-0.02,dir.y),0.2));
}
// main
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
float time = iTime * 0.3 + iMouse.x*0.01;
#ifdef AA
vec3 color = vec3(0.0);
for(int i = -1; i <= 1; i++) {
for(int j = -1; j <= 1; j++) {
vec2 uv = fragCoord+vec2(i,j)/3.0;
color += getPixel(uv, time);
}
}
color /= 9.0;
#else
vec3 color = getPixel(fragCoord, time);
#endif
// post
fragColor = vec4(pow(color,vec3(0.65)), 1.0);
}
超級長，看不懂也沒太大關係，你只需要知道這裏寫了相應的片元着色器。把這一段複製粘貼到你的文件中。
3.添加有關變量
// 時間
uniform float iTime;
// 分辨率
uniform vec2 iResolution;
// 鼠標位置
uniform vec2 iMouse;
4.將源代碼改寫成GLSL語言
其實差距不大，改寫部分GLSL預定好的變量和main函數就行：
（1）void mainImage（）改寫爲main（），去掉參數
改寫前：
void mainImage( out vec4 fragColor, in vec2 fragCoord )
改寫後：
void main()
（2）FragCoord改寫爲gl_FragCoord
（3）FragColor改寫爲 gl_FragColor
改寫後的main函數：
void main() {
vec2 uv = gl_FragCoord.xy / iResolution.xy;
uv = uv * 2.0 - 1.0;
uv.x *= iResolution.x / iResolution.y;
float time = iTime * 0.3 + iMouse.x*0.001;
// ray
vec3 ang = vec3(sin(time*3.0)*0.1,sin(time)*0.2+0.3,time);
vec3 ori = vec3(0.0,3.5,time*5.0);
vec3 dir = normalize(vec3(uv.xy,-2.0)); dir.z += length(uv) * 0.15;
dir = normalize(dir) * fromEuler(ang);
// tracing
vec3 p;
heightMapTracing(ori,dir,p);
vec3 dist = p - ori;
vec3 n = getNormal(p, dot(dist,dist) * EPSILON_NRM);
vec3 light = normalize(vec3(0.0,1.0,0.8));
// color
vec3 color = mix(
getSkyColor(dir),
getSeaColor(p,n,light,dir,dist),
pow(smoothstep(0.0,-0.05,dir.y),0.3));
// post
gl_FragColor = vec4(pow(color,vec3(0.75)), 1.0);
}
理解:
(2)和(3)都是GLSL中預定義的變量
4.把材質添加在寫好的threejs框架中
這裏貼一個寫好的Threejs框架，不懂Threejs的可以看下相關教程。其中material就是我們改寫好的Shader材質。
<script>
var container;
var camera, scene, renderer;
var uniforms;
var width = window.innerWidth; // 畫布的寬度
var height = window.innerHeight; // 畫布的高度
container = document.getElementById('container');
renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, width/height, 1, 2000);;
camera.position.set(0,0,360);
scene.add(camera);
var geometry = new THREE.PlaneBufferGeometry(width, height);
var imouse = new THREE.Vector2();
window.addEventListener("touchmove", function(evt) {
imouse.x = evt["touches"][0].clientX;
imouse.y = evt["touches"][0].clientY;
})
uniforms = {
iTime: { value: 1.0 },
iResolution: { value: new THREE.Vector2(width * 1.0, height * 1.0)},
iMouse: { value: new THREE.Vector2(0.0, 0.0) }
};
var material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragmentShader').textContent
});
var geom = new THREE.PlaneBufferGeometry(width, height);
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
var clock = new THREE.Clock(); // 時鐘
(function animate() {
requestAnimationFrame( animate );
var delta = clock.getDelta(); // 獲取本次和上次的時間間隔
uniforms.iTime.value += delta; // 設置着色器使用的 iTime 參數
renderer.render( scene, camera ); // 重新渲染
})();
var mouseStartPosition = null; // 鼠標起始位置
window.addEventListener("mousemove", function (event) {
if (!mouseStartPosition) {
mouseStartPosition = {x: event.clientX, y: event.clientY}
} else {
uniforms.iMouse.value.x = event.clientX - mouseStartPosition.x;
uniforms.iMouse.value.y = event.clientY - mouseStartPosition.y;
}
})
</script>
另外不要忘了配置上js相關文件地址，這裏要根據自己的情況修改
<script src="js/three.js"></script>
<script src="js/jquery.min.js"></script>
把上面的js代碼組合進html中即可。
threejs文件和網頁文件放在了我的github上
如果有其它喜歡的Shader並且應用過程中遇到問題，歡迎諮詢