Flutter glsl 白嫖 shadertoy 的注意点

197 阅读1分钟

shadertoy 中的实现是webgl 的写法,转成flutter 可以用的glsl,需要做如下修改。

1 main方法

在shadertoy中 一般是以mainImage 开始

void mainImage( out vec4 fragColor, in vec2 fragCoord ){}

在flutter glsl中意main方法开始

void main(){}

2 fragColor 与 fragCoord

2.1 fragColor

在shadertoy的mainImage方法中 一般在最后给fragColor赋值。也就是最终输出的颜色

image.png 在flutter glsl中main方法中没有fragColor,需要全局声明一个fragColor变量。

out vec4 fragColor;

2.2 fragCoord

fragCoord 是屏幕上每一个像素的坐标。glsl是一个像素一个像素的处理,fragCoord就代表的是当前处理的像素的坐标。在shadertoy中fragCoord在mainImage方法中获取。

在flutter glsl通过 FlutterFragCoord().xy 获取。

image.png

3 iTime 一般涉及到随时间变化的都会有这个变量

在shadertoy中,iTime是内置的变量,代表从开始运行到当前的时间。

在Flutter glsl中需要自己定义输入变量,由开发者外部传入。

image.png

4 iResolution

在shadertoy中,iResolution存储的是屏幕的尺寸信息。iResolution是个内置的变量。

在flutter glsl中需要外部传入。也就是画布的大小。

image.png

外部传入的一般写法:

     var width = size.width;
     var height = size.height;
     shader.setFloat(0, width);
     shader.setFloat(1, height);
     shader.setFloat(2, currentTime);

5 for 循环

这样写是不可以的

for( int i=0; i<70 && t<tmax; i++ )

需要这样

for (int i = 0; i < 70; i++) {
    if (t >= tmax) {
        break;
    }
    // 循环体中的其余代码
}