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
    • Tutorial #7: Materials
    • Tutorial #8: Particle Systems
    • Tutorial #9: Camera Basics
    • Tutorial #10: Advanced FreeCamera
    • Tutorial #11: OrbitCamera
    • Tutorial #12: Advanced Camera Functions
  • Development News
  • Documentation
  • Community
  • Resources
  • Contact
  • About
Recently there has been a lot more interest in WebGL. Our previous work on its predecessor (Canvas 3D) has led to more interest in our work as well. When we were developing the library for Canvas 3D, we had really only one browser to test for. Usually the video card/OS determined whether our library would work or not. However, as we port to WebGL it became clear that we needed a better way to allow feedback from users. Currently what we have are just comments… user says “doesn’t work on my system running….” in the comments. However, I do not feel that this is a good way to do this. Two reasons for this:
  1. It is not simple. I firmly believe the easier we make it for someone to give us feedback, the easier it would be for us
  2. It doesn’t give any positive feedback. We know when things do not work but what we don’t know is when things do.
What we would like to do is create a series of tester pages (easy enough as we have tests for all our features) and allow the user to easily give us feedback on whether or not they see the expected result. The results can then be placed on the tester page like a comment (possibly with the information analyzed so we don’t end up with multiple entries saying the same thing).

We would like to put up something like this(NOTE: this page doesn’t work! just shows you what we want to do):  http://www.c3dl.org/wp-content/tester_template/

Our site is wordpress driven and while wordpress has some very nice features, there are definitely downsides to it. Often we find that if we want to do something out of the ordinary, we end up having to jump through hoops to get wordpress to play nice and not get in the way.

For the past week or so, I have been trying to hunt down a plug-in that will allow us to create a form on a page and then let it display the results (pretty much a customizable comment form that is different from the comment forms on our other pages). At first I thought I could do this with a contact form plug-in. I have since discovered that a comment form is not exactly the same as a contact form. BTW… I’ve just started doing research into this area so if I’m mistaken about this, please let me know. Contact forms get mailed back to you while comment forms are shown in page. I was hoping that I would be able to find a plug-in that would let me do this but no luck so far. While there are lots of contact form plugins, I don’t think I see any that show the information right back to the page. I think I can get what I want by doing some theme editing but I was hoping there would be a simpler solution. In any case, hopefully I’ll be able to find something soon to solve this.

I’m currently in the process of trying to port over our library so that it works in Safari(WebKit) (and eventually Chrome too) and not just Firefox. The first step of this was getting rid of our use of a ‘const’ namespace, and I’ve accomplished that (I haven’t actually released it because I want to make sure it works right before I release it and start letting people use something that’s broken), but now I’m having trouble with the differences between how Firefox handles including extra files in script tags, and how Safari does it.

The issue is that to use c3dl you have to tell the browser to include some extra files (normally using script tags) and instead of having to manually include each file (there are quite a few of them, it is a library after all), it is handy to include one file, which then gives instructions to include all the others. Doing it this way means that you can make changes to the library (maybe add some now files or get rid of some obsolete ones) and you only have to change the file that says what files to include, which will cascade to all the pages that include it. If we manually put all the includes in every web page, you’d have to update every one of them every time there was a change to the file structure of the library.

Firefox seems to accept this and when the first file you tell it to include (from now on we’ll refer to that as fileA), says to include some other files (we’ll call them fileC, fileD, and fileE) it reads them before it gets to the next file that the page tells it to include (we’ll call that one fileB). To rephrase that: The page says to include fileA and fileB. FileA says include fileC, fileD and FileE. FileB has some other code (in our model, this is the actual 3d app that you’re trying to display in the canvas). Firefox includes fileA and based on what it says also includes FileC, FileD and FileE. Then it includes fileB. Safari includes fileA, then fileB and then gets around to what FileA told it to do and includes fileC, fileD and fileE (I think…it crashes before it can get here). The problem is that files C,D and E are the library, while B is the code that needs the library to run. So we have to get C,D and E before B, or to go back to the real code, we need the library before we read the code that uses the library. So I need some way to force Safari to read the files in the library before it reads the file that says what the page does.

Now, I keep using the word ‘include’ and I know JavaScript does not have an include statement, but I mean the general idea of reading code that is in some other file. Here this is accomplished with a script tag such as:

<script type="application/javascript" src="../../canvas3dapi/c3dapi.js"> </script>
<script type="application/javascript" src="orbiter.js"></script>

So Firefox would include c3dapi.js, then everything c3dapi.js says to include (it just adds some more script tags like this to the DOM, each of which specifies some other .js file to use), then it would include orbiter.js. Safari includes c3dapi.js, then orbiter.js, then all the other files that c3dapi.js added. So I need some way to force Safari to include them in a specific order. We have already received an email or two with suggestions (Thanks Tim) on how to make the code work on Safari, and they at least allow us to do away with the SCRIPT_PATH variable, but they still fall victim to the same problem about the order of the includes. Right now I’m using appendChild on the head element to add the extra script tags, but I’m thinking there might be a way to sneak them into the middle of the head’s child tags so we can get them to be read before the next script tag that actually did appear on the page. I’m thinking something like insertBefore or insertAfter, but I need a little more time to play with those.

I’m going to keep working on this, and if anyone has any suggestions, I’d be happy to listen.

Yesterday I fixed a bug in the grayscale effect. Today I fixed rendering sphere objects as points. That means there are now about two known remnant bugs from the Canvas 3D to the WebGL port. Almost done!

I was using one of our mocap demos as a test for the last bug. Looking at it, I thought I should update it and make it a bit more intuitive. Hitting keys to change the script state? What was I thinking? So I created a form and added some simple controls along with jQuery UI sliders on the page. Use your cursor to orbit around the scene and the scroll wheel to zoom.

Enjoy!

Snapshot 2009-11-22 17-06-19

Isn’t WebGL fun!? Since all the cool kids are doing it, we have made an account on twitter to tweet our development news. Our twitter id is C3DL A while ago, Cathy found that Firefox crashes if you try rendering point primitives using Canvas 3D while running DVD Player on OSX. A bit of a strange bug, but I guess most bugs are. At that time, I wrote a blog post which mentions the issue and I filed a bug in Bugzilla. That was half a year ago. Interestingly enough, this week someone changed the status of the bug to critical. I checked it out and the bug is still sitting there unconfirmed. This makes me sad and I want to change that.

With WebGL now part of Minefield, I wanted to see if the bug is still present. I opened one of our mocap demos and I was reminded why I hate testing for this bug. The process is nothing short of extremely frustrating. Why? Because as soon as I select a scene to play in the DVD player application, the entire OS freaks out. My cursor turns into a happy spinning candy thing while the OS response time slows to an insufferable crawl. I’m left waiting there for the Force Quit dialog to appear so I can quit Minefield or the DVD player. I often found myself following the three finger salute with its base class.

Anyway, this means that whatever was screwy with Canvas 3D slipped into Mozilla’s implementation of WebGL in Minefield. I believe I can rule out the DVD Player being the cause because I think it plays nice when rendering other content. I say think because I don’t have the patience to keep playing with it and narrowing the problem down, it’s that bad. But what I do know is it’s crashing at least when rendering points.

I know, the problem is very specific. You need to run Minefield in OSX while playing a DVD while rendering point primitives. This is probably why my bug is still unconfirmed . I’m still adamant that this needs to be fixed. Sure, our library has a workaround, we render small spheres by default instead of WebGL’s point primitives. But what if we find the bug cropping up in other places? I need to update the bug in Bugzilla to try to prevent this. If the problem is now a Minefield issue instead of an extension issue, the chances of it getting fixed with be increased. If not, the problem will eventually become a Firefox issue. What worries me about that is sometimes Firefox issues take a while to get resolved.

Videos

Demos

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

C3DL Development News

A spec change that keeps coming back to haunt me

At some point, the way firefox handles keyboard events changed. I’m not sure exactly when it happened, all I know is that it broke how I was dealing with keyboard interaction on almost every demo I’ve written (for example,the mocap demo and MotionView). When I wrote the demos, the keydown event would be fired once, [...]

Release 2.2

The 2.2 Release of the Canvas 3D Library includes a number of new features, updates to old features and fixes for several bugs along with the requisite changes to meet the evolving WebGL spec. Some of the things included (in no particular order) are: Better picking code. The ability to swap textures as a scene [...]

Tutorials

  • Tutorial #1: WebGL Browsers
  • Tutorial #2: A simple scene
  • Tutorial #3: Callback
  • Tutorial #4: Models
  • Tutorial #5: Light effects
  • Tutorial #6: Picking
  • Tutorial #7: Materials
  • Tutorial #8: Particle Systems
  • Tutorial #9: Camera Basics
    • Tutorial9-YawPitchRoll
  • Tutorial #10: Advanced FreeCamera
  • Tutorial #11: OrbitCamera
  • Tutorial #12: Advanced Camera Functions

Documentation

Archives

Archives

C3DL Development News

Recent Comments

  • June 2011
  • March 2011
  • October 2010
  • July 2010
  • April 2010
  • March 2010
  • 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
  • A spec change that keeps coming back to haunt me
  • Release 2.2
  • 2.1 Release and things to come
  • Level Up! An Open Web Game Jam
  • Site moved!
  • SceneCreator0.3
  • WWW2010 in Raleigh
  • Motionview
  • On the train to Mountainview
  • C3DL 2.0-WebGL and beyond
  • That depends on what... - peter
  • This application is ... - Haisens
  • I think that example... - peter
  • The above links are ... - Atash
  • Hi there, just wante... - Patrick H. Lauke
  • Firefox 4 was releas... - Cathy Leung
  • In order to access l... - peter
  • I am not able to dis... - preksha
  • "JavaScript can’t di... - Joe Hocking
  • I should point out t... - peter



Canvas 3d JS Library

©2007- 2010 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