Graphics의 "Hello World"라고 생각되는 ClearColor(BackBuffer Clearing)를 통해 WebGL의 첫번째 예제를 작성해 보도록 하겠다. WebGL을 작성하기 위해서는 약간의 JavaScript와 OpenGL의 몇몇 API 정도만 알고 있으면 된다.
<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= 에 들어가는 값이 일치해야 함을 유의한다.이 코드를 002. WebGL - Environment Setting에서 설명한 바와 같은 환경에서 동작시키면, 아래와 같은 결과를 얻을 수 있다.
'Computer > WebGL' 카테고리의 다른 글
| 006. WebGL - Prac05 - DrawTriangleWithColor (0) | 2010.04.06 |
|---|---|
| 005. WebGL - Prac04 - Shader를 위한 Script 구문 (0) | 2010.04.06 |
| 004. WebGL - Prac03 - DrawPoints, DrawLines, DrawTriangles. (0) | 2010.04.05 |
| 002. WebGL - Environment Setting (0) | 2010.04.05 |
| 001. About WebGL (0) | 2010.04.05 |
