The history of JavaScript's 3D tech development

Before most of popular browsers start to support canvas "3d" context, we JavaScript developers have struggled how to implement to enable 3D by JavaScript without any extensions like Java, Flash, etc. Here is a part of the history of JavaScript's 3D tech development.

Animation.Cube - April 2006

Three years ago, I wrote a library named Animation.Cube which slices images into many vertical lines to show rotating cube. I demonstrated this at the first technical talks of Shibuya.js community. The code is on JSAN. See also digg.

Triangles by Border of Div - October 2006

Useless Pickles (Jeff Lau) shows polygons drawn by many triangles made by <div> elements using trick of borders. It means we could develop Virtua Fighter (1) by JavaScript.

3D by Canvas - March 2008

Again, I wrote a new demo using <canvas> element to draw wireframe image and polygons as well. The code was written for another demo to manipulate Wii Remote controllers, I had sessions talked at OSDC.TW 2008 (Taipei), YAPC::Asia 2008 (Tokyo), YAPC::NA 2008 (Chicago), and YAPC::Europe 2008 (Copenhagen) conferences.

3D Renderer with Textures - March 2008

At just about the same time, Jacob Seidelin gave a great demo with texture mapped polygons using <canvas> element.

Triangle Texture Mapping on Wii - April 2008

Daniel Gump released Wii Opera SDK which had triangle texture-mapping feature. It is a SDK for Nintendo Wii's Internet Channel. He said it could show 500 textured triangles per second on Wii.

Motion Blur - May (maybe) 2008

Kaarel Lumi represented a beautiful motion blur using alpha blending tech by fillStyle. Thanks, @moriyoshi.

Projective Texturing - November 2008

Steven Wittens also wrote projective transform renderer. I'm interested in the tech which make an adjustment on size of the image cutted. It makes many cuts for front pieces.

Sphere Environment Mapping - February 2009

Satoshi Ueyama reported that Chrome had extremely fast canvas rendering engine named Skia by demonstrating his demos and benchmarks. He also described in detail how to implement texture mapping by canvas in his post. He also implemented physical computing and sphere environment mapping feature on it. His demos showed us that now we could run JavaScript 3D by real-time / daily-usable performance on Chrome. And I guess rest of popular browsers will soon come to the stage. See also my post.