在将大型数组传递给webworker时不断增加内存使用量

时间:2017-07-25 19:29:13

标签: javascript web-worker babylonjs

我目前正在使用babylonjs进行一些3D建模。我需要根据特定点的给定压力创建压力图。我正在使用IDW这样做。然而,这意味着即使我的地图大小为70x90网格,也要求我拥有25200(每个像素4个rgba值)条目的数组。然后将此缓冲区传递给RawTexture,以将其分配给覆盖在对象上的材质

我正在使用网络工作者,因为我必须每100毫秒更新压力值并且我不想阻止主线程。当我返回该数组(在calculate函数中创建时出现问题)来自服务工作者。

出于某种原因,内存使用率不断上升,而不会停止。它最终上升到大约1.5千兆字节,我不得不杀死它。

问题:有什么办法可以阻止这种情况以及可能造成如此高内存使用的原因吗?

工人:

// @flow
import { find, propEq, both } from 'ramda';
import { colorFromValue } from './color';
import { inverseDistance, distanceValues } from './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);

  for (let y = 0; y < height; y += 1) {
    const rW = y * gridWidth;
    for (let i = 0; i < gridWidth; i += 4) {
      const index = i + rW;
      const x = i / 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]);
};

绘画:

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

1 个答案:

答案 0 :(得分:2)

所以似乎问题出现在colorFromValue函数中。因为这些值的小数点很少,所以最多可以创建9个小数点!新条目进入缓存,因此它推动了内存使用......