mikola-chrome.json

{
  "lowp": [
    [
      -1.0932616591453552,
      -0.6557616889476776
    ],
    [
      -0.8432616889476776,
      -0.405761674977839
    ],
    [
      -0.5932616889476776,
      -0.15576168149709702
    ],
    [
      -0.343261674977839,
      0.09423834457993507
    ],
    [
      -0.09326168522238731,
      0.34423835575580597
    ],
    [
      0.15673834830522537,
      0.5942383697256446
    ],
    [
      0.40673835575580597,
      0.8442383697256446
    ],
    [
      0.6567383697256446,
      1.0942384591326118
    ]
  ],
  "mediump": [
    [
      -1.0932616591453552,
      -0.6557616889476776
    ],
    [
      -0.8432616889476776,
      -0.405761674977839
    ],
    [
      -0.5932616889476776,
      -0.15576168149709702
    ],
    [
      -0.343261674977839,
      0.09423834457993507
    ],
    [
      -0.09326168522238731,
      0.34423835575580597
    ],
    [
      0.15673834830522537,
      0.5942383697256446
    ],
    [
      0.40673835575580597,
      0.8442383697256446
    ],
    [
      0.6567383697256446,
      1.0942384591326118
    ]
  ],
  "highp": [
    [
      -1.0932616591453552,
      -0.6557616889476776
    ],
    [
      -0.8432616889476776,
      -0.405761674977839
    ],
    [
      -0.5932616889476776,
      -0.15576168149709702
    ],
    [
      -0.343261674977839,
      0.09423834457993507
    ],
    [
      -0.09326168522238731,
      0.34423835575580597
    ],
    [
      0.15673834830522537,
      0.5942383697256446
    ],
    [
      0.40673835575580597,
      0.8442383697256446
    ],
    [
      0.6567383697256446,
      1.0942384591326118
    ]
  ]
}

mikola-headless.json

{
  "lowp": [
    [
      -0.9995116889476776,
      -0.7495116889476776
    ],
    [
      -0.7495116889476776,
      -0.499511674977839
    ],
    [
      -0.499511674977839,
      -0.24951168149709702
    ],
    [
      -0.24951168149709702,
      0.0004883408546447754
    ],
    [
      0.0004883408546447754,
      0.25048835575580597
    ],
    [
      0.25048835575580597,
      0.5004883697256446
    ],
    [
      0.5004883697256446,
      0.7504883697256446
    ],
    [
      0.7504883697256446,
      1.0004884591326118
    ]
  ],
  "mediump": [
    [
      -0.9995116889476776,
      -0.7495116889476776
    ],
    [
      -0.7495116889476776,
      -0.499511674977839
    ],
    [
      -0.499511674977839,
      -0.24951168149709702
    ],
    [
      -0.24951168149709702,
      0.0004883408546447754
    ],
    [
      0.0004883408546447754,
      0.25048835575580597
    ],
    [
      0.25048835575580597,
      0.5004883697256446
    ],
    [
      0.5004883697256446,
      0.7504883697256446
    ],
    [
      0.7504883697256446,
      1.0004884591326118
    ]
  ],
  "highp": [
    [
      -0.9995116889476776,
      -0.7495116889476776
    ],
    [
      -0.7495116889476776,
      -0.499511674977839
    ],
    [
      -0.499511674977839,
      -0.24951168149709702
    ],
    [
      -0.24951168149709702,
      0.0004883408546447754
    ],
    [
      0.0004883408546447754,
      0.25048835575580597
    ],
    [
      0.25048835575580597,
      0.5004883697256446
    ],
    [
      0.5004883697256446,
      0.7504883697256446
    ],
    [
      0.7504883697256446,
      1.0004884591326118
    ]
  ]
}

viewport-test.js

var SHAPE = [8, 8]

var gl = require('gl')(SHAPE[0], SHAPE[1])
var regl = require('../regl')(gl)
var bisect = require('bisect')


var pixels = new Uint8Array(4 * SHAPE[0] * SHAPE[1])

var result = {}

;['lowp', 'mediump', 'highp'].forEach(function (prec) {
  var drawPoint = regl({
    frag: `
    void main () {
      gl_FragColor = vec4(1, 1, 1, 1);
    }`,
    vert: `
    precision ${prec} float;
    attribute vec2 p;
    uniform vec2 x;
    void main () {
      gl_Position = vec4(p + x, 0, 1);
    }`,
    attributes: {
      p: [0, 0]
    },
    uniforms: {
      x: regl.prop('p')
    },
    count: 1,
    primitive: 'points'
  })

  var data = []

  for (var i = 4; i < 5; ++i) {
    for (var j = 0; j < SHAPE[1]; ++j) {
      var x0 = 2.0 * (i - 2) / SHAPE[0] - 1.0
      var x1 = 2.0 * (i + 2) / SHAPE[0] - 1.0
      var y0 = 2.0 * (j - 2) / SHAPE[1] - 1.0
      var y1 = 2.0 * (j + 2) / SHAPE[1] - 1.0

      var xbounds = [Infinity, -Infinity]
      var ybounds = [Infinity, -Infinity]

      for (var t = x0; t <= x1; t += (x1 - x0) / 8.0) {
        for (var s = y0; s <= y1; s += (x1 - x0) / 8.0) {
          regl.clear({ color: [0, 0, 0, 0], depth: 1 })
          drawPoint({ p: [t, s] })
          regl.read(pixels)
          if (pixels[4 * (i + j * SHAPE[0])]) {
            xbounds[0] = Math.min(xbounds[0], t)
            xbounds[1] = Math.max(xbounds[1], t)
            ybounds[0] = Math.min(ybounds[0], s)
            ybounds[1] = Math.max(ybounds[1], s)
          }
        }
      }

      // refine xbounds
      var y = 0.5 * (ybounds[0] + ybounds[1])
      xbounds[0] = bisect(function (x) {
        regl.clear({ color: [0, 0, 0, 0], depth: 1 })
        drawPoint({ p: [x, y] })
        regl.read(pixels)
        return pixels[4 * (i + j * SHAPE[0])]
      }, xbounds[0] - 1, xbounds[0], 1e-9)

      xbounds[1] = bisect(function (x) {
        regl.clear({ color: [0, 0, 0, 0], depth: 1 })
        drawPoint({ p: [x, y] })
        regl.read(pixels)
        return !pixels[4 * (i + j * SHAPE[0])]
      }, xbounds[1], xbounds[1] + 1, 1e-9)

      var x = 0.5 * (xbounds[0] + xbounds[1])
      ybounds[0] = bisect(function (y) {
        regl.clear({ color: [0, 0, 0, 0], depth: 1 })
        drawPoint({ p: [x, y] })
        regl.read(pixels)
        return pixels[4 * (i + j * SHAPE[0])]
      }, ybounds[0] - 1, ybounds[0], 1e-9)

      ybounds[1] = bisect(function (y) {
        regl.clear({ color: [0, 0, 0, 0], depth: 1 })
        drawPoint({ p: [x, y] })
        regl.read(pixels)
        return !pixels[4 * (i + j * SHAPE[0])]
      }, ybounds[1], ybounds[1] + 1, 1e-9)

      data.push(ybounds)
    }
  }

  result[prec] = data
})

console.log(JSON.stringify(result, '', '  '))