何度も間違えるのでメモ
1. 拡張機能をオンにする
const gl = c.getContext( 'webgl2' );
gl.getExtension( 'EXT_color_buffer_float' );参考
EXT_color_buffer_float - Web APIs | MDN
2. gl.texImage2D()で適切なフォーマットを指定する
以下のようなコードであれば、
gl.texImage2D(
gl.TEXTURE_2D,
0,
gl.RGBA,
width,
height,
0,
gl.RGBA,
gl.UNSIGNED_BYTE,
null,
);以下のように書き換える。
gl.texImage2D(
gl.TEXTURE_2D,
0,
gl.RGBA16F,
width,
height,
0,
gl.RGBA16F,
gl.FLOAT,
null,
);RGBA の 4 チャンネルではなく、RED の 1 チャンネルだけ必要な場合など
void gl.texImage2D(target, level, internalformat, width, height, border, format, type, GLintptr offset);引用: WebGLRenderingContext.texImage2D() - Web APIs | MDN
上のコードのinternalformat, format, type部分を下の表を参考に適切な組み合わせを選ぶ。
| Internal Format | Format | Type |
|---|---|---|
| RGB | RGB | UNSIGNED_BYTE UNSIGNED_SHORT_5_6_5 |
| RGBA | RGBA | UNSIGNED_BYTE UNSIGNED_SHORT_4_4_4_4 UNSIGNED_SHORT_5_5_5_1 |
| LUMINANCE_ALPHA | LUMINANCE_ALPHA | UNSIGNED_BYTE |
| LUMINANCE | LUMINANCE | UNSIGNED_BYTE |
| ALPHA | ALPHA | UNSIGNED_BYTE |
| R8 | RED | UNSIGNED_BYTE |
| R16F | RED | HALF_FLOAT FLOAT |
| R32F | RED | FLOAT |
| R8UI | RED_INTEGER | UNSIGNED_BYTE |
| RG8 | RG | UNSIGNED_BYTE |
| RG16F | RG | HALF_FLOAT FLOAT |
| RG32F | RG | FLOAT |
| RG8UI | RG_INTEGER | UNSIGNED_BYTE |
| RGB8 | RGB | UNSIGNED_BYTE |
| SRGB8 | RGB | UNSIGNED_BYTE |
| RGB565 | RGB | UNSIGNED_BYTE UNSIGNED_SHORT_5_6_5 |
| R11F_G11F_B10F | RGB | UNSIGNED_INT_10F_11F_11F_REV HALF_FLOAT FLOAT |
| RGB9_E5 | RGB | HALF_FLOAT FLOAT |
| RGB16F | RGB | HALF_FLOAT FLOAT |
| RGB32F | RGB | FLOAT |
| RGB8UI | RGB_INTEGER | UNSIGNED_BYTE |
| RGBA8 | RGBA | UNSIGNED_BYTE |
| SRGB8_ALPHA8 | RGBA | UNSIGNED_BYTE |
| RGB5_A1 | RGBA | UNSIGNED_BYTE UNSIGNED_SHORT_5_5_5_1 |
| RGB10_A2 | RGBA | UNSIGNED_INT_2_10_10_10_REV |
| RGBA4 | RGBA | UNSIGNED_BYTE UNSIGNED_SHORT_4_4_4_4 |
| RGBA16F | RGBA | HALF_FLOAT FLOAT |
| RGBA32F | RGBA | FLOAT |
| RGBA8UI | RGBA_INTEGER | UNSIGNED_BYTE |