I am working on a web 2d world generation and simulation. I generate a 2d terrain (different cell shapes and colors) using perlin noise and some random function in different web workers. Those workers feed a cache which contains the different chunks and their data. When a chunk receives data from its worker, it automatically updates its buffer:
(chunk) => {
this.webgl.bindBuffer(this.webgl.ARRAY_BUFFER, chunk.vertexBuffer);
this.webgl.bufferData(this.webgl.ARRAY_BUFFER, chunk.vertexes, this.webgl.STATIC_DRAW);
this.webgl.bindBuffer(this.webgl.ARRAY_BUFFER, chunk.colorBuffer);
this.webgl.bufferData(this.webgl.ARRAY_BUFFER, chunk.colors, this.webgl.STATIC_DRAW);
}
I also have a kind of game loop which calls itself at every requestAnimationFrame and draw its chunk.
cache.forEachChunk(center.current, scale.current, (chunk) => {
gl.bindBuffer(gl.ARRAY_BUFFER, chunk.colorBuffer);
const fillColor = gl.getAttribLocation(shaderProgram, "fillColor");
gl.enableVertexAttribArray(fillColor);
gl.vertexAttribPointer(fillColor, 3,
gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, chunk.vertexBuffer);
const position = gl.getAttribLocation(shaderProgram, "position");
gl.enableVertexAttribArray(position);
gl.vertexAttribPointer(position, 2,
gl.FLOAT, false, 0, 0);
if (chunk.vertexes)
gl.drawArrays(gl.TRIANGLES, 0, chunk.vertexes.length / 2);
})
This works very well ...except that there is a little freeze every time a chunk receives data from its workers: in fact calling bufferData is pretty slow but above all, it is blocking my application. Is there any way to do this in a web worker or any other strategy to be able to send data to my graphics card without blocking my whole application? Blocking it doesn't make sense: the graphics card should still be able to draw the other chunks without worry.
bufferData creates a completely new data store. Think of it as buffer allocation and initialization. If you just want to update an existing buffer, use bufferSubData (see also Buffer objects). bufferSubData simply writes the data into an existing buffer without re-creating the data store, so it's much faster. Of course, bufferSubData cannot change the size of the data memory and you have to "allocate" the buffer once with bufferData. However, there is no need to pass data to the buffer when you initialize it. This means that the data argument of bufferData can be null.