基于three.js的shader入门教程 一

threejs交流群511163089

扫盲一下

shader是什么东西 这暂时不重要 这里重要的是写这个需要编程语言。

threejs用的是glsl这款,语法跟C差不多。

这个在web端暂时只有顶点着色器 片源着色器可以用，这俩是啥？

模型是三角面构成的，每个点有个三维坐标。

顶点着色器 一般是为了把你的模型的每个点投到屏幕上,上色的时候，你如果想看得见这个点，必须投到屏幕的可视坐标系里头。

void main() { gl_Position =projectionMatrix * modelViewMatrix * vec4(position, 1.0); }

gl_Position还会除个w，就是投到屏幕的坐标。

另外three里帮你内置了很多变量，省了一些事情。

片源着色器 就是每个顶点上色怎么上。

那么上顶点颜色，只涂了三个点，三角面中间是啥颜色喃？你不用操心，有人自动帮你根据那三个点的颜色进行插值了。

void main() { gl_FragColor=vec4(1.0,1.0,1.0,1.0); }
gl_FragColor就是你输出最终的颜色了，后面vec4对应了这个R G B A。