PhiloGL学习（5）——神说要有光，便有了光

前言

上一篇文章中介绍了如何创建三维对象及加载皮肤，本文为大家介绍如何为场景添加光源。

一、 原理分析

光在任何地方都是非常重要的，无论在哪里都说是要发光发热，光和热也是分不开的。光线分为点光源和线光源，所谓点光源和线光源也是个相对的概念，站在地球上我们可以认为太阳光是线光源，其实从更大的尺度来看太阳光也是个点光源，只是我们站在地球上来看光线基本上是平行的了，所以可以认为是线光源。所有问题，站在不同的角度来看就会发生变化。

光线还有另外几个概念，环境光（ambient light）、漫反射光（diffuse light）、镜面反射光（specular light）。所谓环境光是指入射光均匀地从周围环境入射至景物表面并等量地向各个方向反射出去，通常物体表面还会受到从周围环境来的反射光（地面、天空、墙壁等）的照射，这些统称为环境光。漫反射光表示特定光源在景物表面的反射光中那些向空间各方向均匀反射出去的光。镜面反射光为朝一定方向的反射光，如点光源照射一个金属球时会在表面形成一块特定亮的区域，它是光源在金属球面上产生的镜面反射光，镜面反射光与物体的光滑程度有关系。

对于3D也是一样，我这几年搞的比较多的是地理信息系统，那么为什么还要学习3D以及之前的大数据等技术呢？首先我对学习充满了无限热情，碰到新技术就想学一下，当然这不见得是个好事情，因为一个人不可能把什么都学会，必须要有所取舍，否则就会像我一样导致什么都略懂但都不精通。其次任何知识都是有用的，不知道哪天就会用到，比如Hadoop集群，刚开始感觉很高大上就学了一点，后面果然需要使用这种分布式计算技术来处理遥感影像，于是Geotrellis很快就上手了，关于3D我认为也是同样如此，这个说不定就会在将来的工作中用到，比如倾斜摄影以及点云等等技术。

骚年们，让我们开始今天的学习吧。

二、 创建光源

首先，我们必须清楚，光源是加在整个场景中的而不是某个对象，就像太阳光打到地球上，是整个环境都有了光，而不是说只是某个对象有了光。对待PhiloGL也是一样，直接从场景中获取光线设置信息，并对其进行设置。

2.1 场景配置

所以在onLoad事件中添加如下代码：

var scene = app.scene
var lightConfig = scene.config.lights;
lightConfig.enable = true;

lightConfig就是对整个场景光源设置的变量。首先设置其enbale属性为true，表示使用光源。上面分析的几种光源均可以添加或者不添加在特定场景中，并可以任意设置其光源位置及颜色分量等。

2.2 线光源

设置lightConfig属性的directional的direction和color属性。

lightConfig.directional.direction = {
    x: +light.x,
    y: +light.y,
    z: +light.z
};
lightConfig.directional.color = {
    r: +light.r,
    g: +light.g,
    b: +light.b
};

其中direction表示光线方向，color表示光线颜色。

• 坐标系

此处需要补充一个之前早已涉及但被我忽略的问题——坐标系。坐标系是任何图形学的基础，居然遗漏了此问题。 WEbGL同样采用笛卡尔左手坐标系，其Z轴正向为从屏幕指向用户的方向，X轴正向为从屏幕中央指向屏幕右侧的方向，Y轴正向为从屏幕中央指向屏幕上侧的方向。

此处light是我定义的变量，存储了光线的上述信息，注意此处变量前的+，此符号在js中的意义为将其他类型的数据转换为number，此处因为可以直接定义成number类型，所以不写也可。

此处还有一个问题，经过我实际测试，线光源的x、y、z为反向，即真正光线的向量方向为(-x,-y,-z)。当然此处可能是由于我对坐标系理解有误或者实验有误，如果如此，欢迎批评指正。

2.3 点光源

点光源直接设置lightConfig的points属性。

lightConfig.points = {
    diffuse: { // 散射光
        r: +light.dr,
        g: +light.dg,
        b: +light.db
    },
    specular: { // 反射光
        r: +light.sr,
        g: +light.sg,
        b: +light.sb
    },
    position: {
        x: +light.x,
        y: +light.y,
        z: +light.z
    }
};

其中diffuse表示散射光，specular表示散射光，position表示点光源的位置，此处位置为实际的光源点的位置。

2.4 环境光

设置lightConfig的ambient属性。

lightConfig.ambient = {
    r: +ambient.r,
    g: +ambient.g,
    b: +ambient.b
};

环境光不需要设置位置，无论物体处在何处以及哪一面均会被射上此光。

2.5 另外一种写法

采用上面的写法的好处在于我们可以改变光线的值或者光线的位置，其方法如同在第二篇文章中讲述的动画，直接改变light的值即可。当然如果为固定我们还可以直接写在PhiloGL的配置中，如下：

PhiloGL('test1', {
    scene: {
        lights: {
            directional: {
                color: {
                    r: 1, g: 1, b: 1
                },
                direction: {
                    x: 0, y: 0, z: 0
                }
            }
        }
    },
})

这是线光源的设置方法，可以看出两种方式写法实质相同。点光源写法相同。

三、 总结

本文简单介绍了如何设置光源。到这里PhiloGL的基础以及WebGL的基础我们已经基本全部掌握了，下一篇文章介绍一个案例，做一个自转的地球及围绕其公转的地球。