Shadertoy to PShader differences / bugs

glennmarshall

Hi Although I've had a lot of success porting shadertoy shaders into processing, I'm getting problems with the new multi pass shaders. I've worked out how to create multiple passes in Processing using PGraphics buffers. But the end results look wrong. Here's an example.. http://imgur.com/a/065EU

It looks like something to do with how the colours are being blended / calculated. Maybe it's a premultiplied alpha thing, I've no idea. Because I'm only having these problems with multi pass shaders - I'm thinking it might have something to do with how Processing is passing in / reading out data from buffers - which might be different from how shadertoy / WebGL does it.

Here's the 2 shaders in question..

https://www.shadertoy.com/view/MstSWX

https://www.shadertoy.com/view/MlcGWH

Many thanks for any clues as to what the problem could be, Glenn.

hamoid

I'm not sure I can help, but maybe you could also share your Processing versions to be able to tweak them and find the issue.

glennmarshall

Thanks for replying. I think it has to do with Processing only being able to have 8 bit PGraphics buffers. Shadertoy uses 16 bit buffers.

Here's the sketch (just the first render pass of 'liquid xenopmorph' from the test pic in original post)

PShader passone;
PGraphics bufA;
float t =0.0;

void setup() {
  size(500, 300, P2D); 
  passone = loadShader("xenopassone.glsl");
  passone.set("iResolution", width, height);

  bufA = createGraphics(width, height, P2D);

  bufA.beginDraw();
  bufA.background(0);
  bufA.endDraw();

}

void draw() {

  if (mousePressed) {

    passone.set("mouseX", float(mouseX));
    passone.set("mouseY", float(height-mouseY));

  }

  passone.set("iGlobalTime", t);
  passone.set("iChannel0", bufA);
  bufA.beginDraw();
  bufA.shader(passone);
  bufA.beginShape(QUAD);
  bufA.textureMode(NORMAL);
  bufA.textureWrap(REPEAT);
  bufA.vertex(0, 0, 0, 0);
  bufA.vertex(width, 0, 1, 0);
  bufA.vertex(width, height, 1, 1);
  bufA.vertex(0, height, 0, 1);
  bufA.endShape();
  bufA.endDraw();

  t+=0.02;

  image(bufA,0,0);
}

And here's xenopassone.glsl

uniform ivec2 iResolution;
uniform float iGlobalTime;
uniform sampler2D iChannel0;

uniform float mouseX;
uniform float mouseY;

vec4 iMouse;


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

    iMouse.x = mouseX;
    iMouse.y = mouseY;

    vec2 dvec;
    if (iMouse.x<20.0)
    {
        float r =  0.2 + 0.6 * sin(iGlobalTime* 0.62);
        dvec = vec2( (iResolution.x/2. + r *iResolution.y/2. * sin(iGlobalTime*.2)), ( iResolution.y/2. + r*iResolution.y/2. * cos( iGlobalTime*.2)));
    }else{
        dvec = iMouse.xy;
    }

    vec2 uv = fragCoord.xy/iResolution.xy;

    vec2 tc = fragCoord.xy - dvec.xy;
    tc/=float(iResolution.x);
    float o= length(tc);

    float b = pow(max(1.-o*5.,0.),16.);  


    vec3 nv = vec3(tc.x * b * 6.,tc.y * b * 6.,b);

    vec3 oldervec = texture2D(iChannel0, uv).xyz;

    vec3 oldvec = texture2D(iChannel0, uv).xyz;

    vec2 old2d = oldvec.xy;
    if (length(old2d)>1.0)
    {
        old2d = normalize(old2d);
        oldvec = vec3(old2d, oldvec.z);       
    }

    vec3 oldervecnev = texture2D(iChannel0, uv - oldvec.xy * 0.5).xyz;

    fragColor = vec4(nv + vec3(oldvec.xy *  0.999, oldervecnev.z * 0.9), 1.0 );

}

void main() {
  mainImage(gl_FragColor, gl_FragCoord.st);
}