目录
1. 学前说明
# 学前说明
在正式学习Threejs Shader之前,先说下通过Threejs Shader可以做什么,怎么去学习的问题。
# Three.js Shader可以做什么
先简单展示几个Threejs Shader相关的效果。
- 建筑流光效果
- 智慧城市特效
- 地球、地图可视化飞线Shader
- 网页波浪背景
# 学习基础
学习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有关的代码。