Share

Recently I have been looking at 3D as it pertains to the web and controlled through JavaScript without the aid of plug-ins (this is a topic that interests me as in my early programming I created a lot of 3D applications). While Canvas is currently good for 2D rendering (on most browsers and IE with a little help from Google) we are still a ways off from cross browser Canvas 3D support. While I have found a few 3D engines written with Canvas, they all seem to bomb on IE (even with Google's IE Canvas script).

Even if a good 3D solution was available for the web we still have the issue of being able to load all the models for a scene. This got me thinking a bit about how the loading of scene information could be made to work on the Web.

The concept that I have come up with is fairly simply. You would load a map of the scene (this map may could be stored in JSON and could be made to work as a BSP [Binary Space Partitioning] tree) and on the map you would have various check points. Each checkpoint would load the needed models using JSON.

Below is an example of what the JSON for a cube may look like.

{"obj":[{"vrt":[[-5,-5,5],[5,-5,5],[-5,5,5],[5,5,5],[-5,-5,-5],[5,-5,-5],[-5,5,-5],[5,5,-5]],"fac":[[0,2,3,1],[3,1,0,1],[4,5,7,0],[7,6,4,0],[0,1,5,4],[5,4,0,4],[1,3,7,3],[7,5,1,3],[3,2,6,5],[6,7,3,5],[2,0,4,2],[4,6,2,2]],"nrm":[[0,0,-1],[0,0,-1],[0,-0,1],[-0,0,1],[0,-1,0],[0,-1,0],[1,0,-0],[1,-0,0],[0,1,0],[0,1,0],[-1,0,0],[-1,-0,-0]]}],"mat":[{"r":150,"g":225,"b":219},{"r":150,"g":162,"b":223}]

While this is just a concept and we are still waiting on the technology to make the possible. It is interesting to think of how we may be able to use JSON - 3D in the near future.

You can see a demo of Canvas 3D by nihilogic.dk using JSON for models here (this works on Firefox, but may not work on other browsers).