-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.html
78 lines (71 loc) · 1.83 KB
/
example.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
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.content {
max-width: 960px;
margin: auto;
}
body {
background-color: black;
}
h1,
h2,
h3,
p {
font-family: Helvetica, sans-serif;
color: white;
}
a {
color: #ff85ed;
}
a:hover {
color: #fc03f4;
}
code {
font-weight: bolder;
white-space: pre-line;
color: black;
background-color: white;
}
em {
color: #03fc35;
font-style: normal;
}
#mergercode {
background-color: black;
color: white;
}
</style>
<meta charset="UTF-8" />
</head>
<body>
<div class="content">
<h1 id="title"></h1>
<p>
postpre is a set of post-processing effect presets made with
<a href="https://github.com/bandaloo/merge-pass">merge-pass</a>. this
site contains multiple examples of these preset effects in use. even
though they are "presets" they have many parameters you can play with to
get something that looks truly unique
</p>
<p><a id="link" href="">random demo</a></p>
<div id="note"></div>
<h2>processed output</h2>
<canvas id="gl" width="960" height="540"></canvas>
<h2>unprocessed input</h2>
<canvas id="source" width="960" height="540"></canvas>
<div id="buffers" style="margin: 0;"></div>
<h2>code</h2>
<p>
this function returns an object containing the merger and a function
that changes uniforms on every step. the important code that defines the
actual effect is in <em>green</em>
</p>
<code id="mergercode"></code>
<h2>other demos</h2>
<p id="demos"></p>
</div>
</body>
<script src="bundle.js"></script>
</html>