P5 : Webgl Camera position explained

Default camera values

camera(0, 0, (height/2.0) / tan(PI*30.0 / 180.0),   0, 0, 0,    0, 1, 0);

The 9 parameters are three groups of x,y,z data:

  • 0,0,formula = camera position: Middle of the screen (is 0,0 in WEBGL mode) , camera moved back (where you are behind your keyboard) on Z with formula (height/2.0) / tan(PI*30.0 / 180.0)
  • 0,0,0 = eyex, eyey, eyez : where camera looks. Here at center of screen.
  • 0,1,0 for camera orientation. Here y is 1 : the vertical of camera will follow Y reference ( which goes down in Webgl).

The formula for z

The Field Of View (FOV) is fixed by a default usual angle of 60° opening. Z for camera is then adapted in order to see full screen vertically:

Camera: calculate z position

Full view of 60° is PI/3 and half angle is 30° = PI/6.
The relationship between zcam and height/2 is the same as between cos and sin .
So zcam = height/2 * (sin PI/6 /cos PI/6) = height/2 * cot(PI/6) or , using tangent rather than cotangent:
zcam = (height/2.0) / tan(PI/6)
Using degrees : zcam = (height/2.0) / tan(PI* 30.0 / 180.0)

View in perspective

With the camera in the default position, with same dice drawn at four angles , one can see face 6 in front and sight other faces: (2 green, 3 red, 4 blue, 5 yellow). Face 1 is behind and not visible.

When the space is rotated around Z, one can see below that: face 5 always looks at Y positive(green axis), face 3 to X negative (darker red axis) , face 6 to Z positive(blue axis) etc. for non visible. These faces will follow rotations.

Better to use a dice rather than normalMaterial for debug

I use a dice and not a box with normalMaterial as colors of normalMaterial indicates the camera orientation, not the local axis following the rotation. In the images below, combining the two, the face 4 is red when looking on the right of the camera while face 5 is blue looking at (quite) front camera.

After a PI/2 rotation-Z , now face 4 is blue.
Without the points on the dice you cannot see the difference between before and after rotation as the front faces will always be blue and only blue.

Dice drawing : tips

The dice is made of 6 plans organized as a cube.

Points are made of flat cylinders that exceed the plan of some pixels ( exaggerated in image below) to avoid some paint drips when point of view is almost horizontal.If a circle is drawn on the plan (my first try), colors of plan and points will be mixed.


Posted

in

,

by

Tags:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *