thebookofshaders/edit.html
Patricio Gonzalez Vivo 30dae04fd8 first coomit
2015-03-15 11:21:47 -04:00

180 lines
5.1 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GLSL Shader Code Editor</title>
<!-- CodeMirror -->
<link type='text/css' rel='stylesheet' href="src/codemirror/css/codemirror.css">
<link type='text/css' rel="stylesheet" href="src/codemirror/addon/fold/foldgutter.css">
<link type='text/css' rel="stylesheet" href="src/codemirror/addon/dialog/dialog.css">
<link type='text/css' rel="stylesheet" href="src/codemirror/addon/hint/show-hint.css">
<link type='text/css' rel="stylesheet" href="src/codemirror/theme/monokai.css">
<script type="text/javascript" src="src/codemirror.js"></script>
<script type="text/javascript" src="src/codemirror/addon/search/searchcursor.js"></script>
<script type="text/javascript" src="src/codemirror/addon/search/search.js"></script>
<script type="text/javascript" src="src/codemirror/addon/dialog/dialog.js"></script>
<script type="text/javascript" src="src/codemirror/addon/edit/matchbrackets.js"></script>
<script type="text/javascript" src="src/codemirror/addon/edit/closebrackets.js"></script>
<script type="text/javascript" src="src/codemirror/addon/comment/comment.js"></script>
<script type="text/javascript" src="src/codemirror/addon/wrap/hardwrap.js"></script>
<script type="text/javascript" src="src/codemirror/addon/fold/foldcode.js"></script>
<script type="text/javascript" src="src/codemirror/addon/fold/brace-fold.js"></script>
<script type="text/javascript" src="src/codemirror/keymap/sublime.js"></script>
<script type="text/javascript" src="src/codemirror/addon/hint/show-hint.js"></script>
<script type="text/javascript" src="src/codemirror/mode/clike.js"></script>
<!-- GLSL Canvas -->
<script type="text/javascript" src="src/glslCanvas.js"></script>
<style>
body {
background: #272822;
}
h1 {
color: white;
font-family: Courier, Arial;
}
pre {
font-size: 130%;
}
canvas.right {
position: fixed;
right: 10px;
top: 10px;
background-color: #fff;
border-radius: 15px;
overflow: hidden;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
.CodeMirror {
font-size: 110%;
line-height: 1.3;
right: 10px;
height: 100%;
}
.CodeMirror-linenumbers {
padding: 0 8px;
}
</style>
</head>
<body>
<h1 id="title" >FILE NAME.frag</h1>
<div id="editor"></div>
<canvas id="canvas" class="right" width="500" height="500"></canvas>
<script type="text/javascript">
window.addEventListener("hashchange", function () {
loadTag()
}, false);
var imgs = [];
function removeElementsByClass(className){
var elements = document.getElementsByClassName(className);
while(elements.length > 0){
elements[0].parentNode.removeChild(elements[0]);
}
}
function loadTag(){
var fragShader = "";
var fragFile = "";
while(imgs.length > 0) {
imgs.pop();
}
removeElementsByClass("CodeMirror");
if( window.location.hash === "" ){
fragShader = "#ifdef GL_ES\n\
precision mediump float;\n\
#endif\n\
\n\
uniform vec2 u_resolution;\n\
uniform vec2 u_mouse;\n\
uniform float u_time;\n\
\n\
void main(){\n\
vec2 st = gl_FragCoord.xy/u_resolution.xy;\n\
gl_FragColor = vec4(st.x,st.y,0.0,1.0);\n\
}";
} else {
var hashes = location.hash.split('&');
for(i in hashes){
var ext = hashes[i].substr(hashes[i].lastIndexOf('.') + 1);
var name = hashes[i];
// Extract hash if is present
if(name.search("#") === 0){
name = name.substr(1);
}
if(ext == "frag"){
fragFile = name;
fragShader = fetchHTTP(fragFile);
} else if (ext == "png" || ext == "jpg" || ext == "PNG" || ext == "JPG" ){
imgs.push(hashes[i]);
}
}
}
var demoTitle = document.getElementById("title");
if(demoTitle){
demoTitle.innerText = fragFile;
}
var demoCanvas = document.getElementById("canvas");
if(demoCanvas && fragShader !== ""){
demoCanvas.setAttribute("data-fragment", fragShader);
console.log("data-fragment: " + fragFile);
if(imgs.length > 0){
var textureList = "";
for(i in imgs){
textureList += imgs[i];
textureList += (i < imgs.length-1)?",":"";
}
demoCanvas.setAttribute("data-textures",textureList);
console.log("data-textures: " + textureList);
}
loadShaders();
}
var demoEditor = document.getElementById("editor");
if(demoEditor){
var editor = CodeMirror(demoEditor,{
value: fragShader,
lineNumbers: true,
matchBrackets: true,
mode: "x-shader/x-fragment",
keyMap: "sublime",
autoCloseBrackets: true,
extraKeys: {"Ctrl-Space": "autocomplete"},
showCursorWhenSelecting: true,
theme: "monokai",
indentUnit: 4
});
editor.on("change", function() {
demoCanvas.setAttribute("data-fragment", editor.getValue());
loadShaders();
});
}
}
window.onload = function () {
loadTag();
renderShaders();
};
</script>
</body>
</html>