CSharpGL(39)GLSL光照示例：鼠标拖动太阳（光源）观察平行光的漫反射和镜面反射效果

CSharpGL(39)GLSL光照示例：鼠标拖动太阳（光源）观察平行光的漫反射和镜面反射效果

开始

一图抵千言。首先来看鼠标拖动太阳（光源）的情形。

然后是鼠标拖拽旋转模型的情形。

然后我们移动摄像机来从不同的角度看看。

现在太阳（光源）跑到比较远的位置去了，我们再移动它试试看。

本文就介绍平行光下是如何实现漫反射和镜面反射的。

本文shader核心部分来自红宝书第八版。

光照

只需记住一点，用GLSL实现光照效果时，都是根据顶点的位置、法线方向、光源位置（方向）、摄像机位置等等这些数据，根据物理学的反射规则计算出来的。当然，为了兼顾效果和效率，可能会对物理规则做一些简化处理。

Vertex shader

先看vertex shader。除了传递顶点的位置、颜色外，这里新增了传递法线(normal)的代码。顶点的变换可以通过mvp矩阵完成，而法线的变换则有所不同（说来话长，这里不要深究），所以单独提供一个normalMatrix供法线使用。

#version 330 core

uniform mat4 mvpMatrix;
uniform mat3 normalMatrix;// normal matrix is transpose(inverse(model matrix))

in vec3 inPosition;
in vec3 inColor;
in vec3 inNormal;

out vec3 passNormal;
out vec3 passColor;

void main()
{
    passNormal = normalize(normalMatrix * inNormal);
    passColor = inColor;
    gl_Position = mvpMatrix * vec4(inPosition, 1.0);
}

Fragment shader

这里是计算光照的地方。详情见注释。

#version 330 core

uniform vec3 ambientLight;// 环境光
uniform vec3 directionalLightColor;
uniform vec3 directionalLightDirection;
uniform vec3 halfVector;
uniform float shininess;
uniform float strength;

in vec3 passNormal;
in vec3 passColor;

out vec4 outColor;

void main()
{
    // 根据光源方向与法线方向的夹角计算此处的漫反射的强度
    float diffuse = max(0.0, dot(passNormal, directionalLightDirection));
    // 计算此处的镜面反射的强度
    float specular = max(0.0, dot(passNormal, halfVector));
    
    if (diffuse == 0.0) { specular = 0.0; }// 若光源没有照射到此处，自然也不应该有镜面反射效果
    else { specular = pow(specular, shininess); }// 指数式的剧烈变化，就是产生镜面高光的原理
    
    vec3 scatteredLight = ambientLight + directionalLightColor * diffuse;// 漫反射光+环境光
    vec3 reflectedLight = directionalLightColor * specular * strength;// 镜面反射光

    vec3 rgb = min(passColor * scatteredLight + reflectedLight, vec3(1.0));// 最后的颜色
    outColor = vec4(rgb, 1.0);// 搞定
} 

渲染器

shader做好了，下面写一个渲染器。关于渲染器的详细介绍可参看（CSharpGL(34)以从零编写一个KleinBottle渲染器为例学习如何使用CSharpGL）由于制作光照效果需要模型自带法线值，而我手里的模型只有这个Teapot是有法线值的，又仅仅是个例子，就写死了用Teapot了。

    class DirectonalLightRenderer : PickableRenderer
    {
        public vec3 AmbientLightColor { get; set; }
        public vec3 DirectionalLightDirection { get; set; }
        public vec3 DirectionalLightColor { get; set; }
        //public vec3 HalfVector { get; set; }
        public float Shininess { get; set; }
        public float Strength { get; set; }

        public static DirectonalLightRenderer Create()
        {
            var model = new Teapot();
            var shaderCodes = new ShaderCode[2];
            shaderCodes[0] = new ShaderCode(File.ReadAllText(@"shadersDirectionalLight.vert"), ShaderType.VertexShader);
            shaderCodes[1] = new ShaderCode(File.ReadAllText(@"shadersDirectionalLight.frag"), ShaderType.FragmentShader);
            var map = new AttributeMap();
            map.Add("inPosition", Teapot.strPosition);
            map.Add("inColor", Teapot.strColor);
            map.Add("inNormal", Teapot.strNormal);

            var renderer = new DirectonalLightRenderer(model, shaderCodes, map, Teapot.strPosition);
            renderer.ModelSize = model.Size;
            return renderer;
        }

        private DirectonalLightRenderer(IBufferable model, ShaderCode[] shaderCodes,
            AttributeMap attributeMap, string positionNameInIBufferable,
            params GLState[] switches)
            : base(model, shaderCodes, attributeMap, positionNameInIBufferable, switches)
        {
            this.AmbientLightColor = new vec3(0.2f);
            this.DirectionalLightDirection = new vec3(1);
            this.DirectionalLightColor = new vec3(1);
            //this.HalfVector = new vec3(1);
            this.Shininess = 10.0f;
            this.Strength = 1.0f;
        }

        protected override void DoRender(RenderEventArgs arg)
        {
            this.SetUniform("ambientLight", this.AmbientLightColor);
            this.SetUniform("directionalLightColor", this.DirectionalLightColor);
            this.SetUniform("directionalLightDirection", this.DirectionalLightDirection.normalize());
            this.SetUniform("halfVector", this.DirectionalLightDirection.normalize());
            //this.SetUniform("halfVector", this.HalfVector.normalize());
            this.SetUniform("shininess", this.Shininess);
            this.SetUniform("strength", this.Strength);

            mat4 projection = arg.Camera.GetProjectionMatrix();
            mat4 view = arg.Camera.GetViewMatrix();
            mat4 model = this.GetModelMatrix().Value;
            this.SetUniform("mvpMatrix", projection * view * model);
            this.SetUniform("normalMatrix", glm.transpose(glm.inverse(model)).to_mat3());

            base.DoRender(arg);
        }
    }

这样其实就可以看到效果了，还可以通过属性面板控制光源的参数。

但是手动输入数值很不爽啊，没有一点点随心所欲的顺畅。于是后续的折腾就开始了。让我来画一个真正的太阳，然后通过鼠标拖动太阳，实时更新光源的位置（方向），看到本文开始的效果。

太阳（光源）

画太阳

其实太阳模型早就做过了，本质上就是利用一个noise方法模拟太阳表面的活动。外围辐射效果什么的，我先拉倒吧。

拖动太阳

把太阳放在那里很容易，如何用鼠标移动呢？

原理在（CSharpGL(20)用unProject和Project实现鼠标拖拽图元）已经整理出来了。只不过当时是单独修改模型内部的顶点位置，而现在需要整体移动模型，即修改模型的(RendererBase.WorldPosition)属性。

我的思路如下：假设有一个点在原点position = new vec3(0,0,0)，我们像之前一样计算它在平移之后的位置newPosition，这是模型本身的变化，然后只需分别通过RendererBase.GetModelMatrix()的变换，就变成了在World Space里的变化，这个差别就是模型的位移。代码如下。

        void IMouseHandler.canvas_MouseMove(object sender, MouseEventArgs e)
        {
            if (mouseDownFlag && ((e.Button & this.lastBindingMouseButtons) != MouseButtons.None))
            {
                Point location = new Point(e.X, this.canvas.ClientRectangle.Height - e.Y - 1);
                Point differenceOnScreen = new Point(location.X - this._lastPosition.X, location.Y - this._lastPosition.Y);
                mat4 model = this.renderer.GetModelMatrix().Value;
                mat4 view = this.camera.GetViewMatrix();
                mat4 projection = this.camera.GetProjectionMatrix();
                vec4 viewport;
                {
                    int[] result = OpenGL.GetViewport();
                    viewport = new vec4(result[0], result[1], result[2], result[3]);
                }
                var position = new vec3(0.0f);// imangine we have a point at (0, 0, 0).
                vec3 windowPos = glm.project(position, view * model, projection, viewport);
                var newWindowPos = new vec3(windowPos.x + differenceOnScreen.X, windowPos.y + differenceOnScreen.Y, windowPos.z);
                vec3 newPosition = glm.unProject(newWindowPos, view * model, projection, viewport);
                var worldPosition = new vec3(model * new vec4(position, 1.0f));
                var newWorldPosition = new vec3(model * new vec4(newPosition, 1.0f));
                this.renderer.WorldPosition += newWorldPosition - worldPosition;

                this._lastPosition = location;
            }
        }

这样说似乎也不能彻底解释清楚，因为还需要先理解OpenGL里坐标变换的问题，这个问题可以参看（CSharpGL(27)讲讲清楚OpenGL坐标变换）

总结

整完收工。