diff options
| author | Mitya Selivanov <automainint@guattari.tech> | 2024-11-01 03:28:20 +0100 |
|---|---|---|
| committer | Mitya Selivanov <automainint@guattari.tech> | 2024-11-01 03:28:20 +0100 |
| commit | eb0c1592d49de956c8c4d83a831fab3cf0372acb (patch) | |
| tree | 51af9b577499b85397267baed0db96046e12aefe /index.htm | |
| parent | 3d1e81ef18c4b2138b834459262f262e44a3397d (diff) | |
| download | reduced_system_layer-eb0c1592d49de956c8c4d83a831fab3cf0372acb.zip | |
Simple WebAssembly impl
Diffstat (limited to 'index.htm')
| -rw-r--r-- | index.htm | 79 |
1 files changed, 76 insertions, 3 deletions
@@ -1,7 +1,80 @@ -<html> +<!DOCTYPE html> +<html style="height: 100%; overflow: hidden; overflow-x: hidden;"> <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width,initial-scale=1"> + <link rel='icon' type='image/gif' href='/favicon.gif'> + <title> Reduced System Layer </title> </head> - <body> - Hello, Sailor! + <body style="margin: 0; height: 100%; overflow: hidden; overflow-x: hidden;"> + <canvas style="margin: 0; width: 100%; height: 100%;" id="frame" oncontextmenu="event.preventDefault()"></canvas> + <script type="text/javascript"> + async function run() { + let canvas; + let program; + let memory_view; + let pixels_address; + let context; + let animation_frame; + + canvas = document.getElementById("frame"); + context = canvas.getContext("2d"); + + program = await WebAssembly.instantiateStreaming( + fetch("index.wasm"), + { + "wasi_snapshot_preview1" : { + args_sizes_get : (...args) => { console.log(`args_sizes_get: ${args}`); }, + args_get : (...args) => { console.log(`args_get: ${args}`); }, + proc_exit : (...args) => { console.log(`proc_exit: ${args}`); }, + clock_time_get : () => { return Date.now(); }, + fd_close : (...args) => { console.log(`fd_close: ${args}`); }, + fd_write : (...args) => { console.log(`fd_write: ${args}`); }, + fd_seek : (...args) => { console.log(`fd_seek: ${args}`); }, + }, + "env" : { + p_init : () => { + program.instance.exports.js_init(); + memory_view = new Uint8Array(program.instance.exports.memory.buffer); + pixels_address = program.instance.exports.js_pixels(); + }, + p_render_frame_impl : () => { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + + let data = new ImageData( + new Uint8ClampedArray( + memory_view.subarray( + pixels_address, + pixels_address + 4 * canvas.width * canvas.height + ) + ), + canvas.width, + canvas.height + ); + + context.putImageData(data, 0, 0); + }, + p_cleanup : () => {}, + p_handle_events : () => {}, + p_wait_events : () => {}, + p_sleep_for : (time) => {}, + p_time : Date.now, + }, + } + ); + + program.instance.exports.js_main(); + + animation_frame = (time) => { + program.instance.exports.js_frame(canvas.width, canvas.height); + window.requestAnimationFrame(animation_frame); + }; + + window.requestAnimationFrame(animation_frame); + } + + run().catch((e) => console.error(e)); + </script> </body> </html> |