WebGL 2D Rendering with PixiJS

Ego Slide

f.strazzullo@extrategy.net

@TheStrazz86

https://github.com/francesco-strazzullo

https://medium.com/@TheStrazz86

https://slides.com/francescostrazzullo

https://taskomat.tech/it/

http://codingjam.it/

( we have slack! )

WebGL

Really Fast Rendering

WebGL (Web Graphics Library) is a JavaScript API for rendering 3D graphics within any compatible web browser without the use of plug-ins

Wikipedia

Chrome Experiments - WebGL

With WebGL you can build very cool applications...

So why does no one use this API?

function buffer(node) {
      var minNodeX = node.minX;
      var minNodeY = node.minY;
      var minNodeZ = node.minZ;
      var nodeSize = node.blockSize;
      var array = node.buffer;
      // Get mins and maxes in node space.
      var min2_x = Math.max(min_x - minNodeX, 0);
      var max2_x = Math.min(max_x - minNodeX, nodeSize);
      var min2_y = Math.max(min_y - minNodeY, 0);
      var max2_y = Math.min(max_y - minNodeY, nodeSize);
      var min2_z = Math.max(min_z - minNodeZ, 0);
      var max2_z = Math.min(max_z - minNodeZ, nodeSize);
      for (var z = min2_z; z < max2_z; ++z) {
        var z_offset = nodeSize * nodeSize * z;
        var fz = minNodeZ + z - ballz;
        var fz2 = fz * fz;
        for (var y = min2_y; y < max2_y; ++y) {
          var y_offset = z_offset + nodeSize * y;
          var fy = minNodeY + y - bally;
          var fy2 = fy * fy;
          for (var x = min2_x; x < max2_x; ++x) {
            var fx = minNodeX + x - ballx;
            var fx2 = fx * fx;
            var dist = Math.sqrt(fx2 + fy2 + fz2);
            var val = Math.pow(dist / radius, 2.0);
            array[y_offset + x] *= Math.max(Math.min(val, 1.0), 0.0);
          }
        }
      }
      if (min2_x < max2_x && min2_y < max2_y && min2_z < max2_z) {
        node.dirty = true;
      }
    }
    tree.walkSubTree(min_x, max_x, min_y, max_y, min_z, max_z, uniform, buffer);
    //tree.walkTree(uniform, buffer);
  }