工程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）：基础光照相关推荐

图形API学习工程（4）：梳理：以Vulkan为中心梳理当前初始化阶段的代码
工程GIT地址:https://gitee.com/yaksue/yaksue-graphics 目标目前工程所能达成的效果是:以一固定色填充窗口(clear命令).为此,所需要的操作大致有: 创建 ...
图形API学习工程（28）：实现基于Cook-Torrance与GGX的PBR渲染
工程GIT地址:https://gitee.com/yaksue/yaksue-graphics 目标本篇基本上是对<[翻译]Coding Labs :: Physically Based R ...
Canvas学习：封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方法, ...
OpenGL学习笔记 - 计算机图形学和现代图形API
一.计算机图形学 1.简述 wiki上的解释说,"计算机图形学是计算机科学的一个子领域,它研究数字合成和操纵视觉内容的方法.尽管该术语通常指的是对三维计算机图形学的研究,但它也包括二维图形和 ...
【QT 5 学习笔记-学习绘图相关+画图形图片等+绘图设备+基础学习（2）】
[QT 5 学习笔记-学习绘图相关+画图形图片等+绘图设备+基础学习(2)] 1.说明 2.实验环境 3.参照连接 4.自己的学习与理解 5.学习与实践代码 (1)移动图片测试实验 (1)继续之前的工 ...
深度学习（10）TensorFlow基础操作六: 数学运算
深度学习(10)TensorFlow基础操作六: 数学运算 1. Operation type 2. + - * / % // 3. tf.math.log & tf.exp 4. log2, ...
ZigBee学习之10——MAC层API解读
ZigBee学习之10--MAC层API解读其实也算不上什么解读拉,基本上是把官方的文档翻译了一下.在Zigbee中,是分层结构的,这样做有很多的好处,每一层只负责自己的东西,数据传输更加透明和有 ...
Python|http|Chrome Developer Tools|Postman|HTTPie|builtwith库|python-whois库|爬虫及解析|语言基础50课：学习（10）
文章目录系列目录原项目地址第31课:网络数据采集概述爬虫的应用领域爬虫合法性探讨 Robots协议超文本传输协议(HTTP) 相关工具(Chrome Developer Tools.Pos ...
史上最牛最强的linux学习笔记 10.shell基础
史上最牛最强的linux学习笔记 10.shell基础写在最前面: 本文是基于某站的视频学习所得,第一个链接如下: https://www.bilibili.com/video/BV1mW411i7 ...

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

目标