#3d

Frontend › Graphics

WebGL을 쉽게 쓰도록 감싼 JavaScript 3D 라이브러리 Three.js의 구성 요소(Scene·Camera·Mesh·Renderer)와 활용 사례, 장단점.

• #javascript
• #webgl
• #frontend

Frontend › Graphics

브라우저가 GPU에 그림을 그리게 하는 API인 WebGL·WebGPU와, GPU에서 도는 작은 프로그램인 정점 셰이더·프래그먼트 셰이더, 셰이더 언어 GLSL ES·WGSL의 관계를 정리했다. 프론트엔드 개발자는 대개 Three.js 같은 라이브러리로 충분하고, 셰이더는 특수 효과가 필요할 때 배운다.

• #frontend
• #webgl
• #graphics

Frontend › Graphics

브라우저에서 VR 헤드셋과 AR 기기에 3D 장면을 보여 주는 WebXR Device API. 세션 종류(inline·immersive-vr·immersive-ar), 기준 공간과 3DoF·6DoF, XR 전용 프레임 루프와 눈마다의 뷰, 입력 소스, AR 모듈(히트 테스트·앵커·DOM 오버레이)을 정리하고, 평면 화면·휴대폰 AR·헤드셋을 한 페이지로 지원하는 점진적 향상과 브라우저 지원 범위, 전신인 WebVR을 다룬다.

• #frontend
• #graphics
• #webgl
• #browser

Computer Science

화면이 메모리의 어떤 내용을 비추는지(래스터 스캔과 벡터 스캔, 텍스트 모드, 프레임버퍼)에서 시작해, 3D 장면을 2D 픽셀로 바꾸는 래스터화 렌더링의 단계(투영, 삼각형 메시, 스캔라인 채우기, 안티앨리어싱, 화가 알고리즘과 Z 버퍼, 후면 컬링, 플랫·고러드·퐁 셰이딩, 텍스처 매핑)와 GPU가 이 일을 병렬로 하는 이유를 정리한다.

• #computer-science
• #graphics
• #rendering
• #gpu

Tools

무료 오픈소스 3D 제작 도구 Blender의 화면 조작과 변형 단축키, Edit 모드, 모디파이어, 메시 편집 도구, 그리고 모델링 이후의 Shading → Material → UV → Rigging 흐름.

• #blender
• #modeling
• #texture
• #rigging