Trying to get shader to work (beginner with shaders)

edited June 2016 in GLSL / Shaders

I'm trying to get my head around glsl shaders. I am trying to get this shader from glslsandbox to work:

#ifdef GL_ES
precision mediump float;
#endif

#extension GL_OES_standard_derivatives : enable

uniform vec2 mouse;
uniform float time;
uniform vec2 resolution;

float w = resolution.x/2.0;
float h = resolution.y/2.0;
float PI = 3.141592653589793;

void main( void ) {
    float move = w / 2.0;

    vec2 pos1 = vec2(w + move * ( sin(time)), h);
    vec2 pos2 = mouse * resolution;
    vec2 pos3 = vec2( w + move * ( sin(time)),h + move * ( cos(time)));

    float dist1 = length(gl_FragCoord.xy - pos1);
    float dist2 = length(gl_FragCoord.xy - pos2);
    float dist3 = length(gl_FragCoord.xy - pos3);


    // 円のサイズ
    float size = 25.0;

    // distがsize以下であれば累乗根で潰す。
    // この値が大きければsize以上離れている場所は0に近づくのでポワッとしなくなる
    float color = 0.0;
    color += pow(size / dist1, 5.0);
    color += pow(size / dist2, 2.0);
    color += pow(size / dist3, 2.0);

    gl_FragColor = vec4(vec3(color / 1.0, color / 1.0, color / 1.0), 1.0);
} 

my processing code looks like this:

PShader shader;

void setup() {
  size(640, 360,P3D);


  shader = loadShader("shader.glsl");
  shader.set("resolution", width, height);

}

void draw() {
  background(0);
  shader.set("mouse",mouseX,mouseY);
  shader(shader);

}

It runs the program without any errors but all I get is a black background. What am I doing wrong, am I missing something in the code?

Thank you!

Tagged:

Answers

  • do you need to pass time into the shader?

  • edited June 2016

    it doesn't seem to make a difference.

    I am drawing a rect over the canvas now which is resulting in this:

    Bildschirmfoto 2016-06-18 um 12.10.51

    but it's not moving nor following the mouse

    PShader shader;
    
    void setup() {
      size(640, 360,P3D);
      shader = loadShader("shader.glsl");
      shader.set("resolution", width, height);
    
    
    }
    
    void draw() {
      background(0);
      //shader.set("time", frameCount);
      shader.set("mouse",(float)mouseX,(float)mouseY);
      shader(shader);
      rect(0, 0, width, height); 
    }
    
  • edited June 2016

    I've adjusted the code a little. All three ellipses show up now, two are moving. As soon as I move the mouse the one in the bottom corner disappears.

    Bildschirmfoto 2016-06-18 um 15.17.12

    PShader shader;
    
    void setup() {
      size(640, 360, P2D);
    
      textureWrap(REPEAT);
      shader = loadShader("shader.glsl");
      shader.set("resolution", float(width), float(height));
    
    }
    
    void draw() {
      shader.set("time", millis() / 1000.0);
      shader.set("mouse", float(mouseX), float(mouseY));
      shader(shader);
      rect(0,0,width,height);
      //fill(255);
      //ellipse(mouseX,mouseY,10,10);
    
    })
    
  • i made a few changes to the shader...

        float color1 = 0.0;
        float color2 = 0.0;
        float color3 = 0.0;
        color1 += pow(size / dist1, 5.0);
        color2 += pow(size / dist2, 2.0);
        color3 += pow(size / dist3, 2.0);
    
        gl_FragColor = vec4(vec3(color1 / 1.0, color2 / 1.0, color3 / 1.0), 1.0);
    

    and it's the green circle that goes away, so color2... now to work out why...

  • Answer ✓
    vec2 pos2 = mouse;
    

    is better. but you'll immediately notice a problem. fix it with

    vec2 pos2 = vec2(mouse.x, resolution.y - mouse.y);
    
Sign In or Register to comment.