在 Android 应用中使用 AGSL

本页将介绍 AGSL 基础知识,以及在 Android 应用中使用 AGSL 的不同方式。

简单的 AGSL 着色器

系统会针对绘制的每个像素调用着色器代码,并返回应为像素绘制的颜色。一种非常简单的着色器始终返回单色;此示例使用的是红色。着色器在 String 内定义。

Kotlin

private const val COLOR_SHADER_SRC =
   """half4 main(float2 fragCoord) {
      return half4(1,0,0,1);
   }"""

Java

private static final String COLOR_SHADER_SRC =
   "half4 main(float2 fragCoord) {\n" +
      "return half4(1,0,0,1);\n" +
   "}";

下一步是创建使用着色器字符串初始化的 RuntimeShader 对象。这也会编译着色器。

Kotlin

val fixedColorShader = RuntimeShader(COLOR_SHADER_SRC)

Java

RuntimeShader fixedColorShader = new RuntimeShader(COLOR_SHADER_SRC);

RuntimeShader 可以在标准 Android 着色器的任何位置使用。例如,您可以用它通过 Canvas 绘制到自定义 View 中。

Kotlin

val paint = Paint()
paint.shader = fixedColorShader
override fun onDrawForeground(canvas: Canvas?) {
   canvas?.let {
      canvas.drawPaint(paint) // fill the Canvas with the shader
   }
}

Java

Paint paint = new Paint();
paint.setShader(fixedColorShader);
public void onDrawForeground(@Nullable Canvas canvas) {
   if (canvas != null) {
      canvas.drawPaint(paint); // fill the Canvas with the shader
   }
}

这将绘制红色 View。您可以使用 uniform 将颜色参数传递到要绘制的着色器中。首先,将颜色 uniform 添加到着色器:

Kotlin

private const val COLOR_SHADER_SRC =
"""layout(color) uniform half4 iColor;
   half4 main(float2 fragCoord) {
      return iColor;
   }"""

Java

private static final String COLOR_SHADER_SRC =
   "layout(color) uniform half4 iColor;\n"+
      "half4 main(float2 fragCoord) {\n" +
      "return iColor;\n" +
   "}";

然后,从自定义 View 调用 setColorUniform,将所需的颜色传递到 AGSL 着色器。

Kotlin

fixedColorShader.setColorUniform("iColor", Color.GREEN )

Java

fixedColorShader.setColorUniform("iColor", Color.GREEN );

现在,您会得到一个绿色的 ViewView 颜色使用自定义 View 中代码中的参数进行控制,而不是嵌入到着色器中。

您可以改为创建颜色渐变效果。您首先需要更改着色器,以接受 View 分辨率作为输入:

Kotlin

private const val COLOR_SHADER_SRC =
"""uniform float2 iResolution;
   half4 main(float2 fragCoord) {
      float2 scaled = fragCoord/iResolution.xy;
      return half4(scaled, 0, 1);
   }"""

Java

private static final String COLOR_SHADER_SRC =
   "uniform float2 iResolution;\n" +
      "half4 main(float2 fragCoord) {\n" +
      "float2 scaled = fragCoord/iResolution.xy;\n" +
      "return half4(scaled, 0, 1);\n" +
   "}";

绘制渐变

此着色器执行了一些花哨的操作。对于每个像素,它会创建一个 float2 矢量,其中包含 x 和 y 坐标除以分辨率所得的值,这将创建一个介于 0 到 1 之间的值。然后,它使用该缩放后的向量构造返回颜色的红色和绿色分量。

您可以通过调用 setFloatUniformView 的分辨率传入 AGSL 着色器 uniform

Kotlin

val paint = Paint()
paint.shader = fixedColorShader
override fun onDrawForeground(canvas: Canvas?) {
   canvas?.let {
      fixedColorShader.setFloatUniform("iResolution", width.toFloat(), height.toFloat())
      canvas.drawPaint(paint)
   }
}

Java

Paint paint = new Paint();
paint.setShader(fixedColorShader);
public void onDrawForeground(@Nullable Canvas canvas) {
   if (canvas != null) {
      fixedColorShader.setFloatUniform("iResolution", (float)getWidth(), (float()getHeight()));
      canvas.drawPaint(paint);
   }
}
红色和绿色渐变
红色和绿色渐变

为着色器添加动画效果

您可以使用类似的技术为着色器添加动画效果,只需修改着色器以接收 iTimeiDuration uniform。着色器将使用这些值为颜色创建三角波,使颜色在渐变值之间来回循环。

Kotlin

private const val DURATION = 4000f
private const val COLOR_SHADER_SRC = """
   uniform float2 iResolution;
   uniform float iTime;
   uniform float iDuration;
   half4 main(in float2 fragCoord) {
      float2 scaled = abs(1.0-mod(fragCoord/iResolution.xy+iTime/(iDuration/2.0),2.0));
      return half4(scaled, 0, 1.0);
   }
"""

Java

private static final float DURATION = 4000f;
private static final String COLOR_SHADER_SRC =
   "uniform float2 iResolution;\n"+
   "uniform float iTime;\n"+
   "uniform float iDuration;\n"+
   "half4 main(in float2 fragCoord) {\n"+
      "float2 scaled = abs(1.0-mod(fragCoord/iResolution.xy+iTime/(iDuration/2.0),2.0));\n"+
      "return half4(scaled, 0, 1.0);\n"+
   "}";

在自定义视图源代码中,ValueAnimator 会更新 iTime uniform。

Kotlin

// declare the ValueAnimator
private val shaderAnimator = ValueAnimator.ofFloat(0f, DURATION)

// use it to animate the time uniform
shaderAnimator.duration = DURATION.toLong()
shaderAnimator.repeatCount = ValueAnimator.INFINITE
shaderAnimator.repeatMode = ValueAnimator.RESTART
shaderAnimator.interpolator = LinearInterpolator()

animatedShader.setFloatUniform("iDuration", DURATION )
shaderAnimator.addUpdateListener { animation ->
    animatedShader.setFloatUniform("iTime", animation.animatedValue as Float )
}
shaderAnimator.start()

Java

// declare the ValueAnimator
private final ValueAnimator shaderAnimator = ValueAnimator.ofFloat(0f, DURATION);

// use it to animate the time uniform
shaderAnimator.setDuration((long)DURATION);
shaderAnimator.setRepeatCount(ValueAnimator.INFINITE);
shaderAnimator.setRepeatMode(ValueAnimator.RESTART);
shaderAnimator.setInterpolator(new LinearInterpolator());

animatedShader.setFloatUniform("iDuration", DURATION );
shaderAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
   public final void onAnimationUpdate(ValueAnimator animation) {
      animatedShader.setFloatUniform("iTime", (float)animation.getAnimatedValue());
   }
});
红色和绿色动画渐变效果
红色和绿色动画渐变

绘制复杂对象

您不必绘制着色器来填充背景;它可以在接受 Paint 对象的任何位置使用,例如 drawText

Kotlin

canvas.drawText(ANIMATED_TEXT, TEXT_MARGIN_DP, TEXT_MARGIN_DP + bounds.height(),
   paint)

Java

canvas.drawText(ANIMATED_TEXT, TEXT_MARGIN_DP, TEXT_MARGIN_DP + bounds.height(),
   paint);
红色和绿色动画渐变文字
红色和绿色动画渐变文本

着色和画布转换

您可以对着色文本应用其他 Canvas 转换,例如旋转。在 ValueAnimator 中,您可以使用内置的 android.graphics.Camera 类更新 3D 旋转矩阵。

Kotlin

// in the ValueAnimator
camera.rotate(0.0f, animation.animatedValue as Float / DURATION * 360f, 0.0f)

Java

// in the ValueAnimator
camera.rotate(0.0f, (Float)animation.getAnimatedValue() / DURATION * 360f, 0.0f);

由于您希望从中心轴(而不是从角落)旋转文本,因此请获取文本边界,然后使用 preTranslatepostTranslate 更改矩阵以平移文本,使文本以 0,0 为中心,而不更改文本在屏幕上的绘制位置。

Kotlin

linearColorPaint.getTextBounds(ANIMATED_TEXT, 0, ANIMATED_TEXT.length, bounds)
camera.getMatrix(rotationMatrix)
val centerX = (bounds.width().toFloat())/2
val centerY = (bounds.height().toFloat())/2
rotationMatrix.preTranslate(-centerX, -centerY)
rotationMatrix.postTranslate(centerX, centerY)
canvas.save()
canvas.concat(rotationMatrix)
canvas.drawText(ANIMATED_TEXT, 0f, 0f + bounds.height(), paint)
canvas.restore()

Java

linearColorPaint.getTextBounds(ANIMATED_TEXT, 0, ANIMATED_TEXT.length(), bounds);
camera.getMatrix(rotationMatrix);
float centerX = (float)bounds.width()/2.0f;
float centerY = (float)bounds.height()/2.0f;
rotationMatrix.preTranslate(-centerX, -centerY);
rotationMatrix.postTranslate(centerX, centerY);
canvas.save();
canvas.concat(rotationMatrix);
canvas.drawText(ANIMATED_TEXT, 0f, 0f + bounds.height(), paint);
canvas.restore();
红色和绿色旋转动画渐变文字
红色和绿色旋转动画渐变文本

将 RuntimeShader 与 Jetpack Compose 配合使用

如果您使用 Jetpack Compose 渲染界面,使用 RuntimeShader 会更简单。从之前使用的渐变着色器开始:

private const val COLOR_SHADER_SRC =
    """uniform float2 iResolution;
   half4 main(float2 fragCoord) {
   float2 scaled = fragCoord/iResolution.xy;
   return half4(scaled, 0, 1);
}"""

您可以将该着色器应用于 ShaderBrush。然后,将 ShaderBrush 用作 Canvas 的绘制范围内绘制命令的参数。

// created as top level constants
val colorShader = RuntimeShader(COLOR_SHADER_SRC)
val shaderBrush = ShaderBrush(colorShader)

Canvas(
   modifier = Modifier.fillMaxSize()
) {
   colorShader.setFloatUniform("iResolution",
   size.width, size.height)
   drawCircle(brush = shaderBrush)
}
AGSL Compose 渐变圆形
红色和绿色渐变圆圈

将 RuntimeShader 与 RenderEffect 配合使用

您可以使用 RenderEffectRuntimeShader 应用于父级 View 所有子视图。这比绘制自定义 View 的开销更高。但它可让您轻松创建融合了最初使用 createRuntimeShaderEffect 绘制的效果。

Kotlin

view.setRenderEffect(RenderEffect.createRuntimeShaderEffect(myShader, "background"))

Java

view.setRenderEffect(RenderEffect.createRuntimeShaderEffect(myShader, "background"));

第二个参数是着色器统一的名称,您可以使用坐标参数(例如传入的 fragCoord)执行 eval,以获取 RenderNode(视图及其子视图)的原始颜色,从而让您能够执行各种效果。

uniform shader background;       // Root node of View tree to be altered
return mix(returnColor, background.eval(fragCoord), 0.5);
网格混合按钮
AGSL 网格混合在按钮上

网格效果混合在按钮上,但位于悬浮操作按钮下方(因为它位于不同的 View 层次结构中)。