Flutter阴影效果插件shady的使用

Flutter阴影效果插件shady的使用

开始使用

使用 Flutter 3.7 或更新版本，并遵循 此指南。

如何使用

以下是使用 Shady 插件的步骤：

步骤 1: 准备 Shady 实例

在你的代码中，创建一个包含着色器程序细节的 Shady 实例。请注意添加所有的统一变量和纹理采样器，并且要按照它们在着色器程序中出现的顺序添加。

/* assets/shaders/my_shader.frag */

uniform float uniformOne;
uniform float uniformTwo;
uniform sampler2D textureOne;

[...]

/* Flutter代码 */

final shady = Shady(
  assetName: 'assets/shaders/my_shader.frag',
  uniforms: [
    UniformFloat(key: 'uniformOne'),
    UniformFloat(key: 'uniformTwo'),
  ],
  samplers: [
    TextureSampler(
      key: 'textureOne',
      asset: 'assets/texture1.png',
    ),
  ],
);

步骤 2: 使用 ShadyCanvas 显示着色器

在你希望显示着色器的地方使用一个预设的小部件。

SizedBox(
  width: 200,
  height: 200,
  child: ShadyCanvas(shady),
),

步骤 3: 在运行时修改着色器参数

你可以通过 Shady 实例在运行时修改着色器参数。

shady.setUniform<double>('uniformOne', 0.4);
shady.setTexture('textureOne', 'assets/texture2.png');
shady.setBlendMode(BlendMode.modulate);

其他功能

变换器

变换器是在每一帧被调用的回调函数，用于根据上一帧的值和时间差来变换统一变量的值。

UniformFloat(
  key: 'uniformOne',
  transformer: (previousValue, deltaDuration) {
    return previousValue + (deltaDuration.inMilliseconds / 1000);
  },
)

也可以使用预定义的变换器：

UniformFloat(
  key: 'uniformOne',
  transformer: UniformFloat.secondsPassed,
)

变换器可以在任何时候切换：

shady.setTransformer<double>(
  'uniformOne',
  (previousValue, deltaDuration) {
    // 让它快两倍！
    return previousValue + ((deltaDuration.inMilliseconds / 1000) * 2);
  },
);

使用 ShaderToy 着色器

ShaderToy 是一个很棒的 GLSL 实验平台。然而，两者在如何编写着色器方面都有些怪癖和魔法。

要使用 ShaderToy 着色器（有一些限制），请将其包装如下：

#include <flutter/runtime_effect.glsl>
uniform vec3 iResolution;
uniform float iTime;
uniform float iTimeDelta;
uniform float iFrameRate;
uniform vec4 iMouse;
out vec4 fragColor;
uniform sampler2D iChannel0;
uniform sampler2D iChannel1;
uniform sampler2D iChannel2;
////////////// Shadertoy BEGIN

[ 粘贴你的 ShaderToy 着色器代码 ]

////////////// Shadertoy END
void main(void) { mainImage(fragColor, FlutterFragCoord()); }

然后，在创建 Shady 实例时，使用 shaderToy 参数自动添加并连接 ShaderToy 统一变量。支持的统一变量将像在 ShaderToy 上一样自动更新。

Shady(
  assetName: 'assets/shaders/my_shadertoy_shader.frag',
  shaderToy: true,
)

只支持 ShaderToy 列出的统一变量，并且通道只支持 2D 纹理 (sampler2D)。

交互式着色器

Shady 包含一个方便的小部件来处理交互式着色器。它会将交互连接到选定的统一变量，并提供回调以进行拦截。

ShadyInteractive(
  shady,

  // 这个 vec2 统一变量将保存最近交互的归一化坐标。
  uniformVec2Key: 'inputCoord',

  // 交互时调用的回调。
  onInteraction: (coord) => print('被交互于 $coord'),
)