개발기록

3D Cube 이제 색칠도 했고, 후면 처리도 완료했다이제는 람베르트의 코사인 법칙(Lambert's cosine law)를 적용해서 큐브에 '밝기' 개념을 적용시켜보겠습니다 무려 1760년 'Photometria' 에서요한 하인리히 람베르트(Johann Heinrich Lambert), 18세기 스위스 수학자·물리학자가 밝힌 법칙바로 밝기는 코사인값에 비례한다 라는 법칙을 표현해보겠습니다 바로 시작하기에 앞서 개념을 좀 설명드리면 왼쪽(현실세계에서의 빛반사 = 난반사 = 예측 불가능)과 오른쪽(Lambert 선생님이 가정한 이상적인 반사 = 정반사 = 균일하게 반사됨 매끈한 표면처럼)에 대한 해석이 담긴 Figure입니다. 왜 밝기가 코사인에 비례하느냐? 빛의 굵기는 그대로인데, 비스듬히 맞으면 더 ..

지난시간까지 EDGES(간선)기반의 Wireframe 뼈대만 ctx.stroke(); 로. 그려주던 우리의 큐브를 !!FACES(6 면)을 정의하고 ctx.fill()로 채워줬었습니다(각 면의 색상도 달리해서요 !) 하지만 문제가 있었죠.바로 안 보여야하는 뒷면이 화면을 뚫고 나와 보인다는 것이었습니다 이번 시간에는 3D 큐브의 후면을 숨김처리하는 Backface Culling을 진행해보려고합니다 Backface Culling 뜻, 의미3D Graphics에서 사용되는 기술로 물체의 후면(Back face)를 숨기거나 아예 그리지 않는 작업을 의미합니다. 기존의 Cube는 후면 부분을 그리는 상태였습니다. 내가 아는 큐브 같은데 뭔가 좀 경계 구분이 안 되고 어디가 앞인지 구분이 안 되는 상황이었습니다..

지난시간까지 모델 변환(월드 변환) 진행 해봤습니다이런 결과물을 얻었었죠? 3D 정육면체 뼈대(Wireframe)을 const EDGES를 정의해서 그려보았는데요이번 시간에는 EDGES가 아닌 const FACES = [ ... ] // 면을 정의해서 한번 그려보겠습니다 12개의 선분(EDGES)에서 정육면체의 6개의 면(FACES)을 정의해보겠습니다const FACES = [ [4, 5, 6, 7], [1, 0, 3, 2], [5, 1, 2, 6], [0 ,4, 7, 3], [7, 6, 2, 3], [0, 1, 5, 4]] 면 마다 다른 색을 칠하기 위해서 DEBUG_COLORS도 정의해주고, ctx.stroke(); 선을 그리는 것에서 -> ctx.fill() 색..

3D를 화면에 그리는(Rendering) 작업은 5단계라고 말씀드렸죠 !첫시간에는 3, 4, 5두번째 시간(지난시간)에는 2번을 해봤습니다 뷰 변환 직접 만들어보기, 3D 월드 좌표계를 Canvas 2D 좌표계로 변환 (2편)지난 시간 만들어본 간단한 3차원 사각형(큐브아님)을 렌더링한 화면입니다 투영 변환, 뷰 변환 3D 월드 좌표계를 Canvas 2D 좌표계로 변환 (1편)HTML Canvas의 좌표계로 물건을 표현해보려고합니다.이codingrecorder.tistory.com 이번시간에는 아직 안 해봅 1단계 모델 변환 (Modeling Transformation)을 진행해보겠습니다https://www.youtube.com/watch?v=JrMXIfWwAps 지난시간까지 다루던 Object는 ..

지난 시간 만들어본 간단한 3차원 사각형(큐브아님)을 렌더링한 화면입니다 투영 변환, 뷰 변환 3D 월드 좌표계를 Canvas 2D 좌표계로 변환 (1편)HTML Canvas의 좌표계로 물건을 표현해보려고합니다.이 때 Canvas는 0, 0이 왼쪽 상단이 세상의 시작점입니다. 하지만 3D 월드 좌표계를 기준으로 물건, 대상을 위치시킬 겁니다. (모델, 개념적으로 위codingrecorder.tistory.com 이번 포스팅에서 만들어 볼 코드 동작시켰을 때 어떻게 보이는지 한번 영상으로 보시죠 좌우 앞뒤 회전 ">좌우 앞뒤 회전 3D를 화면에 그리는 표준 단계는 다섯 단계 입니다. 1. 모델 변환 - 물체 자신의 위치, 회전..

HTML Canvas의 좌표계로 물건을 표현해보려고합니다.이 때 Canvas는 0, 0이 왼쪽 상단이 세상의 시작점입니다. 하지만 3D 월드 좌표계를 기준으로 물건, 대상을 위치시킬 겁니다. (모델, 개념적으로 위치시킬것임) 그러면 3D 위치 좌표를 갖는 물체. 사각형을 가정해볼까요 (Cube 3차원이 아닌 Depth 없는 단순 사각형)오른쪽 위 정점 [100, 100, 300] 왼쪽 위 정점 [-100, 100, 300]왼쪽 아래 정점 [-100, -100, 300]오른쪽 아래 정점 [100, -100, 300] 이렇게 z가 멀어져있는 width 200, height 200 사이즈 단순 사각형입니다 자, 3차원 월드 모델에서 어떻게 보여지는지는 이제 상상이 되죠?그러면 2D 세상으로 저 사각형을 쾅! ..