Source: WebGL-Editor-utils.js

  1. /**
  2.  * @description Access to the WebGLRenderingContext interface.
  3.  * @readonly
  4.  * @type {WebGLRenderingContext}
  5.  */
  6. var gl;
  7. /**
  8.  * @description The HTMLCanvasElement.
  9.  * @readonly
  10.  * @type {HTMLCanvasElement}
  11.  */
  12. var canvas;
  13. /**
  14.  * @description Indicates if an object is currently loading or not. True when loading, otherwise false.
  15.  * @readonly
  16.  */
  17. var _OBJisLoading = false;
  18. /**
  19.  * @description Indicates if an texture is currently loading or not. True when loading, otherwise false.
  20.  * @readonly
  21.  */
  22. var _TEXisLoading = false;
  23. /**
  24.  * @instance controller
  25.  * @description The main controller Object which handles mouse, keyboard and touch events.
  26.  *
  27.  * <pre>
  28.  *     Mouse:
  29.  *     Left-Mousebutton and drag    | Rotation
  30.  *     Right-Mousebutton and drag   | Translation
  31.  *     Mousewheel                   | Zoom/Object scaling
  32.  *
  33.  *     Keyboard:
  34.  *     Arrow-Keys                   | Translation
  35.  *     +/- Keys                     | Zoom/Object scaling
  36.  *
  37.  *     Touch-Gestures:
  38.  *     Touch and drag               | Rotation
  39.  *     Double-Tap and drag          | Translation
  40.  *     Two-finger pinch             | Zoom/Object scaling
  41.  *
  42.  *     </pre>
  43.  *
  44.  * @type {Object}
  45.  */
  46. var controller;
  47. /*---------------Further JsDoc for the used controller. All Variables can be accessed via controller.[variableName]*/
  48. /**
  49.  * @extends controller
  50.  * @var controller:xRot
  51.  * @description The overall amount of x-Rotation of all interactions.
  52.  * @type {Number}
  53.  *
  54.  */
  55. /**
  56.  * @extends controller
  57.  * @var controller:yRot
  58.  * @description The overall amount of y-Rotation of all interactions.
  59.  * @type {Number}
  60.  *
  61.  */
  62. /**
  63.  * @extends controller
  64.  * @var controller:xTrans
  65.  * @description The overall amount of x-Translation of all interactions.
  66.  * @type {Number}
  67.  *
  68.  */
  69. /**
  70.  * @extends controller
  71.  * @var controller:yTrans
  72.  * @description The overall amount of y-Translation of all interactions.
  73.  * @type {Number}
  74.  *
  75.  */
  76. /**
  77.  * @extends controller
  78.  * @var controller:zTrans
  79.  * @description The overall amount of z-Translation of all interactions.
  80.  * @type {Number}
  81.  *
  82.  */
  83. /**
  84.  * @extends controller
  85.  * @var controller:velocity
  86.  * @description Sets the sensitivity of interactions. Typical values are 1/x, where x is a number.
  87.  * @type {Number}
  88.  *
  89.  */
  90. /**
  91.  * @extends controller
  92.  * @var controller:deltaXRot
  93.  * @description The delta x-Rotation of the current interaction.
  94.  * @type {Number}
  95.  *
  96.  */
  97. /**
  98.  * @extends controller
  99.  * @var controller:deltaYRot
  100.  * @description The delta y-Rotation of the current interaction.
  101.  * @type {Number}
  102.  *
  103.  */
  104. /**
  105.  * @extends controller
  106.  * @var controller:deltaXTrans
  107.  * @description The delta x-Translation of the current interaction.
  108.  * @type {Number}
  109.  *
  110.  */
  111. /**
  112.  * @extends controller
  113.  * @var controller:deltaYTrans
  114.  * @description The delta y-Translation of the current interaction.
  115.  * @type {Number}
  116.  *
  117.  */
  118. /**
  119.  * @extends controller
  120.  * @var controller:deltaZTrans
  121.  * @description The delta z-Translation of the current interaction.
  122.  * @type {Number}
  123.  *
  124.  */
  125. /**
  126.  * @extends controller
  127.  * @var controller:objectScale
  128.  * @description The scaling factor.
  129.  * @type {Number}
  130.  *
  131.  */
  133. //******************Creating an EDITOR module, it maintains a private internal state using the closure of the anonymous function***********************//
  134. (function (scope) {
  135.     'use strict';
  136.     var EDITOR = {};
  137.     scope.EDITOR = EDITOR;
  138.     EDITOR._run = false;
  139.     EDITOR.gl_requestId = 0;
  140.     EDITOR._error = false;
  141.     EDITOR._shaderError = false;
  142.     EDITOR._pause = false;
  143.     EDITOR.selectedTab = 0;
  144.     EDITOR._pausedByMenu = false;
  146.     EDITOR.initEditor = function () {
  147.         canvas = document.getElementById("gl-canvas");
  148.         $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', onFullScreenChange);
  149.         //INITIALIZE Render-Monitor
  150.         EDITOR.stats = new Stats();
  151.         EDITOR.stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
  152.         document.getElementById("canvasBody").appendChild(EDITOR.stats.dom);
  153.         //initialize the controller object
  154.         controller = new Controller(canvas);
  155.         //initialize the Spinner object to animate a pending download of objects and textures
  156.         EDITOR._spinner = new Spinner({
  157.             lines: 13 // The number of lines to draw
  158.             , length: 28 // The length of each line
  159.             , width: 10 // The line thickness
  160.             , radius: 42 // The radius of the inner circle
  161.             , scale: 1 // Scales overall size of the spinner
  162.             , corners: 1 // Corner roundness (0..1)
  163.             , color: '#999' // #rgb or #rrggbb or array of colors
  164.             , opacity: 0.25 // Opacity of the lines
  165.             , rotate: 23 // The rotation offset
  166.             , direction: 1 // 1: clockwise, -1: counterclockwise
  167.             , speed: 1.7 // Rounds per second
  168.             , trail: 60 // Afterglow percentage
  169.             , fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
  170.             , zIndex: 2e9 // The z-index (defaults to 2000000000)
  171.             , className: 'spinner' // The CSS class to assign to the spinner
  172.             , top: '49%' // Top position relative to parent
  173.             , left: '50%' // Left position relative to parent
  174.             , shadow: true // Whether to render a shadow
  175.             , hwaccel: false // Whether to use hardware acceleration
  176.             , position: 'absolute' // Element positioning
  177.         });
  178.         initCtx();
  179.     };
  181.     function initCtx() {
  182.         //gl is the rendering context
  183.         var ctx = WebGLUtils.setupWebGL(canvas, {preserveDrawingBuffer: true});
  184.         gl = WebGLDebugUtils.makeDebugContext(ctx);
  185.         gl = WebGLDebugUtils.makeDebugContext(gl, throwOnGLError, validateNoneOfTheArgsAreUndefined);
  186.         if (!gl) {
  187.             EDITOR.writeError("WebGL context isn't available");
  188.         } else {
  189.             EDITOR.writeCompletionMessage("WebGL context initialized successfully");
  190.             // resizeCanvas();
  191.             EDITOR.isMobile = false;
  192.             // device detection
  193.             if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
  194.                 || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0, 4))) EDITOR.isMobile = true;
  196.             if (!EDITOR.isMobile) {
  197.                 EDITOR.writeSystemMessage("CURRENT DEVICE: Desktop-PC");
  198.                 //allowing keyboard input onto canvas only for desktop devices
  199.                 canvas.contentEditable = true;
  200.             } else {
  201.                 EDITOR.writeSystemMessage("CURRENT DEVICE: MOBILE");
  202.             }
  203.             EDITOR.writeSystemMessage("VENDOR: " + gl.getParameter(gl.VENDOR));
  204.             EDITOR.writeSystemMessage("VERSION: " + gl.getParameter(gl.VERSION));
  205.         }
  206.         //configure WebGL
  207.         gl.clearColor(0.3, 0.3, 0.3, 1);
  208.         //set the viewport
  209.         gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  210.         initAce();
  211.     }
  213.     function initAce() {
  214.         EDITOR.webglEditor = ace.edit("editorWebGL");
  215.         initEditor(EDITOR.webglEditor, 1);
  216.         EDITOR.vsEditor = ace.edit("editorVS");
  217.         initEditor(EDITOR.vsEditor, 0);
  218.         EDITOR.fsEditor = ace.edit("editorFS");
  219.         initEditor(EDITOR.fsEditor, 0);
  221.         if (localStorage.getItem("webgl") !== null && localStorage.getItem("vs") !== null && localStorage.getItem("fs") !== null) {
  222.             EDITOR.writeSystemMessage("Restoring your last known program state. Please keep in mind that the program state is lost once you clean your browsers cache!");
  223.             EDITOR.webglEditor.setValue(localStorage.getItem("webgl"), -1);
  224.             EDITOR.vsEditor.setValue(localStorage.getItem("vs"), -1);
  225.             EDITOR.fsEditor.setValue(localStorage.getItem("fs"), -1);
  226.         } else {
  227.             EDITOR.setEditorTextFromFile("./src/demo/ColorizedCube/vertexShader.vert", EDITOR.vsEditor);
  228.             EDITOR.setEditorTextFromFile("./src/demo/ColorizedCube/fragmentShader.frag", EDITOR.fsEditor);
  229.             EDITOR.setEditorTextFromFile("./src/demo/ColorizedCube/webgl.js", EDITOR.webglEditor);
  230.         }
  231.     }
  233.     function initEditor(editor, type) {
  234.         editor.setTheme("ace/theme/chaos");
  235.         editor.setOptions({
  236.             enableBasicAutocompletion: true,
  237.             enableLiveAutocompletion: true,
  238.             enableSnippets: true,
  239.             showPrintMargin: false
  240.         });
  241.         editor.resize();
  242.         if (type === 0) {
  243.             editor.getSession().setMode("ace/mode/glsl");
  244.         } else {
  245.             editor.getSession().setMode("ace/mode/javascript");
  246.         }
  247.         editor.commands.addCommand({
  248.             name: 'commentLineCommand',
  249.             bindKey: {win: 'Ctrl-M', mac: 'Command-M'},
  250.             exec: function (e) {
  251.                 e.toggleCommentLines();
  252.             },
  253.             readOnly: false
  254.         });
  255.     }
  257.     EDITOR.processJs = function (e) {
  258.         var file = e.target.result, results;
  259.         results = file.split("\n");
  260.         var res = "";
  261.         for (var i = 1; i < results.length; i++) {
  262.             res += results[i];
  263.         }
  264.         EDITOR.webglEditor.setValue(res,-1);
  265.     };
  267.     EDITOR.processVert = function (e) {
  268.         var file = e.target.result, results;
  269.         results = file.split("\n");
  270.         var res = "";
  271.         for (var i = 1; i < results.length; i++) {
  272.             res += results[i];
  273.         }
  274.         EDITOR.vsEditor.setValue(res,-1);
  275.     };
  277.     EDITOR.processFrag = function (e) {
  278.         var file = e.target.result, results;
  279.         results = file.split("\n");
  280.         var res = "";
  281.         for (var i = 1; i < results.length; i++) {
  282.             res += results[i];
  283.         }
  284.         EDITOR.fsEditor.setValue(res,-1);
  285.     };
  287.     /**
  288.      * Requests file contents and writes them into editor.
  289.      *
  290.      * @param      {String}  fileName  The source file
  291.      * @param      {(EDITOR.webglEditor|EDITOR.vsEditor|EDITOR.fsEditor)}  editor The target editor
  292.      */
  293.     EDITOR.setEditorTextFromFile = function (fileName, editor) {
  294.         var request = new XMLHttpRequest();
  295.         try {
  296.             request.responseType = 'text';
  297.         } catch (e) {
  298.         }
  299.         request.open("GET", fileName, true);
  300.         request.onreadystatechange = function () {
  301.             if (request.readyState === 4) {
  302.                 editor.setValue(request.responseText, -1);
  303.             }
  304.         };
  305.         request.send();
  306.     };
  308.     EDITOR.fullscreen = function () {
  309.         // go fullscreen, depending on Browser-Vendor
  310.         if (canvas.requestFullscreen) {
  311.             canvas.requestFullscreen();
  312.         } else if (canvas.webkitRequestFullscreen) {
  313.             canvas.webkitRequestFullscreen();
  314.         } else if (canvas.mozRequestFullScreen) {
  315.             canvas.mozRequestFullScreen();
  316.         } else if (canvas.msRequestFullscreen) {
  317.             canvas.msRequestFullscreen();
  318.         }
  319.     };
  321.     function onFullScreenChange() {
  322.         var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
  323.         // if in fullscreen mode fullscreenElement won't be null
  324.         if (fullscreenElement !== undefined && fullscreenElement !== null) {
  325.             var deviceWidth = $(window).width();
  326.             var deviceHeight = $(window).height();
  327.             gl.canvas.width = deviceWidth;
  328.             gl.canvas.height = deviceHeight;
  329.             gl.viewport(0, 0, deviceWidth, deviceHeight);
  330.             if (EDITOR._run && !EDITOR._pause)
  331.                 EDITOR.compileRun();
  332.         }
  333.         else {
  334.             EDITOR.resizeCanvas();
  335.             if (EDITOR._run && !EDITOR._pause)
  336.                 EDITOR.compileRun();
  337.         }
  338.     }
  340.     EDITOR.resizeCanvas = function () {
  341.         // Lookup the size the browser is displaying the canvas.
  342.         var rect = canvas.getBoundingClientRect();
  343.         var displayWidth = rect.width;
  344.         var displayHeight = rect.height;
  345.         // Make the canvas the same size
  346.         canvas.width = displayWidth;
  347.         canvas.height = displayHeight;
  348.         gl.viewport(0, 0, displayWidth, displayHeight);
  349.         $('connection').connections('update');
  350.     };
  352.     //-------------------------------------------------------ERROR HANDLING-----------------------------------------------------------//
  353.      window.onerror = function (msg, url, line, col, error) {
  354.         // Note that col & error are new to the HTML 5 spec and may not be
  355.         // supported in every browser.  It worked for me in Chrome.
  356.         var extra = !col ? '' : '\ncolumn: ' + col;
  357.         extra += !error ? '' : '\nerror: ' + error;
  358.         EDITOR.writeError(msg);
  359.          if (msg.indexOf("render") === -1)
  360.             EDITOR.writeError("Line: " + line + " " + extra);
  361.         //Report this error in order to keep track of what pages have JS issues
  362.         if (url !== '' && msg.indexOf("render") === -1)
  363.             EDITOR.writeError("URL: " + url);
  364.         var suppressErrorAlert = true;
  365.         // If you return true, then error alerts (like in older versions of
  366.         // Internet Explorer) will be suppressed.
  367.         return suppressErrorAlert;
  368.     };
  370.     function validateNoneOfTheArgsAreUndefined(functionName, args) {
  371.         for (var ii = 0; ii < args.length; ++ii) {
  372.             if (args[ii] === undefined) {
  373.                 EDITOR.writeError("Undefined argument passed to gl." + functionName + "(" +
  374.                     WebGLDebugUtils.glFunctionArgsToString(functionName, args) + ")");
  375.             }
  376.         }
  377.     }
  379.     function throwOnGLError(err, funcName, args) {
  380.         var errorMsg;
  381.         var error = WebGLDebugUtils.glEnumToString(err);
  382.         switch (error) {
  383.             case "gl.INVALID_OPERATION":
  384.                 errorMsg = "INVALID_OPERATION: The specified command is not allowed for the current state";
  385.                 break;
  386.             case "gl.INVALID_ENUM":
  387.                 errorMsg = "INVALID_ENUM: An unacceptable value has been specified for an enumerated argument";
  388.                 break;
  389.             case "gl.INVALID_VALUE":
  390.                 errorMsg = "INVALID_VALUE: A numeric argument is out of range";
  391.                 break;
  392.             case "gl.INVALID_FRAMEBUFFER_OPERATION":
  393.                 errorMsg = "INVALID_FRAMEBUFFER_OPERATION: The currently bound framebuffer is not framebuffer complete when trying to render to or to read from it";
  394.                 break;
  395.             case "gl.OUT_OF_MEMORY":
  396.                 errorMsg = "OUT_OF_MEMORY: Not enough memory is left to execute the command";
  397.                 break;
  398.             case "gl.CONTEXT_LOST_WEBGL":
  399.                 errorMsg = "CONTEXT_LOST_WEBGL: WebGL context is lost";
  400.                 break;
  401.         }
  402.         EDITOR.writeError(errorMsg);
  403.     }
  404. //---------------------------------------------------------------------------------------------------------------------------//
  405.     EDITOR.compileRun = function () {
  406.         EDITOR.cleanLog();
  407.         EDITOR.cancelRun();
  408.         var webGLCode = EDITOR.webglEditor.getValue();
  409.         //preprocessing the webgl.js code to prevent further errors.
  410.         if (webGLCode.indexOf("EDITOR") !== -1) {
  411.             EDITOR.writeError("Accessing the 'EDITOR'-Module is not allowed. Execution terminated.");
  412.             EDITOR._run = true;
  413.             return;
  414.         } /*else if (webGLCode.indexOf("render") === -1) {
  415.             EDITOR.writeError("Function 'render(){...}' not defined. This function will be executed once for each frame! Execution terminated.");
  416.             EDITOR._run = true;
  417.             return;
  418.         } */else if (webGLCode.indexOf("lookAtArcballCamera") !== -1 && webGLCode.indexOf("modelInteraction") !== -1) {
  419.             EDITOR.writeError("The usage of both functions 'lookAtArcballCamera' and 'modelInteraction' at one time is not allowed. Execution terminated.");
  420.             EDITOR._run = true;
  421.             return;
  422.         }
  423.         EDITOR._run = true;
  424.         // canvas.focus();
  425.         var script = document.createElement("script");
  426.         script.setAttribute("id", "webGLCode");
  427.         var container = document.getElementById("body");
  428.         var text = document.createTextNode(webGLCode);
  429.         script.appendChild(text);
  430.         container.appendChild(script);
  431.         if (!EDITOR._pause && !EDITOR._error && !EDITOR._shaderError) {
  432.             EDITOR.gl_requestId = requestAnimationFrame(EDITOR.renderLoop);
  433.         }
  434.     };
  436.     EDITOR.cancelRun = function () {
  437.         if (EDITOR._run) {
  438.             cancelAnimationFrame(EDITOR.gl_requestId);
  439.             EDITOR.gl_requestId = 0;
  440.             EDITOR._spinner.stop();
  441.             EDITOR._error = false;
  442.             EDITOR._shaderError = false;
  443.             _OBJisLoading = false;
  444.             _TEXisLoading = false;
  445.             gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  446.             resetControllerState();
  447.             var x = document.getElementById("body");
  448.             var y = document.getElementById("webGLCode");
  449.             if( y !== null){
  450.                 x.removeChild(y);
  451.             }
  452.             EDITOR._run = false;
  453.             WebGLDebugUtils.resetToInitialState(gl);
  454.             EDITOR._pause = false;
  455.         }
  456.     };
  458.     EDITOR.pauseRun = function () {
  459.         cancelAnimationFrame(EDITOR.gl_requestId);
  460.         EDITOR.gl_requestId = 0;
  461.         EDITOR._pause = true;
  462.     };
  464.     EDITOR.unPause = function () {
  465.         EDITOR._pause = false;
  466.         EDITOR.gl_requestId = requestAnimationFrame(EDITOR.renderLoop);
  467.     };
  469.     //You should let your WebGL-rendering callback be a requestAnimationFrame callback: if you do so,
  470.     // the browser will take care of the complex details of animation scheduling for you.
  471.     EDITOR.renderLoop = function () {
  472.         if (!_TEXisLoading && !_OBJisLoading) {
  473.             EDITOR.stats.begin();
  474.             render();
  475.             EDITOR.stats.end();
  476.         }
  477.         if (!EDITOR._error && !EDITOR._shaderError) {
  478.             EDITOR.gl_requestId = requestAnimationFrame(EDITOR.renderLoop);
  479.         }
  480.     };
  482.     EDITOR.scrollLoggerToBottom = function () {
  483.         $('#errorLogContainer').stop().animate({
  484.             scrollTop: $('#errorLogContainer')[0].scrollHeight
  485.         }, 800);
  486.     };
  488.     EDITOR.styleShaderError = function (errorMsg) {
  489.         var pos = errorMsg.lastIndexOf("ERROR");
  490.         if (pos !== -1) {
  491.             var restMsg = cut(errorMsg, pos);
  492.             EDITOR.styleShaderError(restMsg);
  493.         }
  494.     };
  496.     function cut(str, cutStart) {
  497.         var tmp = str.substring(cutStart, str.length);
  498.         tmp = tmp.replace("ERROR", "LINE");
  499.         EDITOR.writeError(tmp);
  500.         return str.substring(0, cutStart);
  501.     }
  503.     //red
  504.     EDITOR.writeError = function (message) {
  505.         var container = document.getElementById("errorLogContainer");
  506.         var newP = document.createElement("p");
  507.         newP.style.color = "red";
  508.         cancelAnimationFrame(EDITOR.gl_requestId);
  509.         EDITOR.gl_requestId = 0;
  510.         EDITOR._error = true;
  511.         EDITOR._spinner.stop();
  512.         //falls ein shadererror entsteht, entstehen folgefehler in der WebGL applikation daher müssen diese nicht gezeigt werden.
  513.         if (!EDITOR._shaderError) {
  514.             var newBr = document.createElement("br");
  515.             var time = new Date().toLocaleTimeString();
  516.             var text = document.createTextNode(time + ":  " + message);
  517.             newP.appendChild(text);
  518.             newP.appendChild(newBr);
  519.             container.appendChild(newP, container.lastChild);
  520.             EDITOR.scrollLoggerToBottom();
  521.         }
  522.     };
  523.     //yellow
  524.     EDITOR.writeSystemMessage = function (message) {
  525.         var container = document.getElementById("errorLogContainer");
  526.         var newP = document.createElement("p");
  527.         newP.style.color = "yellow";
  528.         var newBr = document.createElement("br");
  529.         var time = new Date().toLocaleTimeString();
  530.         var text = document.createTextNode(time + ":  " + message);
  531.         newP.appendChild(text);
  532.         newP.appendChild(newBr);
  533.         container.appendChild(newP, container.lastChild);
  534.         EDITOR.scrollLoggerToBottom();
  535.     };
  536.     //green
  537.     EDITOR.writeCompletionMessage = function (message) {
  538.         var container = document.getElementById("errorLogContainer");
  539.         var newP = document.createElement("p");
  540.         newP.style.color = "green";
  541.         var newBr = document.createElement("br");
  542.         var time = new Date().toLocaleTimeString();
  543.         var text = document.createTextNode(time + ":  " + message);
  544.         newP.appendChild(text);
  545.         newP.appendChild(newBr);
  546.         container.appendChild(newP, container.lastChild);
  547.         EDITOR.scrollLoggerToBottom();
  548.     };
  550.     EDITOR.cleanLog = function () {
  551.         var container = document.getElementById("errorLogContainer");
  552.         while (container.hasChildNodes()) {
  553.             container.removeChild(container.childNodes[0]);
  554.         }
  555.     };
  557.     window.onbeforeunload = function () {
  558.         if (typeof(Storage) !== "undefined") {
  559.             if (localStorage.getItem("webgl") !== null || localStorage.getItem("vs") !== null || localStorage.getItem("fs") !== null) {
  560.                 localStorage.removeItem("webgl");
  561.                 localStorage.removeItem("vs");
  562.                 localStorage.removeItem("fs");
  563.             }
  564.             //else add it
  565.             localStorage.setItem("webgl", EDITOR.webglEditor.getValue());
  566.             localStorage.setItem("vs", EDITOR.vsEditor.getValue());
  567.             localStorage.setItem("fs", EDITOR.fsEditor.getValue());
  568.             // Code for localStorage/sessionStorage.
  569.         } else {
  570.             EDITOR.writeSystemMessage("Your browser does not support local web storage! Changes will not be saved!");
  571.             return "Do you want to leave this site?"; //Prevent Ctrl+W/leaving without saving
  572.             // Sorry! No Web Storage support..
  573.         }
  574.     };
  576.     document.onkeyup = function (e) {
  577.         var e = e || window.event; // for IE to cover IEs window event-object
  578.         e.preventDefault();
  579.         if (e.altKey && e.which === 49) {
  580.             $("#webGL").click();
  581.         } else if (e.altKey && e.which === 50) {
  582.             $("#vs").click();
  583.         } else if (e.altKey && e.which === 51) {
  584.             $("#fs").click();
  585.         } else if (e.altKey && e.which === 82) {
  586.             EDITOR.compileRun();
  587.         }
  588.     };
  590.     document.onkeydown = function (e) {
  591.         var e = e || window.event;
  592.         if (e.ctrlKey) {
  593.             var c = e.which || e.keyCode;//Get key code
  594.             switch (c) {
  595.                 case 83://Block Ctrl+S
  596.                 case 9://Block Ctrl+W --Does not work in Chrome
  597.                     e.preventDefault();
  598.                     e.stopPropagation();
  599.                     break;
  600.             }
  601.         }
  602.     };
  604.     //reads files as string and saves it in the zip folder
  605.     EDITOR.textFromFile = function (url, fileName, folder) {
  606.         $.ajax({
  607.             url: url,
  608.             type: 'get',
  609.             async: false,
  610.             success: function (data) {
  611.                 if (fileName === 'index.html') {
  612.                     data = data.replace("//VSPLACEHOLDER", EDITOR.vsEditor.getValue());
  613.                     data = data.replace("//FSPLACEHOLDER", EDITOR.fsEditor.getValue());
  614.                     data = data.replace("//WEBGLPLACEHOLDER", EDITOR.webglEditor.getValue());
  615.                 }
  616.                 folder.file(fileName, data); //store the string
  617.             }
  618.         });
  619.     };
  620.     EDITOR.textFromFileRestore = function (url) {
  621.         $.ajax({
  622.             url: url,
  623.             type: 'get',
  624.             async: false,
  625.             success: function (data) {
  626.             }
  627.         });
  628.     };
  630.     EDITOR.imageFromFile = function (folder, zip) {
  631.         var count = EDITOR.img.length;
  632.         EDITOR.img.forEach(function (fileName) {
  633.             JSZipUtils.getBinaryContent('src/texture/' + fileName, function (err, data) {
  634.                 if (err) {
  635.                     writeLog("Problem happened while loading image: " + url);
  636.                 } else {
  637.                     folder.file(fileName, data, {binary: true});
  638.                     count--;
  639.                     if (count === 0) {
  640.                         //saving with images
  641.                         EDITOR.save(zip);
  642.                         //deferred.resolve(zip);
  643.                     }
  644.                 }
  645.             });
  646.         });
  647.     };
  650.     EDITOR.img = [];
  651.     EDITOR.availableImages = ["amiga.jpg", "brick_bump.jpg", "brick_diffuse.jpg", "brick_rough.jpg",
  652.         "bump.jpg", "cerberus.jpg", "circle-tex.jpg", "cloud.png", "crate.gif", "disturb.jpg", "earth.jpg",
  653.         "lavatile.jpg", "metal.png", "perlin.png", "transition1.png", "transition2.png", "transition3.png", "transition4.png", "transition5.png",
  654.         "transition6.png", "UV_Grid_Sm.jpg", "water.jpg", "water_normals.jpg", "vive.png"];
  655.     EDITOR.findUsedImages = function () {
  656.         var code = EDITOR.webglEditor.getValue();
  657.         for (var i = 0; i < EDITOR.availableImages.length; i++) {
  658.             if (code.indexOf(EDITOR.availableImages[i]) !== -1) {
  659.                 EDITOR.img.push(EDITOR.availableImages[i]);
  660.             }
  661.         }
  662.     };
  664.     EDITOR.obj = [];
  665.     EDITOR.availableObjects = ["car.obj", "cerberus.obj", "character.obj", "cube.obj", "deer.obj", "dna.obj", "globe.obj", "male-Body.obj", "mill.obj",
  666.         "n64.obj", "skeleton.obj", "teapot.obj", "tuna.obj", "webgl-logo.obj", "zeppelin.obj", "bunny.obj", "vive.obj"];
  667.     EDITOR.findUsedObjects = function () {
  668.         var code = EDITOR.webglEditor.getValue();
  669.         for (var i = 0; i < EDITOR.availableObjects.length; i++) {
  670.             if (code.indexOf(EDITOR.availableObjects[i]) !== -1) {
  671.                 EDITOR.obj.push(EDITOR.availableObjects[i]);
  672.             }
  673.         }
  674.     };
  676.     EDITOR.saveSubroutine = function (objFolder, textureFolder, zip) {
  677.         EDITOR.obj.forEach(function (fileName) {
  678.             var url = 'src/object/' + fileName;
  679.             EDITOR.textFromFile(url, fileName, objFolder);
  680.         });
  681.         if (EDITOR.img.length > 0) {
  682.             EDITOR.imageFromFile(textureFolder, zip);
  683.         } else {
  684.             //saving without images
  685.             EDITOR.save(zip);
  686.         }
  687.     };
  689.     EDITOR.save = function (zip) {
  690.         if (EDITOR._run) {
  691.             //saving the drawn canvas
  692.             canvas.toBlobHD(function (blob) {
  693.                 zip.file("canvas.png", blob);
  694.                 writeLog("Creating zip file...");
  695.                 zip.generateAsync({type: "blob"}).then(function (content) {
  696.                     // see FileSaver.js
  697.                     EDITOR.writeCompletionMessage("Initializing download...");
  698.                     EDITOR.writeSystemMessage("File saved to the default path defined in your browser settings.");
  699.                     //Not possible to define the saving path with javascript, You need to change your own browser settings.
  700.                     // This would enter the realm of privileged code, of which website content code cannot touch.
  701.                     saveAs(content, "WebGL-Editor.zip");
  702.                     document.getElementById("save_program").disabled = false;
  703.                 });
  704.             }, "image/png");
  705.         } else {
  706.             writeLog("Creating zip file...");
  707.             // see FileSaver.js
  708.             zip.generateAsync({type: "blob"}).then(function (content) {
  709.                 EDITOR.writeCompletionMessage("Initializing download...");
  710.                 EDITOR.writeSystemMessage("File saved to the default path defined in your browser settings.");
  711.                 //Not possible to define the saving path with javascript, You need to change your own browser settings.
  712.                 // This would enter the realm of privileged code, of which website content code cannot touch.
  713.                 saveAs(content, "WebGL-Editor.zip");
  714.                 document.getElementById("save_program").disabled = false;
  715.             });
  716.         }
  717.         EDITOR.obj = [];
  718.         EDITOR.img = [];
  719.     };
  721.     function resetControllerState() {
  722.         controller.onchange = null;
  723.         controller.xRot = 0;
  724.         controller.yRot = 0;
  725.         controller.curX = 0;
  726.         controller.curY = 0;
  727.         controller.xTrans = 0;
  728.         controller.yTrans = 0;
  729.         controller.zTrans = 0;
  730.         controller.velocity = 1 / 100;
  731.         controller.deltaXRot = 0.0;
  732.         controller.deltaYRot = 0.0;
  733.         controller.deltaXTrans = 0.0;
  734.         controller.deltaYTrans = 0.0;
  735.         controller.deltaZTrans = 0.0;
  736.         controller.objectScale = 1;
  737.     }
  738. })(this); //End of Anonymous Closure//
  741. //---------------------------------GLOBAL Helper functions the user can use!--------------------------------//
  743. /**
  744.  * Takes in the WebGLRenderingContext and starts to compile, attach and link the Vertex- and Fragment Shader.
  745.  * @param {WebGLRenderingContext} gl is the WebGLRenderingContext instance
  746.  * @return {WebGLProgram} A WebGLProgram object that is a combination of two compiled WebGLShaders consisting of a vertex shader and
  747.  * a fragment shader (both written in GLSL). These are then linked into a usable program.
  748.  */
  749. function initShaders(gl) {
  750.     var failed = 0;
  751.     var vertShdr = gl.createShader(gl.VERTEX_SHADER);
  752.     gl.shaderSource(vertShdr, EDITOR.vsEditor.getValue());
  753.     gl.compileShader(vertShdr);
  754.     if (!gl.getShaderParameter(vertShdr, gl.COMPILE_STATUS)) {
  755.         EDITOR._spinner.stop();
  756.         EDITOR.writeError("Vertex shader failed to compile:");
  757.         EDITOR.styleShaderError(gl.getShaderInfoLog(vertShdr));
  758.         failed = -1;
  759.         EDITOR._shaderError = true;
  760.     }
  761.     var fragShdr = gl.createShader(gl.FRAGMENT_SHADER);
  762.     gl.shaderSource(fragShdr, EDITOR.fsEditor.getValue());
  763.     gl.compileShader(fragShdr);
  764.     if (!gl.getShaderParameter(fragShdr, gl.COMPILE_STATUS)) {
  765.         EDITOR._spinner.stop();
  766.         EDITOR.writeError("Fragment shader failed to compile:");
  767.         EDITOR.styleShaderError(gl.getShaderInfoLog(fragShdr));
  768.         failed = -1;
  769.         EDITOR._shaderError = true;
  770.     }
  771.     if (failed !== -1) {
  772.         var program = gl.createProgram();
  773.         gl.attachShader(program, vertShdr);
  774.         gl.attachShader(program, fragShdr);
  775.         gl.linkProgram(program);
  776.         if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
  777.             EDITOR.writeError("Shader program failed to link. ");
  778.             EDITOR._shaderError = true;
  779.             EDITOR._spinner.stop();
  780.             EDITOR.writeError(gl.getProgramInfoLog(program));
  781.             return -1;
  782.         }
  783.         EDITOR.writeCompletionMessage("Shaders compiled successfully");
  784.     }
  785.     return program;
  786. }
  788. /**
  789.  * @description
  790.  * Returns the vertex shader code in String representation provided in the VS form.
  791.  *
  792.  * @return {String} String representation of the vertex shader code.
  793.  */
  794. function getVertexShaderSource() {
  795.     return EDITOR.vsEditor.getValue();
  796. }
  798. /**
  799.  * @description
  800.  * Returns the fragment shader code in String representation provided in the FS form.
  801.  *
  802.  * @return {String} String representation of the fragment shader code.
  803.  */
  804. function getFragmentShaderSource() {
  805.     return EDITOR.fsEditor.getValue();
  806. }
  808. /**
  809.  * @description
  810.  * Takes in a javascript array and copies it into a Float32Array.
  811.  *
  812.  * @param {Array} m An array in javascript representation
  813.  * @return {Float32Array} The newly created Float32Array
  814.  */
  815. function flatten(m) {
  816.     var result = new Float32Array(m[0].length * m.length);
  817.     var i, j;
  818.     for (i = 0; i < m.length; i++) {
  819.         for (j = 0; j < m[0].length; j++) {
  820.             result[m[0].length * i + j] = m[i][j];
  821.         }
  822.     }
  823.     return result;
  824. }
  826. /**
  827.  * @description
  828.  * Logging function which prints the value of any given Type to the status-window.
  829.  *
  830.  * @param {*} message The message to be displayed
  831.  */
  832. function writeLog(message) {
  833.     var container = document.getElementById("errorLogContainer");
  834.     var newP = document.createElement("p");
  835.     var newBr = document.createElement("br");
  836.     var time = new Date().toLocaleTimeString();
  837.     var text = document.createTextNode(time + ":  " + message);
  838.     newP.appendChild(text);
  839.     newP.appendChild(newBr);
  840.     container.appendChild(newP, container.lastChild);
  841.     EDITOR.scrollLoggerToBottom();
  842. }
  844. /**
  845.  * @description
  846.  * Generates a mat4 viewing matrix and connects it with the control of an arcball camera, by using the Object literals of the controller Object.
  847.  *
  848.  *  <pre>
  849.  * Note: In order to see the changes when interacting with the canvas, the provided matrix has to be send to the vertex shader (e.g. as an uniform)
  850.  * in the render-loop.
  851.  * </pre>
  852.  *
  853.  * @param {mat4} matrix Placeholder matrix in which the viewing matrix will be stored
  854.  * @param {vec3} eye The starting camera position
  855.  * @param {vec3} at The starting focus point
  856.  * @param {vec3} up The starting roll of the camera
  857.  */
  858. function lookAtArcballCamera(matrix, eye, at, up) {
  859.     var camera = createArcballCamera(eye, at, up);
  860.     camera.view(matrix);
  861.     controller.onchange = function () {
  862.         if (!EDITOR._pause) {
  863.             camera.pan([-controller.deltaXTrans / 5, -controller.deltaYTrans / 5]);
  864.             camera.zoom(controller.deltaZTrans * 10);
  865.             camera.rotate([-controller.deltaXRot / 2, -controller.deltaYRot / 2], [0, 0]);
  866.             camera.view(matrix);
  867.         }
  868.     };
  869. }
  871. /**
  872.  * @description
  873.  * Takes in a mat4 model matrix and manipulates it by using the Object literals of the controller Object.
  874.  *
  875.  * <pre>
  876.  * Note: In order to see the changes when interacting with the canvas, the provided matrix has to be send to the vertex shader (e.g. as an uniform)
  877.  * in the render-loop.
  878.  * </pre>
  880.  *
  881.  * @param {mat4} matrix Placeholder matrix in which the model matrix will be stored
  882.  */
  883. function modelInteraction(matrix) {
  884.     var xRotMatrix = mat4.create();
  885.     var yRotMatrix = mat4.create();
  886.     var translationMatrix = mat4.create();
  887.     var scaleMatrix = mat4.create();
  889.     controller.onchange = function () {
  890.         if (!EDITOR._pause) {
  891.             //Clamp the x-Rotation (do not flip the model)
  892.             /* if (controller.xRot >= Math.PI / 2) {
  893.              controller.xRot = Math.PI / 2
  894.              } else if (controller.xRot <= -Math.PI / 2) {
  895.              controller.xRot = -Math.PI / 2;
  896.              }*/
  897.             //ROTATE
  898.             mat4.fromYRotation(yRotMatrix, -controller.yRot);
  899.             mat4.fromXRotation(xRotMatrix, -controller.xRot);
  900.             mat4.multiply(matrix, xRotMatrix, yRotMatrix);
  902.             //TRANSLATE
  903.             mat4.fromTranslation(translationMatrix, vec3.fromValues(-controller.xTrans, controller.yTrans, 0));
  904.             mat4.multiply(matrix, translationMatrix, matrix);
  906.             //SCALE
  907.             mat4.fromScaling(scaleMatrix, vec3.fromValues(controller.objectScale, controller.objectScale, controller.objectScale));
  908.             mat4.multiply(matrix, scaleMatrix, matrix);
  909.         }
  910.     };
  911. }