0

Im trying to port this shadertoy shadertoy to pixi.js.

Here is my shader:

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;
}

and this is my 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 filter = null;

var totalTime = 0;

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

function 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;
    });
}

Im getting this error:

ERROR: 0:27: 'for' : Invalid init declaration
Rabbid76
  • 202,892
  • 27
  • 131
  • 174
Lucho
  • 15
  • 1
  • 5
  • I have zero knowledge of GLSL. Do you mean the brackets of the for loop? Or do you suggest putting brackets on all the code? I just put brackets on the for loop and still the same error – Lucho Mar 12 '23 at 07:33
  • So you are wrong here. Please read [How much research effort is expected of Stack Overflow users?](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users). – Rabbid76 Mar 12 '23 at 07:35

1 Answers1

0

See The OpenGL® Shading Language, Version 4.60.7

ERROR: 0:27: 'for' : Invalid init declaration

This means that you cannot do initializations of multiple variables in the init statement of the for loop

for(float f,s,t=

The curly braces are missing and statements must be terminated with a semicolon. In GLSL code, code blocks must be between { and } and there must be a ; at the end of each statement. e.g:

float f, s;
for(float t = 2e2+sin(dot(x,x)); --t>0.; p=.05*t*d) {
    p.xz += iTime;
    s = 2.;

    // [...]
}
Rabbid76
  • 202,892
  • 27
  • 131
  • 174