Canvas 3d JS Library

A spec change that keeps coming back to haunt me

peter — Fri, 24 Jun 2011 18:22:33 +0000

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, when the user initially pressed the key (it still works this way on the other browsers as far as I can tell), but at some point that I missed it got changed to firing on every update for as long as the key is held (or until you press another key, at which point the keydown event will start firing repeatedly for that key). Several of the demos and tests I have written relied on the keydown event to start moving something in the scene (usually the camera). Unfortunately, when the event switched over to firing repeatedly as long as a key is held, this caused uncontrollable acceleration which could only be countered by holding a key for the opposite movement a corresponding amount of time.

I accommodated for this by adding a check into the function that handles that event to compare the key most recently pressed to the previous key pressed (which starts off as a value of -1, and must be reset to that whenever the most recent key pressed is released) and only causes the movement if they do not match. I think I’ve added this into the various demos that require it, but if you find any of them have weird camera movement that just doesn’t behave right, let me know in the comments.

Release 2.2

peter — Wed, 23 Mar 2011 00:15:15 +0000

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 is running.
The ability to texture an object with video files and canvas tags.
More information about objects, such as the number of triangles, the size of the object (and the ability to scale it to a particular size) and the ability to center an object.
Primitive objects such as cubes, planes and spheres.
Upgraded collision detection.
The ability to pause/stop/start the scene (rendering and updating).
The ability to label an object in the scene as static, so time won’t be wasted trying to calculate the movements of an object that does not move.
Using RequestAnimationFrame so as not to waste time rendering a page that isn’t visible.
Frustrum culling.
General improvements to the performance of the library.

We have a number of other changes coming, along with new tutorials and demos planned. And as always, you can request new features and/or report bugs through our lighthouse account

2.1 Release and things to come

Cathy Leung — Tue, 26 Oct 2010 21:25:30 +0000

As WebGL is implemented and refined by various browser makers, things that were once working for c3DL has been broken. This 2.1 release is made without new features but will hopefully address some of the new issues that have come up.

Level Up! An Open Web Game Jam

Cathy Leung — Mon, 25 Oct 2010 22:43:34 +0000

On October 27, the Level Up Game Jam will be held at Seneca College (Seneca@York campus) as part of Toronto Open Source Week. A set of small tutorials on tools that can be used to develop games for the open web will be presented in the morning. In the afternoon, attendees are encouraged to break out into small groups (or by themselves) to make games with these tools. Tutorials Topics and Facilitators:

Andor Salga – processing.js
Catherine Leung – c3DL
Alistair MacDonald – web audio

There is a very small number of spots left, please sign up if you are interested! This event is free with registration to FSOSS 2010 and $20 otherwise

Site moved!

Cathy Leung — Wed, 06 Oct 2010 22:41:08 +0000

We have just recently moved our site to a new web host. As a result there are probably many broken links and so on. These are being fixed as we go (although really old archives will likely not be updated). Please let us know what is broken as we move forward to fix them

SceneCreator0.3

Matt — Fri, 09 Jul 2010 16:24:37 +0000

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

WWW2010 in Raleigh

Cathy Leung — Fri, 30 Apr 2010 17:43:04 +0000

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.

Motionview

Cathy Leung — Fri, 30 Apr 2010 16:22:37 +0000

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

On the train to Mountainview

Cathy Leung — Wed, 17 Mar 2010 18:45:04 +0000

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.

C3DL 2.0-WebGL and beyond

Cathy Leung — Mon, 22 Feb 2010 05:59:12 +0000

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.