建一个网站素材哪里来,汽车最好网站建设,推广页面设计,上海做网站多少费用光和阴影是使场景流行的重要要求。通过一些着色器艺术#xff0c;您可以突出重要的对象、描述天气和一天中的时间并设置场景的气氛。即使您的场景由卡通对象组成#xff0c;如果您没有正确地照亮它们#xff0c;场景也会变得平淡无奇。
最简单的光照方法之一是 Phong 反射模…
光和阴影是使场景流行的重要要求。通过一些着色器艺术您可以突出重要的对象、描述天气和一天中的时间并设置场景的气氛。即使您的场景由卡通对象组成如果您没有正确地照亮它们场景也会变得平淡无奇。
最简单的光照方法之一是 Phong 反射模型。它以 Bui Tong Phong 的名字命名他在 1975 年发表了一篇论文扩展了旧的光照模型。这个想法不是尝试复制光线和反射物理学而是生成看起来逼真的图片。
这种模型已经流行了 40 多年是开始使用几行代码来学习如何伪造光照的好地方。所有计算机图像都是假的但有更现代的实时渲染方法可以模拟光的物理特性。
在第11章“地图和材质”中您将了解基于物理的渲染PBR这是您的渲染器最终将使用的光照技术。PBR 是一种更逼真的光照模型但 Phong 易于理解和入门。
starter项目
打开本节的starter项目。
起始项目的文件现在位于合理的分组中。在 Game 组中项目包含一个新的游戏控制器类该类进一步分离了场景更新和渲染。Renderer 现在独立于 GameScene。GameController 初始化并拥有 Renderer 和 GameScene。在每一帧上作为 MetalView 的代理GameController 首先更新场景然后将其传递给 Renderer 进行绘制。 在 GameScene.swift 中新场景包含一个球体和一个指示场景旋转的 3D 小工具。 Utility 组中的 DebugLights.swift 包含一些代码您稍后将使用这些代码来调试光源的位置。点光源将绘制为点太阳的方向将绘制为线条。
熟悉代码,构建并运行项目。 为了围绕球体旋转并充分欣赏您的光照相机是 ArcballCamera 类型。按 1在 Alpha 键上方将摄像机设置为前视图按 2 将摄像机重置为默认视图。GameScene 包含用于此功能的按键代码。 您可以看到球体颜色非常平坦。在本章中您将添加着色光照和镜面反射高光。 颜色表示
在本书中您将学习必要的基础知识以渲染光线、颜色和简单的着色。然而光的物理学是一个庞大而迷人的话题有许多书籍和很大一部分互联网专门用于讲解它。您可以在本章 resources 目录中的 references.markdown 中找到进一步的阅读内容。
在现实世界中不同波长的光的反射赋予对象颜色。吸收所有光的对象表面是黑色的。在计算机世界中像素显示颜色。像素越多分辨率越好这使得生成的图像更清晰。每个像素都由子像素组成。这些是预先确定的单一颜色红色、绿色或蓝色。通过打开和关闭这些子像素根据颜色深度屏幕可以显示人眼可见的大部分颜色。
在 Swift 中您可以使用该像素的 RGB 值来表示颜色。例如float31 0 0 是红色像素float30 0 0 是黑色float31 1 1 是白色。 从着色的角度来看您可以通过将两个值相乘来将红色表面与灰色光照组合在一起 let result float31.0 0.0 0.0 * float30.5 0.5 0.5 结果是 0.5 0 0这是一个较深的红色着色。 对于简单的 Phong 光照我们可以使用表面的斜率。物体表面离光源越倾斜表面就越暗。 法线
表面的斜率可以确定表面反射光线的程度。 在下图中点 A 正对着太阳将接收到最多的光点B不那么直接朝向太阳但仍会接收到一些光线点 C 完全背对太阳接收不到任何光线。 注 在现实世界中光线从一个表面反射到另一个表面如果房间内有任何光线则物体会有一些反射这些反射会柔和地照亮所有其他物体的背面。这是全局光照。Phong 光照模型单独照亮每个对象称为局部光照。 图中的虚线与表面相切。切线是最能描述曲线在某一点处斜率的直线。 从圆中出来的线与切线成直角。这些称为表面法线您第一次遇到这些法线是在第 7 章 “片段函数”中。 光照类型
计算机图形学中有几个标准的光源选项每个选项都起源于现实世界。 • Directional Light沿单个方向发送光线。太阳是定向光。 • Point Light像灯泡一样向各个方向发送光线。 • Spotlight向圆锥体定义的有限方向发送光线。手电筒或台灯将是聚光灯。
定向光
一个场景中可以有许多光照。事实上在工作室摄影中只有一个灯光是非常不寻常的。通过将灯光放入场景中可以控制阴影落下的位置和黑暗程度。在本章中您将向场景添加多个灯光。 您将创建的第一种光照是太阳。太阳是向各个方向发射光线的点光源但对于计算机建模您可以将其视为定向光。它是一个遥远的强大光源。当光线到达地球时光线似乎是平行的。在阳光明媚的日子里在外面检查一下——你所看到的一切都有它的影子朝着同一个方向移动。 要定义光源类型您需要创建一个 GPU 和 CPU 都可以读取的 Light 结构体以及一个描述 GameScene 光照的 SceneLighting 结构体。 ➤ 在 Shaders 组中打开 Common.h在 #endif 之前创建您将使用的光源类型的枚举
typedef enum {unused 0,Sun 1,Spot 2,Point 3,Ambient 4
} LightType;
➤ 在此之下添加定义光源的结构体
typedef struct {LightType type;vector_float3 position;vector_float3 color;vector_float3 specularColor;float radius;vector_float3 attenuation;float coneAngle;vector_float3 coneDirection;float coneAttenuation;
} Light;
此结构体保存光的位置和颜色。在学习本章时您将了解其他属性。 ➤ 在 Game 组中创建一个新的 Swift 文件并将其命名为 SceneLighting.swift。然后添加以下内容
struct SceneLighting {static func buildDefaultLight() - Light {var light Light()light.position [0, 0, 0]light.color [1, 1, 1]light.specularColor [0.6, 0.6, 0.6]light.attenuation [1, 0, 0]light.type Sunreturn light}
}
此文件将保存 GameScene 的光照。您将拥有多个光源buildDefaultLight 将创建一个基本光源。
➤ 在 SceneLighting 中为太阳定向光源创建一个属性
let sunlight: Light {var light Self.buildDefaultLight()light.position [1, 2, -2]return light
}()
position 在世界空间中。这会在场景的右侧球体的前方放置一个光源。球体将放置在世界的原点处。 ➤ 创建一个数组来保存您即将创建的各种光源
var lights: [Light] []
➤ 添加初始化器 init() {lights.append(sunlight)
}
您将在初始化器中添加场景的所有灯光。 ➤ 打开 GameScene.swift并将 lighting 属性添加到 GameScene let lighting SceneLighting()
您将在 fragment 函数中执行所有光照着色因此您需要将光源数组传递给该函数。Metal Shading Language 没有动态数组功能因此无法找出数组中的项目数。您将此值传递给 Params 中的片段着色器。 ➤ 打开 Common.h并将这些属性添加到 Params 中
uint lightCount;
vector_float3 cameraPosition;
稍后您将需要 Camera Position 属性。 在 Common.h 中向 BufferIndices 添加新索引
LightBuffer 13 您将使用此索引将光照详细信息发送到 fragment 函数。 ➤ 打开 Renderer.swift并将其添加到 updateUniformsscene 中
params.lightCount UInt32(scene.lighting.lights.count)
您将能够在片段着色器函数中访问此值。 ➤ 在 drawscenein 中在 scene.models 中 model 之前添加以下内容
var lights scene.lighting.lights
renderEncoder.setFragmentBytes(lights,length: MemoryLayoutLight.stride * lights.count,index: LightBuffer.index)
在这里您将索引13缓冲区中的灯光数组发送到 fragment 函数。 您现在已经在 Swift 端设置了一个太阳光。您将在 fragment 函数中执行所有实际的光照计算并了解有关光照属性的更多信息。
Phong反射模型
在 Phong 反射模型中有三种类型的光照反射。您将计算每个颜色然后将它们相加以生成最终颜色。 • 漫反射理论上照射到表面的光线会以围绕该点的表面法线反射的角度反射。然而表面在微观上是粗糙的因此光线会向各个方向反射如上图所示。这将产生漫反射颜色其中光强度与入射光与曲面法线之间的角度成正比。在计算机图形学中这个模型被称为朗伯反射率以 1777 年去世的约翰·海因里希·兰伯特 Johann Heinrich Lambert 的名字命名。在现实世界中这种漫反射通常适用于暗淡、粗糙的表面但具有最朗伯特性的表面是人造的Spectralon https://en.wikipedia.org/wiki/Spectralon用于光学元件。 • Specular表面越光滑越闪亮并且光线从表面反射的方向就越少。镜子完全从表面法线反射没有偏转。闪亮的物体会产生可见的镜面高光渲染镜面反射可以让观众了解物体的表面类型无论汽车是旧车残骸还是刚从销售地新鲜出炉。 • 环境光在现实世界中光线会到处反射因此被遮蔽对象很少是全黑的。这是环境反射。
表面颜色由自发光物体表面颜色加上环境光、漫反射和镜面反射的贡献组成。对于漫反射和镜面反射要找出表面在特定点应接收多少光您只需找出入射光方向与表面法线之间的角度即可。 点乘
幸运的是有一个简单的数学运算来发现两个向量之间的角度称为点积。 和 其中 ||A||表示向量 A 的长度或大小。 更幸运的是simd 和 Metal Shading Language 都有一个函数 dot()来获取点积因此您不必记住公式。 除了找出两个向量之间的角度外您还可以使用点积来检查两个向量是否指向同一方向。
将两个向量的大小调整为单位向量 — 即长度为 1 的向量。您可以使用 normalize 函数执行此操作。如果两个单位向量平行且指向同一个方向则点积结果将为 1。如果它们是平行的但方向相反则结果将为 -1。如果它们成直角正交则结果将为 0。 看上图如果黄色太阳向量垂直向下蓝色法线向量垂直向上则点积将为 -1。该值是两个向量之间的余弦角。余弦的优点在于它们的值始终是介于 -1 和 1 之间因此您可以使用此范围来确定光线在某个点的亮度。 以下面示例为例 太阳从天而降方向矢量为 [2 -2 0]。向量 A 是 [-2 2 0] 的法向量。这两个向量指向相反的方向因此当您将向量转换为单位向量归一化它们时它们的点积将为 -1。 向量 B 是 [0.3 2 0] 的法向量。太阳光是定向光因此使用相同的方向向量。归一化后太阳光和 B 的点积为 -0.59。
此 Playground 代码演示了计算。 注意第 8 行之后的结果表明使用浮点时应始终小心因为结果永远不会精确。切勿使用表达式例如 if x 1.0 - 应始终使用 或 检查。
在片段着色器中您将能够获取这些值并使用点乘乘以片段颜色以获得片段的亮度。
漫反射
从太阳光中着色并不取决于摄像机的位置。旋转场景时将旋转世界包括太阳。太阳的位置将位于世界空间中您需要将模型的法线放入同一世界空间以便能够根据太阳光方向计算点积。事实上我们可以选择任何空间只需要把两个点乘的向量变换到同一个空间即可。
为了能够在 fragment 函数中评估表面的斜率您需要重新定位 vertex 函数中的法线其方式与之前重新定位顶点位置的方式大致相同。您需要将法线添加到顶点描述符中以便顶点函数可以处理它们。
➤ 打开 ShaderDefs.h并将这些属性添加到 VertexOut 中
float3 worldPosition;
float3 worldNormal;
它们将持有世界空间中的顶点位置和顶点法线。
计算法线的新位置与顶点位置计算略有不同。MathLibrary.swift 包含一个 matrix 方法用于从另一个矩阵创建普通矩阵。这个法线矩阵是一个 3×3 矩阵因为首先您将在不需要投影的世界空间中进行光照其次平移对象不会影响法线的斜率。因此您不需要第四个 W 维度。但是如果沿一个方向非线性缩放对象则对象的法线不再是正交的因此此方法将不起作用。只要你决定你的引擎不允许非线性缩放那么你可以使用模型矩阵左上角的 3×3 部分这就是你在这里要做的。
➤ 打开 Common.h 并将此矩阵属性添加到 Uniforms
matrix_float3x3 normalMatrix;
这将在世界空间中保存法线矩阵。 ➤ 在 Game 组中打开 Rendering.swift在render(encoder:uniforms:params:)中设置 uniforms.modelMatrix后添加这个
uniforms.normalMatrix uniforms.modelMatrix.upperLeft
这将从模型矩阵创建法线矩阵。 ➤ 打开 Vertex.metal在 vertex_main 中分配position后添加以下内容
float4 worldPosition uniforms.modelMatrix * in.position;
在转换为相机和投影空间之前您可以持有顶点的世界位置。 ➤ 定义 out 时填充 VertexOut 属性
.worldPosition worldPosition.xyz / worldPosition.w,
.worldNormal uniforms.normalMatrix * in.normal
光栅器按position执行透视除法如第 6 章 “坐标空间”中所述。要确保处理所有缩放问题请在此处对 worldPosition除以 w。 在本章的前面部分您将 LightBuffer索引缓冲区中Renderer 的 lights 数组发送到fragment 函数但您尚未更改 fragment 函数以接收该数组。 ➤ 打开 Fragment.metal 并将以下内容添加到 fragment_main 的参数列表中
constant Light *lights [[buffer(LightBuffer)]],
使用c创建着色函数
通常您需要从多个文件访问 C 函数。光照函数是您可能希望分离出来的一些函数的一个很好的示例因为您可以拥有各种光照模型这些模型可能会调用一些相同的代码。 要从多个 .metal 文件中调用函数 1. 使用要创建的函数的名称设置头文件。 2. 创建一个新的 .metal 文件并导入头文件如果您打算使用该文件中的结构体则还要导入桥接头文件 Common.h。 3. 在此新文件中创建光照函数。 4. 在现有的 .metal 文件中导入新的头文件并使用光照函数。 在 Shaders 组中创建一个名为 Lighting.h 的新 Header File。不要将其添加到target中。 ➤ 在 #endif /* 之前添加此函数头 Lighting_h */
#import Common.h
float3 phongLighting(float3 normal,float3 position,constant Params params,constant Light *lights,float3 baseColor);
在这里您将定义一个将返回 float3 的 C 函数。 在 Shaders 组中创建一个名为 Lighting.metal 的新 Metal 文件。将其添加到target。 ➤ 添加此新功能
#import Lighting.h
float3 phongLighting(float3 normal,float3 position,constant Params params,constant Light *lights,float3 baseColor) {return float3(0);
}
您创建一个返回float3 零值的新函数。您将在 phongLighting 中构建代码来计算这个最终的光照值。
➤ 打开 Fragment.metal#import “Common.h” 替换为
#import Lighting.h
现在您将能够在此文件中使用 phongLighting。 ➤ 在 fragment_main 中替换 return float4baseColor 1;为
float3 normalDirection normalize(in.worldNormal);
float3 color phongLighting(normalDirection,in.worldPosition,params,lights,
baseColor );
return float4(color, 1);
在这里您将世界法线设置为单位向量并使用必要的参数调用新的光照函数。
如果您现在构建并运行该应用程序您的模型将呈现为黑色因为这是您当前从 phongLighting 返回的颜色。 ➤ 打开 Lighting.metal并替换 return float30;为
float3 diffuseColor 0;
float3 ambientColor 0;
float3 specularColor 0;
for (uint i 0; i params.lightCount; i) {Light light lights[i];switch (light.type) {
case Sun: {
break; }
case Point: {
break; }
case Spot: {
break; }case Ambient: {
break; }case unused: {
break; }
} }
return diffuseColor specularColor ambientColor; 这里是您计算所有光照的代码框架。您将累积得到最终的片段颜色由漫反射、镜面反射和环境光组成。 ➤ 在 case Sun 的break前面添加以下内容
// 1
float3 lightDirection normalize(-light.position);
// 2
float diffuseIntensity saturate(-dot(lightDirection, normal));
// 3
diffuseColor light.color * baseColor * diffuseIntensity;
浏览此代码
1. 将光线的方向设为单位向量。 2. 计算两个向量的点积。当片段完全指向光线时点积将为 -1。让这个值为正数更易于进一步计算因此您取点积的负值。saturate 通过截断负数来确保该值介于 0 和 1 之间。这为您提供了表面的斜率从而提供了漫反射的强度。 3. 将基础颜色乘以漫反射强度以获得漫反射着色。如果有多个太阳光则 diffuseColor 将累积漫反射着色。 ➤ 构建并运行应用程序。 您可以通过从 phongLighting 返回中间计算来对结果进行健全性检查。下图显示了前视图中的 normal 和 diffuseIntensity。
注意要在应用程序中获取前视图请在运行时按 Alpha 键上方的“1”。“2” 将重置为默认视图。 Utility 组中的 DebugLights.swift 和 DebugLights.metal 具有一些调试方法以便您可以直观地了解光源的位置。 ➤ 打开 DebugLights.swift并删除文件顶部和底部的 /* 和 */。在本章中添加代码之前此文件不会编译但现在可以编译。 ➤ 打开 Renderer.swift在 drawscenein 的末尾在 renderEncoder.endEncoding 之前添加以下内容
DebugLights.draw(lights: scene.lighting.lights,encoder: renderEncoder,uniforms: uniforms)
此代码将显示线条以可视化太阳光的方向。
➤ 构建并运行应用程序。 红线显示平行太阳光方向矢量。旋转场景时可以看到最亮的部分是面向太阳的部分。
注意调试方法使用 .line 作为渲染类型。遗憾的是线宽在 GPU 上是不可配置的它们可能会在某些角度因线条太细而无法渲染时消失。
这个着色效果令人愉悦但不准确。看看球体的背面。球体的背面是黑色的但是您可以看到绿色环绕的顶部是亮绿色的因为它朝上。在现实世界中周围环境会被球体阻挡因此处于阴影中。但是您目前没有考虑遮挡只有在第 13 章 “阴影” 中掌握阴影后才考虑这个问题。
环境反射
在现实世界中颜色很少是纯黑色。到处都是光线反射。要模拟这种情况您可以使用环境光照。您将找到场景中灯光的平均颜色并将其应用于场景中的所有表面。
➤ 打开 SceneLighting.swift并添加一个 ambient light 属性
let ambientLight: Light {var light Self.buildDefaultLight()light.color [0.05, 0.1, 0]light.type Ambientreturn light
}()
此光照略带绿色。
➤ 将以下内容添加到 init 的末尾 lights.append(ambientLight)
➤ 打开 Lighting.metalcase Ambient的break上面添加以下内容
ambientColor light.color;
➤ 构建并运行应用程序。场景现在呈绿色就像有绿灯在周围反射一样。 镜面反射
在 Phong 反射模型中最后但并非最不重要的一点是镜面反射。您现在有机会在球体上涂上一层闪亮的清漆。镜面高光取决于观察者的位置。如果您经过一辆闪亮的汽车您只会在某些角度看到高光。 光线进入 L 并被绕着法线 N反射 R 。如果观察者 V 位于反射 R 周围的特定圆锥体内则观察者将看到镜面高光。该圆锥体是指数光泽度参数。表面越闪亮镜面反射高光就越小、越强烈。 在本例中观察者是您的相机因此您需要将相机坐标再次传递到 fragment 函数。之前您在 params 中设置了一个 cameraPosition 属性您将使用它来传递相机位置。 ➤ 打开 Renderer.swift然后在 updateUniformsscene 中添加以下内容
params.cameraPosition scene.camera.position
scene.camera.position 已在世界空间中并且您已将参数传递给 fragment 函数因此您无需在此处执行进一步操作。
➤ 打开 Lighting.metal然后在 phongLighting 中将以下变量添加到函数顶部 float materialShininess 32;
float3 materialSpecularColor float3(1, 1, 1);
它们包含光泽度因子和镜面反射颜色的表面材质属性。由于这些是表面属性您应该从每个模型的材质中获取这些值您将在下一章中执行此操作。 ➤ 在 case Sun的break前面添加以下内容
if (diffuseIntensity 0) {// 1 (R)float3 reflection reflect(lightDirection, normal);
// 2 (V)float3 viewDirection normalize(params.cameraPosition);// 3float specularIntensity pow(saturate(dot(reflection, viewDirection)),materialShininess);specularColor light.specularColor * materialSpecularColor* specularIntensity;
}
浏览此代码 1. 为了计算镜面反射颜色您需要 L ight、R eflection、N ormal 和 View。您已经有 L 和 N因此在这里使用 Metal Shading Language 函数 reflect 来获取 R。 2. 您需要 V 片段和相机之间的视图向量。 3. 现在您计算镜面反射强度。您可以使用点积找到反射和视图之间的角度使用 saturate 将结果限制在 0 和 1 之间并使用 pow 将结果提高到光泽度。然后您可以使用此强度来确定片段的镜面反射颜色。
➤ 构建并运行应用程序以查看您完成的照明。 尝试将材质光泽度从 2 更改为 1600。在第11章“地图和材质”中您将了解如何从模型中读取材质和纹理属性以更改其颜色和照明。 您已经为太阳光创建了足够逼真的光照情况。您可以使用点光源和聚光灯为场景添加更多变化。 点光源
在太阳光中您将位置转换为平行方向向量。与太阳光相反而点光源则向所有方向发射光线。 灯泡只会照亮一定半径的区域超过该半径后一切都是黑暗的。因此您还将指定光线不会无限传播的衰减。 光线衰减可以突然或逐渐发生。衰减的原始 OpenGL 公式为 其中 x 是常数衰减因子y 是线性衰减因子z 是二次衰减因子。 该公式给出了弯曲的衰减。您将用 float3 表示 xyz。完全没有衰减将是 float31 0 0 — 将 x、y 和 z 代入公式得到值 1。 ➤ 打开 SceneLighting.swift并向 SceneLighting 添加点光源属性
let redLight: Light {var light Self.buildDefaultLight()light.type Pointlight.position [-0.8, 0.76, -0.18]light.color [1, 0, 0]light.attenuation [0.5, 2, 1]return light
}() 聚光
在本章中您将创建的最后一种光源类型是聚光灯。这会向有限的方向发送光线。想想手电筒光线从一个小点发出但当它照射到地面时它是一个更大的椭圆。
您可以定义圆锥体角度以包含具有圆锥体方向的光线。我们还要定义一个衰减幂次来控制椭圆边缘的光照衰减。 打开 SceneLighting.swift,添加一个新的光照对象:
lazy var spotlight: Light {var light buildDefaultLight()light.position [0.4, 0.8, 1]light.color [1, 0, 1]light.attenuation float3(1, 0.5, 0)light.type Spotlightlight.coneAngle Float(40).degreesToRadianslight.coneDirection [-2, 0, -1.5]light.coneAttenuation 12return light
}()
本光照和点光源有点类似不过增加了圆锥角度方向以及圆锥衰减因子。
在init(metalView) 添加这个光照到光照数组中。
lights.append(spotlight)
打开 Lighting.metal然后在 phongLighting 中在 case Spot 的 break 上方添加以下代码
// 1
float d distance(light.position, position);
float3 lightDirection normalize(light.position - position);
// 2
float3 coneDirection normalize(light.coneDirection);
float spotResult dot(lightDirection, -coneDirection);
// 3
if (spotResult cos(light.coneAngle)) {float attenuation 1.0 / (light.attenuation.x light.attenuation.y * d light.attenuation.z * d * d);
// 4attenuation * pow(spotResult, light.coneAttenuation);float diffuseIntensity saturate(dot(lightDirection, normal));float3 color light.color * baseColor * diffuseIntensity;color * attenuation;diffuseColor color;
}
此代码与点光源代码非常相似。浏览注释 1. 计算距离和方向就像计算点光源一样。这束光可能在聚光锥体外。 2. 计算该光线方向与聚光源指向的方向之间的余弦角即点积。 3. 如果该结果超出圆锥角则忽略该射线。否则计算点光源的衰减。指向同一方向的向量的点积为 1.0。 4. 使用 coneAttenuation 作为幂次来计算聚光源边缘的衰减。
➤ 构建并运行应用程序。 尝试更改各种衰减值。锥体角度为 5°然后衰减向量为(1, 0, 0)锥体衰减因子为 1000 将产生非常小的聚焦柔光而 20°的锥体角度和 1 的锥体衰减因子将产生锐利的圆形光。 参考
https://zhuanlan.zhihu.com/p/391592709
https://zhuanlan.zhihu.com/p/392622099
