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.
var glsl =var mat4 =var regl = extensions: 'oes_texture_float''oes_standard_derivatives' 'oes_element_index_uint'var camera = regl distance: 120 phi: 008var N = 25000var msize = Nvar matrices = msizelengthvar mtex = reglvar tmpv = 000{for var i = 0; i < N; i++var m = matricesmat4var r = Math*40tmpv0 = Math*rtmpv1 = 0tmpv2 = Math*rmat4tmpv0 = Mathtmpv1 = Mathtmpv2 = Mathmat4}var conwayHart =var meshes = 'dO aO tC tO eO taO sO O jO kO dtO oO mO gO D'var mesh = positions: cells: ids:for var i = 0; i < N; i++var z = meshpositionslengthvar m = meshesi%mesheslengthfor var j = 0; j < mpositionslength; j++meshpositionsmeshidsfor var j = 0; j < mcellslength; j++var n = mcellsjlengthfor var k = 2; k < n; k++meshcellsvar draw =reglframe {reglclear color: 0950930981 depth: true}
javascript api
var calcSize =
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 = msizelength
and to populate this texture with matrix data:
{for var i = 0; i < N; i++var m = matricesmat4// ...}
glsl api
# 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