WebGL - (2) 작업영역 지우기

webgl-start() 함수 내에서 작업을 합시다.

우선 WebGL 이 건드릴 영역! canvas 를 가져와서 webgl 노가다를 할 변수에다 연결을 해 줍니다.

var canvas = document.getElementById("webgl-screen");

var gl = canvas.getContext("experimental-webgl");

canvas 로부터 Context 를 가져와 변수 gl 에 연결시킵니다.

gl 은 WebGLRenderingContext 라는 object 입니다.

Context 라는 것은 일종의 핸들로 생각합시다. 이 context 를 통해서 우리는 WebGL 함수, 변수 등에 접근할 수 있습니다.

WebGL Context, 즉! gl 이녀석을 통해서 앞으로 canvas 영역을 건드리게됩니다. webGL 노가다꾼이 gl입니다.

그럼,  canvas 즉, WebGL 작업 영역의 배경을 바꿔보도록 하겠습니다.

gl.ClearColor(0.3,0.2,0.7,1.0);

작업영역을 깔끔하게 지울 때, 색상을 설정해 줄 수 있습니다. 이때 위 함수를 사용하며, 함수의 인자로는 R,G,B,A 가 0.0~1.0 까지 사용됩니다.

webGL 은 기본적으로 3D 인데, 여기서 지운다는 의미는 3D 가 투영되서 보이는 2D 영역을 지운다는 의미입니다.

gl.clear(gl.COLOR_BUFFER_BIT);

그 다음, clear() 함수가 실제 지우는 작업을 하는데, 이때 인자로 gl.COLOR_BUFFER_BIT 가 사용되었습니다. clear() 에게 '컬러 버퍼를 지워라!' 고 지시하는겁니다.

여기까지 코딩해서 브라우저로 확인하면, canvas 영역이 보라색에 가까운 색으로 채워집니다.

-----

<script type="text/javascript">

function webgl_start() {
var gl;

var canvas = document.getElementById("webgl-screen");
gl = canvas.getContext("experimental-webgl");
gl.clearColor(0.3,0.2,0.7,1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

} // webgl_start()

</script>

-----