REGL LineBuilder

Draw pretty lines in WebGL with the Canvas2D API.

Example

import createREGL from 'regl'
import { mat4 } from 'gl-matrix'
import { LineBuilder } from 'regl-line-builder'

const regl = createREGL()
const setupCamera = regl({
  uniforms: {
    view: mat4.identity([]),
    projection: ({ viewportWidth, viewportHeight }) => {
      const w = viewportWidth / 2
      const h = viewportHeight / 2
      return mat4.ortho([], -w, w, -h, h, 0, 10)
    }
  }
})

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

ctx.save()
ctx.rotate(-Math.PI / 4)
ctx.lineWidth = 20
ctx.strokeStyle = '#fff000'
ctx.beginPath()
ctx.moveTo(300, 300)
ctx.lineTo(-300, -300)
ctx.lineTo(-300, -500)
ctx.lineTo(300, -300)
ctx.closePath()
ctx.stroke()
ctx.strokeRect(-500, 700, 1000, 1400)
ctx.restore()

ctx.rotate(Math.PI / 4)
ctx.lineWidth = 10
ctx.beginPath()
ctx.moveTo(-300, 300)
ctx.lineTo(300, -300)
ctx.lineTo(300, -500)
ctx.lineTo(-300, -300)
ctx.closePath()
ctx.stroke()
ctx.strokeRect(-500, 700, 1000, 1400)

regl.frame(({ tick }) => {
  const { sin } = Math
  const t0 = sin(tick * 0.1) * 0.5 + 0.5

  setupCamera(() => {
    regl.clear({
      color: [1, 1, 1, 1],
      depth: 1
    })

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

Install

npm install regl-line-builder --save

License

(c) 2017 Jay Weeks. MIT License
(c) 2015 Matt DesLauriers where noted. MIT License