클릭했을때 위치 좌표를 가져오는 event.clientX, event.clientY는 좌상단이 (0, 0)으로 우하단으로 갈수록 길이 값이 커지지만
webgl에서는 x축 y축 함수처럼 화면의 정중앙이 (0, 0)으로 좌상단이 (-1, 1)의 값을 가지며 최댓값과 최솟값은 (-1, -1) ~ (1, 1)으로 고정되어 있다.
따라서 webgl에서의 클릭지점의 좌표값은
x축 하나만 보았을때 (-1 ~ 1)범위의 영역(2칸)에서 event.clientX / width 비율만큼 이동한 지점을 구해야한다.
만약 화면의 정중앙을 클릭했다면 event.clientX / width 값은 0.5이다. 즉 50%라는 것이다.
이를 계산하면
2칸의 영역 중 50% 지점인 1칸을 왔다는 것이고 이는 좌표상에서 0을 의미하며 (0~2) => (-1~1)로 변환하기 위해 -1을 더해준다.
x: (event.clientX / width) * 2 - 1
y: -(event.clientY / height) * 2 + 1