WebGL Transform Tutorial






eye_matrix: [x,y,z]=[5,5,5]

Red plane: x-plane, Red arrow: dx
Green plane: y-plane, Green arrow: dy
Blue plnae: z-plane, Blue arrow: dz

TranslateX: cube move with red arrow direction(with dx)
TranslateY: cube move with green arrow direction(with dy)
TranslateZ: cube move with blue arrow direction(with dz)
RotateX: cube rotate with red arrow axis anti-clockwise(changing dy,dz)
RotateY: cube rotate with green arrow axis anti-clockwise(changing dz,dx)
RotateZ: cube rotate with blue arrow axis anti-clockwise(changing dx,dy)
Scale: scale up/down cube size(changing dx,dy,dz)

Notice that position will be change whether do the same transforms but in difference sequences.

(CC-NC-BY) 2019 Haeram Kim

Log:
SequencePositionDelta
/* initial state */1.00,1.00,1.00 dx=1.00,0.00,0.00
dy=0.00,1.00,0.00
dz=0.00,0.00,1.00