将 ShaderToy 移植到 Pixi.js

Question

我正在尝试将这个 shadertoy shadertoy 移植到 pixi.js.

这是我的着色器：

    uniform vec3 iResolution;
    uniform float iTime;
    uniform float iTimeDelta;
    uniform float iFrameRate;
    uniform int iFrame;
    uniform float iChannelTime[4];
    uniform vec3 iChannelResolution[4];
    uniform vec4 iMouse;
    uniform vec4 iDate;

    varying vec2 vTextureCoord;
    uniform sampler2D uSampler;
    uniform sampler2D noise;

    #define T texture2D(noise,(s*p.zw+ceil(s*p.x))/2e2).y/(s+=s)*4.
    
    void main(){

        vec4 O;
        vec2 x;

        vec4 p,d=vec4(.8,0,x/iResolution.y-.8),c=vec4(.6,.7,d);
        O=c-d.w;

        for(float f,s,t=2e2+sin(dot(x,x));--t>0.;p=.05*t*d)
            p.xz+=iTime,
            s=2.,
            f=p.w+1.-T-T-T-T,
            f<0.?O+=(O-1.-f*c.zyxw)*f*.4:O;
    }

这是我的javascript：

const GLOBAL_WIDTH = window.innerWidth; const GLOBAL_HEIGHT = window.innerHeight;

var app = new PIXI.Application({ width: GLOBAL_WIDTH, height: GLOBAL_HEIGHT, resolution: 1, backgroundAlpha: 1, antialias: true });

document.body.appendChild(app.view);

PIXI.Assets.load('perlin.jpg').then(onAssetsLoaded);

var过滤器=空；

var totalTime = 0;

var fragShader = document.getElementById('fragShader').innerHTML;

函数 onAssetsLoaded(perlin) {

perlin.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
perlin.baseTexture.mipmap = false;
perlin.width = perlin.height = 200;

filter = new PIXI.Filter(null, fragShader, {
    iResolution: [GLOBAL_WIDTH, GLOBAL_HEIGHT, 1.0],
    iTime: 0.0,
    noise: perlin
});

app.stage.filterArea = app.renderer.screen;
app.stage.filters = [filter];

app.ticker.add((delta) => {
    filter.uniforms.iTime = totalTime;
    totalTime += delta / 60;
});

}

我收到此错误：错误：0:27：'for'：无效的初始化声明

Answer 1

参见 OpenGL® 着色语言，版本 4.60.7

错误：0:27：'for'：无效的初始化声明

这意味着你不能在

for

循环的init语句中做任何初始化，你可以

for(float f,s,t=

缺少大括号，语句必须以分号结尾。在 GLSL 代码中，代码块必须在

{

和

}

之间，并且每个语句的末尾必须有一个

;"

。

void main(){

    vec4 O;
    vec2 x;

    vec4 p,d=vec4(.8,0,x/iResolution.y-.8),c=vec4(.6,.7,d);
    O=c-d.w;

    float f, s, t;
    for(t = 2e2+sin(dot(x,x)); --t>0.; p=.05*t*d) {
        p.xz += iTime;
        s = 2.;
        f = p.w+1.-T-T-T-T;
        f += f<0.? (O-1.-f*c.zyxw)*f*.4 : O;
    }
}