I was just 14 years old when I first saw Gorillaz – Feel Good Inc music video. I fell in love with it saying “Whaatt? A cartoony music video? How awesome!”. The next thing I know I was buying Demon Days album.
Years later, about 4 months ago while I was surfing, YouTube showed me the new Gorillaz music video, Andromeda. When buffering was completed I immediately thought that this video could be rendered on browsers.
That’s when I started to recreate Andromeda music video with WebGL. Feel free to check it out Gorillaz – Andromeda in WebGL.
I broke down my project into four major parts, which are the background scene, meteors scene, Saturn scene and animations.
Analysing Music Video
Andromeda music video has actually a simple scene. Some background galaxy image moving from left to right, a sphere with a flowing texture (I’ll call it Saturn) and some meteors dancing in the front. Time to time, when the music gets higher, a meteor comes from top left corner and crushes into Saturn, makes it glow brighter.
I was going to imitate a similar one so I sketched the scene below with components like background, Saturn and meteors.
This seems like the simplest part of the scene and it is kinda true. Technically it’s easy. First create a plane, animate it from left to right, then create another one, place it behind and set their blend mode to additive so they look naturally merged, finally add some textures.
But how about finding a proper, real 4K, beautiful and colourful galaxy texture?
Well that was hard.
I looked up around a thousand sites, for licensed or stock free images, but all I could find was a couple of nice, sharp, 4K wallpapers, but not real textures. This was bad because, I had to purchase and download them one by one, tried to convert them to continuous textures and edited their brightness/contrast settings. After all those steps, I tested them in the scene, trying to see whether they look good or not.
It took some time but I managed to find the perfect image, which totally worth it and I was really to happy to see the results:
I needed to add some post processing effects such as changing the hue to my project. I used EffectComposer (You can find detailed tutorial here.), which is not part of three.js but comes with the examples of it. By using EffectComposer I easly managed to add hue effects to my background scene.
Meteors were the simplest part of the project, but at the same time, they were the enemies of performance, because well, there are 500 of them moving, and rotating in the scene! I needed to find a meteor model in the simplest way in order to have smooth animations.
It’s really amazing what you can do with stock geometries in three.js. This is called OctahedronGeometry. I deformed each vertices of it and it basically looks like a rock:
As I told before, this project has 500 of them. Each one has a different movement speed, rotational speed and a random size. They move from right to left. When they move out from the view, they teleport to right side of the view.
When it comes to meteors behind the Saturn, they are actually one single static image. First I tried to create this static image from scratch. I drew some random circles with glow effect but then I didn’t like how they looked in the scene. Then I found a stars texture. I tinted it to yellow and set its blend mode to additive.
No doubt, this was the hardest part of the scene. To understand why it was the hardest you really need to inspect the features of it in the music video:
- Texture animates in a way that top part of it moves faster than the bottom part.
- Saturn doesn’t rotate but texture makes it look like it swings.
- Saturn has an inner glow. Edges and central parts are brighter.
- Saturn also has an outer glow. In fact there are two outer glows. One of them is brighter and close to edges, the other one is bigger and darker.
Finding a proper beautiful tex… Well you already know that this is hard. But one of my colleague gave me the simplest idea, to search “saturn texture” on Google Images. I was shocked at what I found. The first image that came up was the exact same image used in the Andromeda music video. Did the artist/designer really search “saturn texture” on Google Images and picked the first one in the production? Is this common?
Anyway since I found my Saturn texture, next part was to animate it. This was the biggest challenge. After I researched a bit, I understood that I needed to use something called fragment shader. But what the heck was that? As far as I understood it’s a code lives in .html but runs in GPU. In fragment shader, when a 3D model is rendered, each pixel on this model needs to know which texture color it should use. One way to do that is to use UV mapping. I animate UV map coordinates exponentially. So top part became faster than the bottom. It was trial and error a bit but I think I nailed it.
In the video, Saturn also swings. To achieve this movement, I got help from a sin function. One of the inputs of this sin function is frame time, which increases over time. Therefore sphere looks like it’s swinging.
There are three types of glows in the project, inner, big outer and small outer glow.
For inner glow, I created simple black and white gradient texture and added its pixel colors to the original Saturn texture color in the fragment shader:
For outer glows, first I thought I could create them by using fragment shader but I decided that would be overkill, because the camera and Saturn don’t rotate. So I created black and white circular gradient textures, placed them behind Saturn and set their blend modes to additive. This saved me a huge amount of development time.
You can see the bigger glow in action. Don’t forget that it’s actually a plane behind Saturn:
This is the smaller but brighter glow created with the same technique:
This is the final result of Saturn when all the glows are enabled:
Final part of the project was to create animations that were synced with the song.
In the video a meteor comes from top left corner and crushes into Saturn three times. During the first crush, actual Saturn texture, glow effects and the background become visible. During the second and third crushes, Saturn texture and glows become brighter.
You can see the second explosion in action below:
Bringing Them All Together
While bringing all my components together, I constantly compared my project with the actual music video. I listened to the same song and watched the same video over and over again just to make sure that my animations match with the ones in the actual video. Many times I changed the values of the effects entirely to make them appealing to the viewers’ eye. After many modifications and moving back and forth around the scenes, I was very satisfied with the end result, my end product. Even I didn’t expect to see something this beautiful when I first started.
Testing the project on mobile devices was also satisfactory. To see the animations running as smooth as it was on desktop felt great. I didn’t have to make any performance tricks for mobile.