Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

drawingBufferWidth/Height are different when running with WebGL Inspector #127

willeastcott opened this issue Oct 4, 2014 · 3 comments


Copy link

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:

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?

Copy link

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.

Copy link

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?

Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

No branches or pull requests

1 participant