css rotation
-
[ JS ] rotate3d 값 얻기Javascript/이론 2023. 2. 8. 13:55
JS를 통해 요소의 rotate3d 프로퍼티를 얻기 위해서 만든 클래스입니다. 1. Constructor constructor에서는 transform property를 얻고자 하는 요소를 parameter로 두었습니다. 따라서 클래스 성성시 요소를 받아 요소의 matrix3d 데이터를 저장합니다. class Transform { constructor(ele) { this.ele = ele; this.matrix3d = window .getComputedStyle(ele) .getPropertyValue("transform") // column priority .split("(")[1] .split(")")[0] .split(",") .map((ele) => Number(ele)); } } 2. Metho..
-
[Computer Graphics] 3D 변환 행렬과 행렬 분해Computer Graphic 2023. 1. 31. 17:27
1. 3D 변환 행렬의 구성 3D 공간에서의 변환은 보통 4x4 매트릭스를 통해 이루어집니다.(homogenous coordinate라고 표현하며 하나의 행렬을 통해 여러 종류의 연산을 나타낼 수 있다는 장점을 가집니다.) OpenGL에서는 아래 이미지와 같이 4x4 매트릭스를 이차원 배열이 아닌 16개의 원소를 갖는 1차원 배열을 통해 구현하며, column-primary layout을 취합니다. 즉, 배열의 첫번째 네 원소가 매트릭스의 첫번째 열(A00 - A03)에 대응됩니다. 3d 변환 행렬은 네 개의 열벡터로 이루어지며,. 앞 부분의 세 열벡터는 rotation과 scale에 대한 정보를, 마지막 열벡터는 translation에 대한 정보를 담고 있습니다. 매트릭스는 각 변환에 대한 정보를 담고..