tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

webgl-translate-shader.html (4685B)

      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 Shader Translator</title>
     12 <style>
     13 textarea {
     14    min-width: 70%;
     15    min-height: 200px;
     16    font-family: monospace;
     17    background: #def;
     18 }
     19 #disabled {
     20    color: red;
     21    font-weight: bold;
     22 }
     23 </style>
     24 <script>
     25 // Needed by wtu.create3DContext():
     26 var testFailed = function() {};
     27 </script>
     28 <script src="../js/webgl-test-utils.js"> </script>
     29 <script>
     30 "use strict";
     31 window.onload = main;
     32 
     33 var gl;
     34 var debugShaders;
     35 var enabledExtensions = [];
     36 
     37 var translateButton;
     38 var extButton;
     39 
     40 function main() {
     41  translateButton = document.getElementById('translate');
     42  extButton = document.getElementById('getExts');
     43 
     44  var wtu = WebGLTestUtils;
     45  // Prioritize creating a WebGL 2 context if possible - if not, fall back to WebGL 1.
     46  gl = wtu.create3DContext(undefined, undefined, 2);
     47  if (!gl || !gl.getExtension('WEBGL_debug_shaders'))
     48  {
     49    gl = wtu.create3DContext();
     50  }
     51  if (!gl) {
     52    disable();
     53    return;
     54  }
     55 
     56  debugShaders = gl.getExtension('WEBGL_debug_shaders');
     57  if (!debugShaders) {
     58    disable();
     59  }
     60 }
     61 
     62 function disable() {
     63  translateButton.disabled = true;
     64  extButton.disabled = true;
     65  document.getElementById('disabled').style.display = 'block';
     66 }
     67 
     68 function getExtensions() {
     69    getExtensionSet([
     70        'EXT_frag_depth',
     71        'EXT_shader_texture_lod',
     72        'OES_standard_derivatives',
     73        'WEBGL_draw_buffers'
     74    ]);
     75 }
     76 
     77 function getExtensionSet(shaderExtensions) {
     78    for (var i = 0; i < shaderExtensions.length; ++i) {
     79        if (enabledExtensions.indexOf(shaderExtensions[i]) < 0) {
     80            var ext = gl.getExtension(shaderExtensions[i]);
     81            if (ext) {
     82                enabledExtensions.push(shaderExtensions[i]);
     83            }
     84        }
     85    }
     86    if (enabledExtensions.length > 0) {
     87        document.getElementById('enabled-extensions').textContent = enabledExtensions.join(', ');
     88    }
     89 }
     90 
     91 function translateShader() {
     92    var sourceElement = document.getElementById('original-shader');
     93    var source = sourceElement.value;
     94 
     95    var output = document.getElementById('translated-shader');
     96    var infoLog = document.getElementById('info-log');
     97    var shaderType = document.getElementById('shader-type');
     98    infoLog.value = '';
     99 
    100    // Try compiling the source as both vertex and fragment shader and see if either one works
    101    var tryCompile = function(type) {
    102        var shader = gl.createShader(type);
    103        gl.shaderSource(shader, source);
    104        gl.compileShader(shader);
    105        var shaderTypeStr;
    106        if (type == gl.FRAGMENT_SHADER) {
    107            shaderTypeStr = 'Fragment shader';
    108        } else {
    109            shaderTypeStr = 'Vertex shader';
    110        }
    111        if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    112            shaderType.textContent = shaderTypeStr;
    113            var translatedSource = debugShaders.getTranslatedShaderSource(shader);
    114            output.value = translatedSource;
    115            infoLog.value = gl.getShaderInfoLog(shader);
    116            return true;
    117        } else {
    118            infoLog.value += 'Info log when compiling as ' + shaderTypeStr + ':\n' + gl.getShaderInfoLog(shader) + '\n';
    119            return false;
    120        }
    121    }
    122 
    123    if (!tryCompile(gl.FRAGMENT_SHADER) && !tryCompile(gl.VERTEX_SHADER)) {
    124        output.value = 'Invalid shader, compilation failed as both fragment and vertex shader.';
    125        shaderType.textContent = 'Shader not';
    126    }
    127 }
    128 </script>
    129 </head>
    130 <body>
    131 <h1>WebGL Shader Translator</h1>
    132 <p>This page uses the browser's built-in shader translation facilities to show how a shader
    133 is changed before being passed on to the underlying platform's graphics driver.</p>
    134 <p id="disabled" style="display: none;">
    135    WebGL or WEBGL_debug_shaders extension is not available on this browser configuration.
    136    Use a different browser or look for other alternatives to enable the extension to be able to use this page.
    137    The extension might be behind a runtime flag for privacy considerations.
    138 </p>
    139 <h2>WebGL GLSL shader</h2>
    140 <textarea id="original-shader"></textarea>
    141 <p>
    142 <input type="button" id="translate" value="Translate" onclick="translateShader()"></input>
    143 <input type="button" id="getExts" value="Enable supported GLSL extensions" onclick="getExtensions()"></input>
    144 </p>
    145 <h2><span id="shader-type">Shader</span> translated for graphics driver</h2>
    146 <textarea id="translated-shader"></textarea>
    147 <h2>Enabled shader extensions</h2>
    148 <p id="enabled-extensions">None</p>
    149 <h2>Shader info log</h2>
    150 <textarea id="info-log"></textarea>
    151 </body>
    152 </html>