geneterrain-webgpu/index.html at main · ComputingElevatedLab/geneterrain-webgpu · GitHub

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <script src="js/cytoscape.min.js"> </script>

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />

  <title>WebGPU Experiments</title>
</head>

<style>
  #cy {
    width: 600px;
    height: 600px;
    position: absolute;
    left: 4px;
    background-color: rgba(0, 0, 0, 0);
  }

  #cy2 {
    width: 600px;
    height: 600px;
    position: absolute;
    left: 4px;
    top: 700px;
    background-color: rgba(0, 0, 0, 0);
  }

  #background {
    width: 1200px;
    height: 1200px;
    position: absolute;
    left: 4px;
    background-color: grey;
    z-index: -1;
  }

  canvas {
    border: 1px solid black;
  }
</style>

<body style="background-color:grey;">
  <div id="background"></div>
  <div id="cy"></div>
  <div id="cy2"></div>

  <canvas id="webgpu-canvas" class="img-fluid" style="position: absolute;
    left: 608px; background-color: white;" width="600" height="600"></canvas>
  <canvas id="webgpu-canvas-2" class="img-fluid" style="position: absolute; top: 700px;
    left: 608px; background-color: white;" width="600" height="600"></canvas>
  <canvas id="subtract-canvas" class="img-fluid" style="position: absolute; top: 350px;
    left: 1216px; background-color: white;" width="600" height="600"></canvas>
  <button style="position: absolute; top: 950px;
  left: 1524px;" id="subtract">Display Compared Terrains</button>
  <input style="position: absolute; top: 1000px;
  left: 1524px;" type="number" id="aFactor" value="1" min="-10" max="10">
  <label style="position: absolute; top: 980px;
  left: 1524px;" for="aFactor">1st Terrain Factor</label>
  <input style="position: absolute; top: 1000px;
    left: 1674px;" type="number" id="bFactor" value="1" min="-10" max="10">
  <label style="position: absolute; top: 980px;
  left: 1674px;" for="bFactor">2nd Terrain Factor</label>
  <label style="position: absolute; top: 950px;
    left: 1216px;" id="compare-label">Mean Squared Error:</label>
  <textarea rows="6" cols="36" style="position: absolute; top: 980px; left: 1216px;" id="node-difference">

  </textarea>

  <input style="position: absolute;
  left: 1216px;" type="checkbox" id="3d">
  <label style="position: absolute;
  left: 1230px;" for="3d">3D View</label>
  <div class="container mt-4">
    <div class="row">
      <div class="col-12">
        <div style="position: absolute; top: 604px;">
          <input style="width: 100%" type="range" min="0" max="3000" value="1000" step="10" class="slider" id="width">
          <input type="checkbox" id="hideSelected"></input>
          <label for="hideSelected">Hide Selected</label>

          <input type="checkbox" id="showSelected"></input>
          <label for="showSelected">Show Selected</label>

          <input type="checkbox" id="overlay">
          <label for="overlay">Overlay Graph</label>
          <input type="checkbox" id="edges">
          <label for="edges">Show Edges</label>
          <button id="save">Save Terrain</button>
        </div>
        <div style="position: absolute; top: 1300px;">
          <input style="width: 100%" type="range" min="0" max="3000" value="1000" step="10" class="slider" id="width2">
          <input type="checkbox" id="hideSelected2"></input>
          <label for="hideSelected2">Hide Selected</label>

          <input type="checkbox" id="showSelected2"></input>
          <label for="showSelected2">Show Selected</label>

          <input type="checkbox" id="overlay2">
          <label for="overlay2">Overlay Graph</label>
          <input type="checkbox" id="edges2">
          <label for="edges2">Show Edges</label>
          <button id="save2">Save Terrain</button>
        </div>
        <div style="position: absolute; top: 1360px;">
          <label for="node">Select a node file:</label>
          <input type="file" id="node" name="node">

          <label for="edge">Select an edge file:</label>
          <input type="file" id="edge" name="edge">
          <br />
          <label for="layout">Select a layout file:</label>
          <input type="file" id="layout" name="layout">
          <button id="submit">Submit</button>
          <button id="submit2">Submit Second</button>
          <input type="checkbox" id="synch">
          <label for="synch">Synch Graphs</label>
        </div>
      </div>
    </div>
  </div>
  <canvas id="out-canvas" class="img-fluid" style="display: none;" width="600" height="600"></canvas>
  <script src="js/wgsl.js"></script>
  <script src="js/gl-matrix-min.js"></script>
  <script src="js/webgl-util.js"></script>
  <script src="js/FileSaver.js"></script>
  <script src="js/terrain_subtracter.js"></script>
  <script src="js/terrain_generator.js"></script>
  <script src="js/render.js"></script>
</body>

</html>