Canvas 3d JS Library » c3dl development

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.

Preliminary WebGL RTS Game

Andor Salga — Mon, 15 Feb 2010 22:08:08 +0000

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 to a minimum, the frame rate on slower machines shouldn’t be a big deal.

You’ll need a WebGL-compatible browser to run it. You can either download Minefield, WebKit or Chromium. Please let us know if it fails to load. Keep in mind I hacked this thing together in a day so the code isn’t pretty, but here it is anyway!

Asteroids in 3D… and a bit of 2D

Cathy Leung — Mon, 01 Feb 2010 11:12:55 +0000

So I’ve been working on this little demo in preparation for the upcoming (very very soon…docs left only) release of C3DL’s webGL release. I adapted it from Peter Callaghan’s Asteroids game and the models were from an old demo made as part of our user testing last year. This demo is kind of cool because it demonstrates many of the features of C3DL and puts it all together in one. Namely it uses:

collada model loading – you can export to collada from a good number of modeling programs including blender, 3ds max and google sketchup
particle systems – watch the rocks when they explode!
lighting – ok… this is not featured well… I’ll try to see if I can do better with it
picking – click on rock to identify which one

I will probably add something to that uses the effects system as that is one key component not highlighted. Its not quite done yet but I figured I’d link it anyways since I won’t have time to finish it till probably Wednesday…. I still have to add scoring and end game functionalities, the keys should be changed to a and d instead of using arrows, and I think my health bar is messed up when it drops below 25 but… its a start. I also have not tested well on webkit (there was a bug of constantly rotating ship at one point but have not been able to reproduce it) and I can’t seem to run chrome on my desktop atm so no testing there. This demo uses webGL in the main display and I painted the hud with 2D canvas. Click on the asteroids to shoot them. Use arrow keys to rotate the ship. https://cs.senecac.on.ca/~catherine.leung/c3dl/Asteroids3/asteroids.html NOTE: To see this demo you need a web browser that supports webGL and it must be enabled.

Another demo updated

peter — Thu, 28 Jan 2010 21:25:35 +0000

I’ve just finished updating the particle systems demo. There wasn’t anything wrong with the demo itself, but there was an array in the particle system class that wasn’t being initialized properly that suddenly started causing Minefield to crash. The strange thing is that until recently Minefield wasn’t complaining about it. But as of the nightly build on the 23rd it didn’t just complain, it outright crashed. By populating the array with 0s when it is initialized, I’ve got particles working again. The misleading problem was that this happened at the same time I was fixing an issue with colours for Chromium was preventing it from displaying. It started crashing one browser at the same time I fixed a problem for another. It turns out that was caused because colour values were being read out of a file and split into an array, but they were never explicitly made into floating point values. Minefield and Webkit understood them as such anyway, but Chromium didn’t like that. A temporary solution was to multiply the values by 1 before using them, but that isn’t a very good solution. Once I actually traced the problem to its source, a quick parseFloat took care of it. Slightly slower, but more correct.

Simplifying the Interface

Andor Salga — Sat, 23 Jan 2010 22:37:24 +0000

Something we need to do is simplify the C3DL library interface. When approaching such tasks, one method I found extremely useful was to analyze the code in terms of the interface, or that is from the user’s perspective. To do this I first created a basic demo of a spinning cube by writing the necessary HTML and JavaScript files. As for the HTML, it will need to be something like this:
(I emphasized the code which potentially could be changed)



  
    Cavas3D Demo

It would be great if this could be simplified to something like this:



  
    Cavas3D Demo

I removed the somewhat unintuitive SCRIPT_PATH variable and moved the basic_demo.js resource into the canvas tag making it more obvious which .js file is associated to which canvas. These changes haven’t actually been made, I’m just playing with possible changes, brainstorming which parts might be able to be modified.

Now, very few changes were made here and it will probably require a significant amount of effort to make it work. But this work is justified by the fact that the user’s experience and first impression will be more positive. If the user has to spend more than a few minutes trying to get a simple example to render, they’ll probably look for alternatives.

Let’s see how the JavaScript could be changed. Right now, you need to write something like this:
(Again, I emphasized the code which potentially could be changed)

c3dl.addModel('cube.dae');
c3dl.addMainCallBack(mainDemo, 'demo');

function mainDemo(canvasName)
{
  var scn = new c3dl.Scene();		
  scn.setCanvasTag(canvasName);
  var renderer = new c3dl.OpenGLES20();
  scn.setRenderer(renderer);
  scn.init();
  
  var cam = new c3dl.FreeCamera();
  cam.setPosition([0,0,50]);
  cam.setLookAtPoint([0,0,-1]);

  var cube = new c3dl.Collada();
  cube.init('cube.dae');
  cube.setAngularVel([0.001,0.001,0.0]);

  scn.addObjectToScene(cube);
  scn.setCamera(cam);
  scn.startScene();
}

Some changes I had in mind involved getting rid of the global c3dl.addModel() and c3dl.addMainCallback() calls and changing OpenGLES20 to just Renderer. The Renderer is an interesting problem. When WebGL started out as Canvas3D, we called the renderer OpenGLES11, then later it became OpenGLES20 and now it could probably be WebGL. Considering how much it has changed and will change, we’ll have to invest some time to make this stop. One simple solution is to abstract the renderer.

For example, if we change OpenGLES20 class to Renderer, the user will no longer need to be concerned what underlying rendering method is used. If a visitor loads the user’s demo, but visitor’s browser doesn’t support WebGL (i.e. it’s I.E.), the demo still loads. This of course only works if we accommodate for this case. So if the browser is IE, we use DirectX. If the browser supports WebGL, we use that. The end result is the user’s page will create the appropriate renderer without them needing to worry about the user’s browser. So let’s look at what lines changed:

function mainDemo(canvasName)
{
  var scn = new c3dl.Scene();
  var renderer = new c3dl.Renderer();
  scn.init(renderer);
  
  var cam = new c3dl.FreeCamera();
  cam.setPosition([0,0,50]);
  cam.setLookAtPoint([0,0,-1]);

  var cube = new c3dl.Collada();
  cube.init('cube.dae');
  cube.setAngularVel([0.001,0.001,0.001]);

  scn.addObjectToScene(cube);  
  scn.setCamera(cam);
  scn.startScene();
}

In terms of the lines trimmed, I’m not certain how much of it is viable. The reason some of the seemingly redundant code is required was because I couldn’t devise any alternative at the time. Looking at it from a different perspective, I should be able to come up with something. In the end we’ll have an interface which is more flexible, easier to understand and of course simple.

Updating Demos

peter — Tue, 19 Jan 2010 15:40:09 +0000

I’m continuing to update the demos with the copy of the library that works cross-browser (and will continue to do so). There was a slight delay in the motion capture demo due to the difference in how the browsers read xml files. We had been using:

xmlDoc = document.implementation.createDocument("","",null);
xmlDoc.async = false;
xmlDoc.load(xmlFile);

but Safari and Chrome don’t accept that. After a quick search (ignoring the pages that make it sound more complicated than it is and want to sell you code to take care of it) I found the answer to be quite simple.

xmlDoc = document.implementation.createDocument("","",null);
xmlDoc.async = false;
var xmlReq = new XMLHttpRequest();
xmlReq.open("GET", xmlFile, false);
xmlReq.send(null);
xmlDoc=xmlReq.responseXML;

It ends up as a few extra lines, but it works for all three. This was a problem with the code for that individual page, but it seems to be the kind of thing we can expect when trying to write complex code for multiple browsers.

I’ll be working on the particle systems demo next, as it also has a bit of code that is firefox only.