学前说明

在正式学习Threejs Shader之前，先说下通过Threejs Shader可以做什么，怎么去学习的问题。

Three.js Shader可以做什么

先简单展示几个Threejs Shader相关的效果。

• 建筑流光效果
• 智慧城市特效
• 地球、地图可视化飞线Shader
• 网页波浪背景

效果查看视频地址 (opens new window)

学习基础

学习Threejs Shader之前，确保《Three.js可视化系统课》 (opens new window)，阶段1、阶段2内容你已经学习了，对threejs有一个基本的了解。

• 【阶段1】Threejs基础、中级部分 【必修】

• 【阶段2】Threejs进阶数学几何计算 【必修】

• 【阶段1】阶段1对应案例【选修】

• 【阶段2】阶段2对应案例【选修】

• 【阶段3】原生WebGL 【选修，建议最好学】

WebGL基础问题

如果你时间比较充足，最好先入门WebGL，再学习Threejs Shader，这样更容易理解threejs Shader代码。

不过有一点学习WebGL要求相对高点。

当然如果你不想花时间学习WebGL，项目着急写threejs shader，你跳过《原生webgl课程》 (opens new window)也行，只是这样有个小缺陷，学习threejs shader难度会更高点，要有心理准备，不过好处就是不用折腾WebGL的API了。

Threejs底层：WebGL

像你平时写threejs代码的WebGL渲染器WebGLRenderer，本质上就是对WebGL API的封装。

WebGL渲染器执行.render()渲染的过程，本质上就是调用WebGL API，控制你的电脑或手机的GPU渲染3D场景。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera();
// WebGL渲染器
const renderer = new THREE.WebGLRenderer();
renderer.render(scene, camera);

如果想了解WebGLRenderer是如何封装WebGL API的，你可以查看threejs官方文件包，src/renderers目录下与WebGL渲染器WebGLRenderer有关的代码。