WebGL Fundamentals > Fundamentals : Rendering

https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html

WebGL Fundamentals

https://github.com/Myoungmin/WebGL_Fundamentals

GitHub - Myoungmin/WebGL_Fundamentals: WebGL 학습 프로젝트

 

 

 

 

Rendering

1. gl_Position으로 설정할 클립 공간 값을 어떻게 화면 공간으로 변환하는지 WebGL에 알려준다.

이를 위해 gl.viewport를 호출해서 현재 캔버스 크기를 전달한다.

 

gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

 

이는 -1 <-> +1 클립 공간을, 
x는 0 <-> gl.canvas.width로, 
y는 0 <-> gl.canvas.height로 매핑시켜준다.

 

 

2. Canvas를 투명하게 지운다.

// 캔버스 지우기
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);

 

 

3. 실행할 shader program을 WebGL에 알려준다.

 

// 프로그램(셰이더 쌍) 사용 메서드 실행
gl.useProgram(program);

 

 

4. 설정한 buffer에서 데이터를 가져와 shader의 attribute에 제공하는 방법을 WebGL에 알려준다. 

1) 우선 attribute를 활성화한다.

gl.getAttribLocation로 찾았던 attribute를 활성화한다.

 

gl.enableVertexAttribArray(positionAttributeLocation);

2) 데이터를 어떻게 꺼낼지 설정한다.

// 위치 버퍼 할당
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

// positionBuffer(ARRAY_BUFFER)의 데이터를 꺼내오는 방법을 attribute에 지시
var size = 2;          // 반복마다 2개의 컴포넌트
var type = gl.FLOAT;   // 데이터는 32비트 부동 소수점
var normalize = false; // 데이터 정규화 안 함
var stride = 0;        // 0 = 다음 위치를 가져오기 위해 반복마다 size * sizeof(type) 만큼 앞으로 이동
var offset = 0;        // 버퍼의 처음부터 시작
gl.vertexAttribPointer(
//활성화한 attribute를 파라미터로 넘긴다.
  positionAttributeLocation,
  size,
  type,
  normalize,
  stride,
  offset
);

 

gl.vertexAttribPointer의 숨겨진 부분은 현재 바인딩된 ARRAY_BUFFER를 attribute에 할당한다는 것이다.
다시 말해 attribute는 positionBuffer에 바인딩된다.

참고로 GLSL vertex shader 관점에서 attribute인 a_position은 vec4이다.

 

attribute vec4 a_position;

vec4는 4개의 부동 소수점 값이다.
위에서 size = 2로 설정하여 이 attribute에서 처음 2개 값인 x, y를 가져온다.
가져오지 않는 z, w는 default로 각각 0, 1로 설정된다.

 

 

5. GLSL 프로그램을 실행하도록 WebGL에 요청한다.

var primitiveType = gl.TRIANGLES;
var offset = 0;
// vertex shader를 3번 실행한다.
var count = 3;
gl.drawArrays(primitiveType, offset, count);

 

primitiveType을 gl.TRIANGLES로 설정했기 때문에, 정점 셰이더가 3번 실행될 때마다, WebGL은 gl_Position에 설정한 3개의 값을 기반으로 삼각형을 그린다.

 

 

6. WebGL은 이제 삼각형을 렌더링한다.

그리려는 모든 픽셀에 대해 WebGL은 fragment shader를 호출한다.

 

vertex shader가 데이터를 직접 전달하는 것 외에는 아무것도 하지 않는다. 
위치 데이터가 이미 클립 공간에 있으므로 할 일이 없다.

 

 

 

 

 

 

 

https://myoungmin.github.io/WebGL_Fundamentals/

WebGL_Fundamentals