Skip to content

Latest commit

 

History

History
47 lines (31 loc) · 2.36 KB

README.md

File metadata and controls

47 lines (31 loc) · 2.36 KB

Ski.js

An arcade ski game with realtime motion capture and gestures.

About

This is a Three.js game that can be controlled either by using the WASD-keys (for player one) and the arrow-keys (for player two), or by using a webcam and body gestures.

The goal is to reach the finish line first (duh). Don't expect fancy celebrations once you win though.

For motion capture the game uses the PoseNet model.
For gesture recognition the game uses my other project named Poser.js.

Levels

While the 3D models of the two snowmen, the trees and the boulders have been modeled in Blender, the world surface gets generated on the spot.

Instead of having to handle complex world models I opted for an easier solution, which in turn made possible the creation of a simple level-editor.
The magic word is heighmap. The surface gets generated from a 64x64 PNG texture carefully crafted.

The first step was drawing the track like this Track. By mapping high points to dark pixels and the low points to white pixels, the idea is to displace the vertices of this big-flat-grid plane according to the color of the track texture. This results with a caved plane, that's still not quite what's needed. Next step is to add some inclination, to get that mountain feeling. Inclination.
Because a color channel of a PNG image can hold values from 0 to 255 (8 bit channels), the resulting inclination wasn't satisfying, so an extra layer has been used, which adds also some jumps to make the race more interesting.
As previously mentioned, all this black and white maps are merged in a single image, using the RGB channels of the PNG image, resulting with the following Final level.
The following is the same level without the jumps layer, for comparison: Final level.

Base track:
Track

With inclination:
With inclination

With jumps:
With jumps

Textured:
Textured

Screenshots

I guess some screenshots are due.

Screenshot 0

Screenshot 1

Screenshot 2

Screenshot 3

Screenshot 4