var regl = require('../regl')()

var draw = regl({
  frag: `
    precision mediump float;
    uniform vec4 color;
    void main() {
      gl_FragColor = color;
    }`,

  vert: `
    precision mediump float;
    attribute vec2 position;
    uniform float angle;
    uniform vec2 offset;
    void main() {
      gl_Position = vec4(
        cos(angle) * position.x + sin(angle) * position.y + offset.x,
        -sin(angle) * position.x + cos(angle) * position.y + offset.y, 0, 1);
    }`,

  attributes: {
    position: regl.buffer([
      0.5, 0,
      0, 0.5,
      1, 1])
  },

  uniforms: {
    color: function (props, context) {
      var frame = context.count
      var batchId = context.batchId
      return [
        Math.sin((0.1 + Math.sin(batchId)) * frame + 3.0 * batchId),
        Math.cos(0.02 * frame + 0.1 * batchId),
        Math.sin((0.3 + Math.cos(2.0 * batchId)) * frame + 0.8 * batchId),
        1
      ]
    },
    angle: function (props, context) {
      return 0.01 * context.count
    },
    offset: regl.prop('offset')
  },

  depth: {
    enable: false
  },

  count: 3
})

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

  draw([
    { offset: [-1, -1] },
    { offset: [-1, 0] },
    { offset: [-1, 1] },
    { offset: [0, -1] },
    { offset: [0, 0] },
    { offset: [0, 1] },
    { offset: [1, -1] },
    { offset: [1, 0] },
    { offset: [1, 1] }
  ])
})

@@ -1,40 +1,333 @@
-var regl = require('../regl')()%0A%0Avar
+// This example demonstrates how to use batch mode commands%0A//%0A// To use a command in batch mode, we pass in an array of objects.  Then%0A// the command is executed once for each object in the array.%0A%0A// As usual, we start by creating a full screen regl object%0Aconst regl = require('../regl')()%0A%0A// Next we create our command%0Aconst
  dra
@@ -808,20 +808,8 @@
 on: 
-regl.buffer(
 %5B%0A  
@@ -845,17 +845,16 @@
    1, 1%5D
-)
 %0A  %7D,%0A%0A 
@@ -874,128 +874,106 @@
     
-color: function (props, context) %7B%0A      var frame = context.count%0A      var batchId = 
+// the batchId parameter gives the index of the command%0A    color: (%7B
 co
+u
 nt
-ext.batchId%0A      return
+%7D, props, batchId) =%3E
  %5B%0A
-  
     
@@ -1011,21 +1011,21 @@
 hId)) * 
-frame
+count
  + 3.0 *
@@ -1037,26 +1037,24 @@
 hId),%0A      
-  
 Math.cos(0.0
@@ -1057,21 +1057,21 @@
 (0.02 * 
-frame
+count
  + 0.1 *
@@ -1077,26 +1077,24 @@
 * batchId),%0A
-  
       Math.s
@@ -1130,21 +1130,21 @@
 hId)) * 
-frame
+count
  + 0.8 *
@@ -1164,105 +1164,53 @@
     
-  1%0A      %5D%0A    %7D,%0A    angle: function (props, 
+1%0A    %5D,%0A    angle: (%7B
 co
+u
 nt
-ext) %7B%0A      return 0.01 * context.count%0A    %7D
+%7D) =%3E 0.01 * count
 ,%0A  
@@ -1295,16 +1295,81 @@
 : 3%0A%7D)%0A%0A
+// Here we register a per-frame callback to draw the whole scene%0A
 regl.fra
@@ -1430,16 +1430,81 @@
 %5D%0A  %7D)%0A%0A
+  // This tells regl to execute the command once for each object%0A
   draw(%5B

update batch example