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

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

开始

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

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

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

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

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

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

光照

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

Vertex shader

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

 #version  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  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[];
             shaderCodes[] = new ShaderCode(File.ReadAllText(@"shaders\DirectionalLight.vert"), ShaderType.VertexShader);
             shaderCodes[] = new ShaderCode(File.ReadAllText(@"shaders\DirectionalLight.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();
             this.DirectionalLightColor = new vec3();
             //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);
         }
     }

DirectonalLightRenderer

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

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

太阳（光源）

画太阳

其实太阳模型早就做过了，本质上就是利用一个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 - );
                 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[], result[], result[], result[]);
                 }
                 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坐标变换）

总结

整完收工。