Difference between revisions of "Canvas3D JS Library"
(deleted examples section) 
(→TO DO) 

Line 161:  Line 161:  
== TO DO ==  == TO DO ==  
−  
* find out about exposing of open gl 1.1 calls  * 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).  ** 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 ==  == Bug List == 
Revision as of 13:43, 9 September 2008
Contents
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.
People Working On This Project
 Catherine Leung
 Mark Paruzel (CodeBot)
 Andrew Smith
 Chris Bishop (Javascript)
 Andor Salga
Downloads
You can get the extension from https://addons.mozilla.org/enUS/firefox/addon/7171 (use suckmenot@mailinator.com/bugmenot for authentication).
For the library, samples, and tutorials, go to http://www.c3dl.org/
Links
 Our Web Site
 Our blog
 Our SVN Repo: svn://cdot.senecac.on.ca/canvas3d
 canvas3d source code in Vlad's hg repo
Related Resources
Prototype
Canvas3D Helper Classes
Scene Class
 IN PROGRESS
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 RowMajor 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 (RowMajor)
 Setters
 setMatrix(newMatArray)  Takes an Array of 16 numbers that represent the matrix in RowMajor format
 Calculations
 identity()  Sets the matrix up to be an identity matrix
 transpose()  Transposes the matrix to be in ColumnMajor 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
Quaternion Class
A Quaternion is a 4Dimensional representation of an orientation. It consists of a unitlength 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
 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.

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.
 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
 Rendering

( The depth buffer is not working, objects aren't properly occluded.)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.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

Setting the Linear Velocity does not do anything.

 Cube

setDims uses obsolete Vector function  setFromVector

 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 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?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.

All Get functions have obsolete Vector functions ex. getX() 
The update function has obsolete Vector function ( Multiply ).obsolete code was replaced with new code.
 Textures

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.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.  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.

not a bug, but the context should not be passed into the Texture's setTexture method.Model.setTexture() changed.  if two contexts are used, 2.0 and 1.1, textures in 1.1 don't appear.

 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.
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 Richterscale 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 funcionality 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 matrixlike 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 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.
 multiplayer 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
May 29
For next week:
Mark: Add to library and do some bug fixes based on what Chris found
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.
 Investigate box skewing problem in 2.0 context.
 Get camera working in 2.0 context.
 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.