Shaders Introduction

edited December 2017 in GLSL / Shaders

hey! im new in shaders world, and i asking if these examples are made with shaders. What do you think? in particular, in the first video, these particle-blur-dissolve effect. in the other video, the light effect that switch on and off. What way do you recommend to start shaders?



  • edited December 2017

    Videos here, doesnt show in the post :/

  • edited December 2017


    yes, you can use shaders. First Versum software is dated back to 2009 Very well placed Java, Processing skills.

    He using spheres and tubes, lines with a good feeling of colors in general.

    particle-blur-dissolve is just single planes moving in 3D with with transparency (alpha blending). Shader its a very, very basic one, i currently forgot how to recreate, it's uv noise to a circle this comes close:

    the light effect that switch on and off, no idea what you are talking about. in general their are planes that are moving, rotating, and yes a light effect.
    this comes close

    Best thing you start here:

    U really need to understand how movement in 3D Space works.
    especially viewmatix (can't find any good link now)

    Before you ask yourself how to make things glow, or similar. Make sure you got the basics.

    and then slowly move to here:

    Also here (WebGL 1.0)

    Their is always more to say. I would not going mad about shaders, shaders is just how history of computer graphics develops. If you learn processing, you also learn shaders.

    Good Luck

  • Thank you nabr! I was reading the different sources. One question, in relation with the alpha blending (dont found blend Mode alpha in processing) how to recreate that in 3D?

  • edited December 2017
    Who ever reading this, Merry Christmas and Happy new Year.


    Processing useful links


    assume you have too Layers composed of

    background   foreground
    Color(r,g,b,alpha);   Color(r,g,b,alpha);

    To blend (i would recommend) first call processing build in >>blendmode<<. And experiment with it. I'm not sure how well it works with shaders.

    Alpha Blending ✨⚡️ ⚡️ ⚡️ ⛳️

    The name Alpha Blending already suggest in has to do something to do with the alpha parameter.

    background Color(r,g,b, 255 );
    foreground Color(r,g,b, 127 );

    ( more in general as a programmer you can control how two separate colors are blended together )

    Blendmodes useful links

    BlendFunc inside a Shader:

    processing java equivalent glsl
    // GLSL_VERSION >= 150
    uniform textureArray
    texture(textureArray[0],uv) * blendMath * texture(textureArray[1],uv);
    // self explaining equivalent
    a = vec4(r,g,b, alpha), b = vec4(r,g,b, alpha) 
    finalColor = a * blendMath * b // write to Colorbuffer    
    Low Lewel JOGL Processing (pseudocode untested):

    import com.jogamp.opengl.GL;
    import com.jogamp.opengl.GL2ES2; 
    PJOGL pgl;
    GL2ES2 gl;
    pgl = (PJOGL) beginPGL();  
    gl =; 
    gl.glEnable(GL.GL_BLEND); // Enable the JOGL  Blending functionality  
    // do something
    // do something else

    If you look at this, you will notice, how colors are blended together, the most part is transparent, but some parts are shine through. Are those part additive subtractive - whatever?

    maybe im also wrong > "its a very, very basic one", maybe its a complex function and close to a fractal. most imported part is that you ...


    keep experimenting


  • haha! yes off course! thanks for answer my questions! im studying everything you said! surely i`ll write again in the next days!

  • edited December 2017


    no problem. Got some time to waste. Processing is made for a wide variety personalities, understandable you can not to please everybody. That said sometimes you have to dive deep into this forum to find an answer.

    The Basic contept of alpha blending is that all shapes with opacae type contribute to the final image, normally the z-buffer is used to eliminate hidden surfaces, for performance reasons, - no need to render, what you don't see, - but in this case you want to disable this behaivor. hint(disable depth test) search result

    So back in the 90ties people were breaking their heads, how to do perspective correct texture mapping , today it's done automatically in the GPU. Nobody want's to copy +paste the same math over and over again. Same goes for Alpha compositing. Their are more "advanced" techniques. Some are probably easier to implement LOW LEVEL Processing Jogl Mode ....

    Just an other link.

    Understanding the basic concept you can also implement somethink like this:

    First pass 
    Render your main Shader (fancy stuff)      
    Second pass     
    Read first pass to texture    
    Render second shader (lsd)   
    Blender texture with alpha with second shader
    using [mix](
     mix(backgroundColor, foregroundColor, 

    @vjjv did a little playground for you

    void setup() {
      size(920, 540, P3D);
    float angle=0.;
    void draw() {
      directionalLight(51, 102, 126, 0, 0, -1);
      // cube semi transparent
     // blendMode(ADD);
      for (int i = 0; i < 100; i++) {
        fill(255, 255, 255, 155);
        translate(width/2, (i*50), -50*i ); 
      // red cube
      // blendMode(NORMAL);
      // hint(DISABLE_DEPTH_TEST);
      fill(255, 0, 0, 255);
      translate(width/2, height/2, -150.);
      // hint(ENABLE_DEPTH_TEST);
      if (frameCount % 30 == 0) println(frameRate);
Sign In or Register to comment.