shady 0.0.3

Trying to make it easier to work with GLSL shaders in Flutter.

An attempt at making it easier to play around with custom GLSL shaders in Flutter. Consider WIP and unstable until minor is bumped.

Getting started

Use Flutter 3.7 or later, and follow this guide.

How to use

1. In your code, prepare a Shady instance with details about the shader program. It's important to add all uniforms and textures, and to add them in the same order as they appear in the shader program.

   /* myShader.frag */
   
   uniform float uniformOne;
   uniform float uniformTwo;
   uniform sampler2D textureOne;
   
   [...]
   

   /* Flutter code */
   
   final shady = Shady(
     assetName: 'assets/shaders/myShader.frag',
     uniforms: [
       ShadyUniformFloat(key: 'uniformOne'),
       ShadyUniformFloat(key: 'uniformTwo'),
     ],
     textures: [
       ShadyTexture(
         key: 'textureOne',
         asset: 'assets/texture1.png',
       ),
     ],
   );
   
   [...]
   

2. When appropriate, load the shader program.

   await shady.load();
   

3. Use one of the supplied widgets where you want to display your shader.

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

4. Modify your shader parameters by using your Shady instance

   shady.setValue('uniformOne', 0.4);
   shady.setTexture('textureOne', 'assets/texture2.png');
   

Other features

Transformers

Transformers are callbacks that are called every frame to transform a uniform value using the previous value and a delta time.

  ShadyUniformFloat(
    key: 'transformedFloat',
    transformer: (previousValue, deltaSeconds) => previousValue + deltaSeconds,
  )

There are some static premade transforms available on the Uniform* classes.

  ShadyUniformFloat(
    key: 'transformedFloat',
    transformer: ShadyUniformFloat.secondsPassed,
  )

Transformers can be switched.

  shady.setTransformer('uniformOne', (prev, dt) => prev + (dt * 2));

Using ShaderToy shaders

ShaderToy is an awesome playground for GLSL experimentation. However, both it and Flutter have some quirks and magic in how shaders are written.

To use a ShaderToy shader (with some limitations), wrap it like this:

#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

[ Paste your Shadertoy code here ]

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

Then, when creating your Shady instance, flag it using the parameter shaderToy to automatically add and wire the ShaderToy uniforms. The supported uniforms will then automatically be updated the same way as they are on ShaderToy.

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

Only the ShaderToy uniforms listed are supported, and the only supported data type for channels is 2D textures (sampler2D).

iMouse might be supported at some point somehow using some widget some way.

Additional information

The example has a gallery of various shaders. Have a look for inspiration and such.