Here is an example about how to write stl file to wasm virtual memory and make wasm module read it.
We need to add write file logic in onRuntimeInitialized for wasm module.
index.html:
<html>
<head>
<!-- Load WebAssembly module -->
<script type="text/javascript" src="threadTest.js"></script>
</head>
<body>
<canvas id="canvas" style="position: absolute; left: 0; top: 0; width:100%; height:100%"></canvas>
<button id="button" style="position: absolute; left: 0; bottom: 0;"> update </button>
<script>
function $(id){ return document.getElementById(id); }
var workerObj = null;
var Module = {
canvas: (function () {
var canvas = document.getElementById('canvas');
canvas.addEventListener(
"webglcontextlost",
function (e) {
console.error('WebGL context lost. You will need to reload the page.');
e.preventDefault();
},
false
);
return canvas;
})(),
onRuntimeInitialized: function () {
workerObj = new Module.Worker();
workerObj.Init();
// write stl to wasm virtual memory
fetch('/u.stl')
.then(response => response.arrayBuffer())
.then(buffer => {
const data = new Uint8Array(buffer);
Module.FS.writeFile('/u.stl', data);
console.log( "write finished!" );
});
workerObj.Start();
console.log( "StartWork!" );
},
};
var app = tester(Module);
console.log('App created');
$('button').onclick = function()
{
const maxWorkers = navigator.hardwareConcurrency;
console.log( "maxWorkers: ", maxWorkers );
console.log("UpdateData");
workerObj.UpdateData();
}
</script>
</body>
</html>
C++ code for wasm module:
binding.cpp
#include <emscripten/bind.h>
#include "Worker.h"
using namespace emscripten;
EMSCRIPTEN_BINDINGS(worker) {
class_<Worker>("Worker")
.constructor()
//...
.function("UpdateData", &Worker::UpdateData)
;
}
Worker.cpp
void Worker::UpdateData()
{
vtkSPtrNew( reader, vtkSTLReader );
reader->SetFileName( "/u.stl" );
reader->Update();
auto initData = reader->GetOutput();
//...
}
All code has been upload to GitHub:
https://github.com/theArcticOcean/webLib/tree/main/threadTest
