1. 준비 사항
- 라이브러리 로드 : threejs에서 다운로드 or
npm install three - 코드 편집기 : VS Code, Notepad++, Vim 등
- WebGL 구동 가능한 브라우저 : Chrome, Safari, Opera, Edge 등
- JavaScript 기초 지식 : https://www.w3schools.com/js/ 참고
2. Three.js
2.1. Three.js 란?
Three.js는 WebGL을 기반으로 한 JavaScript 3D 그래픽 라이브러리이다. Three.js는 WebGL을 기바능로 하며, 3D 그래픽을 다루기 위한 다양한 기능과 도구를 제공하여 웹 브라우저에서 복잡한 3D 콘텐츠를 구현할 수 있도록 한다. WebGL을 사용하여 3D 그래픽을 생성하고 렌더링하는 데 도움이 되는 고수준의 추상화를 제공하여, 복잡한 3D 그래픽을 더욱 쉽게 생성할 수 있도록 해준다.
2.2. three.js 의 장점
- three.js는 그래픽스 어플리케이션을 만들기 위한 도구이다. 그래픽스 어플리케이션을 만들기 위한 도구는 three.js 외에도 여러가지가 있다. Native C/C++을 사용하는 OpenGL, Vulkan, Direct3D, Metal 등이 있다. 하지만 이 경우 개발환경을 준비하는 데에 시간이 오래 소요된다. 반면, three.js는 웹 기반의 그래픽스 툴이기 때문에 코드 에디터와 웹 브라우저만 있으면 된다.
- 배우고, 사용하고, 배포하기 쉽다.
2.2. OpenGL ES 2.0 VS Three.js
2.2.1. OpenGL ES 2.0 / WebGL 1.0 Pipeline
🐣 ex. 삼각형을 그리고 싶어~
API가 삼각형을 Vertex Buffer Object(VBO)로 만들어서 Vertex Buffer에 집어 넣는다.
→ 삼각형에 대한 transformation 등을 처리하는 vertex shader라는 프로그램이 있는데, APP이 이 쉐이더를 그래픽스 카드에게 전달해준다. 그러면 그래픽스 카드는 그 파일을 컴파일해서 실행하는 것.
→ 텍스처 매핑을 위한 이미지도 넣어주고, fragment shader도 넣어준다.
→ vertex processing을 통해 각각의 polygon의 꼭짓점들을 transformation 하고,
→ primitive processing을 통해 꼭짓점들을 삼각형, 점, 선으로 만들고,
→ 그린다 (rasterization)
→ rasterization을 하면 비트맵이 만들어지는데, 그 비트맵에 정확한 색을 칠하고 조명, 재질 등을 정한다. (fragment processing)
→ 최종적으로 만들어진 픽셀에 대한 pixel processing을 하고 하면
→ 결과가 frame buffer에 저장된다.
이 과정을 계속 반복하면서 화면에 그림을 그려준다.
따라서 OpenGL은 Pipeline 과정을 이해하지 않으면 프로그래밍 하기가 굉장히 어렵다.
반면, three.js는 그렇지 않다!
2.2.2. Three.js Scene Graph
Renderer로 three.js가 운영되는데, 이 렌더러는 기본적으로 WebGL Renderer를 사용한다.
-
WebGL Renderer에 Camera와 Scene(장면)을 붙인다
-
Scene에는 Camera, Mesh, Light를 붙인다. Mesh란 기하 형상, 즉 모양이고 물체가 보여지기 위해서는 빛이 들어가야 하므로 조명이 필요하다.
-
Mesh(형상)에는 형상을 구현하는 모양(Geometry)와 재질(Material)이 들어간다. Geometry는 Vertex(꼭짓점)와 Face(면)로 구성되고, Material에는 Texture가 들어가고 Texture는 Image를 가져다 쓴다.
-
이렇게 형상과 재질이 모여서 Mesh를 이루고, Mesh와 Light는 여러 개 있을 수 있다.
-
여러 개의 Mesh와 Light가 Scene(장면)을 구성하고,
-
Renderer에게 그려달라고 요청을 하면, Camera 설정에 맞추어서 그림을 그려 출력해준다.
3. Basic Code
[파일명] : 00_hello_box.html
<html>
<head>
<meta charset="utf-8">
<title>Hello Box</title>
<style>body { margin: 0; }</style>
</head>
<body>
<script src="js/three.js"></script>
<canvas id="HelloCanvas"></canvas>
<script src="00_hello_box.js"></script>
</body>
</html>[파일명] : 00_hello_box.js
const h_scr = window.innerWidth;
const v_scr = window.innerHeight;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 45, h_scr/v_scr, 0.1, 1000 );
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer({canvas: HelloCanvas});
renderer.setSize( h_scr, v_scr );
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
renderer.render( scene, camera );