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

我心飞翔 分类:javascript

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。

回复

我来回复
  • 暂无回复内容