Open main menu

CDOT Wiki β

Changes

Canvas3D JS Library

5,428 bytes removed, 20:42, 26 January 2014
no edit summary
{{Admon/obsolete}}
 
== Introduction ==
The Canvas 3D JS Libary (C3DL) is a javascript Javascript library that will make it easier to write 3D applications using canvas 3dWebGL. It will provide 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
* [[User:asalga | Andor Salga]]* Peter Callaghan* [[User:Pplam3 | Patrick Lam]] (Picking)* [[User:Jamesboston | James Boston]] (Garbage collection)* Mark Paruzel (CodeBot)
* Andrew Smith
* Chris Bishop (Javascript)* 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>
For the library, samples, and tutorials, go to [http://cs.senecacwww.onc3dl.caorg/~leung/canvas3d/canvas3d-0c3DL.2.0.xpi Andrew's patchorg] - 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.
== Links ==* [http://www.As of c3dl2.org Our Web Site]* [http://littlesvr.ca/canvas3d/blog/ Our blog]* Our SVN Repo: svn://cdot.senecac.on0, our library uses WebGL.ca/canvas3d* [http://vlad Any WebGL enabled browser will be able to view our content.off To get a WebGL enabled browser see Tutorial 1 from our website and you do not need any addons.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:* [httpYou can get the extension from https://wwwaddons.openglmozilla.org/documentation open gl documentation]* [http:en-US/firefox/nehe.gamedev.netaddon/ Nehe Tutorials on OpenGL]* [http://shape.cs.princeton7171 (use suckmenot@mailinator.edu/benchmarkcom/ bugmenot for authentication).off (object file format) format info]
== Prototype ==* [httpNOTE://img126It is HIGHLY recommended that you do not use the older version of our library but to use version 2.imageshack0 or higher.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 Documentation ==
=== Vector Class ===A Vector basically describes a direction in the form of X, Y, and Z coordinates of a 3D worldDocumentation can be found on our website: [http://www.c3dl.org/index. Basic 3D math cannot exist without the utilization of spatial coordinates which the Vector Class encapsulatesphp/documentation/ c3DL.org]. 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'''== Ideas List ==
* Calculations** normalize() - '''Unit Normalization'''** dot() - '''Calculates Here are the Dot Product. Returns a number'''** length() - '''Returns the Length wishlist of Vector from (0, 0, 0)'''** lengthSq() - '''Returns things we want to be able to do with the Squared value of Length'''** cross(vec) - '''Takes a Vector object and computes the Cross Product between the two valueslibrary.... Returns a Vector object that is the cross of the two'''** If you want something 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)the list. It returns a new Vector orientation'''
* 3D Asteroids - Good use of Collision detection, animation, particles, camera work, both mouse and keyboard controls.
=== Matrix Class ===A Matrix Class is necessary to provide Matrix operations such as rotation, translation, and scaling to any point in * Solar System Explorer - Pull the 3D world. It is composed positions of a 4x4 matrix our planets from some sort of floating point values that can be applied webservice and display them, allowing users to any Matrix operationsee their relative alignment. 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 Simulation of 16 numbers. Each value represents a location of the matrix starting at the top left corner (Row-Major)'''3D path finding
* Setters3D graphs:*Display social networks and their relationships<br />:* setMatrix(newMatArray) Get earthquake Richter- '''Takes an Array of 16 numbers that represent the matrix in Row-Major format'''scale values from a service and show graphs on a map<br />:* Display 3D graphs beside one another, gas prices along stock market values<br />:* 3D flowcharts<br />
* Calculations** identity() 3D Traceroute - '''Sets the matrix up to be graphical view of an identity matrix'''** transpose() - 'IP'' Transposes s path across the matrix to be in Column-Major format, and vice versa'''** inverse() - '''Calculates the Inverse of the matrixinternet. More details [http://www. 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 togetherc3dl. It returns a new matrix'''** multiplyByVector(vec) - '''Mutiplies the orientation of the matrix by the vectororg/index. This function returns the newly oriented Vector'''** addMatrix(mat) php/uncategorized/canvas3d- '''Adds the values of two matrices together. It returns a new matrix'''** subtractMatrix(mat) traceroute- '''Subtracts the values of the two matrices. It return a new matrix'''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 functionality is available, and runs much faster (hopefully)
=== Quaternion Class ===A Quaternion is a 4* Molecule Viewer -Dimensional representation of an orientationRotate 3D molecules. It consists of a unit-length axis and an angle around that axisSimilar to [http://www. It can function much like an orientation matrix but without the disadvantage of Gimble Lockworldofmolecules. The Quaternion is stored as an array of 4 numbers, represented in the order of (w, x, y, z)com/3D/bcarotene_3d. The Quaternion Class has the following members:htm this]
* 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'''3D Sudoku
* 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''3D Rubik's Cube
* Calculations** length() House Explorer/Designer - '''Returns the length of the Quaternion'''** lengthSq() - '''Returns Load a number that represents the square mesh 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 room or a Quaternion object where its values will be subtracted from this Quaternion's (w, x, y, z) values'''** multiplQuat(scalar) - '''Takes a number house and multiplies its values by allow users to navigate through the Quaternion's (w, x, y, z) values'''** conjugate() - '''Returns environment or design a Quaternion that is this Quaternion's conjugate'''** dot(quat) - '''Takes room in a Quaternion and returns the Dot Product of the two'''** normalize() - '''Normalizes the quaternion'''** inverse() - '''Returns the inverse of this Quaternion'''house.
== Camera ==* 3D Photo Album - Download images and create a 3D photo album similar to [http://www.mypictures3d.com/images/screenshots/art_gallery/art4.jpg this].
=== Pan Camera Class ===* INCOMPLETEMatrix - Query search engines for sites, chat logs, blogs, etc. and display all the text in a matrix-like fashion.
=== Fixed Camera Class ===* 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]* INCOMPLETE[[Image:higherhigher.jpg]]
=== Chase Camera Class ===* INCOMPLETEGeneric 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.
=== Free Camera Class ===The Free Camera Class is a camera that can be translated and oriented* Pong. It cannot Should be attached to an item, ratherfairly easy, it can be moved separately by the user. The camera also supports velocities (without friction) that are applied we just need to code the object based on timecollision detection. The Free Camera Class has the following Members:
* Getters** getPosition() multi- '''Returns a Vector Object that represents the position player network air hockey. Supports up to 8 players. Create an arena based on number of the Camera'''** getUp() - '''Returns players . Each wall has a Vector Object that represents the orientation of Up'''** getDir() - '''Returns hole and a Vector Object paddle that players can move left and right. A ball is the direction the camera is facing'''** getLeft() - '''Returns randomly sent flying and each time it goes through a Vector Object that represents hole, the orientation of Left'''** getLinearVel() - '''Returns player loses a Vector that is the velocity point. Lose 10 points and that the camera player is traveling at'''** getAngularVel() - '''Returns a Vector that contains the rotation velocity around the local (x, y, z) axis of the camera'''eliminated. Last person alive wins.
* Setters2 Player Online Chess:** setPosition(vec) - '''Takes a Vector that sets the Orbit 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 can be used 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 orbit around its Left vector'''** update(timeElapsed) - '''Takes a number that represents the amount of milliseconds that passed since the last call to updateboard. This function updates the position and rotation based on the set velocities''' == World Objects ==<br /> === 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 Effects can be exposed used to change what material the Canvas3D web2.0 architecture. Mainly, for those functions that make 3D math easy (ie. gluLookAtpieces and board use such as metal, glMatrixModewood, etc).<br />  == Ideas List == Here are the wishlist of things we want :* Picking can be used to be able allow a simple interface to do with move the librarypieces.... If you want something add it to the list * 3D Asteroids - Good use of Collision detection, animation, particles, camera work, both mouse Either clicking on two tiles can move a piece or clicking on a piece and keyboard controls. * Solar System Explorer - Pull then a tile can move the positions of our planets from some sort of webservice and display them, allowing users to see their relative alignmentpiece* Simulation of 3D path finding * 3D graphs&nbsp;&nbsp;&nbsp;&nbsp;- Display social networks and their relationships<br />&nbsp;&nbsp;&nbsp;&nbsp;:* Further research is needed to determine the best server- Get earthquake Richter-scale values from a service and show graphs on a mapside language to use to share board state between players.<br />&nbsp;&nbsp;&nbsp;&nbsp;- Display 3D graphs beside one another, gas prices along stock market values:* Animation can be achieved simply by setting velocities of pieces.<br />
*[[Category:Open Source Communities]]