您的位置:首页 > Web前端 > JavaScript

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

2017-07-03 22:12 676 查看
/**
* @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 };
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  WebGL threejs 博客