Three.js
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
1. 개요
Three.js는 2010년 리카르도 카베요가 개발하여 깃허브에 공개한 3D 컴퓨터 그래픽스 자바스크립트 라이브러리이다. WebGL을 사용하여 웹 브라우저에서 3D 그래픽을 쉽게 구현할 수 있도록 다양한 기능을 제공하며, 렌더링, 애니메이션, 조명, 재질, 셰이더, 객체 및 지오메트리 등을 지원한다. 또한, 다양한 3D 모델 파일 형식을 지원하며, 가상 현실 및 증강 현실을 위한 WebXR도 지원한다. MIT 라이선스로 배포되며, WebGL 1.0 또는 WebGL 2.0을 지원하는 모든 브라우저에서 실행 가능하다.
더 읽어볼만한 페이지
- WebGL - GlTF
glTF는 3D 모델과 씬을 효율적으로 전송하고 로드하기 위한 개방형 표준 파일 형식으로, 다양한 애플리케이션에서 사용되며, 물리 기반 렌더링, 바이너리 형식, 확장 기능 등을 통해 발전해왔지만, 파일 크기, 호환성, 확장성, 애니메이션 지원 측면에서 비판도 존재한다. - 2010년 소프트웨어 - 빅쿼리
빅쿼리는 구글의 데이터 분석 서비스로, 드레멜을 기반으로 수조 행의 데이터에 대한 빠른 쿼리를 가능하게 하며, 데이터 관리, 쿼리 실행, 서비스 통합, 접근 제어, 기계 학습 기능을 제공한다. - 2010년 소프트웨어 - 애플 북스
애플이 개발한 애플 북스는 iOS 및 macOS 기기에서 전자책 및 오디오북을 판매 및 소비하고 읽는 데 사용되는 앱으로, 다양한 사용자 설정 기능과 기기 간 동기화를 지원하지만, 독점적인 파일 형식 사용 및 앱 내 구매 정책 등으로 논란이 있다. - 그래픽 라이브러리 - Direct2D
Direct2D는 마이크로소프트에서 개발한 2D 그래픽 API로, 낮은 수준의 추상화, 고품질 텍스트 렌더링, 안티앨리어싱, 하드웨어 가속, 높은 DPI 지원 등의 특징을 가지며 다양한 분야에서 활용된다. - 그래픽 라이브러리 - WinG
WinG는 윈도우 3.x의 그래픽 성능 향상을 위해 개발된 기술로, DirectX로 발전하는 기반이 되었으며 한국 게임 산업에도 영향을 미쳤다.
| Three.js - [IT 관련 정보]에 관한 문서 | |
|---|---|
| 기본 정보 | |
 | |
| 저자 | 리카르도 카벨로 (Mr.doob) |
| 개발자 | Three.js 개발자들 |
| 출시일 | 2010년 4월 24일 |
| 프로그래밍 언어 | 자바스크립트, GLSL |
| 상태 | 활발히 개발 중 |
| 장르 | 자바스크립트 라이브러리 |
| 라이선스 | MIT |
| 웹사이트 | Three.js 공식 웹사이트 |
2. 역사
Three.js는 2010년 4월 리카르도 카베요(Ricardo Cabello)가 깃허브에 처음 발표하였다.[24] 이 라이브러리의 기원은 개발자 자신이 2000년대 초 데모씬에 참여한 시기로 거슬러 올라간다. 이 코드는 액션스크립트로 처음 개발되었다가 2009년 자바스크립트로 이식되었다.
Three.js는 자바스크립트 언어를 사용하여 웹 브라우저에서 그래픽 처리 장치(GPU) 가속을 활용한 3차원 콘텐츠를 만들 수 있게 해준다.[26][27] 이는 WebGL의 등장으로 가능해졌다.[28]
카베요는 액션스크립트에서 벗어나야 할 두 가지 강력한 이유가 있다고 생각했다. 첫째, 자바스크립트는 더 뛰어난 플랫폼 독립성을 제공했다. 둘째, 자바스크립트로 작성된 애플리케이션은 플래시 애플리케이션과 달리 개발자가 사전에 컴파일할 필요가 없었다.
카베요의 추가적인 기여는 API 설계, CanvasRenderer, SVGRenderer를 포함하며, 다양한 기여자들의 프로젝트에 커밋한 내용을 병합하는 역할을 했다.
WebGL의 등장과 함께, 폴 브런트(Paul Brunt)는 Three.js가 렌더링 코드를 핵심 자체가 아닌 모듈로 설계했기 때문에 새로운 렌더링 기술을 매우 쉽게 구현할 수 있었다.[10] 초기 기여자였던 브라니슬라프 울리치니(Branislav Uličný)는 2010년 자신의 사이트에 여러 WebGL 데모를 게시한 후 Three.js를 시작했다. 그는 Three.js의 WebGL 렌더러 기능이 CanvasRenderer 또는 SVGRenderer의 기능을 능가하기를 원했다.[10] 그의 주요 기여는 일반적으로 재료, 셰이더, 후처리 관련 내용이다.
2011년 3월, 파이어폭스 4에 WebGL 1.0이 도입된 직후, 조슈아 쿠(Joshua Koo)가 합류했다. 그는 2011년 9월에 3D 텍스트를 위한 첫 번째 Three.js 데모를 만들었다.[10] 그의 기여는 기하학적 생성과 자주 관련된다.
버전 118부터 Three.js는 기본적으로 WebGL 2.0을 사용한다. 이전 버전의 표준은 WebGL1Renderer 클래스를 통해 여전히 사용할 수 있다.[11]
Three.js는 깃허브에 1700명 이상의 기여자를 보유하고 있다.[12]
3. 특징
Three.js와 같은 상위 계층 라이브러리들은 브라우저 플러그인 없이도 브라우저에서 복잡한 3D 컴퓨터 애니메이션을 표현할 수 있도록 개발 노력을 줄여준다.[4][5][29]
3. 1. 렌더링
3. 2. 애니메이션
Three.js는 아머쳐, 순기구학, 역기구학, 모프, 키프레임 등 다양한 애니메이션 기법을 지원한다.[13]
3. 3. 조명 및 재질
Three.js는 주변광, 방향광, 점광, 스포트라이트 등 다양한 광원을 지원하며, 그림자 생성 및 수신 기능을 제공한다.[13] 램버트, 퐁, 부드러운 쉐이딩 등 다양한 재질을 지원하며, 텍스처를 적용할 수 있다.[13]
3. 4. 셰이더
OpenGL 셰이딩 언어(GLSL)의 모든 기능에 대한 접근을 지원한다.[13] 렌즈 플레어, 깊이 통과 등 다양한 후처리 효과를 위한 라이브러리를 제공한다.[13]
3. 5. 객체 및 지오메트리
Three.js는 메쉬, 파티클, 스프라이트, 라인, 리본, 뼈대 등 다양한 객체를 지원하며, 이들 모두 상세 수준을 설정할 수 있다.[13]
또한 평면, 큐브, 구, 토러스, 3D 텍스트 등 다양한 지오메트리를 제공하며, 선반, 돌출 및 튜브와 같은 수정자를 적용할 수 있다.
3. 6. 기타
Three.js는 다음과 같은 다양한 기능을 제공한다.[13]
Three.js는 WebGL 1.0 또는 WebGL 2.0을 지원하는 모든 브라우저에서 실행된다.
Three.js는 MIT 라이선스로 제공된다.[1]
4. 사용법
Three.js를 사용하면 씬, 카메라, 정육면체를 만들고 WebGL 렌더러를 사용하여 뷰포트를 추가할 수 있다.[1]
4. 1. 라이브러리 포함
Three.js 라이브러리는 단일 자바스크립트 파일이다. 로컬이나 원격 사본에 연결함으로써 웹 페이지 안에 포함시킬 수 있다.[1]```html
```
다음의 예제 코드는 씬(scene)을 하나 만들고 카메라 하나와 큐브 하나를 해당 씬에 추가하고 WebGL 렌더러를 만들고 document.body 요소에 뷰포트를 추가한다. 로드되면 큐브는 X축과 Y축 주변을 회전한다.[1]
```javascript
var camera, scene, renderer,
geometry, material, mesh;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;
geometry = new THREE.BoxGeometry( 200, 200, 200 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render( scene, camera );
}
4. 2. 기본 예제
다음은 Three.js를 사용하여 화면에 카메라, 정육면체, WebGL 렌더러를 추가하고 정육면체를 회전시키는 간단한 예제이다.```html
```
```javascript
var camera, scene, renderer,
geometry, material, mesh;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;
geometry = new THREE.BoxGeometry( 200, 200, 200 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render( scene, camera );
}
```
위 코드는 `document.body` 요소 내에, 화면상에 카메라, XY축으로 회전하는 정육면체, WebGL 렌더링 표시 영역을 추가한다.
5. 관련 기술
Three.js는 특정 웹 브라우저나 플러그인에 의존하지 않고 자바스크립트 언어를 사용하여 웹 콘텐츠의 한 부분으로서 그래픽 처리 장치(GPU)에서 가속되는 3차원 컨텐츠를 만들 수 있도록 해준다.[26][27] 이는 WebGL의 출현으로 가능하게 되었다.[28]
Three.js, GLGE, SceneJS, PhiloGL, Babylon.js와 같은 상위 계층 라이브러리들은 전통적인 독립형 애플리케이션이나 플러그인을 이용한 개발에 비해 적은 노력으로 브라우저에서 실행 가능한 복잡한 3D 컴퓨터 애니메이션 콘텐츠를 표현할 수 있게 되었다.[29]
참조
[1]
웹사이트
Three.js/license
https://github.com/m[...]
github.com/mrdoob
2012-05-20
[2]
웹사이트
First commit
https://github.com/m[...]
github.com/mrdoob
2012-05-20
[3]
Citation
mrdoob/three.js
https://github.com/m[...]
2021-03-04
[4]
문서
O3D
[5]
문서
Unity (game engine)
[6]
뉴스
Khronos Releases Final WebGL 1.0 Specification
http://www.khronos.o[...]
2011-03-03
[7]
웹사이트
WebGL
https://www.khronos.[...]
2011-07-19
[8]
웹사이트
Study: Average dev costs as high as $28m
http://www.develop-o[...]
Intent Media Ltd
2010-01-11
[9]
웹사이트
NVScene 2015 Session: Reinventing The Wheel - One Last Time (Ricardo Cabello)
https://www.youtube.[...]
YouTube
2015-03-24
[10]
웹사이트
Three.js White Paper
https://github.com/m[...]
Github.com
2012-05-21
[11]
간행물
Release r118 · mrdoob/three.js
https://github.com/m[...]
[12]
Citation
mrdoob/three.js
https://github.com/m[...]
2020-08-03
[13]
웹사이트
Features mrdoob/three.js Wiki GitHub
https://github.com/m[...]
Github.com
2012-11-26
[14]
웹사이트
Stats.js
https://github.com/m[...]
Github.com
[15]
웹사이트
WebGL Inspector
https://benvanik.git[...]
Benvanik.github.com
[16]
웹사이트
Three.js Inspector Labs
https://zz85.github.[...]
Zz85.github.com
[17]
웹사이트
three.js examples
https://threejs.org/[...]
[18]
웹사이트
Three.js/license
https://github.com/m[...]
github.com/mrdoob
2012-05-20
[19]
웹사이트
Three.js/readme.md
https://github.com/m[...]
github.com/mrdoob
2012-05-20
[20]
뉴스
Khronos Releases Final WebGL 1.0 Specification
http://www.khronos.o[...]
2011-03-03
[21]
문서
O3D
[22]
문서
Unity
[23]
웹인용
Three.js/license
https://github.com/m[...]
github.com/mrdoob
2012-05-20
[24]
웹인용
First commit
https://github.com/m[...]
github.com/mrdoob
2012-05-20
[25]
웹인용
Releases · mrdoob/three.js · GitHub
https://github.com/m[...]
2021-03-11
[26]
문서
O3D
[27]
문서
유니티 (게임 엔진)
[28]
뉴스
Khronos Releases Final WebGL 1.0 Specification
http://www.khronos.o[...]
2011-03-03
[29]
웹인용
Study: Average dev costs as high as $28m
http://www.develop-o[...]
Intent Media Ltd
2010-01-11
본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.
문의하기 : help@durumis.com