Reproducing a shader with pixi.js

Question

I'm trying to reproduce this shadertoy with pixi.js. I am lost because there's no fragCoord and no fragColor in the code. Moreover I don't understand the declarations in the loop. Here is one of my numerous attempts:

   precision mediump float;
    uniform vec2 iResolution;
    uniform float iTime;


    void main(){
      vec4 O = vec4(0.0);
      vec2 F = gl_FragCoord.xy;
      vec2 r = iResolution.xy;
      float i = .3;
      float l = length(F+=F-r)/r.y + i;
      float t = iTime;

      for(O *= 0.; i < 12.; O += length(min(r.y/abs(F),r)) / 300.0*(cos(++t+i+vec4(0,1,2,0))*l+l)) {
         F *= mat2(cos(l*.2-i++*--t/1e2+vec4(0,33,11,0)));
      }
      gl_FragColor = O;
     }

I get an error: 'for' : Invalid init declaration. How to reproduce this shadertoy with pixi.js? Can it be due to the version? (I'm using an old one).

`ShaderToy` shows you the full shader source code at the bottom of the page if you click on the `Compiled in 0.0s` texts. It's not a full free-standing shader, but rather just implements the "logic" bits and hands it off to ShaderToy to embed in a "full" pixel shader. Also, the example here is clearly code-golfed, which limits it utility as a learning resource. `GL_FragColor` is pretty outdated, nowadays people explicitly specify an output (as you can see in the full example). To fix the syntax error in the loop, just keep un-golfing the code (you're pretty much halfway there already). — Cubic, Aug 21 '23 at 12:05
@Cubic Hmm ok ; may be i should update pixi then, I'm using a very old version. — Stéphane Laurent, Aug 21 '23 at 13:07
Just to clarify: It's an outdated way to program shaders. It's still available for compatibility purposes, and in this case it's not the cause of the error. — Cubic, Aug 21 '23 at 13:12

Reproducing a shader with pixi.js

0 Answers0