HTML5 canvas (and PHP GD) 2.5D landscape renderer
JavaScript PHP Shell
Permalink
Failed to load latest commit information.
doc Updated JsDoc Toolkit auto-generated documentation Dec 10, 2011
images Misc. little improvements including better reflection-mapped performance Oct 6, 2011
js
library/Steppe Initial PHP port of Steppe and corrected JS version (terrain renderin… Jun 22, 2011
tests
.gitignore Updated documentation to remove path leakage Dec 10, 2011
MIT-LICENSE.txt MIT license added Sep 7, 2011
README.md
composite.php
index.php Major performance improvements Aug 18, 2011
jscoverage.sh Updated sprite rendering (JS only); initial unit tests and more JSDoc… Jul 25, 2011
render.php

README.md

Steppe

Steppe is a custom HTML5 canvas 2.5D landscape renderer and compositor. The JavaScript source code for Steppe is unobfuscated and can be used free of charge in your own projects (MIT license).

Steppe, like Fleeting Fantasy, is actively under development so we recommend you wait until it's production-ready before using it for anything serious. That doesn't mean you shouldn't play with it now though; go right ahead!

Screenshots

screenshot

screenshot

Features

  • Four degrees of freedom (4DoF); translation along the x, y, and z axes and rotation about the y axis
  • Reflection-mapped, semi-transparent water with globally variable height
  • Full 360-degree panoramic sky
  • Floating horizon and faux camera tilt
  • Coloured, distance fog for better depth perception
  • Texture-mapped terrain with client-side compositor accepting multiple textures
  • Antialiasing for smoother rendering results (currently unavailable)
  • Configurable render quality from low, through medium, to high
  • 2D billboarded sprites (JS only)
  • Alternative texturemap for out-of-bounds terrain
  • PHP port for graceful degradation where HTML5 canvas isn't supported
  • MIT license
  • All HTML5 2D canvas; no WebGL!

Coming Soon

  • Fog applied to sprites
  • Sanitised API
  • Pre-calculated lightmap support for shadows

Steppe Mars Demo

Try Demo