图形API学习工程（10）：基础光照

本文主要是介绍图形API学习工程（10）：基础光照，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

工程GIT地址：https://gitee.com/yaksue/yaksue-graphics

目标

在《图形API学习工程（6）：创建并使用UniformBuffer》中，UniformBuffer的机制已经配置好，这其实可以让一大批功能得以实现。《图形API学习工程（7）：进入3D空间》是其一，其中配置了相机矩阵和投影矩阵，使得能以一个虚拟的“相机”来观察3D世界。本篇的“光照”同样如此，它建立在UniformBuffer的功能上。

本篇的目标是创建一个有一定体积的“立方体”，并让它看起来“受到光照”。

此处概念介绍，可见DirectX11官方SDK中的教程范例【Direct3D11 - Tutorial 6: Lighting】

无光照的效果

为了测试，让“立方体”的所有顶点的颜色都是青色(0.0f, 0.7f, 0.7f, 1.0f)：

//作为测试的顶点缓冲数据：
std::vector<RawVertexData> vertices = {	//六个面，颜色都是青色(0.0f, 0.7f, 0.7f, 1.0f){ {-1.0f, 1.0f, -1.0f},		{0.0f, 0.7f, 0.7f, 1.0f} },{ {1.0f, 1.0f, -1.0f},		{0.0f, 0.7f, 0.7f, 1.0f} },{ {1.0f, 1.0f, 1.0f},		{0.0f, 0.7f, 0.7f, 1.0f} },{ {-1.0f, 1.0f, 1.0f},		{0.0f, 0.7f, 0.7f, 1.0f} },{ {-1.0f, -1.0f, -1.0f},	{0.0f, 0.7f, 0.7f, 1.0f} },{ {1.0f, -1.0f, -1.0f},		{0.0f, 0.7f, 0.7f, 1.0f} },{ {1.0f, -1.0f, 1.0f},		{0.0f, 0.7f, 0.7f, 1.0f} },{ {-1.0f, -1.0f, 1.0f},		{0.0f, 0.7f, 0.7f, 1.0f} },{ {-1.0f, -1.0f, 1.0f},		{0.0f, 0.7f, 0.7f, 1.0f} },{ {-1.0f, -1.0f, -1.0f},	{0.0f, 0.7f, 0.7f, 1.0f} },{ {-1.0f, 1.0f, -1.0f},		{0.0f, 0.7f, 0.7f, 1.0f} },{ {-1.0f, 1.0f, 1.0f},		{0.0f, 0.7f, 0.7f, 1.0f} },{ {1.0f, -1.0f, 1.0f},		{0.0f, 0.7f, 0.7f, 1.0f} },{ {1.0f, -1.0f, -1.0f},		{0.0f, 0.7f, 0.7f, 1.0f} },{ {1.0f, 1.0f, -1.0f},		{0.0f, 0.7f, 0.7f, 1.0f} },{ {1.0f, 1.0f, 1.0f},		{0.0f, 0.7f, 0.7f, 1.0f} },{ {-1.0f, -1.0f, -1.0f},	{0.0f, 0.7f, 0.7f, 1.0f} },{ {1.0f, -1.0f, -1.0f},		{0.0f, 0.7f, 0.7f, 1.0f} },{ {1.0f, 1.0f, -1.0f},		{0.0f, 0.7f, 0.7f, 1.0f} },{ {-1.0f, 1.0f, -1.0f},		{0.0f, 0.7f, 0.7f, 1.0f} },{ {-1.0f, -1.0f, 1.0f},		{0.0f, 0.7f, 0.7f, 1.0f} },{ {1.0f, -1.0f, 1.0f},		{0.0f, 0.7f, 0.7f, 1.0f} },{ {1.0f, 1.0f, 1.0f},		{0.0f, 0.7f, 0.7f, 1.0f} },{ {-1.0f, 1.0f, 1.0f},		{0.0f, 0.7f, 0.7f, 1.0f} },
};

效果：

可以看出，虽然从轮廓可以辨别出它是一个立方体。但这和实际在现实中看到的立方体差别很大。在现实中，一个立方体，就算是纯色的，也能辨认出各个表面，辨认出棱角。
而这主要归功于——光照。由于不同的表面相对的光照方向角度不一样，因此他们受光的程度不同。这很容易想象：“光照方向垂直于平面”时，会比“光照方向平行于平面”时更亮。

法线

为了表示表面朝向，引入法线。
（另外，我将颜色这个顶点属性去掉，因为所有顶点都是同一种颜色，因此我选择将值暂时硬编码在shader中）

1. 顶点数据调整

顶点数据类型修改：

数据：

//作为测试的顶点缓冲数据：
std::vector<RawVertexData> vertices = {	//朝前：{ {-1.0f, 1.0f, -1.0f},		{0.0f, 1.0f, 0.0f} },{ {1.0f, 1.0f, -1.0f},		{0.0f, 1.0f, 0.0f} },{ {1.0f, 1.0f, 1.0f},		{0.0f, 1.0f, 0.0f} },{ {-1.0f, 1.0f, 1.0f},		{0.0f, 1.0f, 0.0f} },//朝后：{ {-1.0f, -1.0f, -1.0f},	{0.0f, -1.0f, 0.0f} },{ {1.0f, -1.0f, -1.0f},		{0.0f, -1.0f, 0.0f} },{ {1.0f, -1.0f, 1.0f},		{0.0f, -1.0f, 0.0f} },{ {-1.0f, -1.0f, 1.0f},		{0.0f, -1.0f, 0.0f} },//朝左：{ {-1.0f, -1.0f, 1.0f},		{-1.0f, 0.0f, 0.0f} },{ {-1.0f, -1.0f, -1.0f},	{-1.0f, 0.0f, 0.0f} },{ {-1.0f, 1.0f, -1.0f},		{-1.0f, 0.0f, 0.0f} },{ {-1.0f, 1.0f, 1.0f},		{-1.0f, 0.0f, 0.0f} },//朝右：{ {1.0f, -1.0f, 1.0f},		{1.0f, 0.0f, 0.0f} },{ {1.0f, -1.0f, -1.0f},		{1.0f, 0.0f, 0.0f} },{ {1.0f, 1.0f, -1.0f},		{1.0f, 0.0f, 0.0f} },{ {1.0f, 1.0f, 1.0f},		{1.0f, 0.0f, 0.0f} },//朝下：{ {-1.0f, -1.0f, -1.0f},	{0.0f, 0.0f, -1.0f} },{ {1.0f, -1.0f, -1.0f},		{0.0f, 0.0f, -1.0f} },{ {1.0f, 1.0f, -1.0f},		{0.0f, 0.0f, -1.0f} },{ {-1.0f, 1.0f, -1.0f},		{0.0f, 0.0f, -1.0f} },//朝上：{ {-1.0f, -1.0f, 1.0f},		{0.0f, 0.0f, 1.0f} },{ {1.0f, -1.0f, 1.0f},		{0.0f, 0.0f, 1.0f} },{ {1.0f, 1.0f, 1.0f},		{0.0f, 0.0f, 1.0f} },{ {-1.0f, 1.0f, 1.0f},		{0.0f, 0.0f, 1.0f} },
};

2. 顶点布局调整

将原先的颜色属性改为法线属性：
D3D11：

D3D12：

Vulkan：

OpenGL：

不过，由于OpenGL在创建顶点数据的时候还需要做些转换。因此也需要处理。

3. 着色器调整

将颜色的输入改为法线。
另外，加一个硬编码的光照方向，作为测试。
glsl版：

hlsl版：

效果

将光照方向加入UniformBuffer

在上一步骤中，光源方向被硬编码到着色器中，在实际中一般不会这么做。因为着色器中的代码应该只记录逻辑，而光源方向这种会被外部调整的数据，应该作为一个UniformBuffer传入。

将光照方向加入UniformBuffer结构体中：

当然，着色器中也要配合加入。

另外，由于是在像素着色器中获取这个信息，而之前只是在顶点着色器中，所以设置部分有需要改变：
OpenGL：
不需要调整

D3D11：

D3D12：
将UniformBuffer的可见从D3D12_SHADER_VISIBILITY_VERTEX改为D3D12_SHADER_VISIBILITY_ALL
然后将之前管线中的flag去掉D3D12_ROOT_SIGNATURE_FLAG_DENY_PIXEL_SHADER_ROOT_ACCESS

Vulkan：
UniformBuffer的flag添加一个VK_SHADER_STAGE_FRAGMENT_BIT

鼠标控制光源

这里和《图形API学习工程（7）：进入3D空间》中的相机类似，只不过将CameraManager又向上抽象为一个MouseArmController，供光源的控制使用。
另外，为了能分开控制相机和光源，我向MouseArmController加入了“激活键”的概念，仅在这个键被按时才有效。

效果：

同时按住两个“激活键”就可以让光照方向时刻面对着相机

这篇关于图形API学习工程（10）：基础光照的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---