Difference between revisions of "Canvas3D JS Library"

From CDOT Wiki
Jump to: navigation, search
(→‎Vector Class)
 
(223 intermediate revisions by 24 users not shown)
Line 1: Line 1:
−
== Introduciton ==
+
{{Admon/obsolete}}
  
−
Under Construction
+
== Introduction ==
  
−
== People Working On This Project ==
+
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
 
* 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
 +
* Jeremy Giberson
 +
* Joe Drew
 +
* Matthew Postill
 +
  
 
== Downloads ==
 
== 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].
 +
 
 +
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 ==
 
== Links ==
−
[http://littlesvr.ca/canvas3d/blog/ Our blog]
+
* [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]
 +
 
 +
 
 +
== Related Resources ==
 +
* [http://www.khronos.org/webgl/ Khronos WebGL]
 +
 
 +
 
 +
== Documentation ==
 +
 
 +
Documentation can be found on our website: [http://www.c3dl.org/index.php/documentation/ 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<br />
 +
:* Get earthquake Richter-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 />
 +
 
 +
* 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 functionality is available, and runs much faster (hopefully)
  
−
== Prototype ==
+
* Molecule Viewer - Rotate 3D molecules. Similar to [http://www.worldofmolecules.com/3D/bcarotene_3d.htm this]
−
[http://img126.imageshack.us/img126/3032/layoutqe4.jpg Canvas 3D API - Class Design]
 
  
−
== Math Operations ==
+
* 3D Sudoku
  
−
=== Vector Class ===
+
* 3D Rubik's Cube
−
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
+
* 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.
−
** getX() - '''Retrieves the X value'''
 
−
** getY() - '''Retrieves the Y value'''
 
−
** getZ() - '''Retrieves the Z value'''
 
  
−
* Setters
+
* 3D Photo Album - Download images and create a 3D photo album similar to [http://www.mypictures3d.com/images/screenshots/art_gallery/art4.jpg this].
−
** 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
+
* Matrix - Query search engines for sites, chat logs, blogs, etc. and display all the text in a matrix-like fashion.
−
** 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 ===
+
* 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]
−
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. The Matrix Class has the following members:
+
[[Image:higherhigher.jpg]]
  
−
* void Identity() - '''Create Identity Matrix'''
+
* 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.
−
* void Transpose() - '''Transpose a Matrix'''
 
−
* void Inverse() - '''Inverse Matrix Values'''
 
−
* float Multiply(Matrix) - '''Multiplication by Scalar'''
 
−
* float Divide(Matrix) - '''Division by Scalar'''
 
−
* Matrix Add(Matrix) - '''Addition of two Matrices'''
 
−
* Matrix Subtract(Matrix) - '''Subtraction of two Matrices'''
 
−
* Vector Multiply(Vector) - '''Matrix times a Vector'''
 
−
* Matrix Multiply(Matrix) - '''Matrix times a Matrix'''
 
  
−
== Camera ==
+
* Pong.  Should be fairly easy, we just need to code the collision detection.
  
−
=== Pan Camera Class ===
+
* 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.
−
=== Fixed Camera Class ===
 
−
=== Chase Camera Class ===
 
−
=== Free Camera Class ===
 
  
−
== World Objects ==
+
* 2 Player Online Chess
 +
:* Orbit camera can be used to orbit around the board.<br />
 +
:* Effects can be used to change what material the pieces and board use such as metal, wood, etc.<br />
 +
:* 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 />
 +
:* Animation can be achieved simply by setting velocities of pieces.<br />
  
−
=== Shape Class ===
+
[[Category:Open Source Communities]]
−
=== Primitive Class ===
 
−
=== Model Class ===
 

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"