浅谈Three.js源码-render之WebGLLights.js

/** * @author mrdoob / http://mrdoob.com/ */import { Color } from '../../math/Color';import { Vector3 } from '../../math/Vector3';import { Vector2 } from '../../math/Vector2';/*在three.js引擎中，程序并不是表面上看起来的那样，（光源并不是真实存在的，）所有你看到的一切都是假象。* 一切的一切都是程序开发人员首先根据多种光源的特性，对其进行数学建模，构造出合理、严谨的光照模型，并在* 着色器（下文中都将其以shader代指）中进行编程实现。由于实现各种光照的原理不一样，构建出来的数学模型也不同* 所以每一种光源需要传入的数据也不一样。下面程序就是针对每一种光源，初始化好各个uniform类型的变量，供程序赋值并传入** */function WebGLLights() {//WebGL中管理灯光的脚本   var lights = {};//用来存储灯光的对象   return {      get: function ( light ) {//获取某一灯光的方法         if ( lights[ light.id ] !== undefined ) {            return lights[ light.id ];         }         var uniforms;//存储各种光中需要传入shader的uniform格式的变量         switch ( light.type ) {//判断光源类型            case 'DirectionalLight'://如果传入的灯光为方向光               uniforms = {                  direction: new Vector3(),//方向光照射的方向向量                  color: new Color(),//光的颜色                  shadow: false,//默认不开启阴影                  shadowBias: 0,//阴影的偏移                  shadowRadius: 1,//阴影半径                  shadowMapSize: new Vector2()//阴影贴图的大小                  /*这里Three.js中方向光产生阴影的原理还是比较复杂的，在这里可能三言两语讲不太清楚，                  *以后还是等单独讲shader的时候再慢慢谈吧，有兴趣的同学可以看一下unity里面实现的思路，                   * 启发一下，送上地址：http://blog.csdn.net/ronintao/article/details/51649664 */               };               break;            case 'SpotLight'://有点类似聚光灯找（老式台灯，带灯罩的那种。。。。）               uniforms = {                  position: new Vector3(),//聚光灯的方向                  direction: new Vector3(),//光线的方向                  color: new Color(),//光线的颜色                  distance: 0,//所能照射的距离                  /*下面的变量含义以后再更，更我啃完。。。。*/                  coneCos: 0,                  penumbraCos: 0,                  decay: 0,                  shadow: false,                  shadowBias: 0,                  shadowRadius: 1,                  shadowMapSize: new Vector2()               };               break;            case 'PointLight'://点光源               uniforms = {                  position: new Vector3(),                  color: new Color(),                  distance: 0,                  decay: 0,                  shadow: false,                  shadowBias: 0,                  shadowRadius: 1,                  shadowMapSize: new Vector2()               };               break;            case 'HemisphereLight':/*类似于太阳光的那种光源，                              demo地址：https://threejs.org/examples/#webgl_lights_hemisphere*/               uniforms = {                  direction: new Vector3(),                  skyColor: new Color(),                  groundColor: new Color()               };               break;            case 'RectAreaLight'://长方形区域灯（有点类似于LED广告牌的感觉，不太明白的可以在这看一下效果               //https://threejs.org/examples/#webgl_lights_rectarealight ）               uniforms = {                  color: new Color(),                  position: new Vector3(),                  halfWidth: new Vector3(),                  halfHeight: new Vector3()                  // TODO (abelnation): set RectAreaLight shadow uniforms               };               break;         }         lights[ light.id ] = uniforms;         return uniforms;      }   };}export { WebGLLights };