Estoy trabajando en una generación y simulación de un mundo web 2d. Genero un terreno 2d (diferentes formas y colores de celdas) usando ruido perlin y alguna función aleatoria en diferentes trabajadores web. Esos trabajadores alimentan un caché que contiene los diferentes fragmentos y sus datos. Cuando un fragmento recibe datos de su trabajador, actualiza automáticamente su búfer:

 (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); }

También tengo una especie de bucle de juego que se llama a sí mismo en cada requestAnimationFrame y dibuja su parte.

 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); })

Esto funciona muy bien... excepto que se congela un poco cada vez que un fragmento recibe datos de sus trabajadores: de hecho, llamar a bufferData es bastante lento pero, sobre todo, bloquea mi aplicación. ¿Hay alguna forma de hacer esto en un trabajador web o alguna otra estrategia para poder enviar datos a mi tarjeta gráfica sin bloquear toda mi aplicación? Bloquearlo no tiene sentido: la tarjeta gráfica aún debería poder dibujar los otros fragmentos sin preocupaciones.