ShadSolv/index.html at master · bodavid/ShadSolv · 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
<!DOCTYPE html>
<html>
  <head>
    <meta content='text/html;charset=utf-8' http-equiv='Content-Type' />
    <title>WebGL shader Euler PDE solver</title>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js' type='text/javascript'></script>
    <script src='https://code.jquery.com/jquery-2.1.1.js' type='text/javascript'></script>
    <script type="text/javascript"
        src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
    </script>
  </head>
  <body>
    <div id='header'>
      <h1>WebGL shader Euler PDE solver</h1>
    </div>
    <div id='content'>
	  <div id="viz">
	  	<div class="top">
	  		<div id="graphics-container"></div>
	  	</div>
	  </div>
      <div id='description-right' style="max-width: 40%;">

  	    <p>One step performance:</p>
  	    <ul>
  	      <li>rendering of the data: <span id="render-time"> </span> ms</li>
  	      <li>simple CPU calculations: <span id="cpu-time"> </span> ms</li>
  	      <li>simple GPU calculations: <span id="gpu-time"> </span> ms</li>
  	      <li>reading a floating point texture:
            <ul>
              <li>Method 1: <span id="read-time-m1"> </span> ms</li>
              <li>Method 2: <span id="read-time-m2"> </span> ms</li>
            </ul>
          </li>
  	    </ul>
        <p>Step: <span id="step"></span> </p>

  	    <p>Each 5 steps, CPU and GPU data is being compared.</p>
  	    <p>Average difference between CPU and GPU value: <span id="error"></span> %</p>

  	    <h2>Parameters</h2>
  	    <ul>
  	    <li>Grid resolution:
  	    <select id="grid-res">
  	    	<option value="128">128x128</option>
  	    	<option value="256" selected="selected">256x256</option>
  	    	<option value="512">512x512</option>
  	    	<option value="1024">1024x1024</option>
  	    	<option value="2048">2048x2048</option>
  	    </select>
  	    </li>
  	    <li>Equations:
  	    <select id="eq">
  	    	<option value="FL" selected="selected">Ficks law of diffusion</option>
  	    	<option value="BZ">Belousov-Zhabotinsky</option>
  	    </select>
  	    </li>
  	    <li>Boundary conditions:
  	    <select id="bc">
  	    	<!--<option value="ph" selected="selected">Periodic horizontally</option>-->
  	    	<!--<option value="pv" selected="selected">Periodic vertically</option>-->
  	    	<option value="phv">Periodic both directions</option>
  	    	<option value="np">Not periodic</option>
  	    </select>
  	    </li>
  	    </ul>
      </div>
    </div>
    <script src='lightgl.js' type='text/javascript'></script>
    <script src='eulerPDEsolver.js' type='text/javascript'></script>
  </body>
</html>