mirror of
https://github.com/patriciogonzalezvivo/thebookofshaders
synced 2024-11-08 01:10:27 +00:00
using glslEditor for editor.html
This commit is contained in:
Patricio Gonzalez Vivo
parent
4178622575
commit
909a254f97
209
edit.html
209
edit.html
@ -2,211 +2,32 @@
|
||||
<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>
|
||||
<title>GLSL Editor</title>
|
||||
|
||||
<!-- GLSL Canvas -->
|
||||
<script type="text/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslCanvas/master/build/GlslCanvas.min.js"></script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
background: #272822;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
font-family: Courier, Arial;
|
||||
#glsl_editor {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
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 editor;
|
||||
var billboard;
|
||||
var imgs = [];
|
||||
|
||||
function fetchHTTP(url, methood){
|
||||
var request = new XMLHttpRequest(), response;
|
||||
|
||||
request.onreadystatechange = function () {
|
||||
if (request.readyState === 4 && request.status === 200) {
|
||||
response = request.responseText;
|
||||
}
|
||||
}
|
||||
request.open(methood ? methood : 'GET', url, false);
|
||||
request.overrideMimeType("text/plain");
|
||||
request.send(null);
|
||||
return response;
|
||||
}
|
||||
|
||||
window.requestAnimFrame = (function() {
|
||||
return window.requestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
window.oRequestAnimationFrame ||
|
||||
window.msRequestAnimationFrame ||
|
||||
function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
|
||||
return window.setTimeout(callback, 1000/60);
|
||||
};
|
||||
})();
|
||||
|
||||
// Keep track of the mouse
|
||||
var mouse = {x: 0, y: 0};
|
||||
document.addEventListener('mousemove', function(e){
|
||||
mouse.x = e.clientX || e.pageX;
|
||||
mouse.y = e.clientY || e.pageY
|
||||
}, false);
|
||||
|
||||
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-url", 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);
|
||||
}
|
||||
billboard = new GlslCanvas(demoCanvas);
|
||||
}
|
||||
|
||||
var demoEditor = document.getElementById("editor");
|
||||
if (demoEditor) {
|
||||
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());
|
||||
billboard.load(editor.getValue());
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
window.onload = function () {
|
||||
loadTag();
|
||||
};
|
||||
|
||||
</script>
|
||||
<div id="glsl_editor"></div>
|
||||
</body>
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="build/css/main.css">
|
||||
<script type="text/javascript" src="build/js/glslEditor.js"></script>
|
||||
<script type="text/javascript">
|
||||
window.glslEditor = new GlslEditor('#glsl_editor');
|
||||
window.addEventListener("hashchange", function () {
|
||||
window.glslEditor.chechHash()
|
||||
}, false);
|
||||
</script>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user