shader基础语法1.1

1. 学前说明

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

Three.js Shader可以做什么

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

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

学习基础

学习Threejs Shader之前，确保《Three.js可视化系统课》 ，阶段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有关的代码。