dom/canvas/test/webgl-conf/checkout/extra/webgl-translate-shader.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 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>
 153