dom/canvas/test/webgl-conf/checkout/extra/webgl-info.html

   1 <!--
   2 Copyright (c) 2019 The Khronos Group Inc.
   3 Use of this source code is governed by an MIT-style license that can be
   4 found in the LICENSE.txt file.
   5 -->
   6
   7 <!DOCTYPE html>
   8 <html>
   9 <head>
  10 <meta charset="utf-8">
  11 <title>WebGL Information</title>
  12 <style type="text/css">
  13 th, td {
  14     padding: 4pt;
  15 }
  16 th {
  17     text-align: right;
  18     min-width: 22em;
  19 }
  20 </style>
  21 <script src="../js/webgl-test-utils.js"> </script>
  22 <script>
  23 "use strict";
  24 window.onload = main;
  25
  26 function createCell(txt, isTh) {
  27   var str = txt.toString();
  28   if (typeof txt != 'string') {
  29     if (txt.length !== undefined) {
  30       str = "";
  31       for (var ii = 0; ii < txt.length; ++ii) {
  32         str += (ii == 0 ? "" : ", ") + txt[ii];
  33       }
  34     }
  35   }
  36   var t = document.createTextNode(str);
  37   var d = document.createElement("div");
  38   var td;
  39   if (isTh) {
  40     td = document.createElement("th");
  41   } else {
  42     td = document.createElement("td");
  43   }
  44   d.appendChild(t);
  45   td.appendChild(d);
  46   return td;
  47 }
  48
  49 function createRow(values) {
  50   var tr = document.createElement("tr");
  51   for (var i = 0; i < values.length; ++i) {
  52     var td = createCell(values[i], i == 0);
  53     tr.appendChild(td);
  54   }
  55   return tr;
  56 }
  57
  58 function main() {
  59   var wtu = WebGLTestUtils;
  60
  61   var canvas = document.getElementById("example");
  62   var gl = wtu.create3DContext(canvas);
  63   if (!gl) {
  64     return;
  65   }
  66
  67   var debugRendererInfoRows = function() {
  68     var rows = [];
  69     var debugExt =  wtu.getExtensionWithKnownPrefixes(gl, 'WEBGL_debug_renderer_info');
  70     if (debugExt) {
  71       var extPnames = [
  72         'UNMASKED_VENDOR_WEBGL',
  73         'UNMASKED_RENDERER_WEBGL'
  74       ];
  75       for (var ii = 0; ii < extPnames.length; ++ii) {
  76         var pname = extPnames[ii];
  77         var value = gl.getParameter(debugExt[pname]);
  78         rows.push([pname, value]);
  79       }
  80     }
  81     return rows;
  82   };
  83
  84   var precisionRows = function() {
  85     var rows = [];
  86
  87     var addPrecisionRow = function(shaderType, precision) {
  88         var typeStr = shaderType === gl.FRAGMENT_SHADER ? 'fragment' : 'vertex';
  89         var precisionStr = 'highp';
  90         if (precision == gl.MEDIUM_FLOAT) {
  91             precisionStr = 'mediump';
  92         } else if (precision == gl.LOW_FLOAT) {
  93             precisionStr = 'lowp';
  94         }
  95         rows.push([typeStr + ' shader ' + precisionStr + ' float', gl.getShaderPrecisionFormat(shaderType, precision).precision + ' mantissa bits']);
  96     };
  97
  98     var fSource = 'precision highp float; uniform float r; void main() { gl_FragColor = vec4(r, 0.0, 0.0, 1.0); }'
  99     var f = wtu.loadShader(gl, fSource, gl.FRAGMENT_SHADER);
 100     if (!f) {
 101         rows.push(['fragment shader highp float', 'not supported']);
 102     } else {
 103         addPrecisionRow(gl.FRAGMENT_SHADER, gl.HIGH_FLOAT);
 104     }
 105     addPrecisionRow(gl.FRAGMENT_SHADER, gl.MEDIUM_FLOAT);
 106     addPrecisionRow(gl.FRAGMENT_SHADER, gl.LOW_FLOAT);
 107     addPrecisionRow(gl.VERTEX_SHADER, gl.HIGH_FLOAT);
 108     addPrecisionRow(gl.VERTEX_SHADER, gl.MEDIUM_FLOAT);
 109     addPrecisionRow(gl.VERTEX_SHADER, gl.LOW_FLOAT);
 110     return rows;
 111   };
 112
 113   var renderTargetRows = function() {
 114     var rows = [];
 115     var oesTextureFloat = wtu.getExtensionWithKnownPrefixes(gl, 'OES_texture_float');
 116     var oesTextureHalfFloat = wtu.getExtensionWithKnownPrefixes(gl, 'OES_texture_half_float');
 117     var formatsToTest = [
 118       {
 119         description: 'RGBA UNSIGNED_BYTE',
 120         format: gl.RGBA,
 121         type: gl.UNSIGNED_BYTE
 122       },
 123       {
 124         description: 'RGB UNSIGNED_BYTE',
 125         format: gl.RGB,
 126         type: gl.UNSIGNED_BYTE
 127       }
 128     ];
 129     if (oesTextureFloat) {
 130       formatsToTest.push({
 131         description: 'RGBA FLOAT',
 132         format: gl.RGBA,
 133         type: gl.FLOAT
 134       });
 135       formatsToTest.push({
 136         description: 'RGB FLOAT (deprecated)',
 137         format: gl.RGB,
 138         type: gl.FLOAT
 139       });
 140     }
 141     if (oesTextureHalfFloat) {
 142       formatsToTest.push({
 143         description: 'RGBA HALF_FLOAT_OES',
 144         format: gl.RGBA,
 145         type: oesTextureHalfFloat.HALF_FLOAT_OES
 146       });
 147       formatsToTest.push({
 148         description: 'RGB HALF_FLOAT_OES',
 149         format: gl.RGB,
 150         type: oesTextureHalfFloat.HALF_FLOAT_OES
 151       });
 152     }
 153     for (var ii = 0; ii < formatsToTest.length; ++ii) {
 154       var fb = gl.createFramebuffer();
 155       gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
 156       var format = formatsToTest[ii];
 157       var tex = gl.createTexture();
 158       gl.bindTexture(gl.TEXTURE_2D, tex);
 159       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
 160       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
 161       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
 162       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 163       gl.texImage2D(gl.TEXTURE_2D, 0, format.format, 256, 256, 0, format.format, format.type, null);
 164       gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
 165       if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE) {
 166         rows.push([format.description, 'supported']);
 167       } else {
 168         rows.push([format.description, 'not supported']);
 169       }
 170       gl.deleteFramebuffer(fb);
 171       gl.deleteTexture(tex);
 172     }
 173     return rows;
 174   };
 175
 176   var info = [
 177     {
 178       title: 'Renderer',
 179       pnames: [
 180         'VERSION',
 181         'VENDOR',
 182         'RENDERER'
 183       ],
 184       genRows: debugRendererInfoRows
 185     },
 186     {
 187       title: 'Textures and Viewport',
 188       pnames: [
 189         'MAX_TEXTURE_SIZE',
 190         'MAX_CUBE_MAP_TEXTURE_SIZE',
 191         'MAX_RENDERBUFFER_SIZE',
 192         'MAX_VIEWPORT_DIMS'
 193       ]
 194     },
 195     {
 196       title: 'Shader Variables',
 197       pnames: [
 198         'MAX_VARYING_VECTORS',
 199         'MAX_VERTEX_ATTRIBS',
 200         'MAX_VERTEX_UNIFORM_VECTORS',
 201         'MAX_FRAGMENT_UNIFORM_VECTORS',
 202         'MAX_VERTEX_TEXTURE_IMAGE_UNITS',
 203         'MAX_TEXTURE_IMAGE_UNITS',
 204         'MAX_COMBINED_TEXTURE_IMAGE_UNITS'
 205       ]
 206     },
 207     {
 208       title: 'Shader Precision',
 209       genRows: precisionRows
 210     },
 211     {
 212       title: 'Framebuffer Texture Attachment Support',
 213       genRows: renderTargetRows
 214     }
 215   ];
 216
 217   // TODO: max anisotropy, framebuffer depth bits, MSAA samples, max multiple render targets buffers, point size, line width
 218
 219   for (var jj = 0; jj < info.length; ++jj) {
 220     var table = document.createElement("table");
 221     var tb = document.createElement("tbody");
 222     if (info[jj].pnames) {
 223       var pnames = info[jj].pnames;
 224       for (var ii = 0; ii < pnames.length; ++ii) {
 225         var pname = pnames[ii];
 226         var value = gl.getParameter(gl[pname]);
 227         tb.appendChild(createRow([pname, value]));
 228       }
 229     }
 230     if (info[jj].genRows) {
 231       var genRows = info[jj].genRows();
 232       for (var ii = 0; ii < genRows.length; ++ii) {
 233         tb.appendChild(createRow(genRows[ii]));
 234       }
 235     }
 236     table.appendChild(tb);
 237     var header = document.createElement("h2");
 238     header.textContent = info[jj].title;
 239     document.getElementById("info").appendChild(header);
 240     document.getElementById("info").appendChild(table);
 241   }
 242   var extensionList = document.createElement('ul');
 243   var exts = gl.getSupportedExtensions();
 244   var extsWithPrefixes = [];
 245   while (exts.length > 0) {
 246     var prefixedNames = wtu.getExtensionPrefixedNames(exts[0]);
 247     var supportedPrefixedNames = [];
 248     for (var ii = 0; ii < prefixedNames.length; ++ii) {
 249       var index = exts.indexOf(prefixedNames[ii]);
 250       if (index >= 0) {
 251         supportedPrefixedNames.push(exts[index]);
 252         exts.splice(index, 1);
 253       }
 254     }
 255     extsWithPrefixes.push(supportedPrefixedNames.join(" / "));
 256   }
 257   extsWithPrefixes.sort();
 258   for (var ii = 0; ii < extsWithPrefixes.length; ++ii) {
 259     var li = document.createElement('li');
 260     li.appendChild(document.createTextNode(extsWithPrefixes[ii]));
 261     extensionList.appendChild(li);
 262   }
 263   document.getElementById('extensions').appendChild(extensionList);
 264 }
 265 </script>
 266 </head>
 267 <body>
 268 <h1>WebGL Info</h1>
 269 <div id="info"></div>
 270 <h2>WebGL Extensions</h2>
 271 <div id="extensions"></div>
 272 <canvas id="example" width="256" height="16" style="width: 256px; height: 48px;"></canvas>
 273 </body>
 274 </html>
 275