Как улучшить производительность HTML рисования пикселей - PullRequest
Новая
       16

Как улучшить производительность HTML рисования пикселей

0 голосов
/ 21 октября 2019

Я рисую визуализацию данных на HTML-холсте 600x600 пикселей. Каждый пиксель требует около 10 сложений / умножений, поэтому немного вычислений, но не тонны. К сожалению, на рисование уходит около полсекунды. Что означает, что мои ползунки, которые обычно влияют на каждый пиксель, не обновляют визуализацию плавно.

Можно ли улучшить производительность, рисуя более эффективным способом? В настоящее время я вызываю следующее для каждого пикселя: 

ctx.fillStyle = computedPixelColor
ctx.fillRect(x, y, 1, 1)

Я прочитал, что создание изображения и изменение пикселей, а затем вставка этого изображения в HTML выполняется медленнее. Это правда? Есть ли хаки для этого процесса?

1 Ответ

1 голос
/ 21 октября 2019

Пример эффекта Муара, популярного в демонстрациях 90-х. Эта реализация с прямыми манипуляциями ImageData имеет для меня время кадра 4-5 мс (вычисление 600x600 пикселей и отображение результата с putImageData()), хотя это относительно новый ПК. Конечно, ваши расчеты могут иметь большое значение, этот прост. 

var ctx=cnv.getContext("2d");
var data=ctx.createImageData(600,600);
var buf=new Uint32Array(data.data.buffer);

function draw(x1,y1,x2,y2){
  var i=0;
  for(var y=0;y<600;y++)
    for(var x=0;x<600;x++){
      var d1=(Math.sqrt((x-x1)*(x-x1)+(y-y1)*(y-y1))/10) & 1;
      var d2=(Math.sqrt((x-x2)*(x-x2)+(y-y2)*(y-y2))/10) & 1;
      buf[i++]=d1==d2?0xFF000000:0xFFFFFFFF;
    }
  ctx.putImageData(data,0,0);
}

var cnt=0;
setInterval(function(){
  cnt++;
  var start=Date.now();
  draw(300+300*Math.sin(cnt*Math.PI/180),
       300+300*Math.cos(cnt*Math.PI/180),
       500+100*Math.sin(cnt*Math.PI/100),
       500+100*Math.cos(cnt*Math.PI/100));
  t.innerText="Frame time:"+(Date.now()-start)+"ms";
},20);
<div id="t"></div>
<canvas id="cnv" width="600" height="600"></canvas>

Для сравнения, тот же эффект для каждого пикселя fillRect() s дает время кадра 205 мс: 

var ctx=cnv.getContext("2d");

function draw(x1,y1,x2,y2){
  //ctx.clearRect(0,0,600,600);
  //ctx.fillStyle="black";
  for(var y=0;y<600;y++)
    for(var x=0;x<600;x++){
      var d1=(Math.sqrt((x-x1)*(x-x1)+(y-y1)*(y-y1))/10) & 1;
      var d2=(Math.sqrt((x-x2)*(x-x2)+(y-y2)*(y-y2))/10) & 1;
      //if(d1==d2)ctx.fillRect(x,y,1,1);
      ctx.fillStyle=d1==d2?"black":"white";
      ctx.fillRect(x,y,1,1);
    }
}

var cnt=0;
setInterval(function(){
  cnt++;
  var start=Date.now();
  draw(300+300*Math.sin(cnt*Math.PI/180),
       300+300*Math.cos(cnt*Math.PI/180),
       500+100*Math.sin(cnt*Math.PI/100),
       500+100*Math.cos(cnt*Math.PI/100));
  t.innerText="Frame time:"+(Date.now()-start)+"ms";
},20);
<div id="t"></div>
<canvas id="cnv" width="600" height="600"></canvas>

Даже если используется «оптимизированный» вариант (с использованием глобальных clearRect() и fillRect() только черных пикселей, см. Прокомментированные части),это все еще требует 60-70-80 мс на кадр (скорость сильно колеблется).
Итак, что бы вы ни делали для каждого пикселя, действительно прочитайте учебник Mozilla о ImageData, как предложено вкомментарии, использование прямого буфера имеет большое значение.

...