WebVR polyfill – Vertex shader coordinates

index.js

const WebVRPolyfill = require('webvr-polyfill')

const polyfill = new WebVRPolyfill({
  BUFFER_SCALE: 0.5,
  CARDBOARD_UI_DISABLED: true,
  DIRTY_SUBMIT_FRAME_BINDINGS: false
})
console.log('WebVRPolyfill', polyfill)

const regl = require('regl')({
  pixelRatio: Math.min(1.5, window.devicePixelRatio),
  attributes: {
    antialias: false,
    preserveDrawingBuffer: false,
    premultipliedAlpha: false,
    alpha: false
  }
})
const quat = require('gl-quat')
const mat4 = require('gl-mat4')

const { LineBuilder } = require('regl-line-builder')

const webVR = require('regl-vr')({regl})

navigator.getVRDisplays().then((vrDisplays) => {
  if (vrDisplays.length === 0) throw new Error('No VrDisplays.')

  const vrDisplay = vrDisplays[0]
  global.vrDisplay = vrDisplay
  console.log(`VR display detected: ${vrDisplay.displayName}`)
  
  vrDisplay.requestPresent([{ source: regl._gl.canvas }])
  startRender({ vrDisplay })
}).catch((err) => {
  console.error(err)
})

function startRender({ vrDisplay }) {
  const { lines } = generateLines(regl)
  const postBuffers = createPostBuffers(regl, 'A')

  const setupDrawScreen = regl({
    vert: `
      precision highp float;
      attribute vec2 position;
      varying vec2 uv;

      void main() {
        uv = 0.5 * (position + 1.0);
        gl_Position = vec4(position, 0.0, 1.0);
      }
    `,
    attributes: {
      position: [-4, -4, 4, -4, 0, 4]
    },
    count: 3,
    depth: { enable: false }
  })
  const drawScreen = regl({
    frag: `
      precision highp float;

      uniform sampler2D color;
      varying vec2 uv;

      void main() {
        gl_FragColor = texture2D(color, uv);
      }
    `,
    uniforms: {
      color: regl.prop('color')
    }
  })

  regl.frame(({ tick, drawingBufferWidth, drawingBufferHeight }) => {
    const resolution = [drawingBufferWidth, drawingBufferHeight]
    postBuffers.resize('A', resolution)

    // postBuffers.get('A').use(() => {
      regl.clear({
        color: [1, 1, 1, 1],
        depth: 1
      })

      webVR({ vrDisplay }, () => {
        drawLines(lines, tick)
      })
    // })

    // setupDrawScreen(() => {
    //   drawScreen({
    //     color: postBuffers.get('A')
    //   })
    // })
  })

}

function generateLines (regl) {
  const lines = LineBuilder.create(regl, {
    bufferSize: 300
  })
  const ctx = lines.getContext()

  ctx.lineWidth = 6
  ctx.strokeStyle = '#222222'
  ctx.beginPath()
  ctx.arc(0, 0, 30, 0, Math.PI * 2 - Math.PI / 10)
  ctx.closePath()
  ctx.stroke()
  ctx.strokeRect(-50, -50, 100, 100)

  return {
    lines,
    ctx
  }
}

function drawLines (lines, tick) {
  const { sin } = Math
  const t0 = sin(tick * 0.1) * 0.5 + 0.5
  const model = mat4.identity([])
  mat4.translate(model, model, [0, 0, -100])

  lines.draw({
    model,
    tint: [1, 1, 1, 1],
    thickness: (1 + t0 * 0.5),
    miterLimit: 12,
    adjustProjectedThickness: false
  })
}

function createPostBuffers (regl, ...names) {
  const createBuffer = () => regl.framebuffer({
    color: regl.texture({
      mag: 'linear',
      min: 'linear',
      wrap: 'clamp'
    }),
    depth: false
  })

  const buffers = {}
  names.forEach((name) => {
    buffers[name] = createBuffer()
  })

  return {
    get (name) {
      return buffers[name]
    },

    swap (nameA, nameB) {
      const bufferA = buffers[nameA]
      const bufferB = buffers[nameB]
      buffers[nameA] = bufferB
      buffers[nameB] = bufferA
    },

    resize (name, size, factor = 1) {
      buffers[name].resize(
        Math.round(size[0] * factor),
        Math.round(size[1] * factor))
    }
  }
}

package.json

{
  "name": "webvr-lines",
  "dependencies": {
    "gl-mat4": "^1.1.4",
    "gl-quat": "^1.0.0",
    "regl": "^1.3.1",
    "regl-line-builder": "jpweeks/regl-line-builder",
    "regl-vr": "^1.0.1",
    "webvr-polyfill": "^0.10.2"
  }
}