Как использовать AGSL в приложении для Android

На этой странице рассматриваются основы AGSL и различные способы использования AGSL в вашем приложении для Android.

Простой шейдер 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. Например, вы можете использовать его для рисования в пользовательском View с помощью Canvas.

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" +
   "}";

Затем вызовите setColorUniform из пользовательского View, чтобы передать нужный цвет в шейдер AGSL.

Kotlin

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

Java

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

Теперь у вас есть зеленый View. Цвет View контролируется с помощью параметра из кода в вашем пользовательском 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, разделенные на разрешение, что дает значение от нуля до единицы. Затем он использует этот масштабированный вектор для построения красного и зеленого компонентов возвращаемого цвета.

Вы передаете разрешение View в шейдер AGSL uniform, вызывая setFloatUniform.

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);
   }
}
Красно-зеленый градиент
Красно-зеленый градиент

Анимация шейдера

Похожий метод можно использовать для анимации шейдера, изменив его так, чтобы он получал униформы iTime и iDuration. Шейдер будет использовать эти значения для создания треугольной волны для цветов, заставляя их циклически перемещаться туда и обратно по значениям градиента.

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.

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.

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);

Поскольку вы хотите повернуть текст вокруг центральной оси, а не от угла, получите границы текста, а затем используйте preTranslate и postTranslate, чтобы изменить матрицу для преобразования текста так, чтобы 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

Использовать RuntimeShader ещё проще, если вы отрисовываете интерфейс с помощью Jetpack Compose. Начнем с того же шейдера градиента, что и раньше:

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

Вы можете использовать RenderEffect, чтобы применить RuntimeShader к родительскому элементу View и всем дочерним представлениям. Это более ресурсоемкий процесс, чем отрисовка пользовательского элемента View. но позволяет легко создать эффект, включающий то, что изначально было бы нарисовано с помощью createRuntimeShaderEffect.

Kotlin

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

Java

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

Второй параметр – это название униформы шейдера, которую можно eval с параметром координаты (например, переданным в fragCoord), чтобы получить исходный цвет RenderNode (объекта View и его дочерних объектов). Это позволяет применять различные эффекты.

uniform shader background;       // Root node of View tree to be altered
return mix(returnColor, background.eval(fragCoord), 0.5);
Сетка, наложенная на кнопку
Сетка AGSL, наложенная на кнопку

Эффект сетки накладывается на кнопку, но находится под плавающей кнопкой действия (поскольку она находится в другой иерархии View).