I am trying to write a continuous simulation loop on canvas, using gpu.js. The idea is to:
Generate an initial w * h * 4 array (Uint8ClampedArray to be more specific)
Write a gpu.js kernel, that processes that data and outputs result with this.color
return the data with getPixels() and override the initial data
pass the data returned in step 3 to the next simulation
repeat steps 3-5 in a render loop
However:
The kernel does not use the data from the previous iteration (even though when I check the map variable from the browser console, it does contain results from the previous iteration). You can see that the pixels are not increasing in lightness over first couple of iterations, but are just replaced.
After a couple of render calls, the entire thing starts to glitch out entirely, drawing almost full lines of the same pixel data.
The left-side area is not a result of failed recording - it does look like this in the browser.
In the example code below, RGB pixels are clamped on increasing the value to avoid any overflow possibilities.
It's just an experiment a'la the game of life, so let's say 2 (I take my hobby experiments seriously, but let's be honest - I am just playing with the tech).
Expected behaviour (i.e. solution)
I expected, that the image would start black, and then with each iteration, some pixels would become lighter and lighter until the image is entirely white.
Other Comments
I was trying this with several different approaches (separate kernel for processing, separate for rendering, different operations within the kernel etc), but the result was always glitchy. Even If I had just a loop that always draws whatever is in mapData and then would execute something like map[0] - 255 from the browser console, the loop would glitch out after a several loops.
What is wrong?
I am trying to write a continuous simulation loop on canvas, using gpu.js. The idea is to:
w * h * 4
array (Uint8ClampedArray
to be more specific)this.color
getPixels()
and override the initial dataHowever:
map
variable from the browser console, it does contain results from the previous iteration). You can see that the pixels are not increasing in lightness over first couple of iterations, but are just replaced.Here is the recorded result:![gpu js-failed-simulation](https://user-images.githubusercontent.com/2618837/168488205-57a554a8-8941-4bfc-8342-1ab2e5920deb.gif)
Where does it happen?
In the browser. (chrome 101.0.4951.67)
How do we replicate the issue?
Here is a sample I wrote:
How important is this (1-5)?
It's just an experiment a'la the game of life, so let's say 2 (I take my hobby experiments seriously, but let's be honest - I am just playing with the tech).
Expected behaviour (i.e. solution)
I expected, that the image would start black, and then with each iteration, some pixels would become lighter and lighter until the image is entirely white.
Other Comments
I was trying this with several different approaches (separate kernel for processing, separate for rendering, different operations within the kernel etc), but the result was always glitchy. Even If I had just a loop that always draws whatever is in
mapData
and then would execute something likemap[0] - 255
from the browser console, the loop would glitch out after a several loops.