mirror of
https://github.com/patriciogonzalezvivo/thebookofshaders
synced 2024-11-03 23:15:23 +00:00
141 lines
4.1 KiB
HTML
141 lines
4.1 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://rawgit.com/patriciogonzalezvivo/glslCanvas/master/build/GlslCanvas.min.js'></script>
|
||
|
|
<link type='text/css' rel='stylesheet' href='https://rawgit.com/patriciogonzalezvivo/glslEditor/gh-pages/build/css/main.css'>
|
||
|
|
<script type='application/javascript' src='https://rawgit.com/patriciogonzalezvivo/glslEditor/gh-pages/build/js/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\
|
||
|
|
}';
|
||
|
|
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>
|
||
|
|
</html>
|