<!--

/*
** Copyright (c) 2014 The Khronos Group Inc.
**
** Permission is hereby granted, free of charge, to any person obtaining a
** copy of this software and/or associated documentation files (the
** "Materials"), to deal in the Materials without restriction, including
** without limitation the rights to use, copy, modify, merge, publish,
** distribute, sublicense, and/or sell copies of the Materials, and to
** permit persons to whom the Materials are furnished to do so, subject to
** the following conditions:
**
** The above copyright notice and this permission notice shall be included
** in all copies or substantial portions of the Materials.
**
** THE MATERIALS ARE PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
** EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
** MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
** IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
** CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
** TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
** MATERIALS OR THE USE OR OTHER DEALINGS IN THE MATERIALS.
*/

-->

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebGL Shader Translator</title>
<style>
textarea {
    min-width: 70%;
    min-height: 200px;
    font-family: monospace;
    background: #def;
}
#disabled {
    color: red;
    font-weight: bold;
}
</style>
<script src="../conformance/resources/webgl-test-utils.js"> </script>
<script>
"use strict";
window.onload = main;

var gl;
var debugShaders;
var enabledExtensions = [];

var translateButton;
var extButton;

function main() {
  var canvas = document.getElementById("example");
  var wtu = WebGLTestUtils;
  gl = wtu.create3DContext(canvas);
  if (!gl) {
    disable();
    return;
  }

  translateButton = document.getElementById('translate');
  extButton = document.getElementById('getExts');

  debugShaders = gl.getExtension('WEBGL_debug_shaders');
  if (!debugShaders) {
    disable();
  }
}

function disable() {
  translateButton.disabled = true;
  extButton.disabled = true;
  document.getElementById('disabled').style.display = 'block';
}

function getExtensions() {
    if (enabledExtensions.length > 0) {
        return;
    }
    var shaderExtensions = [
        'EXT_frag_depth',
        'EXT_shader_texture_lod',
        'OES_standard_derivatives',
        'WEBGL_draw_buffers'];
    for (var i = 0; i < shaderExtensions.length; ++i) {
        var ext = gl.getExtension(shaderExtensions[i]);
        if (ext) {
            enabledExtensions.push(shaderExtensions[i]);
        }
    }
    if (enabledExtensions.length > 0) {
        document.getElementById('enabled-extensions').textContent = enabledExtensions.join(', ');
    }
}

function translateShader() {
    var sourceElement = document.getElementById('original-shader');
    var source = sourceElement.value;

    var output = document.getElementById('translated-shader');
    var infoLog = document.getElementById('info-log');
    var shaderType = document.getElementById('shader-type');

    // Try compiling the source as both vertex and fragment shader and see if either one works
    var tryCompile = function(type) {
        var shader = gl.createShader(type);
        gl.shaderSource(shader, source);
        gl.compileShader(shader);
        if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
            if (type == gl.FRAGMENT_SHADER) {
                shaderType.textContent = 'Fragment shader';
            } else {
                shaderType.textContent = 'Vertex shader';
            }
            var translatedSource = debugShaders.getTranslatedShaderSource(shader);
            output.value = translatedSource;
            infoLog.value = gl.getShaderInfoLog(shader);
            return true;
        } else {
            infoLog.value = gl.getShaderInfoLog(shader);
            return false;
        }
    }

    if (!tryCompile(gl.FRAGMENT_SHADER) && !tryCompile(gl.VERTEX_SHADER)) {
        output.value = 'Invalid shader, compilation failed as both fragment and vertex shader.';
        shaderType.textContent = 'Shader not';
    }
}
</script>
</head>
<body>
<h1>WebGL Shader Translator</h1>
<p>This page uses the browser's built-in shader translation facilities to show how a shader
is changed before being passed on to the underlying platform's graphics driver.</p>
<p id="disabled" style="display: none;">
    WebGL or WEBGL_debug_shaders extension is not available on this browser configuration.
    Use a different browser or look for other alternatives to enable the extension to be able to use this page.
    The extension might be behind a runtime flag for privacy considerations.
</p>
<h2>WebGL GLSL shader</h2>
<textarea id="original-shader"></textarea>
<p>
<input type="button" id="translate" value="Translate" onclick="translateShader()"></input>
<input type="button" id="getExts" value="Enable supported GLSL extensions" onclick="getExtensions()"></input>
</p>
<h2><span id="shader-type">Shader</span> translated for graphics driver</h2>
<textarea id="translated-shader"></textarea>
<h2>Enabled shader extensions</h2>
<p id="enabled-extensions">None</p>
<h2>Shader info log</h2>
<textarea id="info-log"></textarea>
<canvas id="example" width="256" height="16" style="width: 256px; height: 48px;"></canvas>
</body>
</html>

