Rectangle2D.dispose() creates a WebGL error

Hi,

I have 4 sprite2D buttons in an array. They are the only visible sprites on a canvas, but not the only one (several with opacity 0).

If I dispose of 3 among the 4 everything is fine.

elements2D.levelButtons[0].dispose();
elements2D.levelButtons[1].dispose();
// elements2D.levelButtons[2].dispose();
elements2D.levelButtons[3].dispose();

But if I dispose of all of them webGL throws a warning on a couple of render() - i'd say around 100 engine.render(). During those render any call to add primitives is not taken into account, resulting in a slight delay. Then, without any reason the warnings stop and calls to render and modify sprite are taking into account and rendered.

babylon.2.5.max.js:7685 WebGL: INVALID_OPERATION: drawElements: no buffer is bound to enabled attribute
Engine.draw @ babylon.2.5.max.js:7685
Rectangle2DRenderCache.render @ babylon.2.5.canvas2d.max.js:8864
Group2D._renderTransparentData @ babylon.2.5.canvas2d.max.js:8415
Group2D._groupRender @ babylon.2.5.canvas2d.max.js:8287
Canvas2D._render @ babylon.2.5.canvas2d.max.js:13009
(anonymous) @ babylon.2.5.canvas2d.max.js:11954
Observable.notifyObservers @ babylon.2.5.max.js:3605
Scene.render @ babylon.2.5.max.js:18697
(anonymous) @ catch-the-wolf-mri.js:653
Engine._renderLoop @ babylon.2.5.max.js:7166
requestAnimationFrame (async)
Tools.QueueNewFrame @ babylon.2.5.max.js:4878
Engine._renderLoop @ babylon.2.5.max.js:7173
requestAnimationFrame (async)
Tools.QueueNewFrame @ babylon.2.5.max.js:4878
Engine._renderLoop @ babylon.2.5.max.js:7173
requestAnimationFrame (async)
Tools.QueueNewFrame @ babylon.2.5.max.js:4878
Engine._renderLoop @ babylon.2.5.max.js:7173
requestAnimationFrame (async)
Tools.QueueNewFrame @ babylon.2.5.max.js:4878
Engine._renderLoop @ babylon.2.5.max.js:7173

I have no idea where it is coming from. It is not due to the fact that they are in an array, if I add another unrelated button to the scene I can dispose of the four rect without warning.

This is my function creating the button, but I am not sure it is coming from that, I sometime had the same behavior when using dispose() in other contexts.

var addButton = function (stateManager = mandatory(), options = null) {
    return new Promise(function (resolve, reject) {
      if (typeof stateManager._parent.parentTaskObject === "undefined") {
        throw new Error("stateManager.addButton: stateManager._parent.parentTaskObject is undefined");
      }

      var baseOptions = {
        id: "button" + stateManager.timeInMs,
        text: "text",
        x: 50,
        y: 50,
        width: 100,
        height: 50,
        fill: BABYLON.Canvas2D.GetSolidColorBrush(new BABYLON.Color4(0.8, 0.8, 0.8, 1)),
        clickEventData: null,
        fontName: "30pt Arial",
        baseOpacity: 0.8,
        hoverOpacity: 1
      };

      options = _.extend(baseOptions, options);

      var elements2D = stateManager.getGlobal("elements2D");
      var canvas = elements2D.canvas;

      // create button and add to canvas 
      var buttonRect = new BABYLON.Rectangle2D({
        parent: canvas,
        id: options.id,
        x: options.x,
        y: options.y,
        width: options.width,
        height: options.height,
        fill: options.fill,
        roundRadius: 0,
        children: [
          new BABYLON.Text2D(options.text, {
            fontName: options.fontName,
            marginVAlignment: "v: center",
            marginHAlignment: 3
          })
        ]
      });

      buttonRect.opacity = options.baseOpacity;

      // Add an observable for hovering
      buttonRect.pointerEventObservable.add(function (d, s) {
        buttonRect.opacity = options.hoverOpacity;
      }, BABYLON.PrimitivePointerInfo.PointerOver);

      buttonRect.pointerEventObservable.add(function (d, s) {
        buttonRect.opacity = options.baseOpacity;
      }, BABYLON.PrimitivePointerInfo.PointerOut);

      // Add an observable for clicking
      if ((options.clickEventData !== null) && (options.clickEventData.constructor === EventData)) {
        buttonRect.pointerEventObservable.add(function (d, s) {

          options.clickEventData.happenedAt = stateManager.timeInMs;
          options.clickEventData.data.button = buttonRect;

          stateManager.addEvent(options.clickEventData);
        }, BABYLON.PrimitivePointerInfo.PointerUp);
      }

      resolve(buttonRect);
    });
  };

Did that happen to someone else ? Any clue ?

To circumvent the problem I create a 1*1 pixel button with opacity 0 at position 0,0 and that allows me to dispose() all the real buttons without error.

Thanks !