DivSugar, a CSS-based 3D Graphics Engine. Posted 08:29AM on August 15 2012 by Pascal Rettig Software Engineer Takashi Kitao has written a CSS3 based 3D graphics engine called DivSugar.
While it's not as performant as a WebGL might be for full games, the fact that it uses CSS3 means that it can easily be integrated into existing sites and be used for casual games. DivSugar provides the following features: - 3D scene graph by using CSS3 - 2 types of animation mechanism (frame-based and timeline-based) - 3D geometry classes which includes vector, matrix and quaternion - Key/mouse input handling You can check the simple tutorial and afewofdemos of DivSugar on the project page: IvanK Lib: a WebGL based HTML5 engine. Posted 09:11AM on February 17 2012 by Pascal Rettig IvanK Lib is a HTML5 Engine inspired by Flash (the tag line is actually "Like Flash, but faster" that uses the power of GPU accelerated WebGL to render 2d graphics on the screen.
Here's a sample of the code from the graphics demo on the site: <html><head><script type="text/javascript" src=" type="text/javascript"> function Start() { var stage = new Stage("c"); var sp = new Sprite(); stage.addChild(sp); // rectangles for(var i=0; i<50; i++) { var color = Math.floor(Math.random()*0xffffff); sp.graphics.beginFill(color, 0.6); sp.graphics.drawRect(Math.random()*800, Math.random()*500, 70, 70); } // line sp.graphics.lineStyle(2, 0xff0000); sp.graphics.moveTo(20, 20); sp.graphics.lineTo(400, 400); } </script></head><body onload="Start();"><canvas id="c"></canvas></body></html> You can try a couple of projects made with the game below:
BillyWM/FlixelJS. Cakejs - CAKE - Canvas Animation Kit Experiment. UPDATE 2.7.12: A new cake (2.0) is on it's way!
With new docs, Closure compatibility, performance tweaks and more, we hope for this to be the most solid release yet. Released under the MIT license. Cacheable containers Lazy scene updates (reduced floating point math) Superior performance, even on mobile Redraw regions Prototype inheritance allowing type coherence and extension Features Dynamic and extensible JavaScript scene graph Animation timelines and tweening Picking and mouse events Node primitives (ImageNode, Rectangle, Circle, etc..)
Examples Rich graphics Flashy website without Flash - silly and a way too heavy drawing load. Games Missile Fleet - a game written with CAKE Web Mega Pong - another game written with CAKE Mahjong Solitaire: Valentine's - an Android game by Toy Studio with a delicious CAKE core Word Off! File formats CanvasMage - a simple vector image format written in JavaScript Documentation Documentation is on it's way! Fabric.js Javascript Canvas Library. Ryanwilliams/cocos2d-javascript. Sylvester. Batiste/sprite.js. Processing.js.
IvanK Lib - 2D graphics for HTML5. Box2dweb - Box2DFlash port to javascript.