说明
【跟月影学可视化】学习笔记。
渲染动态的地理位置
用随机的小圆点模拟地图的小圆点，实现呼吸灯效果
最简单的做法：先创建圆的几何顶点数据，然后对每个圆设置不同的参数来分别一个一个圆绘制上去。
<!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 #fa8072;
}
</style>
</head>
<body>
<canvas width="500" height="500"></canvas>
<script src="./common/lib/gl-renderer.js"></script>
<script>
const canvas = document.querySelector("canvas");
const renderer = new GlRenderer(canvas);
const vertex = `
attribute vec2 a_vertexPosition;
uniform vec2 xy;
uniform float uTime;
uniform float bias;
void main() {
vec3 pos = vec3(a_vertexPosition, 1);
float scale = 0.7 + 0.3 * sin(6.28 * bias + 0.003 * uTime);
mat3 m = mat3(
scale, 0, 0,
0, scale, 0,
xy, 1
);
gl_Position = vec4(m * pos, 1);
}
`;
const fragment = `
#ifdef GL_ES
precision highp float;
#endif
uniform vec4 u_color;
void main() {
gl_FragColor = u_color;
}
`;
const program = renderer.compileSync(fragment, vertex);
renderer.useProgram(program);
function circle(radius = 0.05) {
const delta = (2 * Math.PI) / 32;
const positions = [];
const cells = [];
for (let i = 0; i < 32; i++) {
const angle = i * delta;
positions.push([
radius * Math.sin(angle),
radius * Math.cos(angle),
]);
if (i > 0 && i < 31) {
cells.push([0, i, i + 1]);
}
}
return { positions, cells };
}
const COUNT = 500;
function init() {
const meshData = [];
const { positions, cells } = circle();
for (let i = 0; i < COUNT; i++) {
const x = 2 * Math.random() - 1;
const y = 2 * Math.random() - 1;
const rotation = 2 * Math.PI * Math.random();
const uniforms = {};
uniforms.u_color = [
Math.random(),
Math.random(),
Math.random(),
1,
];
uniforms.xy = [
2 * Math.random() - 1,
2 * Math.random() - 1,
];
uniforms.bias = Math.random();
meshData.push({
positions,
cells,
uniforms,
});
}
renderer.uniforms.uTime = 0;
renderer.setMeshData(meshData);
}
init();
function update(t) {
renderer.uniforms.uTime = t;
renderer.render();
requestAnimationFrame(update);
}
update(0);
</script>
</body>
</html>
效果如下：在绘制 500 个圆的时候，浏览器的帧率就掉到 7 fps 左右了。
优化大数据渲染的常见方法
1、使用批量渲染优化
绘制大量同种几何图形的时候，通过减少渲染次数来提升性能最好的做法是直接使用批量渲染。
代码如下：
<!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 #fa8072;
}
</style>
</head>
<body>
<canvas width="500" height="500"></canvas>
<script src="./common/lib/gl-renderer.js"></script>
<script>
const canvas = document.querySelector("canvas");
const renderer = new GlRenderer(canvas);
const vertex = `
attribute vec2 a_vertexPosition;
attribute vec4 color;
attribute vec2 xy;
attribute float bias;
uniform float uTime;
varying vec4 vColor;
void main() {
vec3 pos = vec3(a_vertexPosition, 1);
float scale = 0.7 + 0.3 * sin(6.28 * bias + 0.003 * uTime);
mat3 m = mat3(
scale, 0, 0,
0, scale, 0,
xy, 1
);
vColor = color;
gl_Position = vec4(m * pos, 1);
}
`;
const fragment = `
#ifdef GL_ES
precision highp float;
#endif
varying vec4 vColor;
void main() {
gl_FragColor = vColor;
}
`;
const program = renderer.compileSync(fragment, vertex);
renderer.useProgram(program);
function circle(radius = 0.05) {
const delta = (2 * Math.PI) / 32;
const positions = [];
const cells = [];
for (let i = 0; i < 32; i++) {
const angle = i * delta;
positions.push([
radius * Math.sin(angle),
radius * Math.cos(angle),
]);
if (i > 0 && i < 31) {
cells.push([0, i, i + 1]);
}
}
return { positions, cells };
}
const COUNT = 20000;
function init() {
const { positions, cells } = circle();
const colors = [];
const pos = [];
const bias = [];
for (let i = 0; i < COUNT; i++) {
const x = 2 * Math.random() - 1;
const y = 2 * Math.random() - 1;
const rotation = 2 * Math.PI * Math.random();
colors.push([
Math.random(),
Math.random(),
Math.random(),
1,
]);
pos.push([2 * Math.random() - 1, 2 * Math.random() - 1]);
bias.push(Math.random());
}
renderer.uniforms.uTime = 0;
renderer.setMeshData({
positions,
cells,
instanceCount: COUNT,
attributes: {
color: { data: [...colors], divisor: 1 },
xy: { data: [...pos], divisor: 1 },
bias: { data: [...bias], divisor: 1 },
},
});
}
init();
function update(t) {
renderer.uniforms.uTime = t;
renderer.render();
requestAnimationFrame(update);
}
update(0);
</script>
</body>
</html>
渲染20000个点效果：
2、使用点图元优化
在 WebGL 中，点图元是最简单的图元，它用来显示画布上的点，在顶点着色器里，可以通过设置 gl_PointSize（单位是像素）来改变点图元的大小。
利用点图元绘制圆的过程：
- 先通过点图元，改变 gl_PointSize 来设置顶点的大小，只需要一个顶点就可以绘制出矩形
- 然后通过计算到圆心的距离得出距离场，然后通过 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 #fa8072;
}
</style>
</head>
<body>
<canvas width="500" height="500"></canvas>
<script src="./common/lib/gl-renderer.js"></script>
<script>
const canvas = document.querySelector("canvas");
const renderer = new GlRenderer(canvas);
const vertex = `
attribute vec2 a_vertexPosition;
attribute vec4 color;
attribute float bias;
uniform float uTime;
uniform vec2 uResolution;
varying vec4 vColor;
varying vec2 vPos;
varying vec2 vResolution;
varying float vScale;
void main() {
float scale = 0.7 + 0.3 * sin(6.28 * bias + 0.003 * uTime);
gl_PointSize = 0.05 * uResolution.x * scale;
vColor = color;
vPos = a_vertexPosition;
vResolution = uResolution;
vScale = scale;
gl_Position = vec4(a_vertexPosition, 1, 1);
}
`;
const fragment = `
#ifdef GL_ES
precision highp float;
#endif
varying vec4 vColor;
varying vec2 vPos;
varying vec2 vResolution;
varying float vScale;
void main() {
vec2 st = gl_FragCoord.xy / vResolution;
st = 2.0 * st - vec2(1);
float d = step(distance(vPos, st), 0.05 * vScale);
gl_FragColor = d * vColor;
}
`;
const program = renderer.compileSync(fragment, vertex);
renderer.useProgram(program);
const COUNT = 20000;
function init() {
const colors = [];
const pos = [];
const bias = [];
for (let i = 0; i < COUNT; i++) {
const x = 2 * Math.random() - 1;
const y = 2 * Math.random() - 1;
const rotation = 2 * Math.PI * Math.random();
colors.push([
Math.random(),
Math.random(),
Math.random(),
1,
]);
pos.push([2 * Math.random() - 1, 2 * Math.random() - 1]);
bias.push(Math.random());
}
renderer.uniforms.uTime = 0;
renderer.uniforms.uResolution = [canvas.width, canvas.height];
renderer.setMeshData({
mode: renderer.gl.POINTS,
enableBlend: true,
positions: pos,
attributes: {
color: { data: [...colors] },
bias: { data: [...bias] },
},
});
}
init();
function update(t) {
renderer.uniforms.uTime = t;
renderer.render();
requestAnimationFrame(update);
}
update(0);
</script>
</body>
</html>
渲染20000个点效果：
其他方法
1、使用后期处理通道优化
后期处理通道十分强大，它最重要的特性就是可以把各种数据存储在纹理图片中。这样在迭代处理的时候，我们就可以用 GPU 将这些数据并行地读取和处理，从而达到非常高效地渲染。
用后期处理通道实现了粒子流的效果：https://oframe.github.io/ogl/examples/?src=post-fluid-distortion.html
2、使用 GPGPU 优化
OGL 官网例子：https://oframe.github.io/ogl/examples/gpgpu-particles.html就是用了 GPGPU 的方式，也叫做通用 GPU 方式，就是把每个粒子的速度保存到纹理图片里，实现同时渲染几万个粒子并产生运动的效果。
3、使用服务端渲染优化
https://github.com/akira-cn/node-canvas-webgl 它可以在 Node.js 中启动一个 Canvas2D 和 WebGL 环境，可以在服务端进行渲染，然后再将结果缓存起来直接提供给客户端。
