고정 헤더 영역
상세 컨텐츠
본문
퍼온곳들
http://blog.daum.net/wisepocket/70
//////////////////////////////////////////////////////////////////////////////////////////////////
webGL을 지원하는 브라우저
원래 IE를 제외한 브라우저에서만 돌아갔었는데 IE11부터는
거의 모든 브라우저에서 지원하고 있다.
Three.js
아까 대충 살펴본 바로 WebGL이 워낙 저수준 API라 마야API에서처럼
버텍스어레이를 찍어가며 폴리곤을 직접 만들던 수준의 코딩이 들어가야 하는거 같다.
이를 좀 더 쉽게 사용 할 수 있도록 도와주는 라이브러리가 Three.js다.
사람들이 가장 많이 쓰는 라이브러리라고 하니 이걸 먼저 살펴보자.
Quick Start
threejs 홈페이지에의 getting started를 번역해 가며 참고하여 시작해 보자.
<html>
<head>
<title>My first Three.js app</title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<script src="js/three.min.hs"></script>
<script>
// 여기에 스크립트를 넣는다
</script>
</body>
</html>
위서 title, My first Three.js app이부분이 페이지의 이름이다.
익스플로러의 위쪽에 들어간다. ( 아래그림에서 제목부분에 들어감 )
title부분에 한글을 넣으면 한글이 다 깨져 나오는데
head 안에 <meta charset="utf-8"> 한줄을 써넣으면 한글이 깨지지 않고 잘 나온다
Creating the Scene
Three.js에서 어떤 사물을 보이게 하려면 세가지가 필요하다.
scene과 camera와 renderer이다.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth
/ window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
THREE는 아마 template으로 받았던 파일의 lib폴더에 three.js를 말하는거 같아 보인다.
근데 왜 THREE를 다 대문자로 쓰게 했을까 불편한데,, 암튼
카메라의 속성은 ( fov, aspect, near, far ) 순서인데 aspect는 가로 세로 비율이기 때문에
보통 가로/세로 값을 넣어준다.
Creating the Geometry
var geometry = new THREE.BoxGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
큐브하나를 만들어 배치하는 코드를 넣었다.
[ Geometry, Material ] --> Mesh --> Scene에 add
이런 방식을 거친다.
Rendering the Scene
위 상태로 브라우저에서 실행시켜보면 아무것도 보이지 않는다. 실제로 아직 아무것도 렌더링
되지 않고 있는 상태인데, 여기에 render loop를 실행시켜주어야 한다.
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera); }
render();
1초에 60프레임 속도로 렌더링되는 루프를 만들수 있다.
requestAnimationFrame이라는 매서드는 기존의 SetTimeout이나 setInterval이 많은 CPU 등을
낭비 했는데 이를 보안한 매서드이다.
requestAnimationFrame은 윈도우에서 사용자가 다른탭으로
이동하거나 창을 최소화 시켰을 경우에는 실행되지 않는 장점이 있다.
또한 모니터에 표시되는 디스플레이 주파수와 모바일의 경우에서 각 기기의 디스플레이 되는 주파수가
다르다. 이때 일정한 프레임만을 유지한다면 예를 들어 60번 리플레쉬 되도록 해놨을때 이보다 적은 수의
주파수 30을 가진 모니터에 쏜다면 절반의 리플레쉬 비용이 낭비된다.
모바일의 경우에는 배터리 성능과도 연계되므로 중요한 부분이다.
뭐 이런 얘기인듯.
정확한건 아래의 설명 참조.
requestAnimationFrame에 관한 설명
http://msdn.microsoft.com/ko-kr/library/ie/hh920765%28v=vs.85%29.aspx
requestAnimationFrame과 setTimeout과의 성능비교
http://ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame
Animating the cube
위까지의 코드들을 실행시키면 화면에 녹색 큐브를 볼 수 있다.
여기에 rotation을 추가 시켜보자.
라고 하는데 안보인다...
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
매뉴얼에 나와있는 전에 코드를 그대로 복사해서 붙여넣어도
안나온다..
