javascript - Constantly increasing memory usage when passing around huge arrays to webworker -
i doing 3d modeling using babylonjs. need create pressure map given pressure @ specific points. doing using idw. means map being size of 70x90 grid requires me have array of 25200 (4 rgba values each pixel) entries. buffer passed rawtexture
assigning material, overlaid on object
i using web worker, because have update pressure values every 100ms , don't want block main thread.the issue occurs when return array (created in calculate
function) service worker.
for reason memory usage keeps going up, without stopping. goes around 1.5 gigabytes , have kill it.
the question : there way prevent , causing such high memory usage?
worker:
// @flow import { find, propeq, both } 'ramda'; import { colorfromvalue } './color'; import { inversedistance, distancevalues } './math'; const findpoint = (x: number, y: number) => find(both(propeq('x', x), propeq('y', y))); const distancedict = {}; /* eslint-disable */ function calculate(options: object, plist: array<*>) { const points = plist || []; const { height, width } = options; const gridwidth = width * 4; const grid = new uint8array(options.width * options.height * 4); (let y = 0; y < height; y += 1) { const rw = y * gridwidth; (let = 0; < gridwidth; += 4) { const index = + rw; const x = / 4; const dictkey = `${x}--${y}`; let bottoms = distancedict[dictkey]; if (bottoms === undefined) { bottoms = distancevalues(points, x, y); distancedict[dictkey] = bottoms; } const point = findpoint(x, y)(points); const value = point !== undefined && point !== null ? point.value : inversedistance(points, bottoms); const color = colorfromvalue(value); grid[index] = color[0]; grid[index + 1] = color[1]; grid[index + 2] = color[2]; grid[index + 3] = 255; } } return grid; } self.onmessage = (e) => { const { points, options } = e.data; const grid = calculate(options, points); self.postmessage(grid.buffer, [grid.buffer]); };
painting:
modifynodes = (points: array<*>) => new promise((res, rej) => { this.worker.onmessage = (e) => { this._texture.update(new uint8array(e.data)); res(); } const data = { options: this._options, points, }; this.worker.postmessage(data); })
so seems issue in colorfromvalue
function memoized. because values had quite few decimal points create 9! new entries cache, drove memory usage...
Comments
Post a Comment