Hugging Face's logo

Spaces:
Severian
/
webgl_demo
Running

App Files Community
Severian commited on
Commit
682ec84
·
verified ·
1 Parent(s): 337fbee

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +28 -42
index.html CHANGED
@@ -1,65 +1,51 @@
1
  <!DOCTYPE html>
2
  <html>
3
-
4
- <head>
5
  <meta charset="utf-8">
6
- <title>Learn WebGL</title>
7
- </head>
8
- <style>
9
- html,
10
- body,
11
- canvas {
12
  height: 100%;
13
  width: 100%;
14
  display: flex;
15
  justify-content: center;
16
  align-items: center;
17
- margin: 0
18
- }
19
-
20
- .divcanvas {
21
  width: 66%;
22
  height: 66%;
23
  position: relative;
24
- }
25
-
26
- .playpause {
27
  position: absolute;
28
- left: 0px;
29
- top: 0px;
30
  width: 100%;
31
  height: 100%;
32
  font-size: 60px;
 
33
  justify-content: center;
34
  align-items: center;
35
  color: rgba(255, 255, 255, 0.3);
36
  transition: opacity 0.2s ease-in-out;
37
- }
38
-
39
- .playpausehide,
40
- .playpause:hover {
41
  opacity: 0;
42
- }
43
-
44
- .iframe .divcanvas {
45
  display: block;
46
- }
47
- </style>
48
-
49
- <body onload="main()">
50
  <div class="divcanvas">
51
- <canvas id="canvas"></canvas>
52
- <div class="playpause">▶</div>
53
  </div>
54
- </body>
55
- <!--
56
- for most samples webgl-utils only provides shader compiling/linking and
57
- canvas resizing because why clutter the examples with code that's the same in every sample.
58
- See https://webglfundamentals.org/webgl/lessons/webgl-boilerplate.html
59
- and https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
60
- for webgl-utils, m3, m4, and webgl-lessons-ui.
61
- -->
62
- <script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
63
- <script src="./test.js"></script>
64
-
65
- </html>
 
1
  <!DOCTYPE html>
2
  <html>
3
+ <head>
 
4
  <meta charset="utf-8">
5
+ <title>Cymatic 3D Display in WebGL</title>
6
+ <style>
7
+ html, body, canvas {
 
 
 
8
  height: 100%;
9
  width: 100%;
10
  display: flex;
11
  justify-content: center;
12
  align-items: center;
13
+ margin: 0;
14
+ background: #000;
15
+ }
16
+ .divcanvas {
17
  width: 66%;
18
  height: 66%;
19
  position: relative;
20
+ }
21
+ .playpause {
 
22
  position: absolute;
23
+ left: 0;
24
+ top: 0;
25
  width: 100%;
26
  height: 100%;
27
  font-size: 60px;
28
+ display: flex;
29
  justify-content: center;
30
  align-items: center;
31
  color: rgba(255, 255, 255, 0.3);
32
  transition: opacity 0.2s ease-in-out;
33
+ }
34
+ .playpausehide, .playpause:hover {
 
 
35
  opacity: 0;
36
+ }
37
+ .iframe .divcanvas {
 
38
  display: block;
39
+ }
40
+ </style>
41
+ </head>
42
+ <body onload="main()">
43
  <div class="divcanvas">
44
+ <canvas id="canvas"></canvas>
45
+ <div class="playpause">▶</div>
46
  </div>
47
+ <!-- webgl-utils provides basic shader compiling and canvas resizing -->
48
+ <script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
49
+ <script src="./test.js"></script>
50
+ </body>
51
+ </html>