WebGL์ ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํ์ง ์๊ณ OpenGL ES 2.0 ๊ธฐ๋ฐ API๋ฅผ ์ด์ฉํ์ฌ ๋ธ๋ผ์ฐ์ ์ HTML canvas
์ ๋ ๋๋งํ์ฌ 3D ์น ์ฝํ
์ธ ์ ์์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค. WebGL ํ๋ก๊ทธ๋จ์ ์ปดํจํฐ์ ๊ทธ๋ํฝ ์ฒ๋ฆฌ ์ฅ์น(GPU)์์ ์คํ๋๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ ํน์ ํจ๊ณผ(์
ฐ์ด๋ ์ฝ๋)์ฝ๋๋ก ๊ตฌ์ฑ๋ฉ๋๋ค. WebGL ์์๋ค์ ๋ค๋ฅธ HTML ์์๋ค๊ณผ ํผํฉ๋ ์ ์๊ณ ํ์ด์ง๋ ํ์ด์ง ๋ฐฐ๊ฒฝ์ ๋ค๋ฅธ ๋ถ๋ถ๊ณผ ํฉ์ฑ๋ ์ ์์ต๋๋ค.
์ด ๋ฌธ์๋ ๊ธฐ๋ณธ WebGL ๊ธฐ๋ณธ ์ฌํญ์ ์๊ฐํฉ๋๋ค. ์ด ๋ฌธ์์์๋ 3D ๊ทธ๋ํฝ์ ๊ด๋ จ๋ ์ํ์ ์ดํด๋ฅผ ์ด๋ฏธ ์ดํดํ๊ณ ์๋ค๊ณ ๊ฐ์ฃผํ๊ณ OpenGL ์์ฒด์ ๋ํ์ฌ ์ค๋ช ํ์ง ์์ ๊ฒ์ ๋๋ค.
3D ๋ ๋๋ง ์ค๋น
WebGL์ ์ฌ์ฉํ์ฌ 3D ๋ ๋๋ง์ ํ๋ ๋ฐ ์ฒซ ๋ฒ์งธ๋ก ํ์ํ ๊ฒ์ ์บ๋ฒ์ค์ ๋๋ค. ์๋ HTML ์ฝ๋๋ canvas๋ฅผ ๋ง๋ค๊ณ ์ฌ์ฉํ WebGL ์ปจํ ์คํธ๋ฅผ ์ด๊ธฐํํ๋ onload ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ์ง์ ํฉ๋๋ค.
<body onload="start()">
<canvas id="glcanvas" width="640" height="480">
Your browser doesn't appear to support the HTML5 <code><canvas></code> element.
</canvas>
</body>
WebGL ์ปจํ ์คํธ ์ค๋น
์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋์์ start()
ํจ์๋ ๋ฌธ์๊ฐ ๋ค ๋ถ๋ฌ์์ง๋ฉด ํธ์ถ๋ฉ๋๋ค. ์ด ํจ์์ ๊ธฐ๋ฅ์ WebGL ์ปจํ
์คํธ๋ฅผ ์ค์ ํ๊ณ ์ฝํ
์ธ ๋ ๋๋ง์ ์์ํ๋ ๊ฒ์
๋๋ค.
var gl; // A global variable for the WebGL context
function start() {
var canvas = document.getElementById("glcanvas");
gl = initWebGL(canvas); // Initialize the GL context
// Only continue if WebGL is available and working
if (gl) {
gl.clearColor(0.0, 0.0, 0.0, 1.0); // Set clear color to black, fully opaque
gl.enable(gl.DEPTH_TEST); // Enable depth testing
gl.depthFunc(gl.LEQUAL); // Near things obscure far things
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); // Clear the color as well as the depth buffer.
}
}
์ฒซ ๋ฒ์งธ ํ ์ผ์ canvas์ ๋ํ ์ฐธ์กฐ๋ฅผ ์ป๋ ๊ฒ ์ ๋๋ค. canvas๋ผ๋ ๋ณ์์ ์ง์ ํฉ๋๋ค. ๋น์ฐํ canvas๋ฅผ ๋ฐ๋ณต์ ์ผ๋ก ์ฐธ์กฐํ ํ์๋ ์๊ณ ์ ์ญ ๋ณ์๋ก ์ ์ฅํ๋ ๊ฒ์ ํผํด์ผ ํฉ๋๋ค. ์ง์ญ ๋ณ์๋ ๊ฐ์ฒด์ ํ๋ ๋ฉค๋ฒ๋ก ์ฐธ์กฐํด์ผ ๋ฉ๋๋ค.
์บ๋ฒ์ค๊ฐ ์์ผ๋ฉด initWebGL()
์ด๋ผ๋ ํจ์๋ฅผ ํธ์ถํ ์ ์์ต๋๋ค. ์ด ํจ์๋ ์ผ์์ ์ผ๋ก ์ ์๋๊ณ WebGL ์ปจํ
์คํธ๋ฅผ ์ด๊ธฐํํ๋ ์ผ์ ํฉ๋๋ค.
๋ง์ฝ ์ปจํ ์คํธ๊ฐ ์ฑ๊ณต์ ์ผ๋ก ์ด๊ธฐํ ๋๋ฉด gl์ ์ด๋ฅผ ์ฐธ์กฐํฉ๋๋ค. ์ด๋ฒ ์์ ์์๋ ๊ฒ์์ ํฌ๋ช ์์์ ์ค์ ํ๋ฉด ์ปจํ ์คํธ๋ฅผ ๊ทธ ์์์ผ๋ก ์ง์ ํฉ๋๋ค. ๊ทธ ๋ค์ ์ปจํ ์คํธ๋ ์ค์ ๋งค๊ฐ๋ณ์๋ก ์ค์ ๋ฉ๋๋ค. ์์ ์์๋ ๊น์ด ํ ์คํธ๊ฐ ๊ฐ๋ฅํ๊ณ ๊ฐ๊น์ด ๋ฌผ์ฒด๊ฐ ๋ฉ๋ฆฌ ๋จ์ด์ ์๋ ๋ฌผ์ฒด๋ฅผ ๊ฐ๋ฆฌ๋ ๊ฒ์ ์ง์ ํฉ๋๋ค.
์ฝ๋์์ ์ด๊ธฐํ๋ฅผ ์ ๋ฌํ๋ ๋ชฉ์ ์ ์ฐ๋ฆฌ๊ฐ ํ๋ ค๋ ๊ฒ ์ ๋ถ ์ ๋๋ค. ์ ์ ํ ์ค์ ๋ก ๋ฌด์ธ๊ฐ๋ฅผ ์ด๋ป๊ฒ ์์ํ๋๊ฐ ์์๋ณผ ๊ฒ์ ๋๋ค.
WebGL ์ปจํ ์คํธ ์์ฑ
initWebGL()
ํจ์๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
function initWebGL(canvas) {
gl = null;
try {
// Try to grab the standard context. If it fails, fallback to experimental.
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
}
catch(e) {}
// If we don't have a GL context, give up now
if (!gl) {
alert("Unable to initialize WebGL. Your browser may not support it.");
gl = null;
}
return gl;
}
์บ๋ฒ์ค์์ WebGL ์ปจํ ์คํธ๋ฅผ ์ป๊ธฐ ์ํด canvas๋ก "webgl"์ด๋ผ๊ณ ๋ถ๋ฆฌ๋ ์ปจํ ์คํธ๋ฅผ ์์ฒญํ ๊ฒ์ ๋๋ค. ๋ง์ฝ์ ์คํจํ๋ค๋ฉด "experimental-webgl"์ด๋ผ๋ ์ด๋ฆ์ผ๋ก ์๋ํ ๊ฒ์ ๋๋ค. ๋ง์ฝ ์ด๋ง์ ๋ ์คํจํ๋ค๋ฉด ์ฌ์ฉ์์๊ฒ ์ฌ์ฉ ์ค์ธ ๋ธ๋ผ์ฐ์ ๊ฐ WebGL์ ์ง์ํ์ง ์๋๋ค๋ ๊ฒฝ๊ณ ๋ฅผ ์ถ๋ ฅํ ๊ฒ์ ๋๋ค. ์ด๊ฒ ์ ๋ถ์ ๋๋ค. ์ด ์์ ์์ gl์ null(WebGL ์ปจํ ์คํธ๋ฅผ ์ด์ฉํ ์ ์๋ค๋ ์๋ฏธ)์ด๊ฑฐ๋ ๋ ๋๋งํ WebGL ์ปจํ ์คํธ๋ฅผ ์ฐธ์กฐํ ๊ฒ์ ๋๋ค.
์ด ์์ ์์ ์ด ์ฝ๋๋ WebGL ์ปจํ ์คํธ๊ฐ ์ฑ๊ณต์ ์ผ๋ก ์ด๊ธฐํํ๋ ๋ฐ ์ถฉ๋ถํ ์ฝ๋์ ๋๋ค. ์ด ์ฝ๋๋ฅผ ํตํด ๊ฒ์ ๋ฐ์ค ํํ์ ๋น ๊ณต๊ฐ์ด ํ์ฑ๋๋ฉฐ, ์ฌ๊ธฐ์ ์ฝํ ์ธ ๋ฅผ ์์ฑํ ๊ธฐ๋ณธ ์ค๋น๊ฐ ๋์์ต๋๋ค.
์ฌ๊ธฐ๋ฅผ ํด๋ฆญํ์ฌ ์์ ๋ฅผ ํ์ธํ์ธ์. ๋ธ๋ผ์ฐ์ ๊ฐ WebGL์ ํธํํ๋ค๋ฉด ์คํ๋ ๊ฒ ์ ๋๋ค.
WebGL ์ปจํ ์คํธ ํฌ๊ธฐ ์กฐ์
์ด์ ์๋ก์ด WebGL ์ปจํ ์คํธ๋ ์๋ก์ด ์ปจํ ์คํธ ์ธ์คํด์ค๋ฅผ ์ป์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ CSS ์์ด ์บ๋ฒ์ค ์์์ height์ width๋ก ๋ทฐํฌํธ์ ํด์๋๋ฅผ ์ค์ ํฉ๋๋ค. ์บ๋ฒ์ค ์์์ ์คํ์ผ ํธ์งํ๋ฉด ์ถ๋ ฅ๋๋ ํฌ๊ธฐ๋ฅผ ๋ณ๊ฒฝ๋ ๊ฒ์ด์ง๋ง ๋ ๋๋ง ํด์๋๋ ๋ณ๊ฒฝ๋์ง ์์ต๋๋ค. ๋ํ ์ปจํ ์คํธ๊ฐ ์์ฑ๋ ํ ์บ๋ฒ์ค ์์์ width์ height ์์ฑ์ ํธ์งํ๋ฉด ๊ทธ๋ ค์ง๋ ํฝ์ ์๋ฅผ ๋ณ๊ฒฝํ ์ ์์ต๋๋ค. WebGL ๋ ๋์ ํด์๋๋ฅผ ๋ณ๊ฒฝํ๋ ค๋ฉด ์ฌ์ฉ์๊ฐ ์บ๋ฒ์ค ๋ฌธ์ ์ ์ฒด ์ฐฝ ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ๊ฑฐ๋ ์ฑ์์ ๊ทธ๋ํฝ ์ค์ ์ ์กฐ์ ํ ์ ์๊ฒ ํ๊ธธ ์ํ ๊ฒ์ ๋๋ค. WebGL ์ปจํ ์คํธ viewport() ํจ์๊ฐ ๋ณ๊ฒฝํ ์์๋ ๊ฒ์ผ๋ก ์๋ ค์ ธ ์์ต๋๋ค.
๋ ๋๋ง๋ WebGL ์ปจํ ์คํธ์ ํด์๋๋ฅผ ์์ ํ๋ ค๋ฉด ์์ ๋์ค๋ gl๊ณผ canvas ๋ณ์๋ฅผ ์ฌ์ฉํด์ผ ๋ฉ๋๋ค.
gl.viewport(0, 0, canvas.width, canvas.height);
์บ๋ฒ์ค๋ CSS ์คํ์ผ๊ณผ ๋ค๋ฅธ ํด์๋๋ก ๋ ๋๋ง๋์ด์ง ๋ ํ๋ฉด์์ ์ฐจ์งํ๋ ํฌ๊ธฐ๋ฅผ ๋ณผ ๊ฒ์ ๋๋ค. CSS๋ก ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ๋ฉด ๋ฎ์ ํด์๋์์ ๋ ๋๋งํ๊ฑฐ๋ ๋ธ๋ผ์ฐ์ ํ๋ฉด์ ํ๋ํ ๋ ์์์ ์ ์ฝํ๋ ๋ฐ ์ ์ฉํฉ๋๋ค. ์ถ์๋ ์ํผ์ํ ์ํฐ์์ผ๋ฆฌ์ด์ฑ(SSAA) ํจ๊ณผ๋ฅผ ์ฌ์ฉํ ๋ ๊ฐ๋ฅํฉ๋๋ค. (๋ง์ ์ฑ๋ฅ ๋น์ฉ์ด ๋ฐ์ํ๊ณ ์์ ๊ฒฐ๊ณผ์ด๊ธฐ๋ ํ์ง๋ง) ์๋์ ์ฐธ๊ณ ์ฌํญ์ ์ดํด๋ณด๋ ๊ฒ์ด ๊ฐ์ฅ ์ข์ต๋๋ค.
- WebGL์ ๋ํ ์๊ฐ - DEV.OPERA์ ์๋ Luz Caballero๊ฐ ์์ฑํ ๋ฌธ์์ ๋๋ค. ์ด ๋ฌธ์๋ WebGL์ด ๋ฌด์์ธ์ง, ์ด๋ป๊ฒ ์๋๋๋์ง, ๋ ๋๋ง ํ์ดํ๋ผ์ธ ๊ฐ๋ ์ ๋ํ์ฌ ์ค๋ช ํ๊ณ ๋ช ๊ฐ์ง WebGL ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ํ์ฌ ์๊ฐํฉ๋๋ค.
- ํ๋ OpenGL์ ๋ํ ์๊ฐ - Joe Groff๊ฐ ์์ฑํ OpenGL์ ๋ํ ์ข์ ๋ฌธ์ ์๋ฆฌ์ฆ์ ๋๋ค. ์กฐ๋ ๋ช ํํ๊ฒ ์ญ์ฌ๋ฅผ ๊ฐ์ง๊ณ OpenGL์ ์ค์ํ ๊ทธ๋ํฝ ํ์ดํ๋ผ์ธ ๊ฐ๋ ์ ๋ํด ์๊ฐํ๊ณ ๋ช ๊ฐ์ง ๋ฐ๋ชจ๋ฅผ ํตํด OpenGL์ด ์ด๋ป๊ฒ ์๋๋๋์ง ์ค๋ช ํ๊ธฐ ์ํด ์์ ๋ค์ ์ ๊ณตํฉ๋๋ค. ๋ง์ฝ OpenGL์ ๋ํ ๊ฐ๋ ์ด ์ ์กํ ์๋ค๋ฉด ์์ํ๊ธฐ ์ข์ ์ฅ์๊ฐ ๋ ๊ฒ์ ๋๋ค.