Shaders Introduction

vjjv

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?

THANKYOU!

vjjv

Videos here, doesnt show in the post :/

vimeo.com/222723783 vimeo.com/129664516

GoToLoop

https://Vimeo.com/222723783

kfrajer

Tagging @nabr

Kf

Chrisir

https://processing.org/tutorials/pshader/

nabr

Hello

yes, you can use shaders. First Versum software is dated back to 2009 http://tarikbarri.nl/projects/versum 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: http://glslsandbox.com/e#44064.0

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 http://glslsandbox.com/e#43638.0

Best thing you start here: https://processing.org/tutorials/p3d/

U really need to understand how movement in 3D Space works.
http://www.codinglabs.net/article_world_view_projection_matrix.aspx
especially viewmatix (can't find any good link now) http://www.learnopengles.com/tag/view-matrix/

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

and then slowly move to here: https://processing.org/tutorials/pshader/

Also here (WebGL 1.0) http://thebookofshaders.com/

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

vjjv

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?

nabr

Who ever reading this, Merry Christmas and Happy new Year.

---

Hello

Processing useful links

  - https://processing.org/tutorials/color/

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

http://www.andersriggelsen.dk/glblendfunc.php
http://www.nutty.ca/articles/blend_modes/
https://elringus.me/blend-modes-in-unity/

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):

https://github.com/processing/processing/wiki/Advanced-OpenGL

import com.jogamp.opengl.GL;
import com.jogamp.opengl.GL2ES2; 
PJOGL pgl;
GL2ES2 gl;
pgl = (PJOGL) beginPGL();  
gl = pgl.gl.getGL2ES2(); 
gl.glEnable(GL.GL_BLEND); // Enable the JOGL  Blending functionality  
gl.glBlendFunc(GL.GL_SRC_ALPHA, GL.GL_ONE_MINUS_SRC_ALPHA); 
// do something
glDisable
// do something else
endPGL();  

---

vimeo.com/222723783
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

 
 
       

vjjv

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

nabr

Hello

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. https://en.wikipedia.org/wiki/Order-independent_transparency https://en.wikibooks.org/wiki/GLSL_Programming/GLUT/Order-Independent_Transparency

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]( https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/mix.xhtml)

 mix(backgroundColor, foregroundColor, 
                     foregroundColor.a);  

@vjjv did a little playground for you

void setup() {
  size(920, 540, P3D);
  noStroke();
}
float angle=0.;
void draw() {

  background(0);
  directionalLight(51, 102, 126, 0, 0, -1);

  // cube semi transparent
 // blendMode(ADD);

  for (int i = 0; i < 100; i++) {
    pushMatrix();
    fill(255, 255, 255, 155);
    translate(width/2, (i*50), -50*i ); 
    rotateX(angle);
    rotateY(angle);
    box(50);
    popMatrix();
  }
  // red cube
  // blendMode(NORMAL);

  // hint(DISABLE_DEPTH_TEST);
  pushMatrix();
  fill(255, 0, 0, 255);
  translate(width/2, height/2, -150.);
  rotateY(angle);   
  rotateX(angle);
  box(100);
  popMatrix();
  // hint(ENABLE_DEPTH_TEST);

  angle=frameCount*.01f;

  if (frameCount % 30 == 0) println(frameRate);
}