Compose 跨平台上面的 AGSL Shader

借助 AGSL Shader 突破 Compose 跨平台的边界

借助Compose和 Shader 在跨平台上打造惊艳图形

Compose 跨平台技术近年来备受关注, 尤其是在去年 Google I/O 大会上正式宣布支持后. 然而, 在这个不断发展的领域中, 持续探索新挑战至关重要. 这促使我研究在该场景下使用 Shader 的可行性. 本文将演示如何使用 AGSL 创建 Shader , 并实现其在不同平台上的无缝运行.

为了说明这一点, 我开发了一个简单应用, 其中 Shader 扮演核心角色. 该项目名为 Photo-FX, 可在 GitHub 上获取(同时提供基于网页的实时版本 在这里). 该应用允许用户选择一张照片并应用多种效果, 同时可调整所选效果的具体参数:

YouTube

Shader 的解剖结构 🧩

无需担心------这并非关于Shonda Rhimes获奖电视剧的讨论. 相反, 我们将深入探索 Shader 的精彩世界及其使用方法. 系好安全带!

简单来说, Shader 是可插入图形管道不同阶段的代码片段, 由 GPU 执行. 根据插入位置的不同, 它们的名称和功能可能会略有差异. Shader 有多种类型, 包括片段 Shader , 顶点 Shader , 几何 Shader 和细分 Shader 等.

我们将重点关注第一种类型: 片段 Shader (也称为像素 Shader ). 这些 Shader 特别重要, 因为从 Android 13 开始, 我们可以轻松地与它们进行交互并将其集成到 Compose 中.

片段 Shader

要理解片段 Shader , 首先需要了解它们运行的上下文. 片段 Shader 是 GPU 程序, 会在屏幕缓冲区中的每个像素上并行运行. 其主要功能是计算每个像素的最终颜色.

你可以将片段 Shader 视为一个具有两个关键组件的函数:

• 输入: 正在处理的像素的坐标.
• 输出: 为该特定像素确定的颜色.

这个过程会同时对屏幕缓冲区中的所有像素进行. 下图展示了屏幕缓冲区中几个像素的这个过程:

Github-asset

编程语言: AGSL

要编写 Shader , 我们必须使用一种称为着色语言的领域特定编程语言. 着色语言与传统编程语言在几个关键方面有所不同:

• 并行执行: 如前所述, 着色语言专为在GPU上运行而设计, 支持多线程并行执行.
• 数据类型与精度: 着色语言包含专用数据类型(如向量和矩阵), 并支持不同精度Modifier 以优化性能和内存使用.
• 输入与输出: Shader 通常从CPU接收输入, 并将输出传递给管道的下一阶段或帧缓冲区, 依赖于图形API进行通信.
• 缺乏通用编程的标准库: 着色语言缺乏用于文件输入输出, 网络或线程等通用任务的标准库. 相反, 它们专注于数学和图形操作.

我们在 Android 中使用的着色语言是 AGSL(Android 图形着色语言), 它本质上与 Skia 库定义的 SKSL 着色语言相同. Skia 是 Android 和 Compose Multiplatform 中所有低级图形处理的基石.

AGSL 在某些方面与 Khronos 集团定义的 GLSL 着色语言存在差异------Khronos 集团是一个行业联盟, 致力于制定图形, 计算和媒体的开放标准. Khronos Group 负责 OpenGL 规范的开发和维护, 其中包括 GLSL. 尽管这两种语言在语法, 语句, 某些类型和内置函数等方面有许多相似之处, 但 AGSL 和 GLSL 之间最显著的差异在于它们的坐标系统. 在 GLSL 中, 原点通常位于屏幕的左下角, 而在 AGSL 中, 原点位于屏幕的左上角.

让我们探索一个简单的片段 Shader , 它将屏幕缓冲区填充为红色:

half4 main(vec2 fragCoord) { 
    return half4(1.0, 0.0, 0.0, 1.0);
}

如你所见, AGSL是一种类似C的语言, 每个语句末尾都以分号结尾.

在第1行, 我们定义了主函数, 这是进入 Shader 的入口点. 该函数有一个输入参数, 表示像素坐标. 我们将其命名为fragCoord, 但你可以使用任何适合你的名称.

在第 2 行, 我们创建了一个 half4 类型的值, 该类型表示四个 16 位浮点数. 此值存储我们正在绘制的像素的颜色------在本例中为红色.

下图显示了此 Shader 生成的效果:

就这样------我们的第一个 Shader ! 这只是我们踏入 Shader 世界之旅的开端!

uniform

为了让效果更丰富, 我们可以提供额外数据来影响生成的视觉效果. 这些数据将在构成单个屏幕缓冲区的所有并行 Shader 执行中共享. 要定义此共享数据, 我们使用 uniform 关键字放在数据类型之前. 我们可以发送给 Shader 的数据类型有限: 整数, 浮点数和 Shader . 例如, 我们可以发送屏幕缓冲区尺寸以沿 x 轴创建线性渐变, 如下面的代码片段所示:

uniform float2 resolution;
uniform float4 colour;
half4 main(vec2 fragCoord) {
    return half4(colour.rgb * fragCoord.x / resolution.x, 1.);
}

在第 1 行, 我们定义了一个名为 resolution 的 uniform 变量, 类型为 float2, 表示包含两个浮点数的向量. 在第 2 行, 我们定义了另一个名为 colour 的 uniform 变量, 表示用于绘制渐变的颜色 RGBA 值.

第 5 行是关键部分. 与我们之前讨论的第一个 Shader 类似, 我们返回当前调用的颜色. 在此情况下, 我们计算 fragCoord.x 与 resolution.x 的比值, 将当前 x 坐标值映射到 0.0 到 1.0 的范围. 该值随后与输入颜色 colour 相乘, 生成新的颜色值, 从而绘制出从黑色到输入颜色的水平渐变, 如下方实时示例所示: Github-asset 已添加一个滑块, 允许你修改输入颜色值. 欢迎尝试!

Compose Multiplatform 内部 ⚒️

在深入探讨为 Kotlin 跨平台项目添加 Shader 的可用 API 之前, 让我们先看看使 Compose 跨平台能够无缝运行的基本构建块. 请考虑以下图表:

该图展示了 Compose Multiplatform 的简化结构, 特别针对 Shader 场景进行优化. 如图所示, 当目标平台为 Android 时, 我们依赖 Android SDK 提供 Shader 支持. 对于其他平台, 我们依赖 Skia------由 Google 主要开发和维护的开源 2D 图形库. Skia 通过调用不同平台的原生库实现其功能:

• iOS: Metal 和 CoreGraphics.
• Windows: Direct3D 和 GDI.
• macOS: OpenGL, Metal 和 CoreGraphics.
• Linux: OpenGL, X11 和 Wayland.
• Web: WebAssembly 和 Canvas API.

这一基础架构使 Compose Multiplatform 能够在不同环境中高效渲染图形, 使其成为创建视觉丰富应用程序的强大工具.

将 Shader 集成到 Composable 中

回到 Compose 层, 我们有一种简单的方法将 Shader 集成到 Composable 中. 一个特别强大的工具是 graphicsLayer Modifier , 它允许我们在渲染管道中直接对 Composable 组件应用各种图形变换和效果. 我们感兴趣的这个Modifier 的版本需要提供一个具有以下签名的 lambda 函数:

fun Modifier.graphicsLayer(block: GraphicsLayerScope.() -> Unit): Modifier

在此 lambda 中, 我们可以调整 GraphicsLayerScope 接收器的任何属性. 在允许修改缩放, 旋转和平移的属性中, 有一个名为 renderEffect 的属性------这就是将 Shader 集成到 Compose 中的关键元素!

有用的 API

在了解 Compose Multiplatform 的结构以及创建 Shader 所需的内容后, 我们可以探索用于 Shader 创建的可用 API. 如前文图表所示, 为 Android 创建 Shader 需要使用 Android SDK 的方法, 而其他平台则依赖 Skia.

以下列表总结了这些 Android SDK API, 供你参考:

• RuntimeShader() : 从输入的 AGSL 源代码创建新的 RuntimeShader.
• RenderEffect.createShaderEffect()/RenderEffect.createRuntimeShaderEffect() : 从输入参数创建新的 RenderEffect.
• RenderEffect.asComposeRenderEffect() : 创建一个与Compose兼容的RenderEffect.

以下是Skia API的列表:

• RuntimeEffect.makeForShader() : 根据输入的AGSL源代码创建一个新的RuntimeEffect.
• RuntimeShaderBuilder() : 根据输入的 RuntimeEffect 创建一个新的 RuntimeShaderBuilder.
• ImageFilter.makeShader()/ImageFilter.makeRuntimeShader() 从输入参数创建新的 ImageFilter.
• ImageFilter.asComposeRenderEffect() : 从 ImageFilter 创建一个与 Compose 兼容的 RenderEffect.

这些 API 方法将使我们能够使用每个目标平台的适当工具创建 Shader . 下图说明了如何链式调用这些方法, 以在 graphicsLayer Modifier 中正确提供所需的 renderEffect:

你可能已经注意到, 在创建 RuntimeEffect 或 RuntimeShader 之后, 两种情况下都始终有两个方法可供下一步使用. 在每种情况下, 第二个方法都会创建一个 RenderEffect 或 ImageFilter, 用于处理底层 Composable 的内容. 这使我们能够以任何创意方式使用 Shader 中的图形数据------这是 Photo-FX 项目中至关重要的一环, 我们稍后将详细探讨.

那么关于uniform(uniforms)呢？如何为它们指定值？这同样取决于平台:

• Android SDK : RuntimeShader 提供了如 setIntUniform 和 setFloatUniform 等方法, 这些方法接受一个字符串(代表 AGSL 代码中的名称)和对应的值.
• Skia : uniform通过 RuntimeShaderBuilder 的 uniform 方法指定. 其签名与 Android SDK 类似: 一个字符串加上一个类型化的值.

在 Compose 中实践 Shader ✍️

现在所有组件就位, 我们可以创建 Shader 并将其应用于任何我们选择的 Composable . 例如, 以下基于 Android 的代码片段演示了如何创建一个将可组合内容染成红色 Shader :

@Language("AGSL")
private val TINT_SHADER = """
    uniform shader content;
    uniform float4 tint;
    half4 main(vec2 fragCoord) {
        return mix(content.eval(fragCoord), half4(tint), 0.5);
    }

让我们分解这个简单的 Shader 代码. 在第 1 行, 存储 AGSL 代码的变量使用 @Language 注解, 这有助于 IDE 正确解释并突出显示该字符串的内容为 AGSL.

在第 3 行和第 4 行, 我们声明了 Shader 所需的uniform. 最后, 在第 6 行, 核心功能被实现为一行代码. 通过调用 mix 方法, 我们将两种颜色进行混合: 来自内容 Shader 的颜色和输入的 tint 值. 这就是我们 Shader 的全部内容.

现在, 让我们关注 SimpleShader Composable中的胶水代码. 我们调用 createRuntimeShaderEffect 方法, 该方法需要一个额外参数 uniformShaderName. 这对应于 AGSL 代码中声明的 uniform, 它将接收一个表示Composable内容的 Shader ------在我们的案例中, 是包含"Hello World!"文本的 Box.

你可能同意这段代码并不优雅. 几行代码中创建了多个实例, 所有实例都需要正确组合. 重复此过程多次很容易导致错误. 此外, 这段代码特定于 Android SDK, 这限制了其在跨平台环境中的使用. 因此, 让我们探索一种更好的方法来处理 Shader .

设计跨平台 Shader API ✨

理想的 API 应该具备哪些特征？以下是关键点:

• 它应提供一个统一的入口点, 用于将 Shader 应用于我们的 Composable .
• 它应提供一个强大的机制, 用于设置 Shader uniform的值.
• 它应能够无缝集成到跨平台项目中.

幸运的是, 我们有专门的机制来满足这些要求:

• 我们可以实现一个新的 Compose Modifier , 作为 Shader 的入口点. 该 Modifier 可以接受 AGSL 代码作为字符串, 并在内部处理所有必要的 API 调用.
• 此外, 新的 Modifier 可以包含一个作用域 lambda, 提供专门用于设置 uniform 值的方法.
• 最后, 使跨平台环境中顺畅运行的机制: expect/actual.

展示代码

首先, 让我们探索我们将要实现的 Modifier :

expect fun Modifier.shader(
    shader: String,
    uniformsBlock: (ShaderUniformProvider.() -> Unit)? = null,
): Modifier

expect fun Modifier.runtimeShader(
    shader: String,
    uniformName: String = "content",
    uniformsBlock: (ShaderUniformProvider.() -> Unit)? = null,
): Modifier

还记得我们在 Android SDK 和 Skia 中有两种不同的方法来创建 Shader 吗？这就是为什么这里也有两个 Modifier . 在两种情况下, AGSL 源代码都作为第一个参数传递. 此外, 一个可选的lambda表达式允许我们通过调用ShaderUniformProvider接口暴露的方法来设置uniform的值, 我们稍后会详细讨论. runtimeShader Modifier 还包含一个额外的字符串参数, 用于指定将接收 Composable 帧缓冲区的 Shader 名称.

这些 Modifier 使用 expect 关键字声明, 这意味着实际实现是平台特定的. 如果你第一次遇到 expect/actual 机制, 我建议查看官方文档.

• "难道没有人会为uniform着想吗？"
• 如果你是《辛普森一家》的粉丝, 你会认出这是对海伦·洛维乔伊著名呼吁的变体,
• "难道没有人会为孩子们着想吗？"
• 就像海伦一样, 我在此倡导------这次是为了uniform! 这就是为什么我决定提供一个接口来设置它们的值:

interface ShaderUniformProvider {
    fun uniform(name: String, value: Int)
    fun uniform(name: String, value: Float)
    fun uniform(name: String, value1: Float, value2: Float)
}

你可能还需要额外的方法来传递颜色或其他值类型, 但对于Photo-FX来说, 这些已经足够了.

Skia实现

我们已经看过一些在 Android 中创建 Shader 的代码, 因此将这些代码改编为使用 Skia 实现我们的新Modifier 应该不会太困难. 以下是 Skia API 的使用方式:

actual fun Modifier.shader(
    shader: String,
    uniformsBlock: (ShaderUniformProvider.() -> Unit)?,
): Modifier = this then composed {
    val runtimeShaderBuilder = remember {
        RuntimeShaderBuilder(
            effect = RuntimeEffect.makeForShader(shader),
        )
    }
    val shaderUniformProvider = remember { 
        ShaderUniformProviderImpl(runtimeShaderBuilder) 
    }
    graphicsLayer {
        clip = true
        renderEffect = ImageFilter.makeShader(
            shader = runtimeShaderBuilder.apply {
                uniformsBlock?.invoke(shaderUniformProvider)
            }.makeShader(),
            crop = null,
        ).asComposeRenderEffect()
    }
}

actual fun Modifier.runtimeShader(
    shader: String,
    uniformName: String,
    uniformsBlock: (ShaderUniformProvider.() -> Unit)?,
): Modifier = this then composed {
    val runtimeShaderBuilder = remember {
        RuntimeShaderBuilder(
            effect = RuntimeEffect.makeForShader(shader),
        )
    }
    val shaderUniformProvider = remember {
        ShaderUniformProviderImpl(runtimeShaderBuilder) 
    }
    graphicsLayer {
        clip = true
        renderEffect = ImageFilter.makeRuntimeShader(
            runtimeShaderBuilder = runtimeShaderBuilder.apply {
                uniformsBlock?.invoke(shaderUniformProvider)
            },
            shaderName = uniformName,
            input = null,
        ).asComposeRenderEffect()
    }
}

private class ShaderUniformProviderImpl(
    private val runtimeShaderBuilder: RuntimeShaderBuilder,
) : ShaderUniformProvider {

    override fun uniform(name: String, value: Int) {
        runtimeShaderBuilder.uniform(name, value)
    }

    override fun uniform(name: String, value: Float) {
        runtimeShaderBuilder.uniform(name, value)
    }

    override fun uniform(name: String, value1: Float, value2: Float) {
        runtimeShaderBuilder.uniform(name, value1, value2)
    }

}

让我们分解最终的实现.

新的 Modifier 将传入的 Modifier 与一个 composed Modifier 结合. 这种方法允许我们高效地保存 RuntimeShaderBuilder 和 ShaderUniformProvider 实例, 这些实例可能是昂贵的对象, 我们应避免在每次重新组合时重新创建它们.

此外, 由于可跳过性在 Compose 中至关重要, 通过仅提供 AGSL 源代码作为字符串和一个用于设置 uniform 值的 lambda, 这两个参数均可被视为不可变. 这意味着 Modifier 本身不会在非必要情况下触发重新组合. 唯一可能被重新调用的部分是 graphicsLayer Modifier , 这是有意为之------它允许我们更新 Shader 使用的 uniform 值, 从而实现Modifier 外部的交互.

在 graphicsLayer 中, 我们还将 clip 属性设置为 true, 以确保绘制不会超出应用该 Shader 的 Composable 的边界.

为 Photo-FX 创建 Shader

现在我们有了新的Modifier 来处理 Shader , 是时候将它们应用到实际场景中了. Photo-FX 的目标是使用 Shader 为图像添加一些视觉上吸引人的效果. 为了让这篇入门文章保持简单, 我们决定只实现三个效果:

• 晕影 : 了解更多.
• 平滑像素化 : 与像素化类似, 但使用正弦波进行调制.
• 色差 : 点击了解更多.

这三个效果均涉及基本的像素操作技术, 如加深或调整RGB通道. 我们将重点探讨晕影效果的细节, 其他效果则留给对 Photo-FX 源代码感兴趣的读者自行探索.

晕影效果

晕影效果通过加深图像边缘的亮度, 将视线引导至画面中心. 它在中心向外形成一个微妙的渐变, 随着边缘方向的移动, 阴影强度逐渐增强.

该效果可通过以下代码使用 Shader 轻松实现:

uniform float2 resolution;
uniform shader content; 
uniform float intensity;
uniform float decayFactor;

half4 main(vec2 fragCoord) {
    vec2 uv = fragCoord.xy / resolution.xy;
    half4 color = content.eval(fragCoord);
    uv *=  1.0 - uv.yx;
    float vig = clamp(uv.x*uv.y * intensity, 0., 1.);
    vig = pow(vig, decayFactor);
    return half4(vig * color.rgb, color.a);
}

在此 Shader 中, 我们定义了四个uniform:

• resolution: 表示正在处理的内容的分辨率.
• content: 这是应用 Shader 的内容或图像.
• intensity: 控制晕影效果的强度. 较高的强度会使晕影效果更加明显.
• decayFactor: 控制晕影效果向屏幕边缘衰减的速度. 较高的值会导致更陡峭的衰减.

现在让我们进入 Shader 的主体部分:

• 第7行 : 我们根据resolution值将坐标归一化到[0,1]范围内.
• 第8行 : 在此处, 我们根据当前片段坐标评估content Shader , 从内容中获取像素的颜色. 结果存储在color变量中.
• 第9行 : 在此行中, 我们本质上扭曲了uv坐标, 这些坐标随后将用于计算晕影效果.
• 第10行 : 晕影因子vig通过将uv的x和y分量相乘并乘以intensityuniform来计算. clamp函数确保结果值保持在[0, 1]范围内. 该因子决定了颜色随距离中心增加而变暗的程度.
• 第11行 : 本行通过将晕影因子vig提升至decayFactor次方来调整其值, 该参数控制从中心向屏幕边缘移动时晕影效果的衰减速率. 较高的decayFactor值将使晕影效果衰减得更为陡峭.
• 第12行 : 最后, 我们返回修改后的颜色. 原始颜色的RGB分量与晕影因子(vig)相乘, 根据像素相对于中心的位置来加深颜色. Alpha分量(color.a)保持不变.

接下来, 我们通过定义一个新的 Modifier (使用runtimeShader Modifier )将此 Shader 集成到Photo-FX应用中, 如下所示:

fun Modifier.vignetteShader(
    intensity: Float,
    decayFactor: Float,
) = this then runtimeShader(shader) {
    uniform("intensity", intensity)
    uniform("decayFactor", decayFactor)
}

大功告成!现在我们可以在Photo-FX中享受新的 Shader 效果:

YouTube

总结一下

虽然初次接触 Shader 可能令人望而生畏, 但希望本文分享的基础知识能让这一过程变得更加轻松. 在Compose Multiplatform中使用 Shader 尤为令人兴奋. 拥抱新技术和新范式是推动我们作为开发者不断进步的动力, 而学习 Shader 的工作原理------甚至编写自己的 Shader ------是对技能的宝贵投资.

好吧, 今天的内容就分享到这里啦!

一家之言, 欢迎拍砖!

Happy Coding! Stay GOLDEN!