Rectangle2D.dispose() creates a WebGL error

[AlbertTJames]

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 !

[AlbertTJames]

Sorry ..Wrong subforum ! 

[Nockawa]

Hello,

The best thing to do in such case is create a playground that reproduces the issue.

By the way, you can set levelVisible = false to hide a given primitive, setting its opacity to 0 will unfortunately...still render it... while levelVisible won't.

[AlbertTJames]

Hey @Nockawa,

 

So I tried several possible things to reproduce the warning.. but I can't. Maybe it is the fact that PG is using 2.6 alpha, maybe because I did not correctly infer the origin of the error weither it be due to other parts of my code or some weird combination of the assets Im using in my scene or i dont know...

Anyways! If you see that error one day, keep me posted !

Here is the playground with some heavy button creation functions :

http://babylonjs-playground.com/#GKBEH#36