HTML5 and Javascript: Web Workers

OK this will be a big post.

Web workers allow us access to other threads. Threads can be processed by idle processors within the CPU architecture. Multi-processor systems use the same battery power regardless of how many processors are being used, so multi-threading is crucial in battery powered devices.

Lets get to it.

This is from W3SCHOOLS.

First a worker has to exist!
We create a web worker script called "demo_workers.js".

This is the HTML5 code to implement the worker.

The problem is the worker continually processes this code. We need more control over our workers.

This is from HTML5 UNLEASHED.

And here is the workers .JS file.

This is a different usage of web workers. Instead of being continually processed the worker is only called when we need to use it.

OK so lets try and get a worker thread to draw to a canvas.

And here is the workers .JS file.

OK as you can see, A canvas is created then we get a 32-bit Typed Array called dat. I am not passing the array to the worker because this will be the final engine that will render Graph3D.

Instead I am going to pass positionx, positiony,positionz,rotationx,rotationy, and rotationz.

Only 6 numbers are sent to the worker this is very efficient.

The worker .JS file, creates a Typed Array called wdat. The first time the worker runs it creates the array, then it processes the 'message'.

A pixel in the canvas has the format

ALPHA << 24 | BLUE<<16|GREEN<<8|RED.

So the alpha value is the color RED.

The canvas has a BLUE color as it starts:

After the button is clicked the Worker writes the color red to all pixels on the canvas.

This is a good start.

If you enter the code yourself you will notice you have to press the button twice. This is because the message is sent to the worker and the canvas putImageData function draws to the canvas before the worker updates it. To fix this place putImageData in the worker onmessage function like so:

Now when the button is pressed the canvas updates almost instantly. Was worried about how fast it would render, at the moment it is fast enough for my needs.

Works on FireFox and Microsoft Edge, however on Chrome as usual you will get this error.

A possible way to fix this is with the new FILESYSTEM API or buy a domain and set the domain up and get it running just to test a basic scenario. This is a CORS error, use python simple server to serve files to localhost. CORS is a very important internet security system, do not try to circumvent it. Apologies to Google.

OK wrote a version that sends the ImageData to a worker processes it and sends it back. The version I have described is at least 2 times faster. Has a slight problem with synchronization but is much faster. And on my i7 lightening fast.

Have to write a structured cloning version but GC can be expensive, may use the above version.

So now I have FOUR CORES writing to the canvas.