Print Shortlink

WebGL Tutorial – Vertex Displacement with a Noise Function AKA Fiery EXPLOSION!

WebGL Tutorial - Vertex Displacement with a Noise Function AKA Fiery EXPLOSION 1

We’ve covered WebGL demos by Jaume Sanchez Elias before, but I also think it is important to promote excellent tutorials about WebGL. So here are links to Jaume’s site (Clicktorelease) which contains an excellent step by step tutorial on how to create an explosive shader in WebGL. Below is the introduction to the tutorial:

This is a tutorial showing the steps to create an animated shape, using a sphere as a basic geometry and perlin noise to disturb the vertices. It also teaches how to add some more variation to the distortion and how to add colour. It’s based on Fireball explosion, part of the Experiments with Perlin Noise Series.

I’m using three.js to create the geometry and setting up the scene, but the GLSL code can be used with any other WebGL/OpenGL library. I’m quite sure it’s also pretty straightforward to translate into HLSL.

Read the Vertex Displacement with a Noise Function AKA Fiery EXPLOSION! Tutorial HERE by Jaume Sanchez Elias

Or skip straight to the demo

WebGL Tutorial - Vertex Displacement with a Noise Function AKA Fiery EXPLOSION 2

 

 

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)
WebGL Tutorial - Vertex Displacement with a Noise Function AKA Fiery EXPLOSION!, 5.0 out of 5 based on 1 rating

You might also like