-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
59 lines (55 loc) · 6.48 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=2,user-scalable=yes">
<title>GlslCanvas</title>
<link type="image/png" href="./img/favicon-32x32.png" sizes="32x32" rel="icon" />
<link type="image/png" href="./img/favicon-16x16.png" sizes="16x16" rel="icon" />
<link type="image/x-icon" href="./img/favicon.ico" rel="icon" />
<link type="text/css" href="./css/glsl-canvas.css" rel="stylesheet" />
<script type="text/javascript" src="./js/stats.min.js"></script>
<script type="text/javascript" src="./js/glsl-canvas.min.js"></script>
</head>
<body>
<div class="container">
<canvas class="glsl-canvas" data-fragment-url="../shaders/fragment.glsl"></canvas>
<div id="textOverlay">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="130 -10 1040.7455 220.69501" style="width: 100%">
<path d="m1033.7 99.838v-18.18h-22.576v-28.264l-0.7599 0.23375-21.205 6.4875-0.4175 0.1275v21.415h-33.469v-11.929c0-5.555 1.2425-9.8062 3.69-12.641 2.4312-2.8012 5.9088-4.225 10.342-4.225 3.1888 0 6.49 0.75125 9.8112 2.2325l0.8325 0.37125v-19.146l-0.39125-0.14375c-3.0988-1.1138-7.315-1.675-12.539-1.675-6.585 0-12.569 1.4325-17.786 4.2725s-9.3288 6.9038-12.205 12.066c-2.8675 5.1562-4.3225 11.111-4.3225 17.701v13.116h-15.72v18.18h15.72v76.589h22.568v-76.589h33.469v48.671c0 20.045 9.455 30.204 28.101 30.204 3.065 0 6.2888-0.36 9.5825-1.0638 3.3513-0.72125 5.6338-1.4425 6.9775-2.2125l0.2975-0.175v-18.349l-0.9175 0.6075c-1.225 0.8175-2.75 1.4838-4.5387 1.9788-1.7963 0.505-3.2963 0.75875-4.4575 0.75875-4.3688 0-7.6-1.1775-9.6063-3.5-2.0275-2.3438-3.0562-6.4438-3.0562-12.178v-44.742h22.576zm-167.11 60.422c-8.1912 0-14.649-2.7162-19.2-8.0662-4.5788-5.3775-6.8988-13.044-6.8988-22.784 0-10.049 2.32-17.914 6.9012-23.386 4.5538-5.4362 10.95-8.195 19.014-8.195 7.825 0 14.054 2.635 18.515 7.8362 4.485 5.2275 6.76 13.03 6.76 23.196 0 10.291-2.14 18.196-6.36 23.484-4.19 5.2488-10.491 7.915-18.731 7.915m1.005-80.885c-15.628 0-28.04 4.5788-36.889 13.61-8.8438 9.0325-13.329 21.531-13.329 37.154 0 14.838 4.3775 26.772 13.011 35.468s20.384 13.105 34.92 13.105c15.149 0 27.314-4.6425 36.16-13.799 8.845-9.1475 13.326-21.528 13.326-36.785 0-15.07-4.205-27.094-12.502-35.731s-19.978-13.021-34.698-13.021m-86.603-5e-4c-10.63 0-19.422 2.7188-26.14 8.08-6.7575 5.3925-10.185 12.466-10.185 21.025 0 4.4488 0.74 8.4012 2.1962 11.752 1.465 3.3638 3.7325 6.3238 6.7438 8.8088 2.99 2.465 7.6025 5.0475 13.718 7.6738 5.1388 2.115 8.9725 3.905 11.408 5.315 2.38 1.3812 4.07 2.7712 5.0238 4.1238 0.92625 1.3238 1.3975 3.135 1.3975 5.3725 0 6.3662-4.7675 9.4638-14.579 9.4638-3.6388 0-7.79-0.75875-12.338-2.2575s-8.8012-3.6475-12.634-6.4062l-0.93625-0.67125v21.726l0.34375 0.16c3.1938 1.4738 7.2188 2.7162 11.964 3.695s9.0388 1.4775 12.778 1.4775c11.535 0 20.824-2.7325 27.601-8.125 6.8212-5.43 10.279-12.67 10.279-21.526 0-6.3875-1.8612-11.866-5.53-16.284-3.6425-4.3825-9.965-8.405-18.785-11.961-7.0262-2.82-11.528-5.1612-13.384-6.9575-1.79-1.7362-2.6988-4.1912-2.6988-7.3 0-2.7562 1.1212-4.9638 3.425-6.7525 2.3212-1.7975 5.5512-2.7112 9.6038-2.7112 3.76 0 7.6075 0.59375 11.432 1.7575s7.1812 2.7225 9.985 4.63l0.92125 0.63v-20.61l-0.35375-0.1525c-2.5862-1.1088-5.9962-2.0575-10.138-2.8275-4.125-0.7625-7.8662-1.1488-11.119-1.1488m-95.158 80.886c-8.1888 0-14.649-2.7162-19.199-8.0662-4.58-5.3775-6.8962-13.041-6.8962-22.784 0-10.049 2.3188-17.914 6.9012-23.386 4.55-5.4362 10.945-8.195 19.012-8.195 7.8225 0 14.051 2.635 18.514 7.8362 4.485 5.2275 6.76 13.03 6.76 23.196 0 10.291-2.1412 18.196-6.3612 23.484-4.19 5.2488-10.489 7.915-18.731 7.915m1.0075-80.885c-15.631 0-28.044 4.5788-36.889 13.61-8.8438 9.0325-13.331 21.531-13.331 37.154 0 14.844 4.38 26.772 13.014 35.468s20.382 13.105 34.92 13.105c15.145 0 27.314-4.6425 36.16-13.799 8.8425-9.1475 13.326-21.528 13.326-36.785 0-15.07-4.2062-27.094-12.505-35.731s-19.978-13.021-34.695-13.021m-84.477 18.694v-16.411h-22.292v94.766h22.292v-48.476c0-8.2438 1.8688-15.015 5.5562-20.13 3.6412-5.0538 8.4938-7.615 14.418-7.615 2.0075 0 4.2612 0.33125 6.7025 0.98625 2.4162 0.65125 4.1662 1.3575 5.1988 2.1012l0.93625 0.67875v-22.474l-0.36125-0.155c-2.0762-0.8825-5.0125-1.3275-8.7288-1.3275-5.6012 0-10.615 1.8-14.909 5.3438-3.7688 3.115-6.4938 7.3862-8.5762 12.712h-0.23625zm-62.213-18.695c-10.226 0-19.349 2.1938-27.109 6.5162-7.775 4.3325-13.788 10.519-17.879 18.385-4.0725 7.8475-6.14 17.014-6.14 27.235 0 8.9538 2.005 17.171 5.9675 24.412 3.965 7.2538 9.5775 12.929 16.681 16.865 7.0938 3.9312 15.292 5.925 24.37 5.925 10.594 0 19.639-2.1188 26.891-6.295l0.2925-0.16875v-20.422l-0.93625 0.68375c-3.285 2.3925-6.9562 4.3025-10.906 5.6788-3.94 1.375-7.5325 2.07-10.681 2.07-8.7475 0-15.769-2.7375-20.866-8.1325-5.1088-5.4038-7.6988-12.99-7.6988-22.538 0-9.6075 2.7012-17.389 8.025-23.131 5.3062-5.725 12.341-8.6288 20.908-8.6288 7.3275 0 14.468 2.4812 21.222 7.3812l0.93375 0.67875v-21.519l-0.30125-0.17c-2.5425-1.4225-6.0088-2.5975-10.314-3.4888-4.285-0.88875-8.4762-1.3375-12.46-1.3375m-66.481 2.284h-22.292v94.766h22.292v-94.766zm-10.919-40.371c-3.6688 0-6.8688 1.2488-9.4975 3.7238-2.64 2.4825-3.98 5.6075-3.98 9.295 0 3.63 1.3238 6.6975 3.9375 9.1138 2.5975 2.4088 5.8075 3.63 9.54 3.63s6.9538-1.2212 9.5825-3.6262c2.6462-2.42 3.9875-5.4875 3.9875-9.1175 0-3.5588-1.305-6.6525-3.8788-9.195s-5.8312-3.8238-9.6912-3.8238m-55.62 33.38v101.76h22.75v-132.24h-31.486l-40.022 98.22-38.839-98.22h-32.769v132.24h21.379v-101.77h0.735l41.012 101.77h16.134l40.372-101.76h0.73375z" fill="#706d6e"/>
</svg>
</div>
</div>
</body>
<script>
/*
stats.js
*/
var stats = new Stats();
stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild(stats.dom);
/*
glsl-canvas.js
Attributes: data-fragment-url, data-vertex-url, data-fragment, data-vertex, controls, data-autoplay
Events: load, error, textureError, render, over, out, move, click
Methods: load, on, pause, play, toggle, setTexture, setUniform, setUniforms, destroy
*/
var options = {
backgroundColor: 'rgba(0.0, 0.0, 0.0, 0.0)',
alpha: true,
antialias: false,
premultipliedAlpha: false,
preserveDrawingBuffer: false,
extensions: [],
doubleSided: false,
};
var canvas = document.querySelector('.glsl-canvas');
var glsl = new glsl.Canvas(canvas, options);
glsl.setUniforms({});
glsl.on('render', function () {
stats.end();
// execute here custom code on every raf tick
stats.begin();
});
</script>
</html>