mirror of
https://github.com/patriciogonzalezvivo/thebookofshaders
synced 2024-11-03 23:15:23 +00:00
187 lines
6.2 KiB
HTML
187 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset='utf-8'>
|
|
<title>GLSL Editor</title>
|
|
<link href='/favicon.gif' rel='shortcut icon'/>
|
|
|
|
<!-- GLSL Canvas -->
|
|
<script type='text/javascript' src='https://thebookofshaders.com/glslCanvas/GlslCanvas.js'></script>
|
|
<link type='text/css' rel='stylesheet' href='https://thebookofshaders.com/glslEditor/glslEditor.css'>
|
|
<script type='application/javascript' src='https://thebookofshaders.com/glslEditor/glslEditor.js'></script>
|
|
|
|
<style>
|
|
body {
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
#glsl_editor {
|
|
display: block;
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
canvas.ge_canvas {
|
|
float: top;
|
|
position: relative;
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
max-width: 1200px;
|
|
}
|
|
|
|
.CodeMirror {
|
|
background: #FFFFFF;
|
|
font-size: 14px;
|
|
line-height: 1.5em;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
max-width: 700px;
|
|
}
|
|
|
|
.cm-s-default .cm-variable-3 {
|
|
color: #708;
|
|
}
|
|
|
|
.cm-s-default .cm-keyword {
|
|
color: #708;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id='glsl_editor'></div>
|
|
</body>
|
|
|
|
<script type='text/javascript'>
|
|
var preFunction = '\n\
|
|
#ifdef GL_ES\n\
|
|
precision mediump float;\n\
|
|
#endif\n\
|
|
\n\
|
|
#define PI 3.14159265359\n\
|
|
\n\
|
|
uniform vec2 u_resolution;\n\
|
|
uniform vec2 u_mouse;\n\
|
|
uniform float u_time;\n\
|
|
\n\
|
|
float lineJitter = 0.5;\n\
|
|
float lineWidth = 7.0;\n\
|
|
float gridWidth = 1.7;\n\
|
|
float scale = 0.001;\n\
|
|
float zoom = 2.5;\n\
|
|
vec2 offset = vec2(0.5);\n\
|
|
\n';
|
|
|
|
var postFunction = '\n\
|
|
float rand(vec2 co){\n\
|
|
return fract(sin(dot(co.xy,vec2(12.9898,78.233)))*43758.5453);\n\
|
|
}\n\
|
|
\n\
|
|
vec3 plot2D(in vec2 _st, in float _width ) {\n\
|
|
const float samples = 3.0;\n\
|
|
\n\
|
|
vec2 steping = _width*vec2(scale)/samples;\n\
|
|
\n\
|
|
float count = 0.0;\n\
|
|
float mySamples = 0.0;\n\
|
|
for (float i = 0.0; i < samples; i++) {\n\
|
|
for (float j = 0.0;j < samples; j++) {\n\
|
|
if (i*i+j*j>samples*samples) \n\
|
|
continue;\n\
|
|
mySamples++;\n\
|
|
float ii = i + lineJitter*rand(vec2(_st.x+ i*steping.x,_st.y+ j*steping.y));\n\
|
|
float jj = j + lineJitter*rand(vec2(_st.y + i*steping.x,_st.x+ j*steping.y));\n\
|
|
float f = function(_st.x+ ii*steping.x)-(_st.y+ jj*steping.y);\n\
|
|
count += (f>0.) ? 1.0 : -1.0;\n\
|
|
}\n\
|
|
}\n\
|
|
vec3 color = vec3(1.0);\n\
|
|
if (abs(count)!=mySamples)\n\
|
|
color = vec3(abs(float(count))/float(mySamples));\n\
|
|
return color;\n\
|
|
}\n\
|
|
\n\
|
|
vec3 grid2D( in vec2 _st, in float _width ) {\n\
|
|
float axisDetail = _width*scale;\n\
|
|
if (abs(_st.x)<axisDetail || abs(_st.y)<axisDetail) \n\
|
|
return 1.0-vec3(0.65,0.65,1.0);\n\
|
|
if (abs(mod(_st.x,1.0))<axisDetail || abs(mod(_st.y,1.0))<axisDetail) \n\
|
|
return 1.0-vec3(0.80,0.80,1.0);\n\
|
|
if (abs(mod(_st.x,0.25))<axisDetail || abs(mod(_st.y,0.25))<axisDetail) \n\
|
|
return 1.0-vec3(0.95,0.95,1.0);\n\
|
|
return vec3(0.0);\n\
|
|
}\n\
|
|
\n\
|
|
void main(){\n\
|
|
vec2 st = (gl_FragCoord.xy/u_resolution.xy)-offset;\n\
|
|
st.x *= u_resolution.x/u_resolution.y;\n\
|
|
\n\
|
|
scale *= zoom;\n\
|
|
st *= zoom;\n\
|
|
\n\
|
|
vec3 color = plot2D(st,lineWidth);\n\
|
|
color -= grid2D(st,gridWidth);\n\
|
|
\n\
|
|
gl_FragColor = vec4(color,1.0);\n\
|
|
}';
|
|
var funct = 'float function (float x) {\n\
|
|
float y = x;\n\
|
|
return y;\n\
|
|
}';
|
|
|
|
function loadjscssfile(filename, filetype, callback){
|
|
if (filetype=="js") { //if filename is a external JavaScript file
|
|
var fileref = document.createElement('script')
|
|
fileref.setAttribute("type","text/javascript")
|
|
fileref.setAttribute("src", filename)
|
|
}
|
|
else if (filetype=="css") { //if filename is an external CSS file
|
|
var fileref = document.createElement("link")
|
|
fileref.setAttribute("rel", "stylesheet")
|
|
fileref.setAttribute("type", "text/css")
|
|
fileref.setAttribute("href", filename)
|
|
}
|
|
|
|
fileref.onload = callback;
|
|
fileref.onreadystatechange = callback;
|
|
|
|
if (typeof fileref != "undefined") {
|
|
document.getElementsByTagName("head")[0].appendChild(fileref)
|
|
}
|
|
}
|
|
|
|
|
|
window.onload = function() {
|
|
// if ()
|
|
if (window.GlslEditor && window.GlslEditor) {
|
|
init();
|
|
}
|
|
else {
|
|
console.log('Try to load a local glslEditor');
|
|
loadjscssfile('src/glslCanvas/build/GlslCanvas.js', 'js');
|
|
loadjscssfile('src/glslEditor/build/glslEditor.css', 'css');
|
|
loadjscssfile('src/glslEditor/build/glslEditor.js', 'js', init);
|
|
}
|
|
};
|
|
|
|
function init() {
|
|
window.glslEditor = new GlslEditor('#glsl_editor', {
|
|
canvas_width: 900,
|
|
canvas_height: 300,
|
|
lineNumbers: false,
|
|
frag_header: preFunction,
|
|
frag_footer: postFunction,
|
|
multipleBuffers: true
|
|
}).open(funct);
|
|
}
|
|
</script>
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,"script","//www.google-analytics.com/analytics.js","ga");
|
|
ga("create", "UA-18824436-2", "auto");
|
|
ga("send", "pageview");
|
|
</script>
|
|
</html> |