Multi Web Worker Solution

Hello guys,

I am thinking about improving the look of my scene while keeping a good performance. In the docs I stumbled across screen space reflections for examples. Since this post process is quiet demanding I would love to know if it is possible to pass the computation of it to a web worker. Of course I am already using offscreen canvas but using several web worker each of them handling a specific post process would enhance the performance significantly since they can use their own threads? Does that work?

Best

Unfortunately (and this is a shame) workers cannot access webgl resources :frowning:

1 Like

That is really a shame. Too bad. I assume if there is a workaround you would know about it.

Oh yeah!

Hi,

I stumbled upon this topic and what about preparing the data using a Web Worker ?

I had performance issues when streaming and creating meshes at runtime, and I solved fixed that by web worker returning Float32Array for PositionKind and UVKind when using mesh.setVerticesData

The performance gain was immense :slight_smile:

Example: a mesh used 5-6ms before and now it uses ~0.5 ms as babylon does not need to take a round trip for data converting.

Would you like to share you solution? It may help others. Cheers :beers:

Sure here is an example with inline-web worker, done simple as possible :slight_smile:

<script id="webworker" type="javascript/worker">
        //note is javascript/worker.
        self.onmessage = function(e) { self.postMessage(new Float32Array(e.data)); };
        // Returns a Float32Array that can be directly used by babylonjs.
</script>
<script>
        var worker = new Worker(window.URL.createObjectURL(new Blob([document.querySelector('#webworker').textContent], { type: "text/javascript" })));
        var numbers = [1, 2, 3, 4, 5];
        worker.onmessage = function (e) {
            //example: babylon_mesh.setVerticesData(BABYLON.VertexBuffer.PositionKind,e.data)
            console.log('onmessage type Float32Array is '+ (e.data instanceof Float32Array));
        }
        console.log('postMessage type Float32Array is : ' + (numbers instanceof Float32Array))
        worker.postMessage(numbers); // array you want as Float32Array
</script>

edit: typos

1 Like