Go With The Flow

Queens of the Stone Age is one of my favourite bands. I go watch them live whenever I get the chance. Last time I saw them, they had a big screen on the stage with some cool visuals for each song. I recorded this video with my phone during ‘Go With The Flow’:

A bunch of bidents travelling in space, flocking, going around bends and coming towards the camera.

Wikipedia: A bident is a two-pronged implement resembling a pitchfork.

A couple of weeks ago I was going through my files, watched this video again and wondered if I could replicate it in WebGL.

Path
To me it seemed like the bidents were following a path in the video, so I started by revisiting an old experiment with steering behaviors and adapted it to 3D. The path itself was generated using a formula extracted from TorusKnotGeometry. In this case a simple curve using p = 2 and q = 4.

Model
At first I created the model in code. One cylinder for the stick, then two curves, two cylinders and two cones for the top. It looked ok, but the performance was terrible on mobile. I moved to Blender and recreated it there – thanks to all the amazing people that post tutorials and videos online.

Then I adapted the code to use InstancedBufferGeometry. To my surprise, the performance on mobile was even worse. I found out that vertices are duplicated when using the .fromGeometry() method. I joined the discussion on this github issue and proposed a solution, but I think it doesn’t work for all cases. It worked on mine. Simple modifications to include indices in the generated geometry made it much faster on mobile. I started getting 60 fps on my 5 years old phone. So in case you found this post while looking for issues with .fromGeometry(), have a look at these modifications here, or check this hack that copies indices from each face of the original geometry.

Camera
I’ve been wanting to play with spite’s Storyline.js since I bumped into it online. This was the perfect opportunity. It is simple and works very well. I chose a few camera positions around the path and linked them in the storyboard using the t of the curve. With that I could be sure the bidents were always passing by where the camera was there.

Background
In the original video I think the background was just a pure red color. It looks great, but I thought it was looking too flat in the browser. The inspiration then came from the music video for ‘Go With The Flow’ – IMHO one of the best music videos ever made, hats off to Shynola.

The result is a mishmash of noise shaders found online, specially Procedural SkyBox by Passion.

Check the result here: http://codedoodl.es/_/brunoimbrizi/go-with-the-flow/

Check the result here: http://codedoodl.es/_/brunoimbrizi/go-with-the-flow/

Leave a Reply

Your email address will not be published. Required fields are marked *