그런데 Nehe 강좌는 예전에는 순수 OpenGL이었으나 WebGL로 포팅한 저자가 전부 GLSL기반으로 바꾸어서 강좌 초기부터 GLSL이 나와있어서 초보자들을 황당하게 만들수가 있다.
그래서 가장 심플하게 아무것도 그리지 않는 Renderer 초기화 코드부터 추려내 보았다. 아래가 전체의 코드이다. WebGL을 초기화 하고 tick을 돌려서 화면을 검게 만드는 것밖에 하지 않는다.
<canvas id="lesson01-canvas" ...>는 canvas를 만든다.
<body onload="webGLStart();">는 HTML의 body가 로딩될때 수행할 callback 함수이다. 여기서 WebGL이 초기화 된다.
webGLStart()에서 var canvas = document.getElementById("lesson01-canvas");는 HTML document에서 canvas객체를 가져오는 역할을 한다.
glClearColor와 glEnable과 같은데 Clear시 색깔과 DepthTest를 활성화 시킨다.
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);
tick()안에 requestAnimFrame(tick)이 tick을 호출하여 필요한 그림을 계속 그려나간다.
requestAnimFrame() : webgl-utils.js에서 제공하는 함수로, 비동기성으로 webGL에 의한 도형을 그린다.(활성화된 브라우져 텝에서만 작동함.)
지금은 Google에서 제공하는 webgl-utils.js 를 이용해서 requestAnimFrame 를 호출해야 하지만, 결국 모든 브라우져에서 이 기능을 requestAnimFrame로 명명하게 될것이다. 그때까지는 요걸 써야 한다.
<현재 브라우져에서 프레임을 움직이는 기능을 하는 함수명들...>
Firefox : mozRequestAnimationFrame
Chrome / Safari : webkitRequestAnimationFrame
requestAnimFrame 특징 : 기존에 setInterval 함수를 이용하여 수동으로 3D효과를 낼때는 브라우져 Tab이 활성화 되어있지 않아도 작동하고있다는 단점이 있었다. 그로인해 브라우져 Tab이 활성화되어있을때만 작동하는 이 함수가 등장하게 되었다.
다음은 drawScene에서 매 frame마다 viewport를 canvas전체로 하고 clear를 한다. 주의할 점은 swapBuffer가 없다는 점이다.
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
<html>
<head>
<title>OpenGL Korea WebGL Lesson 0</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="http://learningwebgl.com/lessons/lesson03/webgl-utils.js"></script>
<script type="text/javascript">
var gl;
function initGL(canvas) {
try {
gl = canvas.getContext("experimental-webgl");
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
} catch (e) {
}
if (!gl) {
alert("Could not initialise WebGL, sorry :-(");
}
}
function tick() {
requestAnimFrame(tick);
drawScene();
}
function drawScene() {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
}
function webGLStart() {
var canvas = document.getElementById("lesson01-canvas");
initGL(canvas);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);
tick();
}
</script>
</head>
<body onload="webGLStart();">
<canvas id="lesson01-canvas" style="border: none;" width="500" height="500"></canvas>
<br/>
</body>
No comments:
Post a Comment