Threejs教程之着色器

Three.js着色器

不少时候若是想写一些特效，每每须要编写着色器代码GLSL，若是你不熟悉着色器语言，天然须要学习着色器语言语法，若是你有着色器语言基础，直接使用Threejs引擎的ShaderMaterial或RawShaderMaterial API编写就能够。相比较在原生WebGL代码中编写着色器要方便的多，在threejs中想着色器传递数据不须要像WebGL中要使用WebGL API来传递，threejs会自动帮你处理。

学习基础

• 具有基本WebGL和着色器语言知识，不必定要深刻学习。
• 基本Threejs基础。
• 若是有图形学基础更好，没有也不要紧，能够慢慢学习。

WebGL入门

关注郭隆邦技术博客，有不少关于webgl的知识和书籍资料。

• 郭隆邦技术博客提供的webgl视频教程
• 《WebGL编程指南》，适合入门的书籍
• 《交互式计算机图形学》源码也是WebGL，相比较《WebGL编程指南》图形学算法内容更多，内容更详实，适合深刻学习。

Three.js着色器API

threejs所谓的材质对象Material本质上就是着色器代码和须要传递的uniform数据(光源、颜色、矩阵...)。
不少时候若是想写一些特效，每每须要编写着色器代码GLSL，若是你不熟悉着色器语言，天然须要学习着色器语言语法，若是你有着色器语言基础，直接使用Threejs引擎的ShaderMaterial或RawShaderMaterial API编写就能够。相比较在原生WebGL代码中编写着色器要方便的多，在threejs中想着色器传递数据不须要像WebGL中要使用WebGL API来传递，threejs会自动帮你处理。

RawShaderMaterial

和原生WebGL中同样，顶点着色器、片元着色器代码基本没有任何区别，
不过顶点数据和uniform数据能够经过threejs的API快速传递，要比使用WebGL原生的API与着色器变量绑定要方便得多。

ShaderMaterial

ShaderMaterial比RawShaderMaterial更方便些，着色器中的不少变量不用声明，threejs系统会自动帮你设置，好比顶点坐标变量、投影矩阵、视图矩阵...