|Type||Suite of 3D Experiments in the browser|
|Inspiration||Low Poly Art, Point Cloud Visualization & Video Jaying|
|Year||2013 ~ 2015|
|Repository||github.com/poksme/DeadLock & other private repositories|
My first steps with 3D in the browser was with Kinect. I used a Python server to process and send the depth data to the client through web sockets. The browser would run a three.js script to display the data as a point cloud.
This animation is my earliest working prototype, from there I added features like:
- Midi support
- Tap Tempo
- Camera movement
- Dot color
- Dot depth color influence
- Text 3D position
- Dot size (tempo sync)
With all these features I was able to use this script as a Video Jaying tool. You can find a demonstration video at the bottom of this page.
Homemade 3D Engine
I had to implement a game loop, a timer and my first and only 3D element: a cube. Additional text is rendered block by block using a map for each letter.
The result is this 3D rotating cube using sin and cos waves.
Game Boy Shader
When starting to learn about shaders I had one project in mind. Following Pyxel's legacy, I wanted to create the look and feel of the original Game Boy using 3D elements.
The first version was done with Unity shaders and a 3d modeled Game Boy made with 3D Studio Max.
In order to have a convincing effect I had to combine 3 different shaders:
- Silhouette Outline (Vertex Shader) - To emulate the style of pixel art found on Game Boy I had to add an extra thick border to the 3d model to make it pop out.
- Pixelate (Pixel Shader) - This effect is straight forward, the Game Boy screen being really low definition I had to pixelate the scene.
- Color change (Pixel Shader) - This aims at limiting the colors on the screen to the 4 available shades of green on Game Boy.
The result is this rotating Game Boy.
This Unity shader has been edited to work with ThreeJs and is currently live on heroku.