WebGLShader/render.html at main · iapafoto/WebGLShader · 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
	<style>
		canvas.full-width {
			width: 100vw;
			height: 240px;
			margin-bottom: 40px;
		}
	</style>
    <script src="GLCanvas.js"></script>
    <title>GLCanvas Example</title>
  </head>
  <body>
	<canvas class="full-width" id="canvas1"></canvas>
	<canvas class="full-width" id="canvas2"></canvas>
	<div>
      <label>Slider:</label>
      <input id="slider" type="range" min="0" max="1" step="0.001" value="0.05">
    </div>

    <script>
		// ------------------------------------------------
		// first canvas animated and control via a slider
		// ------------------------------------------------
	    	const glRenderer1 = new GLCanvas('canvas1', "fragmentShader.frag", null, (rd) => { // rq: init callback is null here
			rd.set1f("u_param", parseFloat(document.getElementById("slider").value)); // set value to glsl program during render loop
		});

	    	// Request for update when slider value changes (usefull in pause mode)
		const speedSlider = document.getElementById('slider');
		speedSlider.addEventListener('input', () => {
			glRenderer1.update();
		});

		// ------------------------------------------------
	    	// second canvas animated and using a texture
	    	// ------------------------------------------------
	    	const canvas2 = document.getElementById('canvas2');
		var texture0 = loadTexture(canvas2, "texture1.jpg"); // loading texture

		const glRenderer2 = new GLCanvas(canvas2, "metalocc.frag", (rd) => {
			rd.setTexture("u_texture1", texture0, 0); // set texture to webgl program
		}); // rq: loop callback is undefined here

		// ------------------------------------------------
		// Pause and resume rendering on canvas click
		glRenderer1.canvas.addEventListener('click', () => {
			if (glRenderer1.isPaused()) glRenderer1.start();
			else                        glRenderer1.pause();
		});
	  	glRenderer2.canvas.addEventListener('click', () => {
			if (glRenderer2.isPaused()) glRenderer2.start();
			else  			    glRenderer2.pause();
		});


    </script>
  </body>
</html>