Simple clear render with headless gl

headless-gl-simple-clear-render.js

'use strict'

const width = 512
const height = 512

const fs = require('fs')
const { PNG } = require('pngjs')

const gl = require('gl')(width, height, { preserveDrawingBuffer: true })
const regl = require('regl')(gl)

regl.clear({
  color: [1, 0, 0, 1],
  depth: 1
})

const pixels = new Uint8Array(width * height * 4)
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels)

const png = new PNG({ width, height })
for (let j=0; j < height; j++) {
  for (let i=0; i < width; i++) {
    const k = j * width + i
    const r = pixels[4*k]
    const g = pixels[4*k + 1]
    const b = pixels[4*k + 2]
    const a = pixels[4*k + 3]

    const m = (height - j + 1) * width + i
    png.data[4*m]     = r
    png.data[4*m + 1] = g
    png.data[4*m + 2] = b
    png.data[4*m + 3] = a
  }
}

const writeStream = fs.createWriteStream('out.png')
png.pack().pipe(writeStream)