개발기록

지난시간까지 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() 색..

오늘한거 (거의없음. 왤케 잠오지) 1. 3D Cube edge -> 3D Cube faces fill 좌우 앞뒤 회전 ">좌우 앞뒤 회전 github: https://github.com/zero0bean/physics-laboratory/blob/master/3d-rendering-basics/05-simple-cube-from-edge-to-faces.html physics-laboratory/3d-rendering-basics/05-simple-cube-from-edge-to-faces.html at master · zero0bean/physics-laboratoryhtml canvas based physics labora..

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

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. 모델 변환 - 물체 자신의 위치, 회전..

08. 01 - 4일차 commit1. 작성한 글: 투영 변환, 뷰 변환 3D 월드 좌표계를 Canvas 2D로 변환하기 (1편)2. 작성한 글: 투영 변환, 뷰 변환 3D 월드 좌표계를 Canvas 2D로 변환하기 (2편) 초안만 완성3. 도메인 모델, 데이터 모델 차이점 글 작성4. 요구사항 1줄에서 시작하는 기획 문서 제작. 그리고 요구사항 1줄을 기반으로 과거형 사건을 나열하며 설계하는 도메인 모델, 데이터 모델에 대한 생각을 확실히 정리해봄.5. 학습에 있어 왜 AI 의존도가 높으면 조지는 것인지도 생각펼쳐봄. 읽기 투영 변환, 뷰 변환 3D 월드 좌표계를 Canvas 2D 좌표계로 변환 (1편)HTML Canvas의 좌표계로 물건을 표현해보려고합니다.이 때 Canvas는 0, 0이 왼쪽 상..

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 세상으로 저 사각형을 쾅! ..

설계의 본질은 기능 자체는 아니라고 생각합니다설계가 추구하는 목표는 변화에 강한 소프트웨어를 만드는 것이죠한 마디로 튼튼한 소프트웨어를 만드는 방법론 = 설계 일회성 사용을 위한 스크립트(app.ts, app.py) 혹은 PoC 수준의 간단한 원페이지 서비스라면 설계가 필요할까요?굳이 필요하지 않다고 생각합니다.수십년동안 수많은 사람들이 생활해야하는 건물 VS 오늘하루 산에서 자기 위한 텐트 다시 돌아와서설계란 튼튼한 소프트웨어를 만드는 방법론입니다 소프트웨어는 처음 만들때는 죽지 않습니다. 기능도 잘 작동할거구요. 하지만, 뭔가를 바꿔야할 때면 문제가 발생하기 시작합니다. 아무리 '소프트'웨어라고는 하지만, 끝없이 바꿔대고 흔들어버리면 버틸 재간이 없다구요 ㅠㅠ... 설계의 3가지 축: 나누고, ..

개발자 실무 역량은 어떻게 나눌 수 있을까?크게 다섯개로 나눠보자.CS 지식 / 기술 이해 / 구현력 / 설계력 / 디버깅, 운영력 CS 지식은 도구가 바뀌어도 유효한(살아남는) 원리다. (자료구조, 트랜젝션, 네트워크, 알고리즘, ...10년이 지나도 크게 바뀌지 않거나 안 바뀌는 것들.하지만, 기술 이해는 CS 지식이 특정 도구에 구현된 방식들이라 도구가 바뀌면 계속 따라가야한다 (개발자 공부가 끝이 없다고 말하는 이유) 외워야할 것이 많아 보인다면 뭔가 이해하지 못한게 있다는 신호라고 생각합니다. 현재의 내가 막혔다는것은 그 밑단을 구성하는 하위 지식, 개념들에 구멍이 있다는 뜻. 공부, 외워아햘 것이 끝이 없다고 느껴진다면 기본으로 돌아가야한다. 결국 내가 대충 쌓아올린 그 벽돌 하나하나들을 다..