티스토리 뷰

Application/Miscellaneous

WebGL 시작해보기.

drake_kr 2019. 6. 14. 08:09

Source: https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene

 

시작하기 전에.

이놈의 three.js는 좋은(?) 메모장(이 포스트에서는 레퍼런스로 Notepad++)이랑 웹브라우저만 있으면 된다.

인터넷에서 접속할 수 있는 서버가 있다면 좋지만, 뭐 없어도 된다.

iOS에서는 조금 복잡한거 같고.. 윈도우 XP급이전 급이면 좀 곤란.. 하다..

공식적으로 Internet Explorer는 8부터 되고, 9부터 원활하게 돌아가는것으로 보인다.

뭐 다른 브라우저는 버전이 더럽게 낮지만(한 2005년부터 업데이트를 안 했거나) 않으면 아마 될거다.

대충 5년 안 된 PC나 랩탑 정도면 엥간하믄 다 돌아간다.

이 포스트에서는 그냥 윈도우 10 사용을 가정하고 작성해보려 한다.

https://threejs.org/build/three.js

불러오는 중입니다...

요 파일부터 받고, 다음과 같이 js 디렉토리를 만들고 three.js 파일을 받아서 집어넣는다.

 

그리고 상위 디렉토리에 html파일을 하나 만들어 놓는다.

 

 

Scene 만들기

three.js에 대한 소개로, 큐브 돌리기부터 시작하는걸로 한다.

다음과 같이 html을 만들어 넣는다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset=utf-8>
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<script src="js/three.js"></script>
		<script>
			// Our Javascript will go here.
		</script>
	</body>
</html>

결과는 직접 확인을.

아무것도 안 나오면 성공(?)

 

일단 초기화 합시다.

Our javascript will go here 라고 적혀있는데에다가 뭘 좀 넣어보자.

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 );

아놔 왜또 아무것도 안 나오냐! 하면.. 아웅 승질도 급하셔.. 뭐 좀 준비하는 코드래..

지원하는 카메라가 몇가지 있는데, 일단은 원근감을 표현해주는 PerspectiveCamera를 한번 보자구.

첫번째 75로 적은건 시야. FOV라고 해서 Field of View라는건데, 하프라이프가 75라서 멀미가 좀 심했다고 하드라.

두번째 window.innerWidth / window.innerHeight 로 적은거는 종횡비야.

뭐 옛날 CRT모니터나 이제막 LCD 보급되기 시작했을때(아놔 왜 아재력을 시험하냐) 많이 쓰던게 4:3이고 요새 16:9 많이 쓰는거는 컴터 모르는 사람도 어느정도 알고 있는 사실일테구.

근데 그냥 종횡비 윈도우 크기에 맞게 알아서 맞추라고 해. 뭐, 종횡비 고정해야겠다 싶으면 웹창 띄울때 걱정해야지.

세번째랑 네번째 0.1하고 1000으로 적은건 near / far 클리핑이래. 너무 가까운거 처리 안하고 너무 먼거 처리 안하겠다는 뜻임.

렌더러는 기본인 WebGLRenderer를 먼저 써보자. 다른것도 있는데 일단 뭐라도 하나 띄우고 나서 생각해보자고..

setSize는 뭐 결국 사이즈 지정이지..

예전 플래시에서 해상도 세팅할때처럼 저해상도로 지정이 가능한거 같은데.. 일단 큐브.. 큐브를 좀 보고 나서..

 

여기 큐브 하나 추가요

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;

큐브를 또 아무렇게나 생성을 몬하는구먼. Vertex랑 face를 보여주기 위해 BoxGeometry라는게 필요하다.

그리고 폴리곤에 속성이라고 해야 하나.. Material이라고 부르는데.. 색상같은거를 부여하지 않으면 투명상태니까 뭐라도 일단 입혀봐야지. 일단은 MeshBasicMaterial을 써보자. 색상은 HTML에서 쓰던 뭐 그런 색임.

폴리곤이 들어갈 자리(Geometry)랑 속성(Material)까지 정했으면 이제 메쉬로 엮어서 객체로 만들면 쓰기 편하게 만들어짐.

여기까지 일단 메모리에 올렸으니 실제 화면에 보여주려면 add()를 호출해야 돼.

박스를 0.0.0 좌표에 add()로 갖다놓는데 카메라랑 같은 위치라서 camera.position.z 축에서 뒤로 5포인트만큼 이동시켰어.

 

렌더링좀 해주세요 현기증난단 말이에요.

뭔 아직까지 화면에 뜨는게 없냐! 라면.. 화면에 출력하는 연산인 렌더링을 안했기 때문이거든.

var animate = function () {
	requestAnimationFrame( animate );

	cube.rotation.x += 0.01;
	cube.rotation.y += 0.01;

	renderer.render( scene, camera );
};
			
animate();

렌더링하면서 일단 회전이라도 시켜봐야지 다들 그러잖아.

requestAnimationFrame을 쓰면.. 일단 똥컴이 아니면 60프레임은 나온다고 하드라고. 나중에 fps 찍는것도 기능에 있으니까.. 확인해보면 될테고..

기본적으로 inactive 상태에서는 일 안하게 설계되어 있대. 배터리 같은거 아끼고 하라고.

물론 세팅을 주면 inactive에서도 돌아가긴 하나봐.

어쨌든 웹브라우저 가지고 3D 그래픽 하는것도 느낌이 나쁘지 않네.. 아닌가..

 

뭔가 좀 날로먹는 툴같은거좀 찾아봐야겠어..

'Application > Miscellaneous' 카테고리의 다른 글

WebGL 모듈 써보기  (0) 2019.06.20
C++한테 깝치다 쳐맞는 JAVA  (6) 2016.02.22