src/third_party/webgl/src/sdk/tests/extra/webgl-info.html

   1 <!--
   2
   3 /*
   4 ** Copyright (c) 2012 The Khronos Group Inc.
   5 **
   6 ** Permission is hereby granted, free of charge, to any person obtaining a
   7 ** copy of this software and/or associated documentation files (the
   8 ** "Materials"), to deal in the Materials without restriction, including
   9 ** without limitation the rights to use, copy, modify, merge, publish,
  10 ** distribute, sublicense, and/or sell copies of the Materials, and to
  11 ** permit persons to whom the Materials are furnished to do so, subject to
  12 ** the following conditions:
  13 **
  14 ** The above copyright notice and this permission notice shall be included
  15 ** in all copies or substantial portions of the Materials.
  16 **
  17 ** THE MATERIALS ARE PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
  18 ** EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
  19 ** MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
  20 ** IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
  21 ** CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
  22 ** TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
  23 ** MATERIALS OR THE USE OR OTHER DEALINGS IN THE MATERIALS.
  24 */
  25
  26 -->
  27
  28 <!DOCTYPE html>
  29 <html>
  30 <head>
  31 <meta charset="utf-8">
  32 <title>WebGL Information</title>
  33 <style type="text/css">
  34 th, td {
  35     padding: 4pt;
  36 }
  37 th {
  38     text-align: right;
  39     min-width: 22em;
  40 }
  41 </style>
  42 <script src="../conformance/resources/webgl-test-utils.js"> </script>
  43 <script>
  44 "use strict";
  45 window.onload = main;
  46
  47 function createCell(txt, isTh) {
  48   var str = txt.toString();
  49   if (typeof txt != 'string') {
  50     if (txt.length !== undefined) {
  51       str = "";
  52       for (var ii = 0; ii < txt.length; ++ii) {
  53         str += (ii == 0 ? "" : ", ") + txt[ii];
  54       }
  55     }
  56   }
  57   var t = document.createTextNode(str);
  58   var d = document.createElement("div");
  59   var td;
  60   if (isTh) {
  61     td = document.createElement("th");
  62   } else {
  63     td = document.createElement("td");
  64   }
  65   d.appendChild(t);
  66   td.appendChild(d);
  67   return td;
  68 }
  69
  70 function createRow(values) {
  71   var tr = document.createElement("tr");
  72   for (var i = 0; i < values.length; ++i) {
  73     var td = createCell(values[i], i == 0);
  74     tr.appendChild(td);
  75   }
  76   return tr;
  77 }
  78
  79 function main() {
  80   var wtu = WebGLTestUtils;
  81
  82   var canvas = document.getElementById("example");
  83   var gl = wtu.create3DContext(canvas);
  84   if (!gl) {
  85     return;
  86   }
  87
  88   var debugRendererInfoRows = function() {
  89     var rows = [];
  90     var debugExt =  wtu.getExtensionWithKnownPrefixes(gl, 'WEBGL_debug_renderer_info');
  91     if (debugExt) {
  92       var extPnames = [
  93         'UNMASKED_VENDOR_WEBGL',
  94         'UNMASKED_RENDERER_WEBGL'
  95       ];
  96       for (var ii = 0; ii < extPnames.length; ++ii) {
  97         var pname = extPnames[ii];
  98         var value = gl.getParameter(debugExt[pname]);
  99         rows.push([pname, value]);
 100       }
 101     }
 102     return rows;
 103   };
 104
 105   var precisionRows = function() {
 106     var rows = [];
 107
 108     var addPrecisionRow = function(shaderType, precision) {
 109         var typeStr = shaderType === gl.FRAGMENT_SHADER ? 'fragment' : 'vertex';
 110         var precisionStr = 'highp';
 111         if (precision == gl.MEDIUM_FLOAT) {
 112             precisionStr = 'mediump';
 113         } else if (precision == gl.LOW_FLOAT) {
 114             precisionStr = 'lowp';
 115         }
 116         rows.push([typeStr + ' shader ' + precisionStr + ' float', gl.getShaderPrecisionFormat(shaderType, precision).precision + ' mantissa bits']);
 117     };
 118
 119     var fSource = 'precision highp float; uniform float r; void main() { gl_FragColor = vec4(r, 0.0, 0.0, 1.0); }'
 120     var f = wtu.loadShader(gl, fSource, gl.FRAGMENT_SHADER);
 121     if (!f) {
 122         rows.push(['fragment shader highp float', 'not supported']);
 123     } else {
 124         addPrecisionRow(gl.FRAGMENT_SHADER, gl.HIGH_FLOAT);
 125     }
 126     addPrecisionRow(gl.FRAGMENT_SHADER, gl.MEDIUM_FLOAT);
 127     addPrecisionRow(gl.FRAGMENT_SHADER, gl.LOW_FLOAT);
 128     addPrecisionRow(gl.VERTEX_SHADER, gl.HIGH_FLOAT);
 129     addPrecisionRow(gl.VERTEX_SHADER, gl.MEDIUM_FLOAT);
 130     addPrecisionRow(gl.VERTEX_SHADER, gl.LOW_FLOAT);
 131     return rows;
 132   };
 133
 134   var renderTargetRows = function() {
 135     var rows = [];
 136     var oesTextureFloat = wtu.getExtensionWithKnownPrefixes(gl, 'OES_texture_float');
 137     var oesTextureHalfFloat = wtu.getExtensionWithKnownPrefixes(gl, 'OES_texture_half_float');
 138     var formatsToTest = [
 139       {
 140         description: 'RGBA UNSIGNED_BYTE',
 141         format: gl.RGBA,
 142         type: gl.UNSIGNED_BYTE
 143       },
 144       {
 145         description: 'RGB UNSIGNED_BYTE',
 146         format: gl.RGB,
 147         type: gl.UNSIGNED_BYTE
 148       }
 149     ];
 150     if (oesTextureFloat) {
 151       formatsToTest.push({
 152         description: 'RGBA FLOAT',
 153         format: gl.RGBA,
 154         type: gl.FLOAT
 155       });
 156       formatsToTest.push({
 157         description: 'RGB FLOAT',
 158         format: gl.RGB,
 159         type: gl.FLOAT
 160       });
 161     }
 162     if (oesTextureHalfFloat) {
 163       formatsToTest.push({
 164         description: 'RGBA HALF_FLOAT_OES',
 165         format: gl.RGBA,
 166         type: oesTextureHalfFloat.HALF_FLOAT_OES
 167       });
 168       formatsToTest.push({
 169         description: 'RGB HALF_FLOAT_OES',
 170         format: gl.RGB,
 171         type: oesTextureHalfFloat.HALF_FLOAT_OES
 172       });
 173     }
 174     for (var ii = 0; ii < formatsToTest.length; ++ii) {
 175       var fb = gl.createFramebuffer();
 176       gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
 177       var format = formatsToTest[ii];
 178       var tex = gl.createTexture();
 179       gl.bindTexture(gl.TEXTURE_2D, tex);
 180       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
 181       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
 182       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
 183       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 184       gl.texImage2D(gl.TEXTURE_2D, 0, format.format, 256, 256, 0, format.format, format.type, null);
 185       gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
 186       if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE) {
 187         rows.push([format.description, 'supported']);
 188       } else {
 189         rows.push([format.description, 'not supported']);
 190       }
 191       gl.deleteFramebuffer(fb);
 192       gl.deleteTexture(tex);
 193     }
 194     return rows;
 195   };
 196
 197   var info = [
 198     {
 199       title: 'Renderer',
 200       pnames: [
 201         'VERSION',
 202         'VENDOR',
 203         'RENDERER'
 204       ],
 205       genRows: debugRendererInfoRows
 206     },
 207     {
 208       title: 'Textures and Viewport',
 209       pnames: [
 210         'MAX_TEXTURE_SIZE',
 211         'MAX_CUBE_MAP_TEXTURE_SIZE',
 212         'MAX_RENDERBUFFER_SIZE',
 213         'MAX_VIEWPORT_DIMS'
 214       ]
 215     },
 216     {
 217       title: 'Shader Variables',
 218       pnames: [
 219         'MAX_VARYING_VECTORS',
 220         'MAX_VERTEX_ATTRIBS',
 221         'MAX_VERTEX_UNIFORM_VECTORS',
 222         'MAX_FRAGMENT_UNIFORM_VECTORS',
 223         'MAX_VERTEX_TEXTURE_IMAGE_UNITS',
 224         'MAX_TEXTURE_IMAGE_UNITS',
 225         'MAX_COMBINED_TEXTURE_IMAGE_UNITS'
 226       ]
 227     },
 228     {
 229       title: 'Shader Precision',
 230       genRows: precisionRows
 231     },
 232     {
 233       title: 'Framebuffer Texture Attachment Support',
 234       genRows: renderTargetRows
 235     }
 236   ];
 237
 238   // TODO: max anisotropy, framebuffer depth bits, MSAA samples, max multiple render targets buffers, point size, line width
 239
 240   for (var jj = 0; jj < info.length; ++jj) {
 241     var table = document.createElement("table");
 242     var tb = document.createElement("tbody");
 243     if (info[jj].pnames) {
 244       var pnames = info[jj].pnames;
 245       for (var ii = 0; ii < pnames.length; ++ii) {
 246         var pname = pnames[ii];
 247         var value = gl.getParameter(gl[pname]);
 248         tb.appendChild(createRow([pname, value]));
 249       }
 250     }
 251     if (info[jj].genRows) {
 252       var genRows = info[jj].genRows();
 253       for (var ii = 0; ii < genRows.length; ++ii) {
 254         tb.appendChild(createRow(genRows[ii]));
 255       }
 256     }
 257     table.appendChild(tb);
 258     var header = document.createElement("h2");
 259     header.textContent = info[jj].title;
 260     document.getElementById("info").appendChild(header);
 261     document.getElementById("info").appendChild(table);
 262   }
 263   var extensionList = document.createElement('ul');
 264   var exts = gl.getSupportedExtensions();
 265   var extsWithPrefixes = [];
 266   while (exts.length > 0) {
 267     var prefixedNames = wtu.getExtensionPrefixedNames(exts[0]);
 268     var supportedPrefixedNames = [];
 269     for (var ii = 0; ii < prefixedNames.length; ++ii) {
 270       var index = exts.indexOf(prefixedNames[ii]);
 271       if (index >= 0) {
 272         supportedPrefixedNames.push(exts[index]);
 273         exts.splice(index, 1);
 274       }
 275     }
 276     extsWithPrefixes.push(supportedPrefixedNames.join(" / "));
 277   }
 278   extsWithPrefixes.sort();
 279   for (var ii = 0; ii < extsWithPrefixes.length; ++ii) {
 280     var li = document.createElement('li');
 281     li.appendChild(document.createTextNode(extsWithPrefixes[ii]));
 282     extensionList.appendChild(li);
 283   }
 284   document.getElementById('extensions').appendChild(extensionList);
 285 }
 286 </script>
 287 </head>
 288 <body>
 289 <h1>WebGL Info</h1>
 290 <div id="info"></div>
 291 <h2>WebGL Extensions</h2>
 292 <div id="extensions"></div>
 293 <canvas id="example" width="256" height="16" style="width: 256px; height: 48px;"></canvas>
 294 </body>
 295 </html>
 296