[MetalKit]17-Using-MetalKit-part-11使用MetalKit11
本系列文章是对 metalkit.org 上面MetalKit内容的全面翻译和学习.
MetalKit系统文章目录
让我们用Metal Shading Language (MSL)
继续我们在神奇的着色器世界的旅程,接着第10部分 Part 10.用我们上次用的playground,我们接着会用MSL
数学函数来制作技术图像,用到sin
, cos
, pow
, abs
, fmod
, clamp
, mix
, step
和smoothstep
.
首先,让我们看看上次的"日食"代码.我们将从列表最后的函数开始,因为smoothstep
函数正是我们修复上次没注意到的一个问题所需要的-我们输入的图像有锯齿(即走样),如果你放大来看就会很明显:
smoothstep函数依据是左边
比右边
小.这个函数输入一个真实的数x
,当x
小于等于左侧时输出0
,当x
大于等于右侧时输出1
,否则在0
到1
之间平滑插值.step
和smoothstep
函数不同在于,step
函数在边缘处突然从0
跳到1
.smoothstep
函数在clamp后实现了立方Hermite
插值.一个改进版,名为smootherstep
,在x=0
和x=1
时一阶和二阶导数等于零,
smoothstep(X) = 3X^2 - 2X^3smootherstep(X) = 6X^5 - 15X^4 + 10X^3
复制代码
让我们实现smootherstep() 函数:
float smootherstep(float e1, float e2, float x)
{x = clamp((x - e1) / (e2 - e1), 0.0, 1.0);return x * x * x * (x * (x * 6 - 15) + 10);
}
复制代码
给定clamp() 函数一个min
值和max
值,它会将点移到最接近的可用值.输入如果小了则采用min
值,如果大了则采用max
值,如果在中间则保留原值.我们的compute
内核现在看起来像这样:
int width = output.get_width();
int height = output.get_height();
float2 uv = float2(gid) / float2(width, height);
uv = uv * 2.0 - 1.0;
float distance = distToCircle(uv, float2(0), 0.5);
float xMax = width/height;
float4 sun = float4(1, 0.7, 0, 1) * (1 - distance);
float4 planet = float4(0);
float radius = 0.5;
float m = smootherstep(radius - 0.005, radius + 0.005, length(uv - float2(xMax-1, 0)));
float4 pixel = mix(planet, sun, m);
output.write(pixel, gid);
复制代码
在继续之前还有一个函数需要关注,就是mix
.mix() 函数在x
和y
之间执行线性插补,并用a
来调节权重.返回值用x * (1 - w) + y * w
计算.在本例中,planet
颜色和sun
颜色用smootherstep
作为权重值来插补.如果你执行playground,输出图像现在已经反走样了,锯齿已经没有了:
下面我们要关注的函数是abs
和fmod
.abs() 函数简单地返回绝对值,或者一个数和0
的距离.换句话说,每个值失去符号,总是返回一个非负的值.**fmod()**函数返回浮点数的剩余小数部分(相当于整数的取模运算符%
).让我们把这两个函数用起来,看看能得到什么:
float3 color = float3(0.7);
if(fmod(uv.x, 0.1) < 0.005 || fmod(uv.y, 0.1) < 0.005) color = float3(0,0,1);
float2 uv_ext = uv * 2.0 - 1.0;
if(abs(uv_ext.x) < 0.02 || abs(uv_ext.y) < 0.02) color = float3(1, 0, 0);
if(abs(uv_ext.x - uv_ext.y) < 0.02 || abs(uv_ext.x + uv_ext.y) < 0.02) color = float3(0, 1, 0);
output.write(float4(color, 1), gid);
复制代码
输出图像看起来应该像这样
首先,我们绘制蓝色风格线,间距0.1,粗0.005.接下来,我们规格化屏幕坐标这样我们就可以工作在**[-1,1]区间,然后用红色绘制X
轴和Y
轴,粗0.02**.最后,我们绘制两个同样粗细的绿色对角线,记住x-y给我们了递减的斜率(对角线)而x+y则是递增的.
最后,让我们和讨论过的其它函数一起把sin(), cos(), fract(), dot() 和 pow() 用起来:
float2 cc = 1.1 * float2(0.5 * cos(0.1) - 0.25 * cos(0.2), 0.5 * sin(0.1) - 0.25 * sin(0.2) );
float4 dmin = float4(1000.0);
float2 z = (-1.0 + 2.0*uv) * float2(1.7, 1.0);
for(int i=0; i<64; i++) {z = cc + float2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y);dmin=min(dmin, float4(abs(0.0 + z.y + 0.5 * sin(z.x)), abs(1.0 + z.x + 0.5 * sin(z.y)), dot(z, z), length(fract(z) - 0.5)));
}
float3 color = float3(dmin.w);
color = mix(color, float3(1.00, 0.80, 0.60), min(1.0, pow(dmin.x * 0.25, 0.20)));
color = mix(color, float3(0.72, 0.70, 0.60), min(1.0, pow(dmin.y * 0.50, 0.50)));
color = mix(color, float3(1.00, 1.00, 1.00), 1.0 - min(1.0, pow(dmin.z * 1.00, 0.15)));
color = 1.25 * color * color;
color *= 0.5 + 0.5 * pow(16.0 * uv.x * (1.0 - uv.x) * uv.y * (1.0 - uv.y), 0.15);
output.write(float4(color, 1), gid);
复制代码
sin()
函数是角度的正弦
,cos()
函数显然是角度的余弦
,fract()
函数返回值的小数部分,dot()
函数返回两个向量的叉积,还有pow()
函数返回一个数的乘方.这段代码产生一个美丽的分形,一个Inigo Quilez
艺术的真实片段.输出图像应该看起来像这样:
你的任务是试着理解魔法
是如何工作的.如果你有任何问题,可以用博客中的联系方式来联系我. 源代码source code 已发布在Github上.
下次见!
[MetalKit]17-Using-MetalKit-part-11使用MetalKit11相关推荐
- 魅族android n内测报名,魅族17/Pro系列Android 11内测申请入口
魅族科技宣布,Flyme based on Android 11 内测招募现已正式开启,魅族 17 系列手机用户打开「系统更新」App 即可参与报名.首个内测版计划于当日推送报名成功后请留意系统通知名 ...
- 2022/07/17、18 day10/11:Stream流、方法引用
文章目录 1. Stream流 1.1 引言 1.2 流式思想概述 1.3 获取流 1.4 常用方法 1.5 练习:集合元素处理(传统方式) 1.6 练习:集合元素处理(Stream方式) 2. 方法 ...
- [c++17] --- c++17相对于c++11的新增特性
1 新增语言特性 1.1 New attributions [[nodiscard]].[[maybe_unused]]等. 1.2 constexpr if(编译时if) constexpr if: ...
- [MetalKit]47-Introducing Metal 3 Metal 3简介
本系列文章是对 metalkit.org 上面MetalKit内容的全面翻译和学习. MetalKit系统文章目录 上周在WWDC 2019上宣布了Metal 3,Apple公布了相关数字: Meta ...
- [MetalKit]7-Using-MetalKit-part-6使用MetalKit6
本系列文章是对 metalkit.org 上面MetalKit内容的全面翻译和学习. MetalKit系统文章目录 让我们来看看新的MetalKit框架和以前的Metal框架有什么不同.它们是同时共存 ...
- [MetalKit]45-Using eGPUs with Metal 在 eGPU上使用 Metal
本系列文章是对 metalkit.org 上面MetalKit内容的全面翻译和学习. MetalKit系统文章目录 对于那些像我一样需要原生 GPU 性能,却只有一个笔记本电脑,又不想再买一个台式机的 ...
- [MetalKit]2-Using-MetalKit-part-1使用MetalKit1
本系列文章是对 metalkit.org 上面MetalKit内容的全面翻译和学习. MetalKit系统文章目录 MetalKit 框架是在 WWDC 2015 上发布的,它给原Metal框架带来了 ...
- [MetalKit]34-Working-with-memory-in-Metal内存管理
本系列文章是对 metalkit.org 上面MetalKit内容的全面翻译和学习. MetalKit系统文章目录 今天我们关注一下使用GPU时的内存管理.Metal框架将内存资源定义为MTLBuff ...
- [MetalKit]14-Ray-tracing-in-a-Swift-playground5射线追踪5
本系列文章是对 metalkit.org 上面MetalKit内容的全面翻译和学习. MetalKit系统文章目录 让我们继续上周的工作完成ray tracer射线追踪器.现在我们知道如何生成不同材料 ...
最新文章
- monostate 状态_为什么Borg模式比Python中的Singleton模式更好
- 完美的优化目标,人工智能的盲点
- 金铲铲之战高峰期1万人排队,LOL手游如果公测会怎样?
- Seaborn:Python
- C程序对整数中设置为1的位数进行计数
- linux运行时命令找不到,linux - 在运行Bash脚本时找不到命令,但是在直接运行命令时有效 - 堆栈内存溢出...
- jqxWidgets 常用代码
- python上下文管理器细读
- vue + elementui 通过父子组件实现弹框
- 运用.NET Framework中的类来创建看上去很专业的报表。
- Html常用正则表达式
- ewebeditor php漏洞,ewebeditor for php任意文件上传漏洞
- keil中 如何解决warning L13:Recursive call to Function 及overlay解释
- Multi-Instance Multi-Label Learning Networks for Aspect-Category Sentiment Analysis
- Linux虚拟机下WWW(HTTP)服务器的搭建与使用(详细)
- 【蓝桥杯】水题 基础练习 回文数 c语言
- 多线程使用场景(经典必看)
- 【软件测试】python完成接口测试示例
- 如何推动智慧交通普惠发展 | 工信部印发民用无人机《指导意见》
- Windows 隐藏小电影?