작업 기록
해 본 것, 헷갈린 것, 이제 알게 된 것.
JavaScript 배열을 바꿔도 GPU buffer는 그대로다
buffer 생성과 좌표 전달을 구분하고, 배열만 변경한 뒤와 다시 전달한 뒤의 실제 GPU buffer 값을 비교했다.
WebGPU에서 장치 준비와 그리기 구분하기
adapter와 device를 요청해 준비 성공을 확인했다. GPU를 사용할 준비와 실제로 그림을 그리는 작업을 구분했다.
WebGL 삼각형은 세 꼭짓점에서 시작한다
꼭짓점과 shader의 역할을 구분했다. JavaScript의 색 변경과 uniform 전달, 다시 그리기를 나누어 관찰했다.
모양과 표면과 빛을 한꺼번에 바꾸지 않기
Three.js 물체에서 Geometry·Material·Light의 역할을 하나씩 분리했다. Roughness와 Texture도 한 조건씩 바꾸며 Material이 표면을 계산하는 방식을 확인했다.
물체가 돈 건가, 카메라가 옮겨간 건가
Three.js로 빈 장면에 상자 하나를 놓았다. 그리드를 기준으로 물체 회전과 카메라 이동을 구분하고, lookAt이 위치가 아니라 방향을 바꾼다는 것을 확인했다.
60fps에서만 맞는 속도는 속도가 아니다
프레임마다 같은 거리를 더하면 기기에 따라 속도가 달라진다. dt를 곱해 프레임 속도와 무관하게 움직이는 계산을 배웠다.
다음 프레임을 요청하지 않으면 그림은 사라질까?
프레임과 반복 예약을 배우며, 애니메이션이 멈춰도 마지막 그림은 남는다는 점을 다시 설명했다.
Canvas 2D에서 사각형이 움직이는 원리
x·y 좌표를 바꾸고, 지우기와 다시 그리기의 반복이 움직임으로 보이는 이유를 설명했다.
워프레임 허브에 3D를 연결하는 공부 순서
스타차트의 코드를 따라가기 전에, 작은 예제에서 이해하고 행성 하나로 돌아가려 한다.
Console UI는 검색과 선택부터 공부하기
공유해 둔 wits의 공개 사례를 읽고, 작은 목록 화면에서 동작을 비교할 계획.
Three.js가 막혀서 상자부터 다시 봤다
Geometry와 uniforms를 헷갈렸다. 물체, 카메라, 화면의 관계부터 다시 정리했다.
key가 같으면, 클릭할 항목도 그대로일까?
key가 유지돼도 포인터 아래의 항목은 바뀔 수 있다. 두 문제를 따로 생각해 봤다.
설명을 듣고 내 말로 다시 써 보기
Three.js의 역할을 영어 한 문장으로 써 보고, 고친 이유를 남겼다.