shadertoy_prototype/index.html at master · obox-systems/shadertoy_prototype · 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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Example of wasm shader runner usage</title>
    <link data-trunk rel="rust" data-wasm-opt="s" data-typescript />
    <style>
      html {
        width: 100%;
        height: 100%;
      }
      body {
        display: flex;
        flex-direction: column-reverse;
        margin: 0px;
        width: 100%;
        background-color: black;
        color: white;
      }
      canvas {
        background-color: black;
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div>
      <div>
        <br />
        <textarea
          id="input-shader-text"
          rows="20"
          cols="200"
          placeholder="Enter your shader code here..."
        ></textarea>
        <br />
        <button id="send-shader-button">Apply shader code</button>
        <button id="pause-button">Stop animation</button>
        <label for="speed">Playback speed:</label>
        <input type="range" id="speed" name="speed" min="-2" max="2" step="0.1" value="1">
        <output id="speed-text">1</output>
        <button id="lose-context">Test "Lose WebGL context"</button>
      </div>
      <div>
        <br />
        <textarea
          id="input-player-state"
          rows="20"
          cols="200"
          placeholder="Enter your shader code here..."
        >
{
    "uniforms": {
        "resolution": {
            "width": 1920,
            "height": 1080,
            "pixel_aspect_ratio": 1
        },
        "time": 3600,
        "time_delta": 0.02,
        "frame": 100,
        "frame_rate": 50,
        "mouse": {
            "x": 0,
            "y": 0,
            "down_x": 0,
            "down_y": 0
        },
        "date": {
            "year": 2024,
            "month": 10,
            "day": 30,
            "time": 3600
        }
    },
    "playback": {
        "paused": true,
        "speed": 1.0
    }
}
        </textarea>
        <br />
        <button id="send-player-state">Send custom player state</button>
      <div>

      <script type="module">
        // This code contains API calls, uses html controls to show how to use this API, and contains test code to ensure that wasm is not prone to failure.
        import {
          set_fragment_shader,
          update_player_state,
          play,
          stop,
        } from "/dynamic_javascript_filename.js";

        // Make functions accessible from browser console
        globalThis.set_fragment_shader = set_fragment_shader;
        globalThis.update_player_state = update_player_state;
        globalThis.play = play;
        globalThis.stop = stop;

        // Get elements for futher manipulations
        const inputShaderText = document.getElementById("input-shader-text");
        const sendShaderButton = document.getElementById("send-shader-button");
        const pauseButton = document.getElementById("pause-button");
        const inputPlayerState = document.getElementById("input-player-state");
        const sendPlayerState = document.getElementById("send-player-state");
        const speedInput = document.getElementById("speed");
        const speedText = document.getElementById("speed-text");

        // Init textarea with `shaders/shader.frag` content, as default shader code by build script
        inputShaderText.value = "default_shader_code_text";

        // Apply new shader, could be done multiple times during one session
        sendShaderButton.addEventListener("click", () => {
          set_fragment_shader(inputShaderText.value);
          console.log("Shader text applied");
        });

        // For the purpose of testing, sends json composed by the tester
        sendPlayerState.addEventListener("click", () => {
          update_player_state(JSON.parse(inputPlayerState.value));
        })

        let paused = false;
        pauseButton.addEventListener("click", () => {
          if (paused) {
            // Restores the animation by restoring the rendering, the animation can still be frozen if the animation speed is zero
            play();
            pauseButton.innerText = "Stop animation";
          } else {
            // Stops animation by stopping render
            stop();
            pauseButton.innerText = "Resume animation";
          }
          paused = !paused;
          // play()/stop() can be replaced by update_player_state({playback:{paused}});
        });

        // range input is used for controlling animation speed in range of -2..2, but API allows to set any float value for speed
        // negative value for reverse animation, zero speed will freeze the animation without turning off rendering
        speedInput.addEventListener("input", () => {
          speedText.value = speedInput.value;
          update_player_state({playback:{speed: parseFloat(speedInput.value)}});
        })

        addEventListener("TrunkApplicationStarted", (event) => {
          // Code sample for error reporting from wasm (for example about shader compilation errors)
          addEventListener("WasmErrorEvent", (event) => {
            // the `alert` was used for maximum visibility, the main thing is that the API returns a string with an error in the event without binding to the notification method
            alert("Wasm reported error: " + event.detail);
          });

          // this code is for testing purposes only, to simulate loss of context to ensure no crashes
          // should be skipped in production
          const loseContextButton = document.getElementById("lose-context");
          loseContextButton.addEventListener("click", () => {
            const canvas = document.querySelector("canvas");
            // Get the WebGL context from a canvas element
            const gl = canvas.getContext("webgl2");

            // Check if the WEBGL_lose_context extension is available
            const loseContext = gl.getExtension("WEBGL_lose_context");

            if (loseContext) {
              // Simulate context loss
              loseContext.loseContext();
              setTimeout(() => {
                loseContext.restoreContext();
              }, 3000); // Restore context after 3 seconds
            } else {
              console.error("WEBGL_lose_context extension not available");
            }
          });
        });
      </script>
    </div>
  </body>
</html>