Fragment Shader（片元着色器）实战：GLSL 在 Flutter 中的 Uniform 传递与编译

Fragment Shader（片元着色器）实战：GLSL 在 Flutter 中的 Uniform 传递与编译

各位同学，大家好。今天我们来深入探讨一下 Flutter 中使用 GLSL 片元着色器，特别是关于 Uniform 变量的传递和着色器的编译。着色器是现代图形渲染的核心，而片元着色器负责决定屏幕上每个像素的最终颜色。掌握着色器的使用，能够让我们在 Flutter 应用中实现各种炫酷的视觉效果和高性能的图形处理。

什么是 Fragment Shader？

在渲染管线中，Fragment Shader (也称为像素着色器) 在光栅化之后执行。它接收来自顶点着色器的插值数据（例如颜色、纹理坐标），并计算每个像素的最终颜色。Fragment Shader 使用 GLSL (OpenGL Shading Language) 编写，这是一种专门用于图形处理单元 (GPU) 的高级编程语言。

简单来说，Fragment Shader 就像一个函数，输入是像素的位置信息以及一些其他数据，输出是该像素的颜色值。通过改变 Fragment Shader 的代码，我们可以控制屏幕上每个像素的颜色，从而实现各种各样的视觉效果。

Flutter 中使用 Fragment Shader 的基本流程

在 Flutter 中使用 Fragment Shader 主要涉及以下几个步骤：

1. 编写 GLSL 片元着色器代码： 使用 GLSL 编写着色器代码，定义像素颜色的计算逻辑。
2. 将着色器代码编译成可执行的程序： Flutter 需要将 GLSL 代码编译成 GPU 可以理解的指令。
3. 创建 Shader 对象： 使用编译后的程序创建 Flutter 的 Shader 对象。
4. 将 Shader 对象应用到绘制命令： 将 Shader 对象传递给 Paint 对象，并使用 Canvas 进行绘制。
5. 传递 Uniform 变量： 将数据（例如颜色、时间、纹理）传递给着色器中的 Uniform 变量。

Uniform 变量：着色器的参数

Uniform 变量是 GLSL 中一种特殊的变量类型，它的值在整个渲染过程中保持不变。Uniform 变量可以被顶点着色器和片元着色器共享，用于传递一些全局性的参数，例如颜色、变换矩阵、光照参数等。

在 Flutter 中，我们需要通过一些特定的方法将数据传递给 GLSL 着色器中的 Uniform 变量。

GLSL 代码示例：一个简单的颜色渐变着色器

下面是一个简单的 GLSL 片元着色器代码示例，它实现了一个从左到右的颜色渐变效果：

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

void main() {
  vec2 st = gl_FragCoord.xy/u_resolution.xy;
  vec3 color = vec3(st.x, st.y, sin(u_time));
  gl_FragColor = vec4(color,1.0);
}

这段代码做了以下几件事：

• #ifdef GL_ES 和 precision mediump float;： 这是 GLSL ES 的标准声明，用于指定浮点数的精度。在移动设备上，使用 mediump 可以提高性能。
• uniform vec2 u_resolution;：声明一个名为 u_resolution 的 Uniform 变量，类型为 vec2 (二维向量)，用于存储屏幕的分辨率。
• uniform float u_time;：声明一个名为 u_time 的 Uniform 变量，类型为 float，用于存储时间。
• void main() { ... }：这是着色器的入口函数，类似于 C 语言中的 main 函数。
• vec2 st = gl_FragCoord.xy/u_resolution.xy;：gl_FragCoord 是 GLSL 内置变量，表示当前像素的坐标。这行代码将像素坐标归一化到 0 到 1 的范围内，存储在 st 变量中。
• vec3 color = vec3(st.x, st.y, sin(u_time));：根据归一化的坐标 st 和时间 u_time 计算颜色值。st.x 代表红色分量，st.y 代表绿色分量，sin(u_time) 代表蓝色分量。
• gl_FragColor = vec4(color,1.0);：gl_FragColor 是 GLSL 内置变量，表示当前像素的最终颜色。这行代码将计算得到的颜色值赋值给 gl_FragColor，alpha值设置为 1.0 (完全不透明)。

在 Flutter 中编译和使用 GLSL 着色器

Flutter 提供了 FragmentProgram 类来编译和使用 GLSL 着色器。下面是一个在 Flutter 中使用上述着色器代码的示例：

import 'dart:ui';
import 'package:flutter/material.dart';

class ShaderExample extends StatefulWidget {
  const ShaderExample({Key? key}) : super(key: key);

  @override
  State<ShaderExample> createState() => _ShaderExampleState();
}

class _ShaderExampleState extends State<ShaderExample>
    with SingleTickerProviderStateMixin {
  late FragmentProgram _fragmentProgram;
  late AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _loadShader();
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 5),
    )..repeat();
  }

  Future<void> _loadShader() async {
    _fragmentProgram = await FragmentProgram.fromAsset('shaders/gradient.glsl');
    setState(() {});
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Shader Example')),
      body: Center(
        child: _fragmentProgram == null
            ? const CircularProgressIndicator()
            : AnimatedBuilder(
                animation: _animationController,
                builder: (context, child) {
                  return CustomPaint(
                    size: const Size(300, 300),
                    painter: ShaderPainter(
                      shader: _fragmentProgram.shader(
                        floatUniforms: Float32List.fromList([
                          300.0, // u_resolution.x
                          300.0, // u_resolution.y
                          _animationController.value * 10, // u_time
                        ]),
                      ),
                    ),
                  );
                },
              ),
      ),
    );
  }
}

class ShaderPainter extends CustomPainter {
  final Shader shader;

  ShaderPainter({required this.shader});

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..shader = shader;
    canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

gradient.glsl (放在 assets/shaders 目录下):

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

void main() {
  vec2 st = gl_FragCoord.xy/u_resolution.xy;
  vec3 color = vec3(st.x, st.y, sin(u_time));
  gl_FragColor = vec4(color,1.0);
}

这段代码做了以下几件事：

• 加载着色器代码： 在 initState 方法中，使用 FragmentProgram.fromAsset 方法从 assets 目录加载 GLSL 着色器代码。
• 创建 AnimationController： 创建一个 AnimationController 来控制时间 u_time 的变化，从而实现动画效果。
• 创建 Shader 对象： 在 AnimatedBuilder 的 builder 方法中，使用 _fragmentProgram.shader 方法创建 Shader 对象，并将 Uniform 变量的值传递给着色器。
  • floatUniforms 参数是一个 Float32List，用于传递浮点数类型的 Uniform 变量。需要按照 Uniform 变量在 GLSL 代码中声明的顺序传递值。 在这个例子中，我们传递了 u_resolution.x、u_resolution.y 和 u_time 的值。
• 创建 ShaderPainter： 自定义一个 ShaderPainter，将 Shader 对象赋值给 Paint 对象的 shader 属性。
• 使用 CustomPaint 绘制： 使用 CustomPaint 组件和 ShaderPainter 将着色器效果绘制到屏幕上。

重点：Uniform 变量的传递

在上面的例子中，floatUniforms 是一个关键的参数。它是一个 Float32List，用于传递浮点数类型的 Uniform 变量。需要注意以下几点：

• 顺序： Uniform 变量的值必须按照在 GLSL 代码中声明的顺序传递。例如，如果 GLSL 代码中先声明 uniform vec2 u_resolution;，后声明 uniform float u_time;，那么 floatUniforms 列表的顺序也必须是 [u_resolution.x, u_resolution.y, u_time]。
• 类型： 传递的值的类型必须与 Uniform 变量的类型匹配。例如，如果 Uniform 变量是 vec2 类型，那么需要传递两个浮点数。在Flutter中，通常将vec2传递为两个float，vec3传递为三个float。
• 数量： 传递的值的数量必须与 Uniform 变量的数量匹配。例如，如果 GLSL 代码中声明了三个 Uniform 变量，那么 floatUniforms 列表的长度必须是 3。

传递其他类型的 Uniform 变量

除了浮点数类型的 Uniform 变量，GLSL 还支持其他类型的 Uniform 变量，例如整数、布尔值、纹理等。在 Flutter 中，传递这些类型的 Uniform 变量需要使用不同的方法。

• 整数类型的 Uniform 变量： 使用 intUniforms 参数，它是一个 Int32List。
• 矩阵类型的 Uniform 变量： 使用 matrix4Uniforms 参数，它是一个 Float32List，表示 4×4 的矩阵。
• 纹理类型的 Uniform 变量： 使用 imageShader 参数，它是一个 ImageShader 对象。

传递纹理 Uniform 变量的示例：

假设我们有一个 GLSL 着色器，它使用一个纹理作为输入：

#ifdef GL_ES
precision mediump float;
#endif

uniform sampler2D u_texture;
uniform vec2 u_resolution;

void main() {
  vec2 st = gl_FragCoord.xy/u_resolution.xy;
  gl_FragColor = texture2D(u_texture, st);
}

在 Flutter 中，我们可以这样传递纹理：

import 'dart:ui' as ui;
//...
Future<ui.Image> loadImage(String assetPath) async {
  final data = await rootBundle.load(assetPath);
  final codec = await ui.instantiateImageCodec(data.buffer.asUint8List());
  final frameInfo = await codec.getNextFrame();
  return frameInfo.image;
}

//...

ui.Image? _image;

@override
void initState() {
  super.initState();
  _loadShader();
    loadImage('assets/images/flutter_logo.png').then((image) {
      setState(() {
        _image = image;
      });
    });
  _animationController = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 5),
  )..repeat();
}

//...

child: _fragmentProgram == null || _image == null
    ? const CircularProgressIndicator()
    : AnimatedBuilder(
        animation: _animationController,
        builder: (context, child) {
          return CustomPaint(
            size: const Size(300, 300),
            painter: ShaderPainter(
              shader: _fragmentProgram.shader(
                floatUniforms: Float32List.fromList([
                  300.0, // u_resolution.x
                  300.0, // u_resolution.y
                ]),
                imageShader: _image?.toImageShader(
                  TileMode.repeated,
                  TileMode.repeated,
                  Matrix4.identity().storage,
                ),
              ),
            ),
          );
        },
      ),

在这个例子中，我们首先使用 loadImage 函数加载一个图片，然后使用 image.toImageShader 方法将图片转换为 ImageShader 对象。最后，我们将 ImageShader 对象传递给 _fragmentProgram.shader 方法的 imageShader 参数。

Uniform 变量类型和 Flutter 中的对应关系

GLSL 类型	Flutter 中的对应类型	传递方式
float	double (会隐式转换为 float)	floatUniforms
vec2	两个 double (会隐式转换为 float)	floatUniforms
vec3	三个 double (会隐式转换为 float)	floatUniforms
vec4	四个 double (会隐式转换为 float)	floatUniforms
int	int	intUniforms
ivec2	两个 int	intUniforms
ivec3	三个 int	intUniforms
ivec4	四个 int	intUniforms
mat4	Float32List (长度为 16，表示 4×4 矩阵)	matrix4Uniforms
sampler2D	ui.Image -> ui.ImageShader	imageShader

着色器编译错误处理

在开发过程中，着色器代码可能会出现错误。Flutter 提供了 FragmentProgram.fromAsset 和 FragmentProgram.compile 方法来编译着色器代码。如果编译失败，这两个方法会抛出异常，包含错误的详细信息。

为了更好地处理着色器编译错误，我们可以使用 try-catch 语句来捕获异常，并打印错误信息：

Future<void> _loadShader() async {
  try {
    _fragmentProgram = await FragmentProgram.fromAsset('shaders/gradient.glsl');
  } catch (e) {
    print('Shader compilation error: $e');
  }
  setState(() {});
}

性能优化建议

在使用 Fragment Shader 时，需要注意性能问题。以下是一些性能优化建议：

• 减少计算量： 尽量减少着色器代码中的计算量，避免复杂的数学运算和逻辑判断。
• 使用低精度浮点数： 在移动设备上，可以使用 mediump 或 lowp 精度浮点数来提高性能。
• 避免过度绘制： 尽量避免过度绘制，只绘制需要更新的区域。
• 使用纹理缓存： 对于静态的纹理，可以使用纹理缓存来提高性能。

总结

今天我们学习了如何在 Flutter 中使用 GLSL 片元着色器，重点讲解了 Uniform 变量的传递和着色器的编译。通过灵活运用 Uniform 变量，我们可以将各种数据传递给着色器，实现各种炫酷的视觉效果。同时，我们也需要注意性能问题，避免过度使用着色器，影响应用的性能。

灵活运用 Uniform 变量能够实现炫酷视觉效果

通过学习和实践，我们可以灵活运用 Flutter 中的 Fragment Shader 和 Uniform 变量，创造出令人惊艳的图形效果，极大地丰富 Flutter 应用的视觉表现力。