-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
267 lines (235 loc) · 8.64 KB
/
index.html
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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WASM + WASI</title>
</head>
<body style="background-color: darkslategray;">
<h1 style="color: beige; font-size: 36px;">WASM + WASI</h1>
<p style="color: beige; font-size: 20px">
This is a repository covering all
<code
style="
padding-left: 4px;
padding-right: 4px;
background: #2e2e2e94;
color: white;
"
>WASM</code
>
and
<code
style="
padding-left: 4px;
padding-right: 4px;
background: #2e2e2e94;
color: white;
"
>WASI</code
>
related build outputs for a variety of languages. See the
<code
style="
padding-left: 4px;
padding-right: 4px;
background: #2e2e2e94;
color: white;
"
>/src</code
>
folder to view the languages used. See the
<code
style="
padding-left: 4px;
padding-right: 4px;
background: #2e2e2e94;
color: white;
"
>README.md</code
>
at the root, and in the
<code
style="
padding-left: 4px;
padding-right: 4px;
background: #2e2e2e94;
color: white;
"
>WASI</code
>
subdirectory for more information.<br></br>All output will appear in the browser
console, unless using external runners, like
<code
style="
padding-left: 4px;
padding-right: 4px;
background: #2e2e2e94;
color: white;
"
>wasmtime</code
>.
</p>
<!-- buildHTML - use Emscripten provided HTML Rendering -->
<!-- See build/gol.html -->
<!-- Shared WebAssembly.memory -->
<!-- <script type="module">
// Use Atomic shared memory
// Compile the WebAssembly module
const wasmModule = await WebAssembly.compileStreaming(
fetch("build/shared_memory.wasm")
);
// Create a shared memory with initial size of 1 page (64KB) and maximum size of 1 page
const sharedMemory = new WebAssembly.Memory({
initial: 1,
maximum: 1,
shared: true,
});
// Instantiate the module, passing the shared memory
const instance = await WebAssembly.instantiate(wasmModule, {
env: {
memory: sharedMemory,
},
});
console.log("Instance:", instance);
console.log("Memory:", sharedMemory); // MDN: WebAssembly.Memory https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory
console.log("Memory Buffer:", sharedMemory.buffer); // MDN: SharedArrayBuffer https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
// Get the memory from the instance
const buffer = new Uint8Array(sharedMemory.buffer);
// Read the initial value set by WebAssembly
console.log(buffer[0]); // Should print 69
// Modify the value from JavaScript
buffer[0] = 100;
// Read the modified value
console.log(buffer[0]); // Should print 100
</script> -->
<!-- buildWAT - Use .WAT to Inform WASM of instructions. -->
<!-- <script>
const memory = new WebAssembly.Memory({
initial: 10,
maximum: 100,
});
WebAssembly.instantiateStreaming(fetch("build/memory.wasm"), {
js: { mem: memory },
}).then((obj) => {
const summands = new DataView(memory.buffer);
console.log("Memory:", memory, memory.buffer);
for (let i = 0; i < 10; i++) {
summands.setUint32(i * 4, i, true);
}
const sum = obj.instance.exports.accumulate(0, 10);
console.log("use asserted export 'accumulate' from .wat : ", sum); // 45
});
</script> -->
<!-- WASI Pure and Standalone Files - Use WASI Preview Snapshot and WASI Bindings from W3C WASI ABI -->
<!-- Because the intended use of these files is to be run anywhere, most WASM examples are WASI enabled using emcc's STANDALONE_WASM -->
<!-- <script type="module" src="src/wasi/wasi.js"></script> -->
<!-- Start Vector Comparisons - one works with simple 3 element allocation, then others 10k+ element allocs (see buildVEC) -->
<!-- Vec Shared C - Using a larger memory structure from C instead of representing the vector as a struct -->
<!-- <script type="module" src="src/js/vectorsShared.js"></script> -->
<!-- Vec Shared Normal JS -->
<!-- <script type="module" src="src/js/vectorsSharedJS.js"></script> -->
<!-- C / EMCC -->
<!-- <script type="module" src="src/js/vectors.js"></script> -->
<!-- Normal JS -->
<!-- <script type="module" src="src/js/vectorsJS.js"></script> -->
<!-- End Vector Comparisons -->
<!-- buildAccessor - Run Assembled JS Module & use ccall w C++ -->
<!-- <script src="build/gol.js"></script> -->
<!-- <script>
function callCppFunction() {
try {
console.log("Calling C++ function with the appended Module:", Module);
Module.ccall("myFunction", null, [], []);
} catch (error) {
console.error("Error calling C++ function:", error);
}
}
</script> -->
<!-- <button onclick="callCppFunction()">Call C++ Function</button> -->
<!-- buildWASM - Compile and Instantiate WASM Module -->
<!-- <script>
async function fetchWasm(url) {
const response = await fetch(url);
return await response.arrayBuffer();
}
async function run() {
try {
const wasmBuffer = await fetchWasm("build/gol.wasm");
const wasmModule = await WebAssembly.compile(wasmBuffer);
const wasmInstance = await WebAssembly.instantiate(wasmModule, {
wasi_snapshot_preview1: {
environ_sizes_get: () => 0,
environ_get: () => 0,
proc_exit: (exitCode) => {
console.log(`Process exited with code ${exitCode}`);
},
fd_write: () => 0,
// have to read stdout's utf8 string from memory. This is a bit tricky using wasm / js memory accessors
// because if the memory ever grows, the pointer to the string will change.
// should use emcc's cwrap, EM_JS, or EM_ASM to output to console,
fd_seek: () => 0,
fd_close: () => 0,
},
env: {},
});
if (!wasmInstance) {
throw new Error("Failed to instantiate WASM module");
}
console.log("Instantiation result:", wasmInstance);
console.log("Exports:", wasmInstance.exports);
console.log("Main Func:", wasmInstance.exports.main()); // 0
console.log("Custom Function:", wasmInstance.exports.myFunction()); // 1
} catch (error) {
console.error("Error:", error);
}
}
run();
</script> -->
<!-- buildSimple - Print a string from C to JS -->
<!-- <script>
async function fetchWasm(url) {
const response = await fetch(url);
return await response.arrayBuffer();
}
async function run() {
try {
const wasmBuffer = await fetchWasm("build/simple.wasm");
const wasmModule = await WebAssembly.compile(wasmBuffer);
const wasmInstance = await WebAssembly.instantiate(wasmModule, {
wasi_snapshot_preview1: {
environ_sizes_get: () => 0,
environ_get: () => 0,
proc_exit: (exitCode) => {
console.log(`Process exited with code ${exitCode}`);
},
fd_write: () => {
console.log("Writing to file descriptor");
},
fd_seek: () => 0,
fd_close: () => 0,
},
env: {},
});
// Create a Uint8Array view of the linear memory
const linearMemory = new Uint8Array(
wasmInstance.exports.memory.buffer
);
console.log("Linear Memory:", linearMemory);
// Get the offset
const offset = wasmInstance.exports.getMessage();
// Extract the message
const buffer = linearMemory.slice(offset, offset + 32); // 32 is the char length of the message.
let str = "";
for (let i = 0; i < buffer.length; i++) {
str += String.fromCharCode(buffer[i]);
}
console.log(str);
} catch (error) {
console.error("Error:", error);
}
}
run();
</script> -->
</body>
</html>