简单的图形学（三）——光源

参考自：用JavaScript玩转计算机图形学(二)基本光源 - Milo Yip - 博客园，主要讲述三种最基本的光源——平行光、点光源、聚光灯，其实就是三种数学模型。

代码的调整

先前的代码中，颜色是由几何物体自身计算得出，因此使用很有限。在Phong材质中，显示的效果已经很不错了，然而Phong材质是要假定有一个光源的。我们的代码需要从以面向物体渲染为面向光源渲染。

新的逻辑：https://github.com/bajdcc/GameFramework/blob/master/CCGameFramework/base/pe2d/Render2DLight.cpp

主逻辑代码：

void PhysicsEngine::RenderLightIntern(World& world, const PerspectiveCamera& camera, BYTE* buffer, cint width, cint height)
{
    for (auto y = 0; y < height; y++)
    {
        const auto sy = 1.0f - (1.0f * y / height);

        for (auto x = 0; x < width; x++)
        {
            const auto sx = 1.0f * x / width;

            // sx和sy将屏幕投影到[0,1]区间

            // 产生光线
            const auto ray = camera.GenerateRay(sx, sy);

            // 测试光线与球是否相交
            auto result = world.Intersect(ray);
            if (result.body)
            {
                color color;
                for (auto & k : world.lights) { // 这里不一样了
                    auto lightSample = k->Sample(world, result.position);

                    if (!lightSample.empty()) {
                        auto NdotL = DotProduct(result.normal, lightSample.L); // 计算角度

                        // 夹角为锐角，光源在平面前面
                        if (NdotL >= 0)
                            // 累计所有光线
                            // NdotL 就是光源方向在法向量上的投影
                            color = color + (lightSample.EL * NdotL);
                    }
                }
                buffer[0] = BYTE(color.b * 255);
                buffer[1] = BYTE(color.g * 255);
                buffer[2] = BYTE(color.r * 255);
                buffer[3] = 255;
            }
            else
            {
                // 没有接触，就是背景色
                buffer[0] = 0;
                buffer[1] = 0;
                buffer[2] = 0;
                buffer[3] = 255;
            }

            buffer += 4;
        }
    }
}

简单来说，就是求出交点时，做：

计算各大光源基于该点的光线颜色和光线方向
计算光线在交点法向量上的投影，作为颜色混合比的依据
将所有颜色累计起来

下面介绍三种光源

平行光

平行光

平行光的属性：

// 平行光
class DirectionalLight : public Light
{
public:
    DirectionalLight(color irradiance, vector3 direction);

    LightSample Sample(World& world, vector3 position) override;

    color irradiance;    // 幅照度
    vector3 direction;   // 光照方向
    vector3 L;           // 光源方向
};

DirectionalLight::DirectionalLight(color irradiance, vector3 direction)
    : irradiance(irradiance), direction(direction)
{
    L = -Normalize(direction);
}

LightSample DirectionalLight::Sample(World& world, vector3 position)
{
    static LightSample zero;

    if (shadow) {
        const Ray shadowRay(position, L);
        const auto shadowResult = world.Intersect(shadowRay);
        if (shadowResult.body)
            return zero;
    }

    return LightSample(L, irradiance); // 就返回光源颜色
}

这里注意L是光源方向单位向量。

平行光我们只需要知道光源方向和光源颜色就可以了。非常简单，不用算投影，这是主逻辑的工作。

这里说一下阴影，平行光有阴影，当从交点向光源方向看时，如果中间有障碍物，就返回黑色。

点光源

点光源

// 点光源
class PointLight : public Light
{
public:
    PointLight(color intensity, vector3 position);

    LightSample Sample(World& world, vector3 position) override;

    color intensity;     // 幅射强度
    vector3 position;    // 光源位置
};

static LightSample zero;

LightSample PointLight::Sample(World& world, vector3 pos)
{
    // 计算L，但保留r和r^2，供之后使用
    const auto delta = position - pos; // 距离向量
    const auto rr = SquareMagnitude(delta);
    const auto r = sqrtf(rr); // 算出光源到pos的距离
    const auto L = delta / r; // 距离单位向量

    if (shadow) {
        const Ray shadowRay(pos, L);
        const auto shadowResult = world.Intersect(shadowRay);
        // 在r以内的相交点才会遮蔽光源
        // shadowResult.distance <= r 表示：
        //   以pos交点 -> 光源位置 发出一条阴影测试光线
        //   如果阴影测试光线与其他物体有交点，那么相交距离 <= r
        //   说明pos位置无法直接看到光源
        if (shadowResult.body && shadowResult.distance <= r)
            return zero;
    }

    // 平方反比衰减
    const auto attenuation = 1 / rr;

    // 返回衰减后的光源颜色
    return LightSample(L, intensity * attenuation);
}

点光源有一个平方反比衰减规律，故而要先算光源到交点pos的距离r，然后求出L，实际上L就是光源位置到交点的方向单位向量。接着要计算颜色，点光源本身颜色intensity，由于有衰减，因此变成了intensity * attenuation。

再说下阴影，如何计算点光源的阴影？这比平行光复杂些。从交点处向光源位置发出一条光线，如果当中有障碍物，那么被遮挡，返回黑色（就是遮挡测试）。

聚光灯

聚光灯

// 聚光灯
class SpotLight : public Light
{
public:
    SpotLight(color intensity, vector3 position, vector3 direction, float theta, float phi, float falloff);

    LightSample Sample(World& world, vector3 position) override;

    color intensity;     // 幅射强度
    vector3 position;    // 光源位置
    vector3 direction;   // 光照方向
    float theta;         // 内圆锥的内角
    float phi;           // 外圆锥的内角
    float falloff;       // 衰减

    /* 以下为预计算常量 */
    vector3 S;           // 光源方向
    float cosTheta;      // cos(内圆锥角)
    float cosPhi;        // cos(外圆锥角)
    float baseMultiplier;// 1/(cosTheta-cosPhi)
};

SpotLight::SpotLight(color intensity, vector3 position, vector3 direction, float theta, float phi, float falloff)
    : intensity(intensity), position(position), direction(direction), theta(theta), phi(phi), falloff(falloff)
{
    S = -Normalize(direction);
    cosTheta = cosf(theta * float(M_PI) / 360.0f);
    cosPhi = cosf(phi * float(M_PI) / 360.0f);
    baseMultiplier = 1.0f / (cosTheta - cosPhi);
}

LightSample SpotLight::Sample(World& world, vector3 pos)
{
    // 计算L，但保留r和r^2，供之后使用
    const auto delta = position - pos; // 距离向量
    const auto rr = SquareMagnitude(delta);
    const auto r = sqrtf(rr); // 算出光源到pos的距离
    const auto L = delta / r; // 距离单位向量

    /*
     * spot(alpha) =
     *
     *     1
     *         where cos(alpha) >= cos(theta/2)
     *
     *     pow( (cos(alpha) - cos(phi/2)) / (cos(theta/2) - cos(phi/2)) , p)
     *         where cos(phi/2) < cos(alpha) < cos(theta/2)
     *
     *     0
     *         where cos(alpha) <= cos(phi/2)
     */

    // 计算spot
    auto spot = 0.0f;
    const auto SdotL = DotProduct(S, L);
    if (SdotL >= cosTheta)
        spot = 1.0f;
    else if (SdotL <= cosPhi)
        spot = 0.0f;
    else
        spot = powf((SdotL - cosPhi) * baseMultiplier, falloff);

    if (shadow) {
        const Ray shadowRay(pos, L);
        const auto shadowResult = world.Intersect(shadowRay);
        // 在r以内的相交点才会遮蔽光源
        // shadowResult.distance <= r 表示：
        //   以pos交点 -> 光源位置 发出一条阴影测试光线
        //   如果阴影测试光线与其他物体有交点，那么相交距离 <= r
        //   说明pos位置无法直接看到光源
        if (shadowResult.body && shadowResult.distance <= r)
            return zero;
    }

    // 平方反比衰减
    const auto attenuation = 1 / rr;

    // 返回衰减后的光源颜色
    return LightSample(L, intensity * (attenuation * spot));
}

聚光灯是非常复杂的数学模型，我们不去探究为什么公式这样的，只要实现就行。

纯数学计算不多讲，这里主要有一个spot（聚光灯系数），所以最后的颜色是intensity * (attenuation * spot)。其它跟点光源的实现也差不多。

三原色混合

光的三原色

原想这东西怎么实现啊，现在想通了，就是在某点处(plane上一点)三个聚光灯打上去，将最终的颜色混合起来(加起来)。

简单表述：三个光源的光分别为RGB(255,0,0)、RGB(0,255,0)、RGB(0,0,255)，混合起来，加一下就是RGB(255,255,255)，白色。

看到用JavaScript玩转计算机图形学(二)基本光源 - Milo Yip - 博客园中的一个问题：

如果，幅射强度是负值的话，会怎么样？(虽然未证实反光子(antiphoton)的存在，但读者能想到图形学上的功能么？)

感觉就是PS中的正片叠底啊，见如何简单的理解正片叠底和滤色？。

接下来会探讨画光的实现。