WebGL Geometry Instancing Demo

Your browser does not support HTML5 Canvas.

?support info?

FPS:

Instances: (max 512)

 

Patch to add native WebGL support of drawArraysInstanced and drawElementsInstanced in Firefox.
Hardware instancing will be used when available.

webgl-instancing.js, Javascript shim when there is no native support.

Comments? Updates? Follow me on Twitter

 

Only one vertex buffer with one instance of geometry data is necessary.
Rotation calculations and state changes (here only color change) are all processed on GPU through vertex shader.
Javascript code to rotate and render all instances:

  gl.uniform1f(uRot, angle++); //increment rotation angle
  gl.drawArraysInstanced(gl.TRIANGLES, 0, 3, nInstances); //draw {nInstances} instances

Vertex shader can set instance-specific attributes (such as position) by indexing an uniform array, e.g:
  gl_Position = vec4(aVertex + uPositions[gl_InstanceID], 1.0);