Canvas 3d JS Library

WebGL made easy!
  • rss
  • What is C3DL?
  • Download
  • Tutorials
    • Tutorial #1: WebGL Browsers
    • Tutorial #2: A simple scene
    • Tutorial #3: Callback
    • Tutorial #4: Models
    • Tutorial #5: Light effects
    • Tutorial #6: Picking
  • Development News
  • Documentation
  • Community
  • Resources
  • Contact
  • About
For those of you following the c3dl.org blog for the last few months you probably noticed that quite a bit of it since January was about motion capture, lines and dots.  We had spent a considerable amount of time working on dots and lines and we became somewhat obsessive about presenting motion capture data.  It may seem somewhat strange as it seemed like the project veered away from what it was doing and went off on a wild tangent.  This is actually not the case of what was happening.  We were actually involved with working on a really interesting project that showed how 3D in the browser could actually be useful in a real application.  Now that the application is completed, we can talk about it in more details. The Project Around late November of 2008, we were approached by Bedlams Games to be part of a project to create a motion capture preview application.  The project was a joint initiative between The Navarra Group, Bedlam Games, CORE and Seneca College.  Motionview, the application built for the project, was made possible with the support of the Ontario Media Development Coporation on behalf of the Ministry of Culture.
About Motion Capture Motion capture is the process of capturing the movements of actors and using the data to make realistic animations within a game.  The Vicon motion capture system uses a suit where balls of highly reflective material is attached.  Multiple cameras mounted around a studio capture the positions of these balls as an actor moves about in this space.  A computer program then uses this information  to create a model of the movement of the actor. Once the movements are capture, the computer then uses that information to generate motion capture data that can be used by other 3D modeling programs. Clean Up Problem The motion capture data that is generated initially is not flawless. The computer will often identify the balls wrongly and sometimmocaperrores the balls can go completely missing because none of the cameras were able to see it (when the actor is lying on the ground for example.) You can see some of these problems in our demo where we played uncleaned motion capture data. For example in the shot named “stroll”, you can see how the computer think the big toe on one foot is attached to the thigh of the other leg. In order for the raw data to be usable in animation, it must first go through a clean up process. This process involves fixing all the little problems that occur during the motion capture process. Game companies often do not have their own motion capture facility due to its expense.  Instead time is booked at a motion capture studio which will provide the space and equipment to the game company.  Once the shots are made, all the data is cleaned and sent back to the game company.  The problem with this is that the motions captured are not always fully utilized. Only a portion of the shots made are actually used and yet all of the data is cleaned.  Motionview, makes it possible for the artist at the game company to indicate which shots (and portions of shots) need to be cleaned and communicate that to the technicians doing the actual clean up at the motion capture studio. Presentation problem Presenting motion capture data over the web is not a straight forward task.  The issues that need to be addressed include:
  • volume of data,  raw mocap data files are huge.  Moves can be shot at over 100 frames per sec.   Multiply that by an entire day’s worth of shots and sending this data would be no small feat
  • data security.  The cost of studio rental and cleanup means that the shots captured have a huge cost associated with it.  Traditionally only the final cleaned up data leaves the studio and this is done with CD’s and not over the web.
  • visual presentation of motion capture data is necessary.  The artists need to be able to see the shots in order to determine how useful they are.
A problem meets a solution Before I countinue, I would like to thank the guys at the Navarra group for agreeing to use C3DL in Motionview.  I am extremely pleased to know that C3DL got used in a real non-trivial web application. I would like to thank them for their supportive use of open source software in their work. Originally, Seneca’s portion of software development to this project was initially suppose to be the production of a converter program.  Due to the volume of data and the importance of data security of raw mocap data, sending that over the web is not really an option.  Thus, a converter would be necessary to change the data into a down sampled format so that it can be transmitted over a web application.  With our work over the past year or so on C3DL, we suggested using it to provide the visual delivery of the data as opposed to something like flash.  We knew that C3DL would have the capabilities to delivering the content in the browser.  It would be the first real non-trivial use of the library that we know of. Over the winter and spring, the project continued along.  Our trail of blogs about lines and dots continued to grow while little demos on displaying motion capture data made its way onto our site.  Motionview was tested a few weeks ago and the results were very positive.  Tweaks are still being made here and there but all in all the project proved to be a success. Screenshots and demo movie to come in a future blog! I’m back in school and enrolled in an open source development course, DPS909. In the course I will be focusing on Processing.js and will yet again work with Firefox, the Canvas tag and JavaScript. I’ll be blogging about my adventures in Processing.js, but for now there isn’t much content up.

A few weeks ago I had the thought that the library has enough features to implement a two-player chess game. Looking at the library, it has: Model loading – To load the chess pieces
Effects – To change the way pieces look (wood, metal, plastic)
Orbit Camera – To orbit around the board
Picking – To select pieces by model or tile

I think it would be pretty cool, but there’s no way I’ll have the time to actually implement it. Maybe I’ll give it a try once the semester ends.

Since implementing chess might be too ambitious of an endeavor, I’ll stick to lighter tasks. I’ll be on IRC (#c3dl on irc.mozilla.org) when I can, likely on weekends for support. I’ll address some bugs which need fixing here and there. I’ll be updating the documentation, wiki and blog from time to time. Since I’ll be exposed to more JavaScript in the DPS909 course, I hope to learn some new skills and bring those into the project. Exciting!

So, I’ll be sticking around as long as there’s coffee in CDOT.

Videos

Demos

  • Asteroids-3D
  • Particle Systems Demo
  • Cross-Browser Orbiter
  • Mocap Demo With Spheres
  • Google Maps-3D

C3DL Development News

C3DL 2.0-WebGL and beyond

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 [...]

Preliminary WebGL RTS Game

Cathy asked me to make a cool demo using our library. After thinking about, I started getting many ideas, but creating a preliminary real-time strategy game made the most sense. It not only demonstrates a lot of C3DL features such as model loading, transformations, lighting, shaders, picking, cameras, textures, etc, but since animation is kept [...]

Tutorials

  • Tutorial #1: WebGL Browsers
  • Tutorial #2: A simple scene
  • Tutorial #3: Callback
  • Tutorial #4: Models
  • Tutorial #5: Light effects
  • Tutorial #6: Picking

Documentation

Archives

Archives

C3DL Development News

Recent Comments

  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • September 2008
  • August 2008
  • July 2008
  • June 2008
  • May 2008
  • April 2008
  • March 2008
  • February 2008
  • January 2008
  • December 2007
  • C3DL 2.0-WebGL and beyond
  • Preliminary WebGL RTS Game
  • Asteroids in 3D… and a bit of 2D
  • Another demo updated
  • Simplifying the Interface
  • Updating Demos
  • Cross-browser progress update
  • let there be vars
  • Creating tester pages
  • Problems with porting
  • keep it coming ve... - gero3
  • congrats on a great... - Paul Brunt
  • c++ not c# actually... - Cathy Leung
  • It's unbelievable ho... - Paul
  • Wow, now that's a co... - Andor Salga
  • Hi, is the project... - Sascha Hendel
  • I agree with both co... - Cathy Leung
  • Your library is real... - Sascha Hendel
  • Hi, as a more gener... - Sascha Hendel
  • Thanks. I just pull... - peter



Canvas 3d JS Library

©2007- 2009 Canvas 3d JS Library

Disclaimer: This website is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 Canada License.
The Canvas 3d JS Library and Demos found on this website are licenced under the MIT License

Creative Commons License