原文地址：WebGL多模型光照综合实例
WebGL是一个非常的接近硬件底层的光栅化API, 从非常类似C/C++风格的API调用方式就可以看出来, 习惯了高级语言的我们会觉得很不友好,觉得特别繁琐. 这个也是很多人觉得WebGL难的原因之一. 如果我们要使用WebGL做一些项目,毫无疑问要么使用Three.js之类的3D库, 要么需要对原生的API进行封装. 这段时间查看了一些WebGL工具库的源代码, 参考封装出了一个简单的工具库,这样往后用WebGL做小项目就方便多了.
经过前面章节的学习, WebGL的知识点掌握的差不多了, 终于到了做特效和Demo的阶段了,来看一下这节实现的特效：
WebGL多物体多光源场景
内容大纲
实现图形绕坐标原点旋转, 同时给所有的物体增加环境光, 漫反射, 高光. 其中旋转功能使用矩阵复合变换实现; 光照部分比较复杂,实现了多个光源照射.
着色器
模型变换
着色器 顶点着色器代码很简单,逐顶点传入坐标,法向量矩阵,模型矩阵,mvp矩阵.
attribute vec4 a_position; attribute vec4 a_normal; uniform mat4 u_modelMatrix; uniform mat4 u_normalMatrix; uniform mat4 u_mvpMatrix; varying vec3 v_normal; varying vec3 v_position; void main() { gl_Position = u_mvpMatrix * a_position; v_normal=vec3(u_normalMatrix * a_normal); v_position= vec3(u_modelMatrix * a_position); }