Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Высокопроизводительные визуализации данных в бр...

Высокопроизводительные визуализации данных в браузере (CodeFest)

Vladimir Agafonkin

March 29, 2013
Tweet

More Decks by Vladimir Agafonkin

Other Decks in Programming

Transcript

  1. var tree = new RTree(); tree.insert( {x: 5, y: 10,

    w: 10, h: 15}, obj); ... tree.search( {x: 7, y: 7, w: 5, h: 5}); github.com/imbcmdth/RTree
  2. importScripts('data.js'); ... onmessage = function (e) { var result =

    searchData(e.data.query); postMessage(result); } загрузка в Worker
  3. var array = new Float16Array(len); ... var buffer = array.buffer;

    postMessage(buffer, [buffer]); // с этого момента buffer недоступен transferable objects (Chrome, Firefox)
  4. function addNumbers(a, b) { 'use asm'; a = a |

    0; // int b = +b; // double return +(a + b); // double } светлое будущее — asm.js
  5. Canvas •после отрисовки не влияет на отзывчивость страницы •повторяющиеся части

    можно отрисовать один раз и раскопировать •можно попиксельно рисовать/ обрабатывать в Worker
  6. WebGL •основной способ для 3D- визуализаций •очень быстро в 2D,

    если нужно отрисовать много спрайтов •в остальных случаях преимущество в скорости перед Canvas-2D спорно
  7. WebGL •основной способ для 3D- визуализаций •очень быстро в 2D,

    если нужно отрисовать много спрайтов •в остальных случаях преимущество в скорости перед Canvas-2D спорно •API намного сложнее и неудобнее
  8. WebGL •основной способ для 3D- визуализаций •очень быстро в 2D,

    если нужно отрисовать много спрайтов •в остальных случаях преимущество в скорости перед Canvas-2D спорно •API намного сложнее и неудобнее •поддержки в IE и iOS не ожидается
  9. HTML •удобно использовать для текста и элементов интерфейса •очень удобно

    анимировать с помощью CSS Transitions •тормозит страницу при большом кол-ве объектов
  10. function drawStar() { var canvas = document.createElement('canvas'); ... // нарисовать

    звезду return canvas; } var star = drawStar(); ctx.drawImage(star, 10, 20); ctx.drawImage(star, 50, 70); ... копирование
  11. function drawLine(x1, x2, y1, y2) { ctx.strokeStyle = 'red'; ctx.beginPath();

    ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); } drawLine(10, 20, 30, 40); drawLine(200, 10, 0, 50); drawLine(30, 40, 70, 0);
  12. function drawLine(x1, x2, y1, y2) { ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2,

    y2); } ctx.strokeStyle = 'red'; drawLine(10, 20, 30, 40); drawLine(200, 10, 0, 50); drawLine(30, 40, 70, 0); ctx.stroke();
  13. var data = ctx.getImageData(0, 0, width, height).data; worker.postMessage(data, [data]); ...

    worker.onmessage = function (e) { var imageData = ctx.createImageData(width, height); imageData.data.set(e.data); ctx.putImageData(imageData, 0, 0); } Canvas + Worker
  14. var pixels = new Uint8ClampedArray( width * height); function drawPixel(x,

    y, r, g, b, a) { var i = 4 * (256 * y + x); pixels[i] = r; pixels[i + 1] = g; pixels[i + 2] = b; pixels[i + 3] = a; } ... postMessage(pixels.buffer, [pixels.buffer]); рисование пикселей в Worker
  15. var pixels = new Uint8ClampedArray(data); for (var x = 0;

    x < width; x++) { for (var y = 0; y < height; y++) { var i = 4 * (256 * y + x); pixels[i] = 2 * pixels[i]; pixels[i + 1] = 2 * pixels[i + 1]; pixels[i + 2] = 2 * pixels[i + 2]; } } ... postMessage(pixels.buffer, [pixels.buffer]); обработка пикселей в Worker