mva_labwork/example_basic.html at master · lnstadrum/mva_labwork · 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
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Knob/1.2.13/jquery.knob.min.js"></script>
</head>

<body>

<!-- Canvas element to display results.
     Provides WebGL context, which makes everything to work. -->
<canvas id="canvas"></canvas>

<!-- Source image content to use as textures.
     To add new images put <img> entries with different "id" and "src" attributes.
     Warning: WebGL cannot load local files to textures, a webserver is required. -->
<img id="carousel_1mpix" src="http://199.247.15.26/carousel_1mpix.jpg" crossorigin="anonymous"/>

<!-- Other images (uncomment the corresponding lines to load some of them):
  <img id="carousel_4mpix" src="http://199.247.15.26/carousel_4mpix.jpg" crossorigin="anonymous"/>
  <img id="carousel_11mpix" src="http://199.247.15.26/carousel_11mpix.jpg" crossorigin="anonymous"/>
  <img id="boat_1mpix" src="http://199.247.15.26/boat_1mpix.jpg" crossorigin="anonymous"/>
  <img id="boat_4mpix" src="http://199.247.15.26/boat_4mpix.jpg" crossorigin="anonymous"/>
-->


<!-- Fragment shader example. -->
<script  id="fragmentShaderExample" type="x-shader/x-fragment">
  precision highp float;

  // input image texture
  uniform sampler2D inputImage;

  // texture coordinates corresponding to the current output pixel position
  varying vec2 texCoord;

  void main() {
    // sample the input image
    vec4 color = texture2D(inputImage, texCoord);

    // shuffle color channels and write out
    gl_FragColor = color.bgra;
  }
</script>


<!-- Main script -->
<script>
  function main() {
    // Initialize WebGL
    const canvas = document.getElementById("canvas")
    initialize(canvas)

    // Set image display resolution
    canvas.width = 1024
    canvas.height = 1024

    // Setup a program
    const program = buildProgram("fragmentShaderExample");

    // Make output texture
    const output = makeEmptyTexture(1024, 1024)

    // Fill inputs: just a single texture
    const inputs = {
      inputImage: makeTextureFromImage("carousel_1mpix")
    }

    // Run the program once
    runProgram(program, inputs, output)

    // Run the same program again
    const anotherOutput = makeEmptyTexture(1024, 1024)
    runProgram(program, {inputImage: output}, anotherOutput)

    displayTexture(anotherOutput)
  }
</script>


<!-- Framework script -->
<script src="script.js"></script>

</body>
</html>