WebGL学习记录(二)

WebGL学习记录(二)

这几天一直在看WebGL,因为比较简单所以一直看下去,没有做太多笔记;
一路下来主要是WebGL对各种数据对传递方式 attribute, uniform等等, 还有就是矩阵转换、光照系统等等;
总结如下:

数据传递方式

类型:
  • attribute:主要用来传递顶点数据,在一次绘制中往往会传递多次顶点
  • uniform:传递非顶点数据,往往传递颜色、方向、坐标等数据,通常在一次绘制中不会变化
API:
  • drawArrays: 绘制时传递原始顶点数据
  • drawElements: 根据索引值传递原始数据

光照系统

涉及概念:漫反射、镜面反射、入射角、反射角、法线向量,平行光源,点光源
其中平行光源和点光源, 会造成入射角的变化,从而形成不同的反射颜色


平行光源效果

点光源效果

可以看到平行光源,物体每个面的颜色比较均匀,而点光源则有一定的渐变,这就是入射角造成的;
而每个面的颜色不同,则是法向量角度造成

后期有空,我会增加WebGL Vue App给大家演示和学习光照系统