Web 3D 그래픽스 (HTML Canvas)

Front-End의 기본 공부틀들

• 웹의 동작원리 : (HTTP(s), DNS, IP 주소, 요청, 응답, DOM 렌더트리, CORS, CSR/SSR )
• HTML, CSS : (dom 문법 , sass, meta tag, bootstrap..)
• Javascript : (프로토타입체인, 문법, 호이스팅, 버블링, 캡쳐링, 비동기 방법 …)
• Git 사용법 : (버전 관리의 개념, clone , pull, push, branch, reabse, merge …)
• 패키지 & 빌드 관리법 (npm, nvm, package.json, webpack, babel, vite …)
• 프레임워크 & 라이브러리 사용 (react, redux, recoil, angular, vue)

HTML Canvas

Three.js

컴퓨터 그래픽스란?

현대 그래픽의 역사

• 1980년대 : 픽셀 그래픽스, 3D 그래픽스 카드 등장
• 1990년대 : CG 특수효과 , VFX 영화산업에 두드러짐, 픽사 ‘토이스토리; 3D 게임 대중화
• 2000년대 : 높은 해상도, 실시간 렌더링, 복잡한 시뮬레이션
• 2010년대 : 모바일 고급 그래픽스, 웹 기술 향상으로 그래픽 기능 제공
• 현재 : 머신러닝과 인공지능의 발달로 게임, 영화 , 교육 , 의료, 예술등 다양한 분야에서 컴퓨터 그래픽스 중요성 증가

웹에서의 그래픽의 역사

• 1989년도에 WWW 이 등장
• 1990년에 웹들이 등장 : 구글 , 야후 다음, 네이버 등등… 디자인적 요소가 없음
• 2000년도 웹 : 페이스북 유튜브등 다양한 웹에서 디자인적 요소가 들어가기 시작함 당시에는 주로 플래시가 주를 이뤘지만 현재에는 플래시는 전부 퇴출되었다. 웹에서 플래시를 설치 후,
• 2010년도 웹 : 현재의 디자인 Metarial Design 등 다양하게 생성됨
• 현재의 웹 : 3D 웹의 시작

DOM / SVG / Canvas

Dom : React.js , Angular.js , Vue.js , jQuery ⇒ React가 다 먹어버림

Svg : D3.js , SVG.js , Chart.js ⇒ React D3

Canvas

• 2D : P5.js , Pixi.js , Paper.js ⇒ React Pixi ,
• 3D : Three.js , Babylon.js ⇒ React Three fiber, React Babylon

현대 그래픽에서 영화 / 게임 / 웹의 동작 방식 

영화 / 애니메이션

( 렌더링 ⇒ 다운로드 ⇒ 플레이 )

렌더링이 완료된 부분을 다운로드 하여 플레이하는 방식

 

게임

(유니티 , 언리얼엔진 ⇒ 다운로드 ⇒ 플레이(렌더링) )

일부렌더링이 완료된 부분에서 서버와 인터렉션 하면서 지속적인 렌더링하는 방식

 

웹

(WebGL, Three.js ⇒ 플레이)

다운로드 받는 방식이 거의 없이 바로 지속적인 인터렉션 렌더링하는 방식