Canvas3D Picking

From CDOT Wiki
Revision as of 22:32, 11 December 2008 by Pplam3 (talk | contribs) (December 2008)
Jump to: navigation, search

Name of Project

Canvas 3D - Picking


To put the project description simply, what it does is that when you click in Canvas 3D, you will select the object that is in the most front in the current camera angle you are looking at. So the details of this Picking project is this:

  • Convert the mouse coord in Windows to Canvas coord
  • In the current scene, find all objects that intersect where the mouse is clicked
  • Find the object closest to the camera from the list of intersecting objects


Project Contributor(s)

  • Andor Salga
  • Catherine Leung
  • Chris Bishop - Example Code done for picking
  • Jeremy - Ideas of implementing picking


  • A sample canvas 3d demo with multiple objects in it at different depths (or just random positions) from the camera (current view/scene)


0.2 - Nov 18th

Goal (Done)

  • Make functions that will help complete the project
    • Model.getVertices() which returns a reference of all the vertices in the object
    • Mouse coord convert: converting the mouse coord in Canvas coord
    • Other functions that might come up

New Class File and modified Model File Found Here: Picking.js, Model.js
(Since it only has functions and doesn't actually do anything yet, the extension with the new class will be release in 0.3)

0.3 - Dec 12th

Goal (Done)

  • Modified the Model.js to include the following 2 functions
    • getVertices(): returns the vertices of the object
    • getBoundingBox(aabb): Returns an array of the min/max XYZ values for the bounding box, including it's scaling factor
  • Made Picking.js
    • Creates the mouse vector from the camera to the far clipping plane
      • 2 main variables: Mouse Origin and Mouse Direction Vector
    • Ray-Bounding Box Intersection Test
      • Takes the min/max XYZ values of the bounding box, mouse origin and direction vector
      • Returns true if intersect
      • Need to transform the mouse origin and direction vector into the object's space before performing test
    • Sorts the intersecting objects from closet to furthest from the camera
    • Returns an array of object index in the scene

Updated Class File and Model File Found Here: Picking.js, Model.js

The picking function will be part of the next release of the canvas 3D library.

Project Updates

December 2008

Dec 11, 2008

  • Tested intersection tests
    • Cube, Sphere, and Teapot models
    • Tested with objects at a rotated angle
  • Still have bugs to identify and fix
    • Fixed bounding box bug: there were blind spots when objects are rotated
  • Skype Meeting
    • Picking function will be released with just the bounding box test for now
    • Can continue working to improve the picking function after - triangle test
    • Possible project for next term is Collision Detection

Dec 10, 2008

  • Worked with Andor
  • Successfully completed the Ray-Box Intersection Test with minor offsets
  • Cleaned up code
  • Implemented Ray-Triangle(Ray-Plane) Intersection test
    • Still has minor bugs with intersection tests

Dec 8, 2008

Dec 6, 2008

  • Recalculated mouse vector from camera to back of scene
    • Calculated it with respect to camera position
    • Applied the camera's transformation matrix

Dec 5, 2008

  • Worked with Andor
    • Tried transforming the mouse vector from just z-axis-aligned to 3D free space
    • Found problem with transformation applied to mouse vector -> not working
  • Discussion with Cathy
    • Might be something wrong with matrix transformation -> applied in wrong place/order, applied wrong matrix
    • Might be something wrong with the way the mouse vector was constructed
    • Discussed how the 3D World gets compressed and transformed into the 2D screen

Dec 4, 2008

  • Skype Meeting
    • Update everyone's progress
    • Talked about where I am at in the project, and where I am having trouble/problem with

Dec 3, 2008

Dec 2, 2008

  • Worked with Andor
    • Changed code for capturing mouse coordinates - the previous code still had some offset from the browser
    • Fixed problem for Math.tan - changed number from degree to radian
    • Converted mouse (x,y) from pixel to 3D coord

November 2008

Nov 30, 2008

  • Tested several different intersection test code
    • One of them worked but with bugs, need to fix

Nov 28, 2008

  • Worked with Andor
    • Found several ray-box intersection tests to try

Nov 27, 2008

  • Skype meeting with project members
    • Updated everyone's project status

Nov 26, 2008

  • Did thorough testing on the 3D vector conversion
    • Found minor offset to vector (made it relative to camera position to fix error)

Nov 24, 2008

  • Created a custom C3D Demo to test transformation data

Nov 21, 2008

  • Worked with Andor in person
  • Approached the vector transformation in a different way
    • Applied 3 stages of transformation to mouse vector to test (Window -> NDC, NDC -> View, View -> Model)

Nov 20, 2008

  • Canvas 3D Library Meeting on Skype

Nov 18, 2008

  • Worked with Andor in person

Nov 17, 2008

  • Completed 0.2 Release
    • Uploaded files
    • Created blog entry for release
  • Calculated mouse vector using trigonometry

Nov 14, 2008

  • Crash session on C3DL with Andor

Nov 13, 2008

  • Created Wiki Page
  • Got demo files from Andor
  • Got mouse position relative to Canvas

Nov 12, 2008

  • Discussed ideas to do the project
  • Set goals for releases
  • Got Canvas 3D Library source and IDL