regl - basic render to texture

gistfile1.txt

// thanks to https://gitter.im/mikolalysenko/regl

import createRegl from 'regl'

const mat4 = require('gl-mat4')

const cubePosition = [
  [-0.5, +0.5, +0.5], [+0.5, +0.5, +0.5], [+0.5, -0.5, +0.5], [-0.5, -0.5, +0.5], // positive z face.
  [+0.5, +0.5, +0.5], [+0.5, +0.5, -0.5], [+0.5, -0.5, -0.5], [+0.5, -0.5, +0.5], // positive x face
  [+0.5, +0.5, -0.5], [-0.5, +0.5, -0.5], [-0.5, -0.5, -0.5], [+0.5, -0.5, -0.5], // negative z face
  [-0.5, +0.5, -0.5], [-0.5, +0.5, +0.5], [-0.5, -0.5, +0.5], [-0.5, -0.5, -0.5], // negative x face.
  [-0.5, +0.5, -0.5], [+0.5, +0.5, -0.5], [+0.5, +0.5, +0.5], [-0.5, +0.5, +0.5], // top face
  [-0.5, -0.5, -0.5], [+0.5, -0.5, -0.5], [+0.5, -0.5, +0.5], [-0.5, -0.5, +0.5],  // bottom face
]

const cubeUv = [
  [0.0, 0.0], [1.0, 0.0], [1.0, 1.0], [0.0, 1.0], // positive z face.
  [0.0, 0.0], [1.0, 0.0], [1.0, 1.0], [0.0, 1.0], // positive x face.
  [0.0, 0.0], [1.0, 0.0], [1.0, 1.0], [0.0, 1.0], // negative z face.
  [0.0, 0.0], [1.0, 0.0], [1.0, 1.0], [0.0, 1.0], // negative x face.
  [0.0, 0.0], [1.0, 0.0], [1.0, 1.0], [0.0, 1.0], // top face
  [0.0, 0.0], [1.0, 0.0], [1.0, 1.0], [0.0, 1.0],  // bottom face
]

const cubeElements = [
  [2, 1, 0], [2, 0, 3],       // positive z face.
  [6, 5, 4], [6, 4, 7],       // positive x face.
  [10, 9, 8], [10, 8, 11],    // negative z face.
  [14, 13, 12], [14, 12, 15], // negative x face.
  [18, 17, 16], [18, 16, 19], // top face.
  [20, 21, 22], [23, 20, 22],  // bottom face
]

const regl = createRegl({
  extensions: ['webgl_draw_buffers', 'oes_texture_float'],
})

const fbo = regl.framebuffer({
  color: [
    regl.texture({type: 'float', width: 1000, height: 1000}),
  ],
})

const icosphere = require('icosphere')
const sphereMesh = icosphere(4)

const sphereForFBO = regl({
  vert: `
    precision mediump float;
    attribute vec3 position;
    void main () {
      gl_Position = vec4(position,1);
    }
  `,
  frag: `
  precision mediump float;
  void main () {
    gl_FragColor = vec4(0.3, 0.3, 0.3, 0.9);
  }
  `,
  attributes: { position: sphereMesh.positions },
  elements: sphereMesh.cells,
  depth: { enable: true, mask: true },
  framebuffer: fbo,
})

const drawCube = regl({
  vert: `
    precision mediump float;
    attribute vec3 position;
    attribute vec2 uv;
    varying vec2 vUv;
    uniform mat4 projection, view;
    void main() {
      vUv = uv;
      gl_Position = projection * view * vec4(position, 1);
    }`,
  frag: `
    precision mediump float;
    varying vec2 vUv;
    uniform sampler2D texture;
    void main () {
      gl_FragColor = texture2D(texture, vUv);
    }`,
  attributes: {
    position: cubePosition,
    uv: cubeUv,
  },
  elements: cubeElements,
  uniforms: {
    texture: regl.prop('texture'),
    view: ({tick}) => {
      const t = 0.01 * tick
      const ret = mat4.lookAt(
        [],
        [5 * Math.cos(t), 2.5 * Math.sin(t), 5 * Math.sin(t)],
        [0, 0.0, 0],
        [0, 1, 0])
      return ret
    },
    projection: ({deltaTime, viewportWidth, viewportHeight}) =>
      mat4.perspective(
        [],
        Math.PI / 4,
        viewportWidth / viewportHeight,
        0.01,
        10),
  },
})

function ready() {
  regl.frame(({deltaTime, viewportWidth, viewportHeight}) => {
    regl.clear({
      color: [0.1, 0.1, 0.1, 1],
      depth: true,
    })

    regl.clear({
      color: [1.0, 0.1, 0.1, 1],
      depth: true,
      framebuffer: fbo,
    })
    sphereForFBO()

    drawCube({
      texture: fbo.color[0],
    })
  })
}

ready()