WebGL Fundamentals > Data Textures

https://webglfundamentals.org/webgl/lessons/webgl-data-textures.html

WebGL 3D - Data Textures

https://github.com/Myoungmin/WebGL_Fundamentals

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

 

 

WebGL Data Textures

이미지 대신 자바스크립트에서 직접 데이터를 생성하여 텍스처를 생성하는 방법

WebGL1은 텍스처의 몇 가지 타입만 지원한다.

 

포맷	타입	채널	픽셀당 바이트
RGBA	UNSIGNED_BYTE	4	4
RGB	UNSIGNED_BYTE	3	3
RGBA	UNSIGNED_SHORT_4_4_4_4	4	2
RGBA	UNSIGNED_SHORT_5_5_5_1	4	2
RGB	UNSIGNED_SHORT_5_6_5 3	2
LUMINANCE_ALPHA	UNSIGNED_BYTE	2	2
LUMINANCE	UNSIGNED_BYTE	1	1
ALPHA	UNSIGNED_BYTE	1	1

 

직접 데이터를 생성하여 3x2 픽셀 LUMINANCE 텍스처를 생성하는 실습

LUMINANCE 텍스처이기 때문에 픽셀 당 1개의 값만 있고 각각의 R, G, B 채널로 반복된다.

 

WebGL에는 OpenGL이 처음 만들어졌을 때의 모호한 설정들이 남아있다.

데이터가 특정 크기일 때 가끔씩 컴퓨터가 더 빨라진다.

WebGL은 기본적으로 한 번에 4바이트를 사용하므로 각 데이터 행을 4바이트의 배수로 생각한다.

 

const data = new Uint8Array([
  128,  64, 128,
    0, 192,   0,
]);

 

이와 같은 데이터를 읽을 때는, 

행마다 3바이트, 총 6바이트에 불과하지만, 

WebGL은 첫 번째 행에 대해 4바이트, 두 번째 행에 대해 3바이트, 총 7바이트를 읽는다.

 

그래서 아래와 같은 에러메시지를 보게된다.

 

WebGL: INVALID_OPERATION: texImage2D: ArrayBufferView not big enough for request

 

이를 해결하기 위해서는 한 번에 1byte를 처리하도록 WebGL에 지시할 수 있다.

 

const alignment = 1;
gl.pixelStorei(gl.UNPACK_ALIGNMENT, alignment);

 

1, 2, 4, 8이 alignment에 유효한 값이다.

 

직접 데이터를 생성한 텍스처 코드

// 텍스처 생성
  var texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
 
  // 3x2 픽셀로 텍스처 채우기
  const level = 0;
  const internalFormat = gl.LUMINANCE;
  const width = 3;
  const height = 2;
  const border = 0;
  const format = gl.LUMINANCE;
  const type = gl.UNSIGNED_BYTE;
  const data = new Uint8Array([
    128,  64, 128,
      0, 192,   0,
  ]);
  // 한 번에 1byte를 처리하도록 WebGL에 지시
  const alignment = 1;
  gl.pixelStorei(gl.UNPACK_ALIGNMENT, alignment);
  gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, width, height, border, format, type, data);
 
  // 필터링을 설정했기 때문에 밉맵이 필요없고, 필터링되지 않는다.
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

 

 

 

 

 

 

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

WebGL_Fundamentals