Graphics의 “Hello World”라고 생각되는 ClearColor(BackBuffer Clearing)를 통해 WebGL의 첫번째 예제를 작성해 보도록 하겠다. WebGL을 작성하기 위해서는 약간의 JavaScript와 OpenGL의 몇몇 API 정도만 알고 있으면 된다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<title>WebGL - Prac01 - clearColor</title>
<script type="text/javascript">
function start(){
var canvas= document.getElementById("WebGL");
var gl= canvas.getContext("experimental-webgl");
gl.clearColor(0.4, 0.5, 0.6, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
}
</script>
</head>
<body onload="start()">
<canvas id="WebGL" style="border: 1px solid white" width="800" height="600">
Can't run WebGL
</canvas>
</body>
</html>
JavaScript로 WebGL API 호출에 발생가능한 여러 예외 처리 코드를 모두 제외하고 아주 간단한 형태로 작성한 WebGL 프로그램이다. document.getElementById(...)의 인자로 들어가는 값과 <canvas id= 에 들어가는 값이 일치해야 함을 유의한다. WebGL이 동작 가능한 환경에서 실행하면 아래와 같은 결과를 얻을 수 있다.
