[WebGL] 기본을 알아보자

Chad Lee·2022년 5월 2일
2

WebGL

목록 보기
1/3
post-thumbnail

[WebGl] WebGL이란?

WebGL은 Web browser에서 점, 선, 삼각형을 이용해 구현하는 그래픽 엔진 입니다.
GPU를 사용하기 때문에 그에 맞는 코드를 사용해야 하는데 이는 함수 쌍으로 제공하고 Vertex Shader, Fregment Shader로 불립니다.
각 Shader들은 GLSL로 구현 해야 하고 수학적 계산을 수행합니다.

Fragments

Vertex Shader: 공간 좌표 생성
Fragment Shader: 현재 픽셀의 색상 재공

이런 Shader 함수쌍은 Shader Program이라고 불립니다.
WebGL을 사용하는 앱들은 만은 Shader Program을 가집니다.

Shader들은 WebGLRenderingContext.drawArrays(), WebGLRenderingContext.drawElements()를 호출하여 실행 하는데 이때 모든 데이터는 GPU에 제공 되어야 하며 Shader가 데이터를 받을 수 있는 방법은 아래와 같습니다.

  1. 버퍼: GPU에 업로드 하는 2진 데이터 배열
  2. 속성: 버퍼에서 데이터를 가져와 Vertex Shader에 제공 하는 방법 지정
  3. 유니폼: Shader program 실행전 설정하는 사실상 전역 변수
  4. 텍스처: Shader program에서 랜덤하게 접근할 수 있는 데이터 배열
  5. 베링: Vertex Shader가 Fragment Shader에 데이터를 전달하는 방법

WebGL을 이용한 그리기

WebGL을 이용한 구현은 아래와 같은 Clip Space에 좌표와 색상을 다루는 일을 말합니다.

Clip Space

좌표계는 기존의 canvas 2d Context 와는 다르게 공간의 개념이 있고 (0, 0)이 좌측 상단인것과 다르게 공간의 정 가운데(0,0,0)을 가집니다. (Normalize device coordinates)
최대 1, 최소 -1의 좌표를 가집니다.

기본 구현 순서

위 다이어그램을 간략히 설명하면 아래 순서와 같습니다.

  1. GLSL를 이용해 Shader 작성
  2. Shader를 String으로 변경
  3. Shader GLSL을 업로드하고 컴파일
  4. 두 Shader를 Program으로 연결 후 호출
  5. buffer를 생성하고 bind 하여 GPU에 데이터 제공
  6. randering pipeline

Randering pipeline

랜더링 프로세스를 다이어그램으로 나타내면 아래와 같습니다.

위 다이어그램을 간략히 설명하면 아래 순서와 같습니다.

  1. Vertex buffer object에 있는 각 정점에 대해 Vertex Shader 실행
  2. Vertex Shader는 각 정점위치 계산, 색상, 텍스처 좌표 그리고 연결된 다른 정점을 계산.
  3. 계산한 정보를 이용해 삼각형을 조립
  4. 조립한 Primitive를 래스터화
  5. vertex shader로 부터 데이터를 Fragment Shader에 전달하고 Fragment Shader는 정점간 pixel 값을 계산하고 보정
  6. Randering전 최종 형태인 Frame Buffer 생성
  7. Frame Buffer는 그래픽 메모리의 일부로 너비, 높이, pixel 색상, 깊이 등의 세부 정보를 가짐

참조: https://webglfundamentals.org/webgl/lessons/ko/webgl-fundamentals.html
https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection/clip-space-graph.svg

0개의 댓글