#webgl

Frontend

브라우저가 GPU로 그리는 원리(WebGL·WebGPU·셰이더), Three.js로 그리는 웹 3D, 영상을 투명 배경 애니메이션 아이콘으로 쓰는 방법을 다루는 노트 모음.

• #frontend
• #graphics
• #animation

Frontend › Graphics

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

• #3d
• #javascript
• #frontend

Frontend › Graphics

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

• #frontend
• #3d
• #graphics

Frontend › Graphics

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

• #frontend
• #graphics
• #3d
• #browser