Narnia Produced Magic

    glsl-matrix-texture

    1.0.4 • Public • Published

    glsl-matrix-texture

    read matrices from a texture

    If you have many differing meshes you want to render on the same draw call where each mesh has its own model matrix, this technique could be useful.

    If you want to render the same geometry many times with different matricies, instancing may be a more appropriate technique.

    On my cheap 2014 laptop with an integrated Radeon chip, I can render about 25,000 simple models with a constantly updated matrix texture from the example/objects.js file at a decent framerate.

    example

    This example renders 25000 meshes calculated from various conway hart notation strings. Each mesh is assigned an id that it uses to look up a corresponding model matrix in the matrix texture. The matrix texture is updated every frame in the update() function.

    This example uses regl, but the library itself is not coupled to regl.

    view this demo

    var glsl = require('glslify')
    var mat4 = require('gl-mat4')
    var regl = require('regl')({ extensions: [ 'oes_texture_float',
      'oes_standard_derivatives', 'oes_element_index_uint' ] })
     
    var camera = require('regl-camera')(regl, { distance: 120, phi: 0.08 })
     
    var N = 25000
    var msize = require('glsl-matrix-texture')(N)
    var matrices = new Float32Array(msize.length)
    var mtex = regl.texture({
      width: msize.width,
      height: msize.height,
      format: 'rgba',
      wrapS: 'clamp',
      wrapT: 'clamp',
      data: matrices
    })
     
    var tmpv = [0,0,0]
    update()
     
    function update (time) {
      for (var i = 0; i < N; i++) {
        var m = matrices.subarray(i*16,i*16+16)
        mat4.identity(m)
        var r = Math.sqrt(i/250)*40
        tmpv[0] = Math.cos(i/250*15)*r
        tmpv[1] = 0
        tmpv[2] = Math.sin(i/250*15)*r
        mat4.translate(m, m, tmpv)
        tmpv[0] = Math.sin(i/13*10+27)
        tmpv[1] = Math.sin(i/11*20+80)
        tmpv[2] = Math.sin(i/17*15-51)
        mat4.rotate(m, m, time*6.28+i/57, tmpv)
      }
    }
     
    var conwayHart = require('conway-hart')
    var meshes = 'dO aO tC tO eO taO sO O jO kO dtO oO mO gO D'.split(' ')
      .map(function (formula) { return conwayHart(formula) })
     
    var mesh = { positions: [], cells: [], ids: [] }
    for (var i = 0; i < N; i++) {
      var z = mesh.positions.length
      var m = meshes[i%meshes.length]
      for (var j = 0; j < m.positions.length; j++) {
        mesh.positions.push(m.positions[j])
        mesh.ids.push(i)
      }
      for (var j = 0; j < m.cells.length; j++) {
        var n = m.cells[j].length
        for (var k = 2; k < n; k++) {
          mesh.cells.push([ m.cells[j][0]+z, m.cells[j][k-1]+z, m.cells[j][k-0]+])
        }
      }
    }
     
    var draw = regl({
      frag: glsl`
        #extension GL_OES_standard_derivatives : enable
        precision highp float;
        #pragma glslify: faceNormal = require('glsl-face-normal')
        varying vec3 vpos;
        void main () {
          vec3 fnorm = faceNormal(vpos);
          gl_FragColor = vec4(fnorm*0.4+0.6,1);
        }
      `,
      vert: glsl`
        precision highp float;
        #pragma glslify: read_mat4 = require('glsl-matrix-texture')
        uniform mat4 projection, view;
        uniform sampler2D mtex;
        uniform vec2 msize;
        attribute vec3 position;
        attribute float id;
        varying vec3 vpos;
        void main () {
          vpos = position;
          mat4 model = read_mat4(mtex, id, msize);
          gl_Position = projection * view * model * vec4(position,1);
        }
      `,
      attributes: {
        position: mesh.positions,
        id: mesh.ids
      },
      uniforms: {
        mtex: mtex,
        msize: [msize.width,msize.height]
      },
      elements: mesh.cells
    })
     
    regl.frame(function (context) {
      regl.clear({ color: [0.95,0.93,0.98,1], depth: true })
      update(context.time)
      mtex({
        width: msize.width,
        height: msize.height,
        format: 'rgba',
        wrapS: 'clamp',
        wrapT: 'clamp',
        data: matrices
      })
      camera(function () { draw() })
    })

    javascript api

    var calcSize = require('glsl-matrix-texture')

    var msize = calcSize(N)

    Calculate texture dimensions and matrix float32array texture length for a number of matrices N:

    • msize.width
    • msize.height
    • msize.length

    It's up to you to create a float32array to store the matrix texture:

    var matrices = new Float32Array(msize.length)

    and to populate this texture with matrix data:

    function update () {
      for (var i = 0; i < N; i++) {
        var m = matrices.subarray(i*16,i*16+16)
        mat4.identity(m)
        // ...
      }
    }

    glsl api

    #pragma glslify: read_mat4 require('glsl-matrix-texture') 

    mat4 matrix = read_mat4(sampler2D mtex, float index, vec2 msize)

    Read a mat matrix from the matrix texture mtex of size msize: vec2(width,height).

    install

    To install with npm:

    npm install glsl-matrix-texture
    

    Compile with browserify and glslify:

    browserify -t glslify main.js > bundle.js
    

    license

    BSD

    Install

    npm i glsl-matrix-texture

    DownloadsWeekly Downloads

    0

    Version

    1.0.4

    License

    BSD

    Unpacked Size

    10.2 kB

    Total Files

    7

    Last publish

    Collaborators

    • substack