Command fails if buffers for unrelated attributes are destroyed

[rreusser]

I think I've encountered a cleanup bug in which attributes are not disabled so that subsequent, unrelated commands expect attributes used by previous commands to be available forever.

Reproduction: https://codepen.io/rsreusser/pen/QrxQzj

Reproduction code is listed at the bottom. The timeouts help make the sequence clear but are not required. The logs look like:

invoke command with two attributes
destroy color buffer
invoke command with one attribute
(unknown) WebGL: INVALID_OPERATION: drawArrays: no buffer is bound to enabled attribute

Solutions that cause the second command to succeed:

1. don't call the first command
2. don't destroy the color buffer used by the first command
3. add a second attribute to the second command

This suggests to me that the first command binds an attribute but that the second command does not disable it. This is fine if, for example, you haven't destroyed the attribute, but if you destroy it, then the second command expects it to be available even if it's not used.

require('regl')({
  onDone: (err, regl) => {
    if (err) return console.error(err);

    var vertexBuffer = regl.buffer([-1, -1, 0, 1, -1, 0, 0, 1, 0]);
    var colorBuffer = regl.buffer([1, 0, 0, 0, 1, 0, 0, 0, 1]);

    var commandWithTwoAttributes = regl({
      vert: `
        precision mediump float;
        attribute vec3 aPosition;
        attribute vec3 aColor;
        varying vec3 vColor;
        void main () {
          vColor = aColor;
          gl_Position = vec4(aPosition, 1);
        }
      `,
      frag: `
        precision mediump float;
        varying vec3 vColor;
        void main () {
          gl_FragColor = vec4(vColor, 1);
        }
      `,
      attributes: {
        aPosition: vertexBuffer,
        aColor: colorBuffer
      },  
      count: 3
    }); 

    var commandWithOneAttribute = regl({
      vert: `
        precision mediump float;
        attribute vec3 aPosition;
        void main () {
          gl_Position = vec4(aPosition, 1);
        }
      `,
      frag: `
        precision mediump float;
        void main () {
          gl_FragColor = vec4(1, 0, 0, 1);
        }
      `,
      attributes: {
        aPosition: vertexBuffer,
      },  
      count: 3
    }); 

    console.log('invoke command with two attributes');
    commandWithTwoAttributes();

    setTimeout(() => {
      console.log('destroy color buffer');
      colorBuffer.destroy();

      setTimeout(() => {
        console.log('invoke command with one attribute');
        commandWithOneAttribute();
      }, 1000);
    }, 1000);
  }
});

/cc @mikolalysenko and maybe @dy if interested (though maybe you're using your gl-utils library at the moment? 😄)

[rreusser]

Appears to be a duplicate of #413, which probably needs a publish.