Difference between revisions of "Canvas3D JS Library"

From CDOT Wiki
Jump to: navigation, search
(→‎Library TODO's - Low Priority)
 
(62 intermediate revisions by 15 users not shown)
Line 1: Line 1:
 +
{{Admon/obsolete}}
 +
 
== Introduction ==
 
== Introduction ==
  
−
The Canvas 3D JS Libary (C3DL) is a javascript library that will make it easier to write 3D applications using canvas 3d.     It will provide a set of math, scene, and 3d object classes to make the canvas more accessible for developers that want to develop 3D content in browser.
+
The Canvas 3D JS Libary (C3DL) is a Javascript library that will make it easier to write 3D applications using WebGL. It provides a set of math, scene, and 3d object classes to make the canvas more accessible for developers that want to develop 3D content in browser.
  
−
== Contributors ==
+
== Contributors==
 
* Catherine Leung
 
* Catherine Leung
−
* Mark Paruzel (CodeBot)
+
* [[User:asalga | Andor Salga]]
 +
* Peter Callaghan
 +
* [[User:Pplam3 | Patrick Lam]] (Picking)
 +
* [[User:Jamesboston | James Boston]] (Garbage collection)
 +
* Mark Paruzel
 
* Andrew Smith
 
* Andrew Smith
−
* Chris Bishop (Javascript)
+
* Chris Bishop
−
* Andor Salga
+
* Jeremy Giberson
−
* [[User:Pplam3 | Patrick Lam]] (Picking - Javascript)
+
* Joe Drew
−
* [[User:Jamesboston | James Boston]] (Garbage collection)
+
* Matthew Postill
 +
 
  
 
== Downloads ==
 
== Downloads ==
 +
 +
For the library, samples, and tutorials, go to [http://www.c3dl.org/ c3DL.org].
 +
 +
As of c3dl 2.0, our library uses WebGL.  Any WebGL enabled browser will be able to view our content.  To get a WebGL enabled browser see Tutorial 1 from our website and you do not need any addons.
 +
 +
For all older versions of c3dl, you will need the canvas 3D addon available here:
 
You can get the extension from https://addons.mozilla.org/en-US/firefox/addon/7171 (use suckmenot@mailinator.com/bugmenot for authentication).
 
You can get the extension from https://addons.mozilla.org/en-US/firefox/addon/7171 (use suckmenot@mailinator.com/bugmenot for authentication).
  
−
For the library, samples, and tutorials, go to http://www.c3dl.org/
+
NOTE: It is HIGHLY recommended that you do not use the older version of our library but to use version 2.0 or higher.
  
 
== Links ==
 
== Links ==
−
* [http://www.c3dl.org Our Web Site]
+
* [http://www.c3dl.org c3DL.org]
−
<!-- * [http://littlesvr.ca/canvas3d/blog/ Our blog] dead link -->
+
* [http://github.com/cathyatseneca/c3dl GitHub Repo]
−
* Our SVN Repo: svn://cdot.senecac.on.ca/canvas3d
+
* [svn://cdot.senecac.on.ca/canvas3d Old SVN Repo]
−
* [http://vlad.off.net/hg/canvas3d/ canvas3d source code] in Vlad's hg repo
+
* [http://en.wikipedia.org/wiki/C3DL Wikipedia page]
 +
 
  
 
== Related Resources ==
 
== Related Resources ==
−
* [http://www.opengl.org/documentation open gl documentation]
+
* [http://www.khronos.org/webgl/ Khronos WebGL]
−
* [http://nehe.gamedev.net/ Nehe Tutorials on OpenGL]
 
−
* [http://shape.cs.princeton.edu/benchmark/ .off (object file format) format info]
 
−
 
 
−
== Prototype ==
 
−
* [http://img126.imageshack.us/img126/3032/layoutqe4.jpg Canvas 3D API - Class Design]
 
−
 
 
  
  
 
== Documentation ==
 
== Documentation ==
  
−
Documentation can be found within the SVN repository in the documentation directory.
+
Documentation can be found on our website: [http://www.c3dl.org/index.php/documentation/ c3DL.org].
−
 
 
−
== Web site TODO's  ==
 
−
 
 
−
* Write particle system tutorial
 
−
* Write camera tutorial
 
−
* Write keyboard control tutorial
 
−
* Write callback function tutorial
 
−
* Write transition tutorial for flash developers
 
−
* Write blender tutorial: How to export to collada and import into the library
 
−
* Write debugging tutorial: Creating meaningful debug output with and without firebug
 
−
* At end of tutorials, provide link to demo showing what user can now do.
 
−
 
 
−
== Library TODO's - High Priority ==
 
−
 
 
−
<ol>
 
−
<li>Finish implementation of ray/triangle picking</li>
 
−
<li>Spec out how to draw lines add implement. (make line primitive?)</li>
 
−
<li>Optimize matrix multiplication in the 2.0 context</li>
 
−
<li>Implement positional lights in the 2.0 context</li>
 
−
<li>Implement spot lights in the 2.0 context</li>
 
−
<li>Detect and warn users if they try to initialize a Collada object without first using addMode()</li>
 
−
<li>Wrap use of 1.1 constants in conditional</li>
 
−
</ol>
 
−
 
 
−
== Library TODO's - Low Priority ==
 
−
 
 
−
* Add sound support.
 
−
* Create a mechanism to prevent scripts from running before everything (textures, models) is done loading.
 
−
* Catch and report error on "Access to restricted URI denied", which occurs if user tries to access a model file which does not exist.
 
−
* Create a progress bar which includes percentage complete of model and texture loading.
 
−
* Add particle system size attenuation.
 
−
* Add set/getVisible for Collada object.
 
−
* Allow users to specify texture filtering
 
−
* Delete texture objects when textures are deleted from library.
 
−
* Create and post a hierarchical diagram of the library classes
 
−
* Investigate overriding spacebar and arrow keys from browser's default behavior.
 
−
* Add multi-texture support.
 
−
* Add option to change back-face culling.
 
  
−
== Bug List ==
 
−
 
−
* Cube
 
−
** setDims function does change the vector holding the cube's dimensions but the vector is not used to change the actual size or shape of the cube.
 
−
** <del>the rotation function has a problem.  I think its because the axis isn't being orthonormalized properly after a rotation.  This is causing distortions and worse... it will eventually lead to an object's implosion/explosion.  This can be very easily seen when you look increase the angular velocity.  Definitely should be fixed.</del>
 
−
 
−
* Camera
 
−
** Added Sept 3, 2008 - The setLookat is broken when using the vector of ( 0, -1, 0 ).  I haven't confirmed if this is intended functionality.  ( Chris )
 
−
** When increasing or decreasing the X Axis for the camera's position it does move in the current direction but also starts to rotate around the vector (0,0,0).
 
−
** Rotate function is still broken
 
−
* Collada
 
−
** fix FindNode for Collada's scenegraph.
 
−
* Rendering
 
−
** <del>( The depth buffer is not working, objects aren't properly occluded.)[http://matrix.senecac.on.ca/~asalga/canvas3d/teapot.jpg teapot handle drawn after teapot body] The rendering of objects seems to be based on their order in the object list in the scene. The problem arises when a cube is behind another cube.  The cube in the back should only have the parts showing drawn, however if this cube is drawn after the closer cube then the behind cube is drawn on top of the closer cube.  Hard to describe.</del> FIX: Enabled the depth buffer and properly cleared the depth buffer by passing in the correct argument to clear(...)
 
−
** When I open main.js, then put the mac to sleep, then wake it up: i get a fast stream of js errors in the console, canvas warnings on the page, and no rendering is done.
 
−
* Linear Velocity
 
−
** <strike>Setting the Linear Velocity does not do anything.</strike>
 
−
* Cube
 
−
** <strike>setDims uses obsolete Vector function - setFromVector</strike>
 
−
* setLookAtPoint - May 14
 
−
** Objects at 0,0,0 are not displayed when setLookAtPoint is passed (0,0,0). However, if called with cam.setLookAtPoint(new Vector(0.0, 0.0, 0.00000001)) , it will work.
 
−
* Scene Object
 
−
** <del>Currently you can only have 1 scene.  There is a global var called thisScn, does this reallly need to be global?  Can it not be a local variable?</del> thisScn was made into a local variable call getScene() to get thisScn.
 
−
** Currently the scene cannot be resized.  The 3d graph needed the scene to grow or shrink with respect to the table cell it was in.  The needed functions has unofficially been added to a copy of Scene.js used only by the 3d graph demo.
 
−
** Add functions to start and stop animations ( start and stop the scene timer ).
 
−
** Callback functions for Update / Keyboard / Mouse can be set but cannot be unset.
 
−
* Primitive Object
 
−
** The render function uses obsolete Vector Functions.
 
−
** <del>All Get functions have obsolete Vector functions ex. getX()</del>
 
−
** <del>The update function has obsolete Vector function ( Multiply ).</del> obsolete code was replaced with new code.
 
−
* Textures
 
−
** <del>textures are not always displayed. Seems like textured object needs to be moving or at least another object in the scene needs to be moving.</del> FIX: Scene was rendering only one frame if nothing moved, but the textures are loaded after the scene is rendered, so objects were not textured. Now scene renders regardless if objects move or not.
 
−
** <del>very strange bug, when creating a texture in ms paint and a the entire texture is one solid color, the browser will crash as soon as the image is loaded.  If there is at least one pixel which is not the color of the 'solid color', there are no problems.  Likely due to the format openGL is expecting the file to be.</del>
 
−
FIX: Vlad fixed this in the canvas3d extension.
 
−
** <del>not a bug, but the context should not be passed into the Texture's setTexture method.</del> Model.setTexture() changed.
 
−
** <del>if two contexts are used, 2.0 and 1.1, textures in 1.1 don't appear.</del>
 
−
* Model Object
 
−
** When applying a texture to a cube some of the faces are upside down.
 
−
** The primitive functions are not working.  The update or render of the primitive object appears to not be called.
 
−
* General
 
−
** Currently attempts to use an 'out' variable to prevent memory allocations do not work. see [http://www.c3dl.org/index.php/c3dl-dev/more-memory-usage-improvements/ link]
 
−
** Fix angular velocity/gc bug. If object is set to spin on more than one axis, its angular velocity will change when the gc starts.
 
  
 
== Ideas List ==
 
== Ideas List ==
  
−
Here are the wishlist of things we want to be able to do with the library.... If you want something add it to the list
+
Here are the wishlist of things we want to be able to do with the library.... If you want something add it to the list.
  
 
* 3D Asteroids - Good use of Collision detection, animation, particles, camera work, both mouse and keyboard controls.
 
* 3D Asteroids - Good use of Collision detection, animation, particles, camera work, both mouse and keyboard controls.
Line 129: Line 57:
  
 
* 3D graphs
 
* 3D graphs
−
&nbsp;&nbsp;&nbsp;&nbsp;- Display social networks and their relationships<br />
+
:* Display social networks and their relationships<br />
−
&nbsp;&nbsp;&nbsp;&nbsp;- Get earthquake Richter-scale values from a service and show graphs on a map<br />
+
:* Get earthquake Richter-scale values from a service and show graphs on a map<br />
−
&nbsp;&nbsp;&nbsp;&nbsp;- Display 3D graphs beside one another, gas prices along stock market values<br />
+
:* Display 3D graphs beside one another, gas prices along stock market values<br />
−
&nbsp;&nbsp;&nbsp;&nbsp;- 3D flowcharts<br />
+
:* 3D flowcharts<br />
  
 
* 3D Traceroute - graphical view of an IP's path across the internet. More details [http://www.c3dl.org/index.php/uncategorized/canvas3d-traceroute-idea/ in this blog post]
 
* 3D Traceroute - graphical view of an IP's path across the internet. More details [http://www.c3dl.org/index.php/uncategorized/canvas3d-traceroute-idea/ in this blog post]
  
−
* 3D Canvas Racing Demo - like [http://www.tapper-ware.net/canvas3d/ this] but better, to show that it's both easier to use, more funcionality is available, and runs much faster (hopefully)
+
* 3D Canvas Racing Demo - like [http://www.tapper-ware.net/canvas3d/ this] but better, to show that it's both easier to use, more functionality is available, and runs much faster (hopefully)
  
 
* Molecule Viewer - Rotate 3D molecules. Similar to [http://www.worldofmolecules.com/3D/bcarotene_3d.htm this]
 
* Molecule Viewer - Rotate 3D molecules. Similar to [http://www.worldofmolecules.com/3D/bcarotene_3d.htm this]
Line 150: Line 78:
 
* Matrix - Query search engines for sites, chat logs, blogs, etc. and display all the text in a matrix-like fashion.
 
* Matrix - Query search engines for sites, chat logs, blogs, etc. and display all the text in a matrix-like fashion.
  
−
* Really fancy animation of a bar graph, with columns growing and arrow moving. Will be an instant hit with businessmen. Usable as easy as [http://code.google.com/apis/chart/ google's toy]
+
* Really fancy animation of a bar graph, with columns growing and arrow moving. Will be an instant hit with business people. Usable as easy as [http://code.google.com/apis/chart/ google's toy]
 
[[Image:higherhigher.jpg]]
 
[[Image:higherhigher.jpg]]
  
Line 159: Line 87:
 
* multi-player network air hockey.  Supports up to 8 players.  Create an arena based on number of players .  Each wall has a hole and a paddle that players can move left and right.  A ball is randomly sent flying and each time it goes through a hole, the player loses a point.  Lose 10 points and that player is eliminated.  Last person alive wins.
 
* multi-player network air hockey.  Supports up to 8 players.  Create an arena based on number of players .  Each wall has a hole and a paddle that players can move left and right.  A ball is randomly sent flying and each time it goes through a hole, the player loses a point.  Lose 10 points and that player is eliminated.  Last person alive wins.
  
−
=== Meeting Summaries ===
+
* 2 Player Online Chess
−
 
+
:* Orbit camera can be used to orbit around the board.<br />
−
====May 29====
+
:* Effects can be used to change what material the pieces and board use such as metal, wood, etc.<br />
−
For next week:
+
:* Picking can be used to allow a simple interface to move the pieces. Either clicking on two tiles can move a piece or clicking on a piece and then a tile can move the piece.<br />
−
 
+
:* Further research is needed to determine the best server-side language to use to share board state between players.<br />
−
Mark: Add to library and do some bug fixes based on what Chris found
+
:* Animation can be achieved simply by setting velocities of pieces.<br />
−
 
 
−
Chris: Work on putting his apps on site
 
−
 
 
−
Andrew: Work on making the libraries work with shaders.  Provide a method for detecting capability of client to use a 2.0 context and switch
 
−
 
 
−
Andor: was absent but will work on shaders
 
−
 
 
−
====June 04====
 
−
 
 
−
Mark:
 
−
 
 
−
Cathy: send andrew a simple model to play with. Add equivalent of hello world tutorial for library.  Begin documentation
 
−
 
 
−
Chris:
 
−
* Release Version 2 of the Type Game. New feature is vertical movement.
 
−
 
 
−
Andrew: figure out how to load files form http:// in javascript to be able to load a model from the internet; and display a model that's in some ascii format
 
−
 
 
−
Andor:
 
−
* Get textures applied to cubes (no uv's yet) in 1.1 context.<br />
 
−
* Investigate box skewing problem in 2.0 context.<br />
 
−
* Get camera working in 2.0 context.<br />
 
−
* Clean up shader code converter and upload to repo.
 
−
 
 
−
 
 
−
====June 12====
 
−
General goal: establish a format for models.
 
−
0.3 release date goal: end of june.
 
−
 
 
−
Cathy:  Work on more tutorials involving keyboard and camera control.  Look for bugs, document the functions
 
−
 
 
−
Mark: test changes with the basic demo (especially involving 2.0 context) when changing rendering.
 
−
 
 
−
Chris: studying for midterms
 
−
 
 
−
Andrew: Fix the 2.0 rendering. Work on loading and displaying models. Give Andor some idea about the preffered format.
 
−
 
 
−
Andor: figure out the model format, get model and texture working in 1.1 context, get texture working in 2.0 context(?)
 
−
 
 
−
====June 19====
 
−
Cathy: continue on tutorials.
 
−
 
 
−
Mark:
 
−
 
 
−
Chris: back from Exams.  Updated demo to use latest API.  Working on adding vertical movement for the cubes.
 
−
 
 
−
Andrew:
 
  
−
Andor: Add textures to benchmarking, get rendering in Model work with same file with different contexts, get Model scaling to work, fix bugs.
 
 
[[Category:Open Source Communities]]
 
[[Category:Open Source Communities]]

Latest revision as of 19:42, 26 January 2014

Important.png
This page may be obsolete.
It contains historical information.

Introduction

The Canvas 3D JS Libary (C3DL) is a Javascript library that will make it easier to write 3D applications using WebGL. It provides a set of math, scene, and 3d object classes to make the canvas more accessible for developers that want to develop 3D content in browser.

Contributors


Downloads

For the library, samples, and tutorials, go to c3DL.org.

As of c3dl 2.0, our library uses WebGL. Any WebGL enabled browser will be able to view our content. To get a WebGL enabled browser see Tutorial 1 from our website and you do not need any addons.

For all older versions of c3dl, you will need the canvas 3D addon available here: You can get the extension from https://addons.mozilla.org/en-US/firefox/addon/7171 (use suckmenot@mailinator.com/bugmenot for authentication).

NOTE: It is HIGHLY recommended that you do not use the older version of our library but to use version 2.0 or higher.

Links


Related Resources


Documentation

Documentation can be found on our website: c3DL.org.


Ideas List

Here are the wishlist of things we want to be able to do with the library.... If you want something add it to the list.

  • 3D Asteroids - Good use of Collision detection, animation, particles, camera work, both mouse and keyboard controls.
  • Solar System Explorer - Pull the positions of our planets from some sort of webservice and display them, allowing users to see their relative alignment.
  • Simulation of 3D path finding
  • 3D graphs
  • Display social networks and their relationships
  • Get earthquake Richter-scale values from a service and show graphs on a map
  • Display 3D graphs beside one another, gas prices along stock market values
  • 3D flowcharts
  • 3D Traceroute - graphical view of an IP's path across the internet. More details in this blog post
  • 3D Canvas Racing Demo - like this but better, to show that it's both easier to use, more functionality is available, and runs much faster (hopefully)
  • Molecule Viewer - Rotate 3D molecules. Similar to this
  • 3D Sudoku
  • 3D Rubik's Cube
  • House Explorer/Designer - Load a mesh of a room or a house and allow users to navigate through the environment or design a room in a house.
  • 3D Photo Album - Download images and create a 3D photo album similar to this.
  • Matrix - Query search engines for sites, chat logs, blogs, etc. and display all the text in a matrix-like fashion.
  • Really fancy animation of a bar graph, with columns growing and arrow moving. Will be an instant hit with business people. Usable as easy as google's toy

Higherhigher.jpg

  • Generic model viewer application, with back/forward/index + zoom/rotate buttons that would download and display models from the web. Would have to be able to convert 3dsmax models in JS. So a museum or such could just slap the app on the page and give it an array of URLs for the stuff to show.
  • Pong. Should be fairly easy, we just need to code the collision detection.
  • multi-player network air hockey. Supports up to 8 players. Create an arena based on number of players . Each wall has a hole and a paddle that players can move left and right. A ball is randomly sent flying and each time it goes through a hole, the player loses a point. Lose 10 points and that player is eliminated. Last person alive wins.
  • 2 Player Online Chess
  • Orbit camera can be used to orbit around the board.
  • Effects can be used to change what material the pieces and board use such as metal, wood, etc.
  • Picking can be used to allow a simple interface to move the pieces. Either clicking on two tiles can move a piece or clicking on a piece and then a tile can move the piece.
  • Further research is needed to determine the best server-side language to use to share board state between players.
  • Animation can be achieved simply by setting velocities of pieces.
Retrieved from "https://wiki.cdot.senecapolytechnic.ca/w/index.php?title=Canvas3D_JS_Library&oldid=104091"