Source code
Revision control
Copy as Markdown
Other Tools
<!--
Copyright (c) 2019 The Khronos Group Inc.
Use of this source code is governed by an MIT-style license that can be
found in the LICENSE.txt file.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebGL Information</title>
<style type="text/css">
th, td {
padding: 4pt;
}
th {
text-align: right;
min-width: 22em;
}
</style>
<script src="../js/webgl-test-utils.js"> </script>
<script>
"use strict";
window.onload = main;
function createCell(txt, isTh) {
var str = txt.toString();
if (typeof txt != 'string') {
if (txt.length !== undefined) {
str = "";
for (var ii = 0; ii < txt.length; ++ii) {
str += (ii == 0 ? "" : ", ") + txt[ii];
}
}
}
var t = document.createTextNode(str);
var d = document.createElement("div");
var td;
if (isTh) {
td = document.createElement("th");
} else {
td = document.createElement("td");
}
d.appendChild(t);
td.appendChild(d);
return td;
}
function createRow(values) {
var tr = document.createElement("tr");
for (var i = 0; i < values.length; ++i) {
var td = createCell(values[i], i == 0);
tr.appendChild(td);
}
return tr;
}
function main() {
var wtu = WebGLTestUtils;
var canvas = document.getElementById("example");
var gl = wtu.create3DContext(canvas);
if (!gl) {
return;
}
var debugRendererInfoRows = function() {
var rows = [];
var debugExt = wtu.getExtensionWithKnownPrefixes(gl, 'WEBGL_debug_renderer_info');
if (debugExt) {
var extPnames = [
'UNMASKED_VENDOR_WEBGL',
'UNMASKED_RENDERER_WEBGL'
];
for (var ii = 0; ii < extPnames.length; ++ii) {
var pname = extPnames[ii];
var value = gl.getParameter(debugExt[pname]);
rows.push([pname, value]);
}
}
return rows;
};
var precisionRows = function() {
var rows = [];
var addPrecisionRow = function(shaderType, precision) {
var typeStr = shaderType === gl.FRAGMENT_SHADER ? 'fragment' : 'vertex';
var precisionStr = 'highp';
if (precision == gl.MEDIUM_FLOAT) {
precisionStr = 'mediump';
} else if (precision == gl.LOW_FLOAT) {
precisionStr = 'lowp';
}
rows.push([typeStr + ' shader ' + precisionStr + ' float', gl.getShaderPrecisionFormat(shaderType, precision).precision + ' mantissa bits']);
};
var fSource = 'precision highp float; uniform float r; void main() { gl_FragColor = vec4(r, 0.0, 0.0, 1.0); }'
var f = wtu.loadShader(gl, fSource, gl.FRAGMENT_SHADER);
if (!f) {
rows.push(['fragment shader highp float', 'not supported']);
} else {
addPrecisionRow(gl.FRAGMENT_SHADER, gl.HIGH_FLOAT);
}
addPrecisionRow(gl.FRAGMENT_SHADER, gl.MEDIUM_FLOAT);
addPrecisionRow(gl.FRAGMENT_SHADER, gl.LOW_FLOAT);
addPrecisionRow(gl.VERTEX_SHADER, gl.HIGH_FLOAT);
addPrecisionRow(gl.VERTEX_SHADER, gl.MEDIUM_FLOAT);
addPrecisionRow(gl.VERTEX_SHADER, gl.LOW_FLOAT);
return rows;
};
var renderTargetRows = function() {
var rows = [];
var oesTextureFloat = wtu.getExtensionWithKnownPrefixes(gl, 'OES_texture_float');
var oesTextureHalfFloat = wtu.getExtensionWithKnownPrefixes(gl, 'OES_texture_half_float');
var formatsToTest = [
{
description: 'RGBA UNSIGNED_BYTE',
format: gl.RGBA,
type: gl.UNSIGNED_BYTE
},
{
description: 'RGB UNSIGNED_BYTE',
format: gl.RGB,
type: gl.UNSIGNED_BYTE
}
];
if (oesTextureFloat) {
formatsToTest.push({
description: 'RGBA FLOAT',
format: gl.RGBA,
type: gl.FLOAT
});
formatsToTest.push({
description: 'RGB FLOAT (deprecated)',
format: gl.RGB,
type: gl.FLOAT
});
}
if (oesTextureHalfFloat) {
formatsToTest.push({
description: 'RGBA HALF_FLOAT_OES',
format: gl.RGBA,
type: oesTextureHalfFloat.HALF_FLOAT_OES
});
formatsToTest.push({
description: 'RGB HALF_FLOAT_OES',
format: gl.RGB,
type: oesTextureHalfFloat.HALF_FLOAT_OES
});
}
for (var ii = 0; ii < formatsToTest.length; ++ii) {
var fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
var format = formatsToTest[ii];
var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
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);
gl.texImage2D(gl.TEXTURE_2D, 0, format.format, 256, 256, 0, format.format, format.type, null);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE) {
rows.push([format.description, 'supported']);
} else {
rows.push([format.description, 'not supported']);
}
gl.deleteFramebuffer(fb);
gl.deleteTexture(tex);
}
return rows;
};
var info = [
{
title: 'Renderer',
pnames: [
'VERSION',
'VENDOR',
'RENDERER'
],
genRows: debugRendererInfoRows
},
{
title: 'Textures and Viewport',
pnames: [
'MAX_TEXTURE_SIZE',
'MAX_CUBE_MAP_TEXTURE_SIZE',
'MAX_RENDERBUFFER_SIZE',
'MAX_VIEWPORT_DIMS'
]
},
{
title: 'Shader Variables',
pnames: [
'MAX_VARYING_VECTORS',
'MAX_VERTEX_ATTRIBS',
'MAX_VERTEX_UNIFORM_VECTORS',
'MAX_FRAGMENT_UNIFORM_VECTORS',
'MAX_VERTEX_TEXTURE_IMAGE_UNITS',
'MAX_TEXTURE_IMAGE_UNITS',
'MAX_COMBINED_TEXTURE_IMAGE_UNITS'
]
},
{
title: 'Shader Precision',
genRows: precisionRows
},
{
title: 'Framebuffer Texture Attachment Support',
genRows: renderTargetRows
}
];
// TODO: max anisotropy, framebuffer depth bits, MSAA samples, max multiple render targets buffers, point size, line width
for (var jj = 0; jj < info.length; ++jj) {
var table = document.createElement("table");
var tb = document.createElement("tbody");
if (info[jj].pnames) {
var pnames = info[jj].pnames;
for (var ii = 0; ii < pnames.length; ++ii) {
var pname = pnames[ii];
var value = gl.getParameter(gl[pname]);
tb.appendChild(createRow([pname, value]));
}
}
if (info[jj].genRows) {
var genRows = info[jj].genRows();
for (var ii = 0; ii < genRows.length; ++ii) {
tb.appendChild(createRow(genRows[ii]));
}
}
table.appendChild(tb);
var header = document.createElement("h2");
header.textContent = info[jj].title;
document.getElementById("info").appendChild(header);
document.getElementById("info").appendChild(table);
}
var extensionList = document.createElement('ul');
var exts = gl.getSupportedExtensions();
var extsWithPrefixes = [];
while (exts.length > 0) {
var prefixedNames = wtu.getExtensionPrefixedNames(exts[0]);
var supportedPrefixedNames = [];
for (var ii = 0; ii < prefixedNames.length; ++ii) {
var index = exts.indexOf(prefixedNames[ii]);
if (index >= 0) {
supportedPrefixedNames.push(exts[index]);
exts.splice(index, 1);
}
}
extsWithPrefixes.push(supportedPrefixedNames.join(" / "));
}
extsWithPrefixes.sort();
for (var ii = 0; ii < extsWithPrefixes.length; ++ii) {
var li = document.createElement('li');
li.appendChild(document.createTextNode(extsWithPrefixes[ii]));
extensionList.appendChild(li);
}
document.getElementById('extensions').appendChild(extensionList);
}
</script>
</head>
<body>
<h1>WebGL Info</h1>
<div id="info"></div>
<h2>WebGL Extensions</h2>
<div id="extensions"></div>
<canvas id="example" width="256" height="16" style="width: 256px; height: 48px;"></canvas>
</body>
</html>