Author: yagiz (page 1 of 2)

Gorillaz Andromeda in WebGL

2017 // Desktop and Mobile Browser

This is recreation of popular music video Gorillaz – Andromeda in WebGL. It’s a personal side project that rocked the Medium and Hackernews. It’s all designed and developed by me.

View the Project

Morhipo

2015 – Present // iPhone iPad

Morhipo is one the biggest e-commerce retailers in Turkey. I’m currently leading iOS developer of Morhipo. This app has:

  • 99% crash free rate with more than 50k daily active users.
  • AI enabled networking debugging tools.
  • custom built slick smooth UI transitions.
  • universal links, spotlight searching, force touch capabilities.
  • MasterPass payment option with custom UI.
  • enhanced analytics libraries.

Today Morhipo iOS app is featured in App Store and Apple Store Istanbul.

View on App Store

Trendyol

2016 – 2017 // iPad

Trendyol is the biggest fashion e-trailer in Turkey and the largest retail e-commerce player overall in terms of number of orders.

This iPad version I redeveloped has:

  • 99% crash free rate with more than 100k daily active users.
  • custom smooth UI animations that is added especially for orientation change.
  • analytics tracking to its end.
  • pixel perfect design implementation.
View on App Store

Unlock Turkey

2016 – Present // iPhone iPad

Unlock Turkey aims to be the ultimate guide for tourists who are visiting Turkey. The project was created by Garanti which is the second private bank in Turkey. Via the app Garanti aimed to be the bank of the tourists too.

This iOS app has:

  • 99% crash free rate.
  • offfline capabilities.
  • custom sound player.
  • location services to its full extend.
View on App Store

Vakkorama

2016 – Present // iPhone iPad

Vakkorama is the core young luxury-fashion brand in Turkey for more than 30 years. The iOS app of Vakkorama is specifically built to engage the young consumer, more with the brand via omnichannel initiatives.

This iOS app has:

  • 99% crash free rate.
  • QR code generation for its loyalty programme.
  • rich custom chat integration.
  • open source unique fluid UI animation modules that are developed specifically for this app.
View on App Store

Goano

2014 – 2015 // iPhone iPad

Goano was my first startup experience. It was hashtag based anonymous chat application that connected its users with their personal hashtags. It was loved and still missed today by thousands people.

As a only developer in team I developed:

  • iOS client with %99 crash free rate, unique swipe gestures.
  • backend with Node.JS, custom socket server, MongoDB and Redis.

Goano was invested by Sinan Guler who is one of the most influential basketball players in Turkey. Goano was presented at Startup Istanbul, which is the leading startup event in eurasia.

How I Recreated the Music Video Gorillaz – Andromeda with WebGL

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.

 


 

When I started recreating, first thing I did was to download three.js, which is a solid 3D JavaScript library. I downloaded the source, and started with a simple “Hello World” scene. Then I began to plan the objects, textures and animations.

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.

Background Scene

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 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.

Saturn Scene

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.

Texture

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.

Glows

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:

Animation

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.

I chose tween.js, a JavaScript animation library, which is super easy to use. Whole scene is dynamically controlled by parameters like, background opacity, texture flow speed and inner/outer glow brightness. Then I track the YouTube player’s current time and start to animate these parameters in the right seconds.

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.

I have to say, experimenting with 3D was an amazing experience. If you are good with JavaScript and math, but don’t have much experience in 3D, I strongly suggest you to play with it. It is rewarding to see what you can do with some planes and spheres.

Building Portfolio Headers With Three.js

Three.js is awesome 3D library that I play with since it came out. Building little experiments, playing with shaders etc are always fun. So I decided to build a 3D fancy video player for my portfolio posts. Isn’t it better than static images?

It has a simple scene. I added bunch of randomised triangles in the background. Set their colors to dominant colors of the given project. In the ceenter I added a simple plane with a video texture on it.

I’ll share the source after I revise it a bit.

Ugly Faces

I’m not an illustrator but this would be cool poster on a brick wall. The idea is to mimic the hand drawings programmatically. 

The key is drawing an imperfect circle. Faces you see here are combination of many imperfect circles. There is almost no linear path but combination of segmented, circles. I used Two.js(I’m a big fan of Three.js too.) to draw curvy paths. It’s an awesome little JS gem.

Here is the code that draw circles:

First we create segmented circle. Then we randomise positions of these segment points a little. And finally we make curvy path using these points.

Result:

To mimic hand draw we draw two rounds of circles on top of each other:

Result:

As you can see this looks like a hand drawn two rounds of circles. Head, eyes, ears, eyebrows and mouth are all combinations of the same technique and yet every face is unique and sketchy.

Image Triangulation

 

First I needed a way to mark the parts of the image so that I can understand which parts are more detailed (like eyes, mouth etc.). Next step is a bit easy. After I get the marks, I use Delaunay triangulation algorithm to draw triangles.

This is the marker I wrote:

First I create a grid over the original image. Every rectangle in this grid compares its average colour to colour of every pixel in the rectangle. If a pixel colour is too distant from the average colour, that pixel is marked. If marked pixel count is larger than given threshold, whole rectangle is marked and is divided by 4 and every divided rectangle repeats same steps recursively.

Then every rectangle creates a random point in its area. These vertices are used by Delaunay triangulation algorithm which is taken from here. Whole source is here.