HomeWildcat Attack >
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

Point Cloud Kinect animation. 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:

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

An animation of a cube rotating around Deadlock text.

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

A 3d modeled GameBoy with a GameBoy shader rotating.

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:

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)