本文主要是介绍图形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）：基础光照的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
