ThreeJS 着色器打造震撼海洋动画

高颜值的网页往往能够吸引更多的用户，随着用户审美的提高，普通的图片拼凑的网站已经很难引起用户的兴趣，将一些动画用在网页中往往更能吸引眼球。下面介绍如何使用WebGL渲染器实现震撼的动画效果。

1. 选择着色器

shadertoy是一个着色器分享交流的网站，网站有很多附带源码的着色器，我们可以选择自己喜欢的着色器，实现酷炫的动画背景。我以一款大海效果的着色器作为示例，源码如下：

/** "Seascape" by Alexander Alekseev aka TDM - 2014* License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.* Contact: tdmaav@gmail.com*/const int NUM_STEPS = 8;
const float PI      = 3.141592;
const float EPSILON = 1e-3;
#define EPSILON_NRM (0.1 / iResolution.x)// 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.1,0.19,0.22);
const vec3 SEA_WATER_COLOR = vec3(0.8,0.9,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);return vec3(pow(1.0-e.y,2.0), 1.0-e.y, 0.6+(1.0-e.y)*0.4);
}// 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.65;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;
}// main
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {vec2 uv = fragCoord.xy / iResolution.xy;uv = uv * 2.0 - 1.0;uv.x *= iResolution.x / iResolution.y;    float time = iTime * 0.3 + iMouse.x*0.01;// rayvec3 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);// tracingvec3 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)); // colorvec3 color = mix(getSkyColor(dir),getSeaColor(p,n,light,dir,dist),pow(smoothstep(0.0,-0.05,dir.y),0.3));// postfragColor = vec4(pow(color,vec3(0.75)), 1.0);
}

2. 根据GLSL语法调整着色器代码

由于shadertoy上用的语言和GLSL有些区别，下载下来的源码是不能直接当片元着色器来使用的，还需要进行一下改动。

1) 入口函数

入口函数由mainImage改为main
由于GLSL有内置输出变量gl_FragColor和内置输入变量gl_FragCoord，去掉入口函数的参数fragColor 和 fragCoord

void mainImage( out vec4 fragColor, in vec2 fragCoord ) {...
}

改为

void main() {...
}

2) fragCoord 替换为内置输入变量 gl_FragCoord

vec2 uv = fragCoord.xy / iResolution.xy;

改为

vec2 uv = gl_FragCoord.xy / iResolution.xy;

3) fragCoord 替换为内置输出变量 gl_FragColor

fragColor = vec4(pow(color,vec3(0.75)), 1.0);

改为

gl_FragColor = vec4(pow(color,vec3(0.75)), 1.0);

4) 定义着色器需要的uniform变量

uniform变量是全局且只读的,在整个shader执行完毕前其值不会改变,他可以和任意基本类型变量组合
一般我们使用uniform变量来放置外部程序传递来的环境数据(如点光源位置,模型的变换矩阵等等)

// 时间
uniform float iTime;
// 分辨率
uniform vec2 iResolution;
// 鼠标位置
uniform vec2 iMouse;

three.js在创建THREE.ShaderMaterial时传入uniform变量，示例：

var material = new THREE.ShaderMaterial( {uniforms: {iTime: { value: 0.0 },iResolution: { value: new THREE.Vector2(300.0, 200.0) }},...
});

3. 将着色器代码作为片元着色器脚本添加到网页

<script id="fragmentShader" type="x-shader/x-fragment">
// 时间
uniform float iTime;
// 分辨率
uniform vec2 iResolution;
// 鼠标位置
uniform vec2 iMouse;const int NUM_STEPS = 8;
const float PI      = 3.141592;
const float EPSILON = 1e-3;
#define EPSILON_NRM (0.1 / iResolution.x)...void main() {vec2 uv = gl_FragCoord.xy / iResolution.xy;...// postgl_FragColor = vec4(pow(color,vec3(0.75)), 1.0);
}
</script>

4. 顶点着色器脚本添加到网页

<script id="vertexShader" type="x-shader/x-vertex">
void main() {vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );gl_Position = projectionMatrix * mvPosition;
}
</script>

5. 添加JS脚本

利用three.js实现效果

<script type="text/javascript">
var width = window.innerWidth; // 画布的宽度
var height = window.innerHeight; // 画布的高度// 渲染器
var renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(width, height);
// 将canvas添加到指定元素
var parentEle = document.getElementById('seaBackground');
parentEle.appendChild(renderer.domElement);// 场景
var scene = new THREE.Scene();
// 摄像机
var camera = new THREE.PerspectiveCamera(45, width/height, 1, 2000);
camera.position.set(0,0,360);
scene.add(camera);// 传递给着色器的uniform参数
var 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( {// 着色器 uniform 参数uniforms: uniforms,// 顶点着色器文本内容vertexShader: document.getElementById( 'vertexShader' ).textContent,// 片元着色器文本内容fragmentShader: document.getElementById('fragmentShader').textContent
});
// 平面几何体
var geom = new THREE.PlaneBufferGeometry(width, height);
// 网格对象
var mesh = new THREE.Mesh( geom, material );
scene.add(mesh);/* 利用requestAnimationFrame实现动画 */
var clock = new THREE.Clock(); // 时钟
(function animate() {requestAnimationFrame( animate );var delta = clock.getDelta(); // 获取本次和上次的时间间隔uniforms.iTime.value += delta; // 设置着色器使用的 iTime 参数renderer.render( scene, camera ); // 重新渲染
})();/* 监听鼠标移动，并改变着色器使用的 iMouse 参数 */
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>

6. 调整着色器效果

将动画添加到页面会发现转动速度太快，让人有晕眩感，这时可以修改着色器的代码调整动画效果。

float time = iTime * 0.3 + iMouse.x * 0.01;

改为

float time = iTime * 0.1 + iMouse.x * 0.001;

7. 示例页面

查看示例

ThreeJS 着色器打造震撼海洋动画相关推荐

【视觉高级篇】19 # 如何用着色器实现像素动画？
说明 [跟月影学可视化]学习笔记. 如何用着色器实现固定帧动画 <!DOCTYPE html> <html lang="en"><head>&l ...
Godot Engine:用着色器实现通过开关隐藏部分模型
使用情景代码很简单.这个着色器可以用在动画的开发流程中,比如游戏角色要持各种枪,在Blender中作动画时,可以给手上添加一个临时的简模(一个Cube)当作枪,这样比较方便做动画,这个简模上使用下面 ...
曲面细分着色器与几何着色器
着色器执行顺序顶点着色器->曲面细分着色器->几何着色器->片元着色器曲面细分着色器细分后的顶点属于重心空间. 曲面细分着色器应用:海浪.雪地等与置换贴图结合:只使用法线贴图 ...
制作超好看的个人网站：用ThreeJs为你的网站打造个性的动画背景
目录一.示例二.教程 1.第一步,写一个顶点着色器 2.在ShaderToy上选一个自己喜欢的Shader 3.添加有关变量 4.将源代码改写成GLSL语言 4.把材质添加在写好的threejs框 ...
threejs 源码解析_ThreeJS 物理材质shader源码分析(顶点着色器)
ThreeJS 物理材质shader源码分析(顶点着色器) Threejs将shader代码分为ShaderLib和ShaderChunk两部分,ShaderLib通过组合ShaderChunk的代码 ...
Threejs教程之着色器
Three.js着色器 Three.js视频教程很多时候如果想写一些特效,往往需要编写着色器代码GLSL,如果你不熟悉着色器语言,自然需要学习着色器语言语法,如果你有着色器语言基础,直接使用Thre ...
着色器实例代码+注释更新中【描边、卡通渲染、法线颜色、贴图动画等等】
描边着色器 // Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'Shader " ...
【 Threejs 】- Shader 着色器实例渲染教程
着色器在threejs中是一个难点,话不多说,先来看看着色器是什么? 如果您已经有使用计算机绘图的经验,您就会知道在这个过程中您先画一个圆,然后画一个矩形.一条线.一些三角形,直到您组成您想要的图像. ...
Unity ShaderLab特效教程适用于sprite和ugui的2d着色器实例代码+详解注释【波浪起伏的扭曲动画效果】
如果代码中有什么不清楚请查看以下基础知识 Shader基础知识 unity3d 中七种坐标知识详解适用于sprite和ugui的波浪动画shader Shader "Custom/wav ...