drawingBufferWidth/Height are different when running with WebGL Inspector

[willeastcott]

Hi,
WebGL Inspector has not worked properly with PlayCanvas for such a long time now. :( So I've just spent a little time looking into why. Seems to be related to the value of drawingBufferWidth/Height. When running without WebGL Inspector, this is the same as canvas.width/height. However, when running with WebGL Inspector, drawingBufferWidth/Height are 300 and 150 respectively (which I believe is the default width and height of a canvas as creation time. So when I activate WebGL Inspector on a PlayCanvas app/game, the canvas is 300x150 in the lower left of the tab. Any idea why this might be happening?

See here for a test app to run with and without WebGL Inspector:

http://playcanvas.github.io/load_model/index.html

If you open playcanvas_latest.js in Chrome's sources tab and set a breakpoint at line 4223, that is where drawingBufferWidth is being queried and you can see the discrepancy. Any idea why this is happening?

[willeastcott]

I've done a little more investigation and I think I see why this is happening. WebGL Inspector breaks in the case where you resize the canvas AND rely on drawingBufferWidth/Height.

With WebGL Inspector enabled, if after getting a WebGL content from a canvas you do:

canvas.width = someNewWidth;
canvas.height = someNewHeight;

Then drawingBufferWidth/Height will not automatically update in to reflect the resize. This is what happens when WebGL Inspector is not active.

[willeastcott]

I've done a little more investigation and I think I see why this is happening. WebGL Inspector breaks in the case where you resize the canvas AND rely on drawingBufferWidth/Height.

With WebGL Inspector enabled, if after getting a WebGL content from a canvas you do:

canvas.width = someNewWidth;
canvas.height = someNewHeight;

Then drawingBufferWidth/Height will not automatically update in to reflect the resize. This is what happens when WebGL Inspector is not active.

[willeastcott]

So is this the place to fix this problem:

    // Clone all properties in context and wrap all functions
    for (var propertyName in rawgl) {
        if (typeof rawgl[propertyName] == 'function') {
            // Functions
            this[propertyName] = wrapFunction(this, propertyName, rawgl[propertyName]);
        } else {
            // Enums/constants/etc
            this[propertyName] = rawgl[propertyName];
        }
    }

Seems as though a hacky fix would be to do a special case here like:

Object.defineProperty(this.prototype, 'drawingBufferWidth', {
    get: function() { return rawgl.drawingBufferWidth; }
});
Object.defineProperty(this.prototype, 'drawingBufferHeight', {
    get: function() { return rawgl.drawingBufferHeight; }
});

What do you think?

[willeastcott]

So is this the place to fix this problem:

    // Clone all properties in context and wrap all functions
    for (var propertyName in rawgl) {
        if (typeof rawgl[propertyName] == 'function') {
            // Functions
            this[propertyName] = wrapFunction(this, propertyName, rawgl[propertyName]);
        } else {
            // Enums/constants/etc
            this[propertyName] = rawgl[propertyName];
        }
    }

Seems as though a hacky fix would be to do a special case here like:

Object.defineProperty(this.prototype, 'drawingBufferWidth', {
    get: function() { return rawgl.drawingBufferWidth; }
});
Object.defineProperty(this.prototype, 'drawingBufferHeight', {
    get: function() { return rawgl.drawingBufferHeight; }
});

What do you think?

[willeastcott]

I've verified that abb6290 fixes this issue. Yay! But that fix doesn't appear to be in the latest public release on the Chrome Web Store. I don't suppose it's possible to update the published extension?

[willeastcott]

I've verified that abb6290 fixes this issue. Yay! But that fix doesn't appear to be in the latest public release on the Chrome Web Store. I don't suppose it's possible to update the published extension?