WebGL Fundamentals > Fundamentals : buffer와 attribute 커맨드가 하는 일

https://webglfundamentals.org/webgl/lessons/webgl-how-it-works.html

WebGL How It Works

https://github.com/Myoungmin/WebGL_Fundamentals

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

 

 

buffer는 vertex와 각 vertex의 다른 데이터를 GPU로 가져오는 방법이다.

보통 초기화할 때 수행되는 커맨드

• gl.createBuffer : 버퍼를 생성
• gl.bindBuffer : 해당 버퍼를 작업할 버퍼로 설정
• gl.bufferData : 데이터를 버퍼로 복사

 

buffer에 데이터가 있으면 어떻게 데이터를 가져와 vertex shader의 attribute에 제공할지 WebGL에 알려줘야 한다.

이를 위해, 먼저 attribute를 할당한 위치를 WebGL에 물어봐야한다.

 

// 정점 데이터가 어디로 가야하는지 탐색, 보통 초기화할 때 수행
var positionLocation = gl.getAttribLocation(program, "a_position");
var colorLocation = gl.getAttribLocation(program, "a_color");

 

attribute 위치를 알았으면 Rendering 전에 3가지 명령어를 실행해야 한다.

1. buffer에 데이터를 제공하길 원한다고 WebGL에게 알려준다.

gl.enableVertexAttribArray(location);

 

2. ARRAY_BUFFER 바인드 포인트에 buffer를 할당한다.

ARRAY_BUFFER는 WebGL 내부에 있는 전역 변수이다.

 

gl.bindBuffer(gl.ARRAY_BUFFER, someBuffer);

 

3.  ARRAY_BUFFER 바인드 포인트에 바인딩된 buffer에서 데이터를 가져오기 위해 필요한 여러 정보를 WebGL에 알려준다.

gl.vertexAttribPointer(
  // attribute 위치
  location,
  // 정점마다 얼마나 많은 컴포넌트가 있는지
  numComponents,
  // 데이터 타입(BYTE, FLOAT, INT, UNSIGNED_SHORT, 등등...)은 무엇인지
  typeOfData,
  // 부동 소수점이 아닌 모든 타입 정규화된 데이터를 위한 플래그
  normalizeFlag,
  // 스트라이드는 한 데이터에서 다음 데이터를 가져오기 위해 몇 바이트를 건너뛰어야 하는지
  strideToNextPieceOfData,
  // 오프셋은 버퍼에서 데이터가 얼마나 멀리 있는지
  offsetIntoBuffer
);

 

현재 ARRAY_BUFFER 바인드 포인트에 바인딩된 버퍼에서 데이터를 가져오기위한 설정들

• attribute 위치
• 정점마다 얼마나 많은 컴포넌트가 있는지
• 데이터 타입(BYTE, FLOAT, INT, UNSIGNED_SHORT, 등등...)은 무엇인지
• 부동 소수점이 아닌 모든 타입 정규화된 데이터를 위한 플래그
• 한 데이터에서 다음 데이터를 가져오기 위해 몇 바이트를 건너뛰어야 하는지를 위한 스트라이드
• 버퍼에서 데이터가 얼마나 멀리 있는지를 나타내는 오프셋

 

 

 

 

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

WebGL_Fundamentals