Difference between revisions of "Canvas3D JS Library"

Latest revision as of 19:42, 26 January 2014

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

Catherine Leung
Andor Salga
Peter Callaghan
Patrick Lam (Picking)
James Boston (Garbage collection)
Mark Paruzel
Andrew Smith
Chris Bishop
Jeremy Giberson
Joe Drew
Matthew Postill

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

Khronos WebGL

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

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.

Difference between revisions of "Canvas3D JS Library"

Latest revision as of 19:42, 26 January 2014

Contents

Introduction

Contributors

Downloads

Links

Related Resources

Documentation

Ideas List

Navigation menu

Personal tools

Namespaces

Variants

Views

More

Search

Navigation

get involved with CDOT

courses

course projects

links

Tools

@@ Line 1: / Line 1: @@
+{{Admon/obsolete}}
 == 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.
-== People Working On This Project ==
+== Contributors==
 * 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
-* Chris Bishop (Javascript)
+* Chris Bishop
-* Andor Salga
+* Jeremy Giberson
+* Joe Drew
+* Matthew Postill
 == Downloads ==
-NOTE:  these downloads are mostly meant for in-house testing and not really polished.  It may also only work on a specific platform only. please read the note regarding the download.
-<BR>
-[http://cs.senecac.on.ca/~leung/canvas3d/canvas3d-0.2.0.xpi Andrew's patch] - this change to the canvas 3D extension allows the "simple" examples from Vlad's page to work with ati cards.  This is intended for Windows only.  Model viewer examples do not work yet.
+For the library, samples, and tutorials, go to [http://www.c3dl.org/ c3DL.org].
-== Links ==
+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.
-* [http://www.c3dl.org Our Web Site]
-* [http://littlesvr.ca/canvas3d/blog/ Our blog]
-* Our SVN Repo: svn://cdot.senecac.on.ca/canvas3d
-* [http://vlad.off.net/hg/canvas3d/ canvas3d source code] in Vlad's hg repo
-== Related Resources ==
+For all older versions of c3dl, you will need the canvas 3D addon available here:
-* [http://www.opengl.org/documentation open gl documentation]
+You can get the extension from https://addons.mozilla.org/en-US/firefox/addon/7171 (use suckmenot@mailinator.com/bugmenot for authentication).
-* [http://nehe.gamedev.net/ Nehe Tutorials on OpenGL]
-* [http://shape.cs.princeton.edu/benchmark/ .off (object file format) format info]
-== Prototype ==
+NOTE: It is HIGHLY recommended that you do not use the older version of our library but to use version 2.0 or higher.
-* [http://img126.imageshack.us/img126/3032/layoutqe4.jpg Canvas 3D API - Class Design]
-== Examples ==
+== Links ==
-* INCOMPLETE
+* [http://www.c3dl.org c3DL.org]
+* [http://github.com/cathyatseneca/c3dl GitHub Repo]
+* [svn://cdot.senecac.on.ca/canvas3d Old SVN Repo]
+* [http://en.wikipedia.org/wiki/C3DL Wikipedia page]
-== Canvas3D Helper Classes ==
-=== Scene Class ===
+== Related Resources ==
-* IN PROGRESS
+* [http://www.khronos.org/webgl/ Khronos WebGL]
-=== Math Helper ===
-* IN PROGRESS
-== Math Operations ==
-=== Vector Class ===
-A Vector basically describes a direction in the form of X, Y, and Z coordinates of a 3D world. Basic 3D math cannot exist without the utilization of spatial coordinates which the Vector Class encapsulates. The Vector Class will have the following members within it:
-* Getters
-** getX() - '''Retrieves the X value'''
-** getY() - '''Retrieves the Y value'''
-** getZ() - '''Retrieves the Z value'''
-* Setters
-** set(newX, newY, newZ) - '''This sets new (x, y, z) values to the Vector'''
-** setX(newX) - '''Takes a number value as the new value for X'''
-** setY(newY) - '''Takes a number value as the new value for Y'''
-** setZ(newZ) - '''Takes a number value as the new value for Z'''
-** setFromVector(vec) - '''Takes a Vector object as the new value for this Vector'''
-* Calculations
-** normalize() - '''Unit Normalization'''
-** dot() - '''Calculates the Dot Product. Returns a number'''
-** length() - '''Returns the Length of Vector from (0, 0, 0)'''
-** lengthSq() - '''Returns the Squared value of Length'''
-** cross(vec) - '''Takes a Vector object and computes the Cross Product between the two values. Returns a Vector object that is the cross of the two'''
-** add(vec) - '''Takes a Vector object and adds its values to its own'''
-** subtract(vec) - '''Takes a Vector object and subtracts its values from its own'''
-** multiply(scalar) - '''Takes a number value and multiplies (x, y, z) by it'''
-** divide(scalar) - '''Takes a number value and divides (x, y, z) by it'''
-** isEqual(vec) - '''Takes a Vector object and compares it to its (x, y, z) values. Returns true if they match'''
-** multiplyByQuat(quat) - '''Takes a Quaternion and multiplies its orientation by (x, y, z). It returns a new Vector orientation'''
-=== Matrix Class ===
-A Matrix Class is necessary to provide Matrix operations such as rotation, translation, and scaling to any point in the 3D world. It is composed of a 4x4 matrix of floating point values that can be applied to any Matrix operation. This matrix is stored in '''Row-Major''' format, meaning its first 4 values are in the first row. The Matrix Class has the following members:
-* Getters
-** getMatrix() - '''Returns an array of 16 numbers. Each value represents a location of the matrix starting at the top left corner (Row-Major)'''
-* Setters
-** setMatrix(newMatArray) - '''Takes an Array of 16 numbers that represent the matrix in Row-Major format'''
-* Calculations
+== Documentation ==
-** identity() - '''Sets the matrix up to be an identity matrix'''
-** transpose() - ''' Transposes the matrix to be in Column-Major format, and vice versa'''
-** inverse() - '''Calculates the Inverse of the matrix. Returns NULL if it fails, else it returns an inverse matrix'''
-** determinant() - '''Returns a number that is the Matrices determinant'''
-** adjoint() - '''Returns the Hermitian transpose (Adjoint) of this matrix'''
-** multiplyByScalar(scalar) - '''Multiplies the values of the matrix by a number'''
-** divideByScalar(scalar) - '''Divides the values of the matrix by a number'''
-** multiplyByMatrix(mat) - '''Multiplies two matrices together. It returns a new matrix'''
-** multiplyByVector(vec) - '''Mutiplies the orientation of the matrix by the vector. This function returns the newly oriented Vector'''
-** addMatrix(mat) - '''Adds the values of two matrices together. It returns a new matrix'''
-** subtractMatrix(mat) - '''Subtracts the values of the two matrices. It return a new matrix'''
+Documentation can be found on our website: [http://www.c3dl.org/index.php/documentation/ c3DL.org].
-=== Quaternion Class ===
-A Quaternion is a 4-Dimensional representation of an orientation. It consists of a unit-length axis and an angle around that axis. It can function much like an orientation matrix but without the disadvantage of Gimble Lock. The Quaternion is stored as an array of 4 numbers, represented in the order of (w, x, y, z). The Quaternion Class has the following members:
-* Getters
-** getW() - '''Returns the numerical W component of the Quaternion'''
-** getX() - '''Returns the numerical X component of the Quaternion'''
-** getY() - '''Returns the numerical Y component of the Quaternion'''
-** getZ() - '''Returns the numerical Z component of the Quaternion'''
-** getMatrix() - '''Returns a Matrix object that reflects the orientation of the quaternion'''
-** getAxisAngle(axis, angle) - '''Takes in two values, a Vector object and a Number. Converts the orientation of the quaternion into an axis Vector and an angle around it'''
-* Setters
-** setFromQuat(quat) - '''Sets this Quaternion with the same value as the one being passed in'''
-** setFromMatrix(mat) - '''Creates a Quaternion orientation from the orientation of the Matrix object that is passed in'''
-* Calculations
-** length() - '''Returns the length of the Quaternion'''
-** lengthSq() - '''Returns a number that represents the square of this Quaternion's length'''
-** addQuat(quat) - '''Takes a Quaternion object that will be added to this Quaternion's internal (w, x, y, z) values'''
-** subtractQuat(quat) - '''Takes a Quaternion object where its values will be subtracted from this Quaternion's (w, x, y, z) values'''
-** multiplQuat(scalar) - '''Takes a number and multiplies its values by the Quaternion's (w, x, y, z) values'''
-** conjugate() - '''Returns a Quaternion that is this Quaternion's conjugate'''
-** dot(quat) - '''Takes a Quaternion and returns the Dot Product of the two'''
-** normalize() - '''Normalizes the quaternion'''
-** inverse() - '''Returns the inverse of this Quaternion'''
-== Camera ==
-=== Pan Camera Class ===
-* INCOMPLETE
-=== Fixed Camera Class ===
-* INCOMPLETE
-=== Chase Camera Class ===
-* INCOMPLETE
-=== Free Camera Class ===
-The Free Camera Class is a camera that can be translated and oriented. It cannot be attached to an item, rather, it can be moved separately by the user. The camera also supports velocities (without friction) that are applied to the object based on time. The Free Camera Class has the following Members:
-* Getters
-** getPosition() - '''Returns a Vector Object that represents the position of the Camera'''
-** getUp() - '''Returns a Vector Object that represents the orientation of Up'''
-** getDir() - '''Returns a Vector Object that is the direction the camera is facing'''
-** getLeft() - '''Returns a Vector Object that represents the orientation of Left'''
-** getLinearVel() - '''Returns a Vector that is the velocity that the camera is traveling at'''
-** getAngularVel() - '''Returns a Vector that contains the rotation velocity around the local (x, y, z) axis of the camera'''
-* Setters
-** setPosition(vec) - '''Takes a Vector that sets the camera's position'''
-** setLookAtPoint(vec) - '''Takes a Vector that represents the point the camera will look at'''
-** setUpVector(vec) - '''Takes a vector that orients the camera Up'''
-** setLinearVel(vec) - ''' Takes a vector that is the camera's linear velocity'''
-** setAngularVec(vec) - '''Takes a vector that represents the camera's rotational velocity around local (x, y, z) axis'''
-* Other Functions
-** rotateOnAxis(axis, angle) - '''Takes a vector and a number that represents a relative rotation to the camera's orientation'''
-** yaw(angle) - '''Takes a number that the camera will rotate around its Up vector'''
-** roll(angle) - '''Takes a number that the camera will rotate around its direction vector'''
-** pitch(angle) - '''Takes a number that the camera will rotate around its Left vector'''
-** update(timeElapsed) - '''Takes a number that represents the amount of milliseconds that passed since the last call to update. This function updates the position and rotation based on the set velocities'''
-== World Objects ==
-=== Shape Class ===
-=== Primitive Class ===
-=== Model Class ===
-== TO DO ==
-* get a website (in progress)
-* find out about exposing of open gl 1.1 calls
-** Should the OpenGL 1.1 calls be exposed to the Canvas3D web2.0 architecture. Mainly, for those functions that make 3D math easy (ie. gluLookAt, glMatrixMode, etc).
-=== 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.
-* Camera
-** 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).
-* Rendering
-** 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.
-** 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
-** setDims uses obsolete Vector function - setFromVector
-changed lines in Cube.js from <br />
-<code>
-var velVec = new Vector(linVel);<br />
-velVec.multiply(timeStep);<br />
-this.pos.add(velVec);<br />
-to this:<br />
-var velVec = new Vector();<br />
-velVec.setFromVector(this.linVel);<br />
-velVec.multiply(timeStep);<br />
-this.pos = this.pos.add(velVec);<br /></code>
-* 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
-** 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.
-* Primitive Object
-** <del>All Get functions have obsolete Vector functions ex. getX()</del>
-** <del>The render function has obsolete Vector functions</del>
 == 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.
@@ Line 213: / Line 57: @@
 * 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 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]
@@ Line 234: / Line 78: @@
 * 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]]
@@ Line 243: / 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.
-=== 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
-====May 04====
-Mark:
-Cathy: send andrew a simple model to play with
-Chris:
-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:
+[[Category:Open Source Communities]]
-* 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.