说明

ARKit系列文章目录

原来写过3D与AR/VR应用Debug与优化浅谈，现在苹果在 WWDC 中又一次谈到了 3D/AR 中的 Debug 功能： WWDC2018的 Session 608 - Metal Shader Debugging and Profiling 中文解说原文已发表在WWDC 2018 内参，此处为精简版。主要内容:

Geometry viewer(几何体查看器):用来3D可视化方式调试几何体
Shader debugger(着色器调试器):3D+2D可视化方式调试着色器
Enhanced shader profiler(增强型着色器分析器):配合A11耗时统计,精准到具体代码

Metal及调试工具简介

Metal包含了以下所有相关内容:

而我们今天所关注的,其实都是属于上图中开发工具中最后一个工具Metal Frame Debugger里面的新功能.下图左侧为原有功能,右侧为新增加的四个功能,本session中,我们只关注右侧中的后三个:

Geometry viewer(几何体查看器)简介

Geometry viewer可以

以3D可视化的方式查看顶点变换后的数据.
访问所有的顶点数据.
查看每个draw call的视图.

比如查看错误的三角形.点击后可查看该三角形三个顶点的索引,位置坐标,纹理坐标,法线,切线等数据.

比如查看摄像机视锥体外的物体.可旋转查看3D空间的布局. 比如可提示缺失的三角形,当顶点数据有错误时,为无穷大或NaN时,右下角会有提示.

经过分析后,如果输入数据有问题,那么就去查看3D模型是否正确;如果输入没有问题,输出有错误,那么就需要进行下一步着色器调试了.

Shader debugger(着色器调试器)简介

长期以来,Shader的调试都很困难.主要原因就是:

大量复杂的数学代码.
高度并行.每帧调用上千万次

在Unity的"Book of the Dead"中,场景中的一帧,就有上千万的顶点被调用,生成六千万的三角形. Shader debugger就长这个样子它的优点非常明显:

变量数据高度可视化
数据是来自GPU的真实数据.
灵活的单步调试,无需使用断点.
与Metal Frame Debugger集成.

Shader演练Demo 1

bug展示

首先,是一个mac版的波浪模拟程序,可以看到波浪的显示有问题,出现了明显的断崖,所以点击捕捉,进入Metal Frame Debugger:

开始调试

进入Metal Frame Debugger之后,我们首先要做的是,查看输入几何体有没有问题,点击Geometry进入Geometry viewer: 选中有问题的三角形,查看三个顶点的数据,发现输入值的Y坐标没有问题,那么很可能是Shader的问题,点击右下角Debug按钮,进入Shader debugger:

进入之后,我们先来简单认识一下这个界面及其作用:

发现问题

接着调试我们的程序,找到displacement向量,就是该偏移向量让水平出现高低不平的波动的.点击展开它的值,发现其中的问题:

追踪并分析问题

从左侧导航栏,进入该函数,查看计算过程,其中出现了NaN: 根据右侧提示的newY的值小于0,导致pow()函数计算出错,pow(x,y)功能：计算x的y次幂。说明：x应大于零，返回幂指数的结果:

修复问题

修复方法:将幂计算提前:

// 原代码
// Final tweaks to the wave 对波浪进行最后的调整
float newY = displ.y;
// Displace the water down a bit 将水体向下偏移一点
newY -= 0.1;
// Exaggerate the waves 放大波浪
newY = pow(newY, 0.95);


// 更新后代码
// Final tweaks to the wave 对波浪进行最后的调整
float newY = displ.y;
// Exaggerate the waves 放大波浪
newY = pow(newY, 0.95);
// Displace the water down a bit 将水体向下偏移一点
newY -= 0.1;

修复后效果

点击右下角刷新按钮,查看无异常后,再点击左下角的继续按钮,程序运行正常了:

Shader debugger(着色器调试器)调试详解

启动Shader debugger(着色器调试器)

Shader debugger是与Metal Frame Debugger集成的,在捕捉过视频帧之后,点击下面的调试按钮就会根据Shader的类型弹出窗口提示: 不同类型的Shader会有不同提示,比如Fragment Shader(片元着色器),会先进入PixelBuffer Inspector(像素缓冲检查器): 而Vertex Shader(顶点着色器),会先进入Geometry viewer(几何体查看器): 而Compute Shader(计算着色器),会先进入选择面板: 三种Shader的弹窗右下角,都有一个Debug按钮,点击就可以进入**Shader debugger(着色器调试器)**中.