기술나눔

WebGL2를 사용한 실시간 3D 그래픽

2024-07-08

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

WebGL 렌더링 파이프라인

다음 그림은 WebGL 렌더링 파이프라인의 개략도입니다.

정점 버퍼 객체(VBO)

VBOS에는 형상을 설명하는 데 사용되는 정보가 포함되어 있습니다. 예를 들어 형상의 정점 좌표, 법선 좌표, 색상, 텍스처 좌표 등입니다.

인덱스 버퍼 객체(IBO)

IBO에는 정점 관계를 설명하는 정보가 포함되어 있습니다. VBO에서 정점의 인덱스 위치를 사용합니다.

정점 셰이더

정점 셰이더는 모든 정점에서 실행됩니다. 정점 좌표, 법선 좌표, 색상, 텍스처 좌표 등 정점 관련 정보를 처리합니다. 이 정보는 VBO에서 얻어지며 정점 셰이더에 사용되는 속성과 연결됩니다.

프래그먼트 셰이더

조각 셰이더는 각 조각에서 실행되어 각 조각의 색상을 계산합니다.

프레임버퍼

프레임 버퍼는 프래그먼트 셰이더에서 처리된 프래그먼트를 저장하는 데 사용되는 2차원 버퍼입니다. 모든 조각이 처리되면 렌더링 결과가 화면에 표시될 수 있습니다.

속성

속성은 정점 셰이더의 입력 변수입니다. 버퍼에서 데이터를 읽고 정점 셰이더에 데이터를 전달하는 방법을 지정합니다. 버퍼에 위치 정보(3개의 32비트 부동 소수점 데이터)를 저장할 수 있습니다. 그런 다음 위치 정보를 읽을 버퍼, 위치 정보의 데이터 유형, 읽기를 시작할 버퍼의 위치 및 읽을 총 바이트 수를 지정합니다. 정점 셰이더는 모든 정점에 대해 실행되어야 하기 때문에 실행될 때마다 속성 값이 동일하지 않습니다.

유니폼

유니폼은 버텍스 셰이더와 프래그먼트 셰이더에 대한 입력 변수입니다. 속성과 달리 유니폼 변수는 렌더링 루프 내에서 고정됩니다. 예를 들어 광원의 위치입니다.

텍스처

텍스처에는 이미지 데이터가 포함되는 경우가 많지만 다른 데이터도 포함될 수 있습니다.

다양한

Varyings 변수는 정점 셰이더에서 조각 셰이더로 데이터를 전달하는 데 자주 사용됩니다. 정점 셰이더의 Varyings 변수는 프래그먼트 셰이더에 전달되기 전에 보간됩니다.