移动开发中的图形与渲染：概念、流程及其工作原理

图形与渲染：CPU和GPU基础

渲染是将数据（顶点、纹理、着色器）转换为屏幕上图像的过程。在移动设备上，渲染可以在CPU（中央处理器）或GPU（图形处理器）上执行。选择取决于图形类型和所需的性能。

CPU vs GPU Rendering

CPU Rendering — 顺序处理。每条指令依次执行。CPU针对逻辑和分支进行了优化。Canvas（Android）、Core Graphics（iOS）在CPU上工作。优点：精度高，支持复杂算法。缺点：处理大量图形元素时速度慢。GPU Rendering — 并行处理。数千个GPU核心同时处理顶点和像素。Metal（iOS）、Vulkan（Android）、OpenGL ES（两个平台）都使用GPU。GPU Rendering对于3D、60 FPS动画和复杂效果是必需的。现代UI框架（SwiftUI、Jetpack Compose、Flutter）默认使用GPU。

着色器（Vertex, Fragment）

着色器是在GPU上执行的程序。它们决定每个对象在屏幕上的外观。图形管线由几个阶段组成，但两个主要的着色器——Vertex Shader和Fragment Shader——在99%的情况下被使用。着色器用GLSL（OpenGL）、MSL（Metal）或HLSL（DirectX）编写。

Vertex Shader — 处理3D模型的顶点。输入：顶点位置、法线、UV坐标。输出：变换后的位置（模型→视图→投影）。Vertex Shader不能创建或删除顶点——只能变换它们。Fragment Shader — 计算光栅化三角形中每个像素（片段）的颜色。输入：来自Vertex Shader的插值数据（UV、法线）。输出：RGBA颜色。Fragment Shader负责纹理、光照（Phong、PBR）和后处理效果。现代引擎（Unity、Unreal）自动生成着色器，但理解管线对于优化是必要的。

Offscreen Rendering — 不是渲染到屏幕，而是渲染到临时缓冲区。用于：1）效果（模糊、阴影），2）渲染到纹理，3）预计算帧。Offscreen Rendering代价高昂：上下文切换和额外的渲染通道。iOS会自动为阴影和cornerRadius启用Offscreen Rendering。光栅化 — 将矢量数据（顶点+着色器）转换为像素。光栅化器确定哪些片段属于三角形并调用Fragment Shader。合成 — 将图层组装成最终图像。Core Animation合成CALayer，Android合成SurfaceFlinger图层。

CPU — 用于逻辑和Canvas。GPU — 用于图形和动画。IT Sectr建议对任何移动内容（动画、过渡、滚动）使用GPU渲染——这能确保稳定的60 FPS。

Core Animation（CALayer, CAShapeLayer）

Core Animation — Apple的GPU加速动画渲染框架。基本元素是CALayer：一个包含内容（图像、颜色、文本）的矩形区域。CALayer管理：位置、大小、背景颜色、边框、阴影、cornerRadius和变换（2D和3D）。Core Animation自动在GPU上合成图层——开发人员无需编写图形代码。

CALayer

CALayer — 一个轻量级对象（不是视图），包含内容的位图。UIButton、UILabel、UIImageView——都在内部使用CALayer。属性：frame、bounds、position、anchorPoint、transform、opacity、masksToBounds。CALayer属性的动画在GPU上进行——这是Core Animation的主要优势。CALayer.shouldRasterize — 启用图层的���栅化以缓存复杂图形。CAShapeLayer — 用于矢量图形的子类：在GPU上绘制路径。用于进度条、图表、遮罩和形状动画。CAShapeLayer.path — 可动画属性（形状变形动画）。

合成在Core Animation中——将CALayer组装成最终帧的过程。每个CALayer是GPU上一个单独的纹理。合成发生在Render Server（一个单独的进程）中。需要合成的属性：opacity、shadow、cornerRadius + masksToBounds、shouldRasterize。图层越少——合成越快。

优化（Overdraw, Offscreen Rendering）

Overdraw — 同一像素在一帧内被多次着色的情况。示例：红色背景→蓝色矩形→文本。中心像素被绘制3次。Overdraw是UI卡顿的主要原因，尤其是在较旧的设备上。iOS：Debug Color Blended Layers（Xcode）——红色区域=混合（overdraw）。Android：Debug GPU Overdraw（开发者选项）——颜色从蓝色（1x）到红色（3x+）。

Overdraw

如何减少Overdraw：1）为非透明视图使用opaque = true（iOS）。2）Android——只使用一次android:windowBackground。3）移除不可见图层。4）使用分层架构：背景（1通道）→内容（2通道）。5）避免不必要的clipChildren和clipToPadding。Offscreen Rendering — 在屏幕前渲染到缓冲区。触发器：shadow（CALayer.shadow*）、cornerRadius + masksToBounds、group opacity、shouldRasterize。Xcode：Debug Offscreen Renderer——黄色区域=offscreen。在Android上：profile GPU rendering——检查条的长度。

矢量图形（SVG, Vector Drawable）

矢量图形 — 用数学公式（路径、曲线、填充）描述的图像。矢量在缩放时不会损失质量——非常适合移动应用中的图标和插图。

SVG（Scalable Vector Graphics） — W3C标准。在移动操作系统中不直接支持。转换：在iOS上——转换为PDF矢量资源（Xcode 12+），在Android上——转换为Vector Drawable XML。Vector Drawable — Android格式。在XML中定义：<vector>包含<path>和<group>。通过AnimatedVectorDrawable支持动画。PDF Vector Assets（iOS）— Assets.xcassets中的矢量PDF。Xcode将它们编译为GPU优化纹理。SVG和Vector Drawable不支持复杂效果（模糊、渐变网格）。对于照片和渐变，请使用栅格PNG/WebP。