CODEWITHSUNDEEP
svgsvg-filters
sqwk
sqwk

Reputation: 2699

Evaluating SVG Filter Performance (Alphamap)

Is there a known tool to evaluate SVG Filter Performance? I am generating an alphamap using the following SVG node, but am struggling a little with the performance.

<feColorMatrix result="alphaOut" in="SourceGraphic" type="matrix" values="0 0 0 0 1, 0 0 0 0 1, 0 0 0 0 1, 0 0 0 1 0" />

Is there a way to quantify rendering times for SVG filters? Alternativly, does anybody know a better way to extract alpha information using SVG filters?

Upvotes: 1

Views: 309

Answers (1)

Holger Will
Holger Will

Reputation: 7526

Idea for measuring performance taken from https://developers.google.com/web/updates/2012/07/How-to-measure-browser-graphics-performance

function draw(x) {
  var g = document.createElementNS("http://www.w3.org/2000/svg", "g")
  g.id = "canvas"
  canvas.parentNode.replaceChild(g, canvas)
  for (var i = 1; i < x; i++) {
    var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect")
    rect.setAttribute("width", "100")
    rect.setAttribute("height", "100")
    rect.setAttribute("filter", "url(#" + filter + ")")
    rect.setAttribute("fill", "rgba(128,128,128,0.8)")
    rect.setAttribute("x", Math.random() * 300)
    rect.setAttribute("y", Math.random() * 300)
    g.appendChild(rect)
  }

}
var filter = "f1"
var t, previousTime;
var drawLoad = 1;
var slowCount = 0;
var maxSlow = 10;
// Note, you might need to polyfill performance.now and requestAnimationFrame
t = previousTime = performance.now();
var tick = function() {
  var maximumFrameTime = 1000 / 30; // 30 FPS
  t = performance.now();
  var elapsed = t - previousTime;
  previousTime = t;
  if (elapsed < maximumFrameTime || slowCount < maxSlow) {
    if (elapsed < maximumFrameTime) {
      drawLoad += 10;
    } else {
      slowCount++;
    }
    draw(drawLoad);
    requestAnimationFrame(tick);
  } else {
    // found maximum sustainable load at 30 FPS
    document.getElementById('res').innerHTML = ("could draw " + (drawLoad) + " in " +
      maximumFrameTime + " ms");
  }

};
requestAnimationFrame(tick);
svg {
  background: beige
}
<button onclick="filter='f1';drawLoad=1;slowCount=0;requestAnimationFrame(tick)">test filter 1</button>
<button onclick="filter='f2';drawLoad=1;slowCount=0;requestAnimationFrame(tick)">test filter 2</button>
<div id="res"></div>

<svg width="400" height="400">
  <filter id="f1">
    <feColorMatrix result="alphaOut" in="SourceGraphic" type="matrix" values="0 0 0 0 1
        0 0 0 0 1
        0 0 0 0 1
        0 0 0 1 0" />
  </filter>
  <filter id="f2">
    <feMerge>
      <feMergeNode dx="1" dy="1" in="SourceAlpha" />
    </feMerge>
  </filter>
  <g id="canvas">
  </g>
</svg>

Upvotes: 1

Related Questions