Skip to content

Instantly share code, notes, and snippets.

@Grief

Grief/webgl2-texture-formats.html

Created June 21, 2017 10:57
Show Gist options
  • Save Grief/16c0639c61df20832db2f629e27829f5 to your computer and use it in GitHub Desktop.
Save Grief/16c0639c61df20832db2f629e27829f5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
webgl2-texture-formats.html
<html>
<!doctype html>
<head>
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
}
</style>
<script>
window.onload = () => {
let gl = document.getElementById('canvas').getContext('webgl2');
var ext = gl.getExtension('WEBGL_depth_texture');
gl.bindTexture(gl.TEXTURE_2D, gl.createTexture())
let formats = [], count = 0;
[
'RGB', 'RGBA', 'LUMINANCE_ALPHA', 'LUMINANCE', 'ALPHA', 'DEPTH_COMPONENT', 'DEPTH_STENCIL',
'SRGB', 'SRGB_ALPHA',
'R8', 'R16F', 'R32F', 'R8UI', 'RG8', 'RG16F', 'RG32F', 'RG8UI', 'RG16UI', 'RG32UI', 'RGB8', 'SRGB8', 'RGB565', 'R11F_G11F_B10F', 'RGB9_E5', 'RGB16F', 'RGB32F',
'RGB8UI', 'RGBA8', 'SRGB_APLHA8', 'SRGB8_ALPHA8', 'RGB5_A1', 'RGBA4444',
'RGB10_A2', 'RGBA4', //missing
'RGBA16F', 'RGBA32F', 'RGBA8UI',
'DEPTH_COMPONENT16', 'DEPTH24_STENCIL8'
].forEach((internalFormat =>
[
'ALPHA', 'RGB', 'RGBA', 'LUMINANCE', 'LUMINANCE_ALPHA', 'DEPTH_COMPONENT', 'DEPTH_STENCIL',
'SRGB', 'SRGB_ALPHA', 'RG',
'R8', 'R16F', 'R32F', 'R8UI', 'RG8', 'RG16F', 'RG32F', 'RG8UI', 'RG16UI', 'RG32UI', 'RGB8', 'SRGB8', 'RGB565', 'R11F_G11F_B10F', 'RGB9_E5', 'RGB16F', 'RGB32F', 'RGB8UI', 'RGBA8', 'SRGB_APLHA8', 'RGB5_A1', 'RGBA4444', 'RGBA16F', 'RGBA32F', 'RGBA8UI',
'RED', 'RED_INTEGER', 'RG_INTEGER', 'RGBA_INTEGER', 'RGB_INTEGER', 'SRGB8_ALPHA8', 'DEPTH_COMPONENT', 'DEPTH_STENCIL',
].forEach(format =>
[
'UNSIGNED_BYTE', 'UNSIGNED_SHORT_5_6_5', 'UNSIGNED_SHORT_4_4_4_4', 'UNSIGNED_SHORT_5_5_5_1', 'UNSIGNED_SHORT', 'UNSIGNED_INT', 'UNSIGNED_INT_24_8_WEBGL',
'BYTE',
'SHORT',
'INT',
'UNSIGNED_INT_10F_11F_11F_REV',
'HALF_FLOAT',
'FLOAT',
'UNSIGNED_INT_2_10_10_10_REV',
'UNSIGNED_INT_5_9_9_9_REV',
'UNSIGNED_INT_24_8',
'FLOAT_32_UNSIGNED_INT_24_8_REV',
].forEach(type => {
gl.texImage2D(gl.TEXTURE_2D, 0, gl[internalFormat], 1, 1, 0, gl[format], gl[type], null);
if (!gl.getError()) {
formats.push([++count, internalFormat, format, type]);
}
})
)
));
let table = document.getElementById('formats'), lastFormat, lastRow = [];
formats.forEach((format) => {
let row = document.createElement('tr');
let canSpan = true;
for (let i = 0; i < 4; i++) {
let word = format[i];
if (canSpan && lastFormat && word === lastFormat[i]) {
let span = Number(lastRow[i].getAttribute('rowspan'));
lastRow[i].setAttribute('rowspan', span ? span + 1 : 2);
} else {
if (i > 0) canSpan = false;
lastRow[i] = document.createElement('td');
lastRow[i].textContent = word;
row.appendChild(lastRow[i]);
}
}
table.appendChild(row);
lastFormat = format;
});
}
</script>
</head>
<body>
<table id=formats></table>
<canvas id=canvas></canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment