creates a picking ray for a 2D/3D camera

Downloads in past


1101.0.19 years ago9 years agoMinified + gzip package size for camera-picking-ray in KB


Creates a picking ray for a camera. Commonly used for mouse interaction in 2D and 3D games.
The camera is assumed to have a projection and view matrix, which can be combined and inverted to form invProjView.
var origin = [0, 0, 0]
var direction = [0, 0, 0]

//compute ray and store it in (origin, direction)
pick(origin, direction, mouse, viewport, invProjView)

console.log(origin, direction)

Full example, hit-testing against a 3D sphere:
var mat4 = require('gl-mat4')
var pick = require('camera-picking-ray')
var intersect = require('ray-sphere-intersection')

//your camera matrices
var projection = ...
var view = ...
var projView = mat4.multiply([], projection, view)
var invProjView = mat4.invert([], projView)

var mouse = [ screenX, screenHeight - screenY ]
var viewport = [ 0, 0, screenWidth, screenHeight ]

var ray = {
  ro: [0, 0, 0],
  rd: [0, 0, 0]

//store result in ray (origin, direction)
pick(, ray.rd, mouse, viewport, invProjView)

//let's see if the mouse hit a 3D sphere...
var center = [0, 0, 0],
    radius = 1.5
var hit = intersect([],, ray.rd, center, radius)

if (hit) {
  console.log("Mouse hit the sphere at:", hit)

PRs welcome.



pick(origin, direction, mouse, viewport, invProjView)

Creates a picking ray for the given mouse screen-space position (vec2) and viewport screen-space bounds (x, y, width, height). invProjView is the inverse of the combined projection * view matrix for your camera.
Stores the resulting ray in the first two parameters: origin (vec3) and direction (vec3).

See Also


MIT, see for details.