Flutter & GLSL - 叁 | 变量传参

2023-12-14 05:02:35

前言

在 Flutter & GLSL - 贰 | 从坐标到颜色中，我们探讨了如何在 Flutter 中使用 GLSL 着色器为画布着色。现在，是时候更进一步，探讨如何在 Flutter 和 GLSL 之间传递变量了。这将使我们能够创建更动态和交互式的图形效果。

变量类型

在开始之前，让我们先了解一下 GLSL 中可用的数据类型。与大多数编程语言类似，GLSL 也支持各种数据类型，包括：

浮点数 (float) ：32 位浮点数
整数 (int) ：32 位整数
布尔值 (bool) ：布尔值（true/false）
向量 (vec) ：由指定数量的浮点数组成的向量，例如 vec2、vec3 和 vec4
矩阵 (mat) ：由指定数量的浮点数组成的矩阵，例如 mat2、mat3 和 mat4

在 Flutter 中定义变量

在 Flutter 中，我们可以使用 Uniform 类来定义要传递给 GLSL 着色器的变量。Uniform 类具有与 GLSL 数据类型相对应的各种构造函数。例如，要定义一个名为 color 的 vec4 变量，我们可以这样做：

final colorUniform = Uniform('vec4', 'color');

在 GLSL 着色器中使用变量

在 GLSL 着色器中，我们可以使用 uniform 来声明变量。语法如下：

uniform <type> <name>;

例如，要声明我们在 Flutter 中定义的 color 变量，我们可以这样做：

uniform vec4 color;

现在，我们可以在着色器代码中使用 color 变量。

传递变量

为了将变量从 Flutter 传递到 GLSL 着色器，我们需要使用 ShaderProgram 类的 setUniform 方法。该方法采用 Uniform 对象和要传递的值作为参数。例如，要将 color 变量传递到着色器，我们可以这样做：

shaderProgram.setUniform(colorUniform, color);

实例：动态着色

现在我们已经了解了如何在 Flutter 和 GLSL 之间传递变量，让我们来看一个使用此技术的实例。我们创建一个可以动态更改画布颜色的应用程序。

在 Flutter 应用程序中，我们定义一个 color 变量并使用 Slider 组件允许用户更改其值。然后，我们将 color 变量传递到 GLSL 着色器中，并使用它来设置画布的颜色。

以下是完整代码：

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

class DynamicColorApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: GLSurfaceView(
          onViewCreated: (GLSurfaceView view) {
            // 创建着色器程序
            final shaderProgram = ShaderProgram(
              fragmentShader: '''
                precision mediump float;
                uniform vec4 color;
                void main() {
                  gl_FragColor = color;
                }
              ''',
            );

            // 定义颜色变量
            final colorUniform = Uniform('vec4', 'color');

            // 设置画布大小
            view.setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);
            view.setViewport(width, height);

            // 渲染回调
            view.setRenderer((_, width, height) {
              // 清除缓冲区
              glClearColor(0.0, 0.0, 0.0, 1.0);
              glClear(GL_COLOR_BUFFER_BIT);

              // 设置着色器程序
              shaderProgram.use();

              // 传递变量
              shaderProgram.setUniform(colorUniform, color);

              // 绘制画布
              glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
            });
          },
        ),
      ),
    );
  }
}