Jump to content

Rectangle2D.dispose() creates a WebGL error

Recommended Posts


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[2].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;

        }, BABYLON.PrimitivePointerInfo.PointerUp);


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 !

Link to post
Share on other sites
  • 2 weeks later...

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 :





Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Create New...