-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
90 lines (76 loc) · 2.64 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>GLSL Grapher</title>
<link rel="stylesheet" href="build/style.css">
<script src="ace.min.js"></script>
<script src="ace.mode-glsl.min.js"></script>
<script src="three.min.js"></script>
<script src="GraphLabel.js"></script>
<script src="GraphMaterial2D.js"></script>
<script src="GraphAxes2D.js"></script>
<script src="Graph2D.js"></script>
<script src="GraphControls.js"></script>
<script src="examples.js"></script>
<script src="index.js"></script>
</head>
<body>
<header>
<h1>GLSL Grapher</h1>
</header>
<section id="tool">
<div class="graph">
<canvas></canvas>
<div class="x-labels">
<div class="labels">
<span contenteditable="true" class="min" tabindex="1"></span>
<span class="name" >x</span>
<span contenteditable="true" class="max" tabindex="2"></span>
</div>
</div>
<div class="y-labels">
<div class="labels">
<span contenteditable="true" class="max" tabindex="4"></span>
<span class="name" >y</span>
<span contenteditable="true" class="min" tabindex="3"></span>
</div>
</div>
</div>
<div class="limit-presets">
<img src="img/range_0to1.svg" class="zero-to-one"></svg>
<img src="img/range_-1to1.svg" class="negative-one-to-one"></svg>
</div>
<div id="editor">float y(float x) {
return sin(x);
}</div>
</section>
<section id="about">
<h2>What?</h2>
<p>
This is a visualization tool for GLSL shader functions, using WebGL. It will
graph any function with the signature <code>float y(float x)</code>.
</p>
<h2>Why?</h2>
<p>
Developing and debugging shader code is a uniquely difficult problem.
Graphing a function in a single dimension is a useful tool in the debugging
toolset, but isn't always the easiest thing to do. For one, typical graphing
tools all require you to translate your shader code into another format.
This allows you to graph the output of your <em>actual</em> code.
</p>
<h2>Examples?</h2>
<ul>
<li><a href="#step" class="example">Step</a></li>
<li><a href="#smoothstep" class="example">Smoothstep</a></li>
<li><a href="#multiSmoothstep" class="example">Multi-smoothstep</a></li>
<li><a href="#gradientNoise" class="example">Gradient noise</a></li>
<li><a href="#breathe" class="example">Breathe</a></li>
</ul>
</section>
<footer>
© <a href="http://fordhurley.com">Ford Hurley</a> 2017 —
<a href="https://github.com/fordhurley/glsl-grapher">View Source</a>
</footer>
</body>
</html>