loading...
Cover image for Parallax Glitter

Parallax Glitter

sketchpunk profile image SketchPunk ・1 min read

There is a pretty interesting shader I found that was created using ShaderNodes. Wanted to learn how to apply parallax rendering, so this was a great one to port over to webgl & glsl.

I can't really give a great explanation on how this works. The main thing I can say is that this effect uses a Tangent Matrix ( what you need to translate normal maps to world space ), is used to compute a set of UV coords based from some depth values and a height map texture. This sample uses the same texture for both rendering and height map, which is just a black & white cloud noise.

I tried to comment the shader as much as I can to give some insight of whats going on to the best of my knowledge. Code is free for anyone to use and learn from.

[ DEMO ] https://sketchpunk.bitbucket.io/src/fungi_v5_5/001_parallax_glitter.html

[ SOURCE ]
https://bitbucket.org/sketchpunk/sketchpunk.bitbucket.io/src/master/src/fungi_v5_5/001_parallax_glitter.html

[ ORIGINAL ]
https://github.com/LadTy/ParallaxGlitter

Posted on by:

sketchpunk profile

SketchPunk

@sketchpunk

10% luck, 20% skill, 15% concentrated power of will. 5% pleasure, 50% pain, And a 100% reason to remember the name.

Discussion

markdown guide
 

Pretty cool! It's fun to mess with the properties and see what it does.

 
 

As always I'm just flat out floored by what you share with us.

Playing with that demo I can see this be applied to a space game to generate a star field without needing to render an entire environment.

 

im sure you can. At some point I want to try making skyboxes, so maybe I can try this out once I have something working.