Lets Build Community

Lets Build is a community of 163 amazing members

We're a place where indie game developers to connect with one another to share ideas, ask for help and teach each other.

Create new account Log in
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

Discussion

pic
Editor guide
Collapse
rgails profile image
Ryan Gails

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

Collapse
sketchpunk profile image
Collapse
cpluta profile image
Chris Pluta

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.

Collapse
sketchpunk profile image
SketchPunk Author

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.