| Project | 3D Experiments |
|---|---|
| Type | Suite of 3D Experiments in the browser |
| Platform | Web Browser |
| Team | 1 Hobbyist |
| Role | Everything |
| Inspiration | Low Poly Art, Point Cloud Visualization & Video Jaying |
| Language | Javascript & GLSL |
| Framework | Three.js |
| Tools | Kinect |
| Year | 2013 ~ 2015 |
| Repository | github.com/poksme/DeadLock & other private repositories |
Point Clouds
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
- 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
In an attempt to get to know browser side scripting and 3D better, I started creating my own 3D engine in vanilla Javascript (without the use of any external library).
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.
Video Jaying Example (Midi Tap Tempo)
Kinect Point Cloud Gallery
