Canvas 3d JS Library

SceneCaster is an online application that allows people to create “spaces” which are 3d scenes on the browsers and share them which other.  It is free to sign up and relatively  easy easy to use. The main problems with SceneCaster are the requirements: The operating systems used are Windows XP or Vista and the browser must be FireFox or Internet Explorer. Also SceneCaster needs to install an application onto the users computer. These requirements limit the amount of people able to uses SceneCaster. I have created a demo using the c3dl library, which uses WebGL, to create a demo of SceneCaster called SceneCreator. This will allow many people to use SceneCaster without installing any software or pug-ins and will support many different browsers.

SceneCreator  has its own GitHub , LightHouse, Website and is worked on daily by Matthew Postill (me). If you would like to see the progression of SceneCreator you can check out my blog at http://sonnilion.wordpress.com/. The demo is located here (requires a WebGL enabled browser). The demo is on version  0.3 and has 3 views 2D, 3D, and Google 3D Warehouse.

2D:

• display 3d object using bounding boxes, walls, lights, and enclosures in a 2d scene
• create wall
• insert lights
• new scene(delete all)
• walls, wall corner, and lights can be selected
• delete selected
• move selected

3D:

• add item to scene from the side bar
• item selection (clicking an item highs it blue and is set as the selected item) *wall are not selectable
• once an item is selected a user can (using the button above the scene):
  • delete
  • rotate
  • move up/down
  • scale
  • copy
  • move to position of the mouse
• camera widget
• 5 independent cameras
• save/load using local storage

Google Warehouse:

• view the Google 3D Warehouse website inside the browser
• back and forward functionality

Here is a demo of me creating a PacMan scene in only 3 minutes. SceneCreator Pacman

Yesterday Andor and I gave a talk at www 2010. It was about how mid level API’s can help web developers who may not wish to do extremely low level programming at the WebGL level achieve the 3D effects they want. The “slides” from our talk can be found here. The slides are not very content heavy. However, we did update one demo for our talk that sort of puts much of c3DL’s features in play. Here is a video of that demo.



Al MacDonald and my colleague David Humphrey also gave a talk about the Audio API which was absolutely fantastic. They had some really neat music visualization demos going. Here is a link to their talk. In particular, check out the videos for these two demos (demo1, demo2) that which are webGL based music visualizers. There are links from Dave’s blog if you want an audio build of minefield to check them out live.

A long while ago I blogged about a web project that came out of c3dl called motionview and even made a video of it. I’m happy to announce that we have now put up a motionview server with some test data that we can let people try out. The server has been updated to use WebGL. However, it does require setting up of id and password so I can’t just provide a link. If you have interest in trying motionview please contact us for id and password.

For those that have not seen it, here is the old video again (this video was made when it was still canvas3D but the server we are running now uses WebGL):

This is now my 3rd year attending GDC in San Francisco. As with other years I usually take this opportunity to visit with my professor who resides in Mountainview, California and use the time on the train to write a post about C3DL, a summary of the year and things to come. In the first year, C3DL had just barely begun. All we had were a couple of spinny cubes. Nothing to write home about really but it was a start. With the extraordinary work put into the project by Andor Salga, and many others, the project showed vast improvements by the second year. We were loading Collada models, we had the foundations of a pretty cool project. Khronos had just announced its specification for what would become WebGL which means applications made with our library would eventually become usable by any browser that supported WebGL. When we first started, we had to use the Canvas 3D addon and it was only available for Firefox. Today, with WebGL, applications made with C3DL work in pre-release versions of Chrome, Firefox and Safari.

We continued working on the library and added several more features. We were also very fortunate to begin work on a different project which gave us the opportunity to actually use the technology that we had built. That project resulted in a web application named Motionview.
Motionview allows an artist to remotely preview and select portions of motion capture shots made at a studio. Initially we were involved with the project to work only on a data converter for the web application. The viewer for the web app was originally going to be done using flash. However, we saw how this project was closely tied with C3DL. After all this application allowed the viewing of an actor’s movement in 3D space. We introduced this idea to our partners on the project and they agreed to use it. I would like to thank both Bedlam Games and the Navarra group for applying our library in a real web application. If you are interested in trying out Motionview, please contact me.

In the fall Andor, went back to school full time and did some amazing work for the processing.js project as part of his open source class. He continued to work on C3DL part time during his studies and we made the port over to WebGL. In early February I had been invited to speak as part of a Khronos sponsored session at GDC and thus I am here for my third year.

This coming summer promises to be very interesting. We will be working with some industry partners to develop our library and to add some really interesting WebGL based applications. Like the development of the motion capture application, these applications will help us add new features to C3DL.

It has been a long time coming but we have now updated all the core features of C3DL to use WebGL. You can dowload our 2.0 release here. We have also updated all our demos to use WebGL. Our tutorials have all been updated (tutorial 5 and 6 needs a better example but we’re getting to it). Our documentation has also been updated for release 2.0

C3DL 2.0 includes the following features:

• uses WebGL (as opposed to Canvas 3D) – you will need a WebGL enabled browser to see demos (see tutorial #1 on how to do this)
• ports all c3dl features including:
• Collada model loading
• Picking
• Lighting System
• camera system
• Particle system
• Effects system that allows a swappable shader to be applied to alter its look. Currently we have the following effects implements:
  • cartoon (with or without outlines)
  • greyscale
  • solid colour
  • sepia
  • gooch
• lines and dots

Many of these features can be observed in our Asteroids-3D demo. (click on rocks to fire at them). We have also moved our repository onto github and a bug tracker at lighthouse. Try it out and give us some feedback! If you are looking for our Canvas 3D related demos please check our Archive link.