说明
【跟月影学可视化】学习笔记。
如何绘制大批量重复图案
比如绘制带有网格背景的画布
如果将网格绘制在 Canvas2D 画布上，网格的线条很多，重绘消耗系统的性能。
方案一：使用 background-image 来绘制重复图案
因为浏览器将渐变属性视为图片，所以可以将渐变设置在任何可以接受图片的 CSS 属性上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用 background-image 来绘制重复图案</title>
<style>
canvas {
border: 1px dashed salmon;
background-image: linear-gradient(to right, transparent 90%, #ccc 0),
linear-gradient(to bottom, transparent 90%, #ccc 0);
background-size: 8px 8px, 8px 8px;
}
</style>
</head>
<body>
<canvas width="512" height="512"></canvas>
</body>
</html>
不足之处：
- 和直接绘制在画布上的其他图形就处于不同的层，没法将它覆盖在这些图形上
- 用坐标变换来缩放或移动元素时，作为元素背景的网格是不会随着缩放或移动而改变的。
方案二：使用 Shader 来绘制重复图案
利用 GPU 并行计算的特点，使用着色器来绘制背景网格这样的重复图案。使用 Shader 绘制重复图案，不管绘制多么细腻，图案重复多少次，绘制消耗的时间几乎是常量，不会遇到性能瓶颈。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>使用 Shader 来绘制重复图案</title>
<style>
canvas {
border: 1px dashed salmon;
}
</style>
</head>
<body>
<canvas width="512" height="512"></canvas>
<script src="./common/lib/gl-renderer.js"></script>
<script type="module">
const canvas = document.querySelector('canvas');
// 这里使用基础库 gl-renderer 库，它在 WebGL 底层的基础上进行了一些简单的封装
const renderer = new GlRenderer(canvas);
console.log(renderer);
// 顶点着色器
const vertex = `
attribute vec2 a_vertexPosition;
attribute vec2 uv;
varying vec2 vUv;
void main() {
gl_PointSize = 1.0;
vUv = uv;
gl_Position = vec4(a_vertexPosition, 1, 1);
}
`;
/**
* 片元着色器：渲染过程
* 1、获得重复的 rows 行 rows 列的值 st
* fract：用来获取一个数的小数部分
* vUv：由顶点着色器传来的 uv 属性（纹理坐标）乘上 rows 值
* 2、step 函数是 Shader 中另一个很常用的函数，它就是一个阶梯函数。
* 它的原理是：当 step(a, b) 中的 b < a 时，返回 0；当 b >= a 时，返回 1。
* 3、mix 是线性插值函数，mix(a, b, c) 表示根据 c 是 0 或 1，返回 a 或者 b。
* vec3(1.0)是白色，vec3(0.8)是灰色
* */
const fragment = `
#ifdef GL_ES
precision mediump float;
#endif
varying vec2 vUv;
uniform float rows;
void main() {
vec2 st = fract(vUv * rows);
float d1 = step(st.x, 0.9);
float d2 = step(0.1, st.y);
gl_FragColor.rgb = mix(vec3(0.8), vec3(1.0), d1 * d2);
gl_FragColor.a = 1.0;
}
`;
// 加载片元着色器并创建程序
const program = renderer.compileSync(fragment, vertex);
renderer.useProgram(program);
// 设置 uniform 变量，rows：表示每一行显示多少个网格。
renderer.uniforms.rows = 64;
// 将顶点数据送入缓冲区
renderer.setMeshData([{
// positions：顶点，这四个顶点坐标正好覆盖了整个 Canvas 画布
positions: [
[-1, -1],
[-1, 1],
[1, 1],
[1, -1],
],
attributes: {
// uv：纹理坐标，这个坐标系的左下角为 0,0，右上角为 1,1
uv: [
[0, 0],
[0, 1],
[1, 1],
[1, 0],
],
},
// cells：顶点索引，这个矩形画布剖分成两个三角形，顶点下标分别是 (0, 1, 2) 和 (2, 0, 3)。
cells: [[0, 1, 2], [2, 0, 3]],
}]);
// 渲染
renderer.render();
</script>
</body>
</html>
顶点坐标和 uv（纹理）坐标：
y = fract(x) 在整数区间内周期重复示意图：
Step 函数：
效果如下：
如何绘制分形图案
一个分形图案可以划分成无数个部分，而每个部分的形状又都和这个图案整体具有相似性。
比如：自然界中的分形——罗马花椰菜
分形公式（曼德勃罗特集）：（ Z n {Z}_{n} Zn 和 Z n + 1 {Z}_{n+1} Zn+1是复数，C 是一个实数常量。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>如何绘制分形图案</title>
<style>
canvas {
border: 1px dashed salmon;
}
</style>
</head>
<body>
<canvas width="512" height="512"></canvas>
<script src="./common/lib/gl-renderer.js"></script>
<script type="module">
const canvas = document.querySelector('canvas');
// 这里使用基础库 gl-renderer 库，它在 WebGL 底层的基础上进行了一些简单的封装
const renderer = new GlRenderer(canvas);
console.log(renderer);
// 顶点着色器
const vertex = `
attribute vec2 a_vertexPosition;
attribute vec2 uv;
varying vec2 vUv;
void main() {
gl_PointSize = 1.0;
vUv = uv;
gl_Position = vec4(a_vertexPosition, 1, 1);
}
`;
// 曼德勃罗特集是无限迭代的，给一个足够精度的最大迭代次数，比如：65536
const fragment = `
#ifdef GL_ES
precision mediump float;
#endif
varying vec2 vUv;
uniform vec2 center;
uniform float scale;
uniform int iterations;
vec2 f(vec2 z, vec2 c) {
return mat2(z, -z.y, z.x) * z + c;
}
vec3 palette(float t, vec3 c1, vec3 c2, vec3 c3, vec3 c4) {
float x = 1.0 / 3.0;
if (t < x) return mix(c1, c2, t/x);
else if (t < 2.0 * x) return mix(c2, c3, (t - x)/x);
else if (t < 3.0 * x) return mix(c3, c4, (t - 2.0*x)/x);
return c4;
}
void main() {
vec2 uv = vUv;
vec2 c = center + 4.0 * (uv - vec2(0.5)) / scale;
vec2 z = vec2(0.0);
bool escaped = false;
int j;
for (int i = 0; i < 65536; i++) {
if(i > iterations) break;
j = i;
z = f(z, c);
if (length(z) > 2.0) {
escaped = true;
break;
}
}
gl_FragColor.rgb = escaped ?
max(
1.0, log(scale)) * palette(float(j)/ float(iterations),
vec3(0.02, 0.02, 0.03),
vec3(0.1, 0.2, 0.3),
vec3(0.0, 0.3, 0.2),
vec3(0.0, 0.5, 0.8)
) : vec3(0.0);
gl_FragColor.a = 1.0;
}
`;
// 加载片元着色器并创建程序
const program = renderer.compileSync(fragment, vertex);
renderer.useProgram(program);
renderer.uniforms.center = [0.367, 0.303];
renderer.uniforms.scale = 1;
renderer.uniforms.iterations = 256;
// 将顶点数据送入缓冲区
renderer.setMeshData([{
// positions：顶点，这四个顶点坐标正好覆盖了整个 Canvas 画布
positions: [
[-1, -1],
[-1, 1],
[1, 1],
[1, -1],
],
attributes: {
// uv：纹理坐标，这个坐标系的左下角为 0,0，右上角为 1,1
uv: [
[0, 0],
[0, 1],
[1, 1],
[1, 0],
],
},
// cells：顶点索引，这个矩形画布剖分成两个三角形，顶点下标分别是 (0, 1, 2) 和 (2, 0, 3)。
cells: [[0, 1, 2], [2, 0, 3]],
}]);
// 渲染
renderer.render();
function update() {
const factor = Math.max(0.1, Math.log(renderer.uniforms.scale));
renderer.uniforms.scale = (renderer.uniforms.scale += factor) % 10000;
renderer.uniforms.iterations = factor * 500;
requestAnimationFrame(update);
}
setTimeout(update, 2000);
</script>
</body>
</html>
如何给图案增加随机效果
伪随机函数的原理是，取正弦函数偏后部的小数部分的值来模拟随机。如果我们传入一个确定的 st 值，它就会返回一个符合随机分布的确定的 float 值。
重复网格
可以用 floor 取整函数，来生成随机的色块。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>重复网格</title>
<style>
canvas {
border: 1px dashed salmon;
}
</style>
</head>
<body>
<canvas width="512" height="512"></canvas>
<script src="./common/lib/gl-renderer.js"></script>
<script>
const vertex = `
attribute vec2 a_vertexPosition;
attribute vec2 uv;
varying vec2 vUv;
void main() {
gl_PointSize = 1.0;
vUv = uv;
gl_Position = vec4(a_vertexPosition, 1, 1);
}
`;
const fragment = `
#ifdef GL_ES
precision highp float;
#endif
varying vec2 vUv;
float random (vec2 st) {
return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
}
void main() {
vec2 st = vUv * 10.0;
gl_FragColor.rgb = vec3(random(floor(st)));
gl_FragColor.a = 1.0;
}
`;
const canvas = document.querySelector("canvas");
const renderer = new GlRenderer(canvas);
// 加载片元着色器并创建程序
const program = renderer.compileSync(fragment, vertex);
renderer.useProgram(program);
// 将顶点数据送入缓冲区
renderer.setMeshData([
{
positions: [
[-1, -1],
[-1, 1],
[1, 1],
[1, -1],
],
attributes: {
uv: [
[0, 0],
[0, 1],
[1, 1],
[1, 0],
],
},
cells: [
[0, 1, 2],
[2, 0, 3],
],
},
]);
// 渲染
renderer.render();
</script>
</body>
</html>
网格移动
结合随机和动态效果的网格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>结合随机和动态效果的网格</title>
<style>
canvas {
border: 1px dashed salmon;
}
</style>
</head>
<body>
<canvas width="512" height="512"></canvas>
<script src="./common/lib/gl-renderer.js"></script>
<script>
const vertex = `
attribute vec2 a_vertexPosition;
attribute vec2 uv;
varying vec2 vUv;
void main() {
gl_PointSize = 1.0;
vUv = uv;
gl_Position = vec4(a_vertexPosition, 1, 1);
}
`;
const fragment = `
#ifdef GL_ES
precision highp float;
#endif
varying vec2 vUv;
uniform float uTime;
float random (vec2 st) {
return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123);
}
void main() {
vec2 st = vUv * vec2(100.0, 50.0);
st.x -= (1.0 + 10.0 * random(vec2(floor(st.y)))) * uTime;
vec2 ipos = floor(st); // integer
vec2 fpos = fract(st); // fraction
vec3 color = vec3(step(random(ipos), 0.7));
color *= step(0.2,fpos.y);
gl_FragColor.rgb = color;
gl_FragColor.a = 1.0;
}
`;
const canvas = document.querySelector("canvas");
const renderer = new GlRenderer(canvas);
// 加载片元着色器并创建程序
const program = renderer.compileSync(fragment, vertex);
renderer.useProgram(program);
renderer.uniforms.uTime = 0.0;
// 将顶点数据送入缓冲区
renderer.setMeshData([
{
positions: [
[-1, -1],
[-1, 1],
[1, 1],
[1, -1],
],
attributes: {
uv: [
[0, 0],
[0, 1],
[1, 1],
[1, 0],
],
},
cells: [
[0, 1, 2],
[2, 0, 3],
],
},
]);
// 渲染
renderer.render();
requestAnimationFrame(function update(t) {
renderer.uniforms.uTime = 4 * t / 1000;
requestAnimationFrame(update);
});
</script>
</body>
</html>
迷宫
在 Shader 中用 smoothstep 函数生成可以随机旋转方向的线段生成迷宫。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>迷宫</title>
<style>
canvas {
border: 1px dashed salmon;
}
</style>
</head>
<body>
<canvas width="512" height="512"></canvas>
<script src="./common/lib/gl-renderer.js"></script>
<script>
const vertex = `
attribute vec2 a_vertexPosition;
attribute vec2 uv;
varying vec2 vUv;
void main() {
gl_PointSize = 1.0;
vUv = uv;
gl_Position = vec4(a_vertexPosition, 1, 1);
}
`;
const fragment = `
#ifdef GL_ES
precision mediump float;
#endif
#define PI 3.14159265358979323846
varying vec2 vUv;
uniform vec2 u_resolution;
uniform int rows;
float random (in vec2 _st) {
return fract(sin(dot(_st.xy, vec2(12.9898,78.233))) * 43758.5453123);
}
vec2 truchetPattern(in vec2 _st, in float _index){
_index = fract(((_index-0.5)*2.0));
if (_index > 0.75) {
_st = vec2(1.0) - _st;
} else if (_index > 0.5) {
_st = vec2(1.0-_st.x,_st.y);
} else if (_index > 0.25) {
_st = 1.0-vec2(1.0-_st.x,_st.y);
}
return _st;
}
void main() {
vec2 st = vUv * float(rows);
vec2 ipos = floor(st); // integer
vec2 fpos = fract(st); // fraction
vec2 tile = truchetPattern(fpos, random( ipos ));
float color = 0.0;
color = smoothstep(tile.x-0.3,tile.x,tile.y) - smoothstep(tile.x,tile.x+0.3,tile.y);
gl_FragColor = vec4(vec3(color),1.0);
}
`;
const canvas = document.querySelector("canvas");
const renderer = new GlRenderer(canvas);
// 加载片元着色器并创建程序
const program = renderer.compileSync(fragment, vertex);
renderer.useProgram(program);
renderer.uniforms.rows = 20;
// 将顶点数据送入缓冲区
renderer.setMeshData([
{
positions: [
[-1, -1],
[-1, 1],
[1, 1],
[1, -1],
],
attributes: {
uv: [
[0, 0],
[0, 1],
[1, 1],
[1, 0],
],
},
cells: [
[0, 1, 2],
[2, 0, 3],
],
},
]);
// 渲染
renderer.render();
</script>
</body>
</html>
【The Book of Shaders】
这是一本关于 Fragment Shaders（片段着色器）的入门指南，它将一步一步地带你领略其中的纷繁与抽象。
比如上面提到的 smoothstep 函数
4865
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
