Why is the result fo the shader black?

I try to port:


Here is the sketch:

PShader shader;

void setup() {
  size(800, 600, P2D);
  shader = loadShader("metaballs.frag");

void draw() {
  shader.set("iTime",  (float) millis() /  1000);
  shader.set("iResolution", new PVector(width, height));
  rect(0, 0, width, height);
#version 330

#ifdef GL_ES
precision highp float;
precision highp int;

uniform vec3      iResolution;           // viewport resolution (in pixels)
uniform float     iTime;                 // shader playback time (in seconds)

in vec4 vertTexCoord;
out vec4 fragColor;

void main() {
	vec2 uv = (-iResolution.xy+2.0*vertTexCoord.xy)/iResolution.y;

    // anim
	vec2 c1 = 0.8*sin( iTime*1.0 + vec2(4.0,0.5) + 1.0);
	vec2 c2 = 0.8*sin( iTime*1.3 + vec2(1.0,2.0) + 2.0);
	vec2 c3 = 0.8*sin( iTime*1.5 + vec2(0.0,2.0) + 4.0);
    // potential (3 metaballs)
    float v = 0.0;	
	v += 1.0-smoothstep(0.0,0.7,length(uv-c1));
	v += 1.0-smoothstep(0.0,0.7,length(uv-c2));
	v += 1.0-smoothstep(0.0,0.7,length(uv-c3));

    // color	
	vec3 col = mix( vec3(v), vec3(1.0,0.6,0.0), smoothstep(0.9,0.91,v) );
	fragColor = vec4(col,1.0);


It seems to be always black.
I think the problem is with v, it seems to be 0 but I could be wrong.

Also, fragCoord is what processing calls vertTexCoord right? (And if so, processing choose a horrible name).

1 Like

The uv was wrong. Should be:

vec2 uv = iResolution.x*(-1.0+2.0*vertTexCoord.xy)/iResolution.y;

because vertTexCoord is already normalized or

vec2 uv = (-iResolution.xy+2.0*gl_FragCoord.xy)/iResolution.y;

I suggest adding something like this to your sketch:

void mousePressed() {
  try {
    shader = loadShader("metaballs.frag");
  } catch(Exception e) {

so you can quickly test changes in your shader.

I figured out the error by adding col.rg = uv; before fragColor = ... to visualize uv and it was black, so I figured that the uv coordinates are wrong.