iOS 图像处理iOS音视频开发Metal专辑

Metal入门资料014-渲染灯光效果和3D效果

2018-07-31  本文已影响2人  张芳涛

写在前面:

对Metal技术感兴趣的同学,可以关注我的专题:Metal专辑
也可以关注我个人的简书账号:张芳涛
所有的代码存储的Github地址是:Metal

正文

让我们来看看第13部分中我们离开的地方。使用我们上次工作的同一个Playground,我们今天将学习照明和3D物体。 还记得我们几周前做过的日食吗? 它回来了! 好吧,我们要去除太阳,这次只关注地球。

首先,让我们清理我们的内核只包含这些代码:

int width = output.get_width();
int height = output.get_height();
float2 uv = float2(gid) / float2(width, height);
uv = uv * 2.0 - 1.0;
float radius = 0.5;
float distance = length(uv) - radius;
output.write(distance < 0 ? float4(1) : float4(0), gid);

几个星期前你肯定会认出这些代码。 我们唯一做的是用黑色替换外圈颜色,用白色替换内圈颜色。 输出图像应如下所示:

效果图

到现在为止还挺好。 这个星球看起来很平坦,照明分布太均匀,看起来不真实。 我们接下来解决这个问题吧。 几何学告诉我们,为了找到球体上的任何点,我们需要球体方程:

(x - x_0)^2 + (y - y_0)^2 + (z - z_0)^2 = r^2

在我们的特殊情况下,x0,y0和z0都是0,因为我们的球体位于屏幕的中心。 求解z给出了行星颜色的值,所以让我们用这些行替换内核中的最后一行:

float planet = float(sqrt(radius * radius - uv.x * uv.x - uv.y * uv.y));
planet /= radius;
output.write(distance < 0 ? float4(planet) : float4(0), gid);

显示的效果如下:

效果图

正如您所料,现在计算的颜色从圆心开始以全白色开始,在外圆上以全黑结束。 为了实现这一点,我们不得不将颜色除以半径,以便将我们的范围标准化为z值的[0,1]间隔,从而为我们提供全范围的光效。 我们实际上假装光源位于(0,0,1)。 这引出了下一个主题:lighting

Lighting是赋予我们色彩生命的东西。 为了在场景中有灯光,我们需要计算每个坐标的'normal'(法线)。 法线向量在表面上垂直,向我们显示表面在每个坐标处“指向”的位置。 用这些行替换最后两行:

float3 normal = normalize(float3(uv.x, uv.y, planet));
output.write(distance < 0 ? float4(float3(normal), 1) : float4(0), gid);

请注意,我们已经在行星变量中得到了z的值。 输出图像应如下所示:

效果图

这可能不是我们想要看到的,但至少我们现在知道在计算每个标准化坐标处的颜色时法线是什么样的。 接下来,让我们创建一个位于左侧(负x)和稍后位置(正z)的光源。 用这些行替换最后一行:

float3 source = normalize(float3(-1, 0, 1));
float light = dot(normal, source);
output.write(distance < 0 ? float4(float3(light), 1) : 
float4(0), gid);

我们采用了一种称为Lambertian
(漫射)光的基本光模型,我们需要将法线与标准化光源相乘。 我们将在以后的文章中详细讨论Lighting,但是,如果您有兴趣了解有关照明模型的更多信息,这里有一个很好的资源供您参考。 输出图像应如下所示:

效果图

还记得上次我们的内核还给我们一个统一的计时器吗? 用这个替换源代码行:

float3 source = normalize(float3(cos(timer), sin(timer), 1));

通过使用cossin函数,我们给光源一个圆周运动。 使用圆的参数方程,xy都在-11的范围内。 输出图像应如下所示:

效果图

我们如何在场景(天空中的行星)中看到漂亮的照明物体,然而,物体仍然呈现出均匀的表面。 我们可以通过两种方式使其看起来更逼真:要么对其应用纹理,要么为行星颜色添加一些噪点。 源代码点击我

上一篇下一篇

猜你喜欢

热点阅读