openGL 과, WebGL 기초

공고를 열심히 뒤져보니 2D나 3D 벡터 그래픽을 표현할 때 많이 사용되는 라이브러리 같기에 알아보고자 한다.

대표적인 그래픽스 라이브러리로는 OpenGL과 DirectX 가 있다고 함.

 

OpenGL

Open Graphics Library 의 약자로 C언어 기반

GPU를 이용한 하드웨어 가속화를 통해 렌더링 하며 주로 데스크탑 어플리케이션 등에 사용된다고 한다.

가상현실, 시각화, 비디오 게임 등...

 

WebGL

Web Graphics Library 의 약자로 OpenGL ES2 에서 파생

웹GL은 자바스크립트를 기반으로 HTML Canvas에 2D, 3D를 표현하는 역할을 한다.

OpenGL에서 파생되어 OpenGL의 기능들을 웹에서 표현한다고 함

다만 WebGL은 OpenGL의 모든 기능을 지원하지는 못하는 한계가 존재 (ex. Geometry Shaders, Tessellation Shaders, Compute Shaders 등은 지원X)

 

그렇다면 내가 깊게 배워봐야하는 건 WebGL 이라고 생각된다.

추가적으로 WebGL은 리액트나 뷰같은 프론트엔드 라이브러리와 함께 사용할 수 있으며,

npm module 을 사용할 수 있다는 이점도 있었다.

OpenGL에서 직접 구현해야하는 버튼 등은 html 지원을 받으므로 쉽게 구현이 가능하다는 점도 있었다.

 

https://registry.khronos.org/webgl/specs/latest/1.0/#1

WebGL Specification

 

렌더링 유형에는

• 하드웨어 렌더링 : 모든 그래픽 계산을 GPU 에 의해 수행
• 소프트웨어 렌더링 : 모든 그래픽 계산을 CPU 에서 수행

SSR을 통해 리소스가 충분한 전용 서버에서 하거나, CSR을 통해 CPU에서 로컬로 수행할 수도 있다.

WebGL은 CSR을 통해 3D를 렌더링하여 이미지를 얻는데 필요한 처리를 클라이언트의 그래픽 하드웨어를 사용하여 로컬로 수행하게 된다.

 

Canvas에 WebGL 시작하기

canvas 는 자바스크립트를 사용하여 그래픽을 그릴 수 있는 옵션들을 제공해준다.

그중에서도 WebGL 을 사용하려면 캔버스의 getContext() 에 'experimental-webgl' 이라고 매개변수를 넘겨준다.

 

Vertex (정점)

3차원의 개체의 가장자리의 결합을 형성하는 점

자바스크립트 배열을 사용하여 정점을 수동으로 저장한 뒤 정점 버퍼를 사용하여 WebGL 렌더링 파이프 라인에 전달해준다.

Index (인덱스)

정점을 식별하는 숫자값으로 WebGL의 메쉬(mesh)를 그리는데 사용한다.

Buffer (버퍼)

버퍼는 데이터를 가지고 있는 webGL의 메모리 영역으로

버퍼 영역에는 다양한 버퍼가 존재

 

Mesh (메쉬)

2D 또는 3D 개체를 그리기 위해 WebGL에서 drawArrays() 와 drawElements() 를 제공한다.

해당 메서드에는 점, 선, 삼각형 모드를 넣을 수 있으며 이를 조합하여 하나 이상의 다각형을 구성하고,

기본 다각형을 사용하여 메쉬를 형성해준다.

셰이더

WebGL을 GPU 가속 컴퓨팅하므로 메쉬 정보를 CPU에서 GPU 로 전송해야 되는 통신 오버 헤드가 발생한다.

이때 WebGL에서는 셰이더를 사용하여 클라이언트 시스템에 그래픽 요소를 그리는데 필요한 프로그램을 작성한다.

즉, 셰이더는 GPU 용 프로그램이며 정점, 변형, 재질, 조명 및 카메라가 상호 작용하여 특정 이미지를 만드는 방법을 정확하게 정의해준다.

메쉬에 대한 픽셀을 가져오는 알고리즘을 구현하는 것

 

정정 셰이더와 Fragment 셰이더가 존재한다. (으.. 이거 게임개발할 때 얼핏 공부했던거)

정점 셰이더

모든 정점에서 호출되는 프로그램 코드

한 위치에서 다른 위치로 변환하는데 사용된다. 정점 변환, 정상 변환 및 정규화, 텍스쳐 좌표 생성, 텍스쳐 좌표 변환, 조명, 색상 재료 적용 등이 가능

자바스크립트로 작성된 Vertex Buffer Object 를 가리킨다.

Fragment 셰이더 (=픽셀 셰이더)

메쉬는 여러 삼각형으로 구성되며 각 삼각형의 표면을 프래그먼트라고 한다. 프래그먼트 셰이더는 모든 프래그먼트의 픽셀에서 실행되는 코드이며 개별 픽셀의 색상을 계산하고 채우기 위해 사용된다.

보간된 값에 대한 연산, 텍스처 접근, 텍스처 적용, 안개, 색상 합계 등이 가능하다.

 

여기까지가 기초 내용이고... 게임 개발을 하면서 얼핏 봤던 내용들을 다시 보니 반갑(?)다.

WebGL은 상대적으로 로우 레벨이기에 Three.js 라는 라이브러리를 사용하면 그나마 쉽게 접근할 수 있다고 한다.

다음에는 해당 라이브러리에 대해 공부해봐야겠다.