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.


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).

will we be able to see the renderer for that json string ?


Yes, I'm working on a little demo renderer to better show how this would work.


I thought about something similiar to your your thought when I was making my paper... but I give up... but still interested to see if it could be implemented...

Hi. I'm the guy who made the demo you linked to. I just thought I'd let you know there's an updated version (that actually works): http://www.nihilogic.dk/labs/canvas3dtexture_0.2/.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <div> <blockquote> <object> <embed> <img> <param>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Copy the characters (respecting upper/lower case) from the image.