acatcalledfrank

Members
  • Content Count

    6
  • Joined

  • Last visited

About acatcalledfrank

  • Rank
    Newbie

Contact Methods

  • Twitter
    @acatcalledfrank
  1. acatcalledfrank

    Limit to number of circles drawn in a mask

    Not quite sure what you mean, sorry The CodePen is just a stripped-down demo to show the problem that I've found in a larger project?
  2. acatcalledfrank

    Limit to number of circles drawn in a mask

    Hi all. I'm trying to mask a container using a large number of circles, but seem to be coming up against a limit on the number of circles I can draw in a mask on WebGL. Demo here: http://codepen.io/acatcalledfrank/pen/ZQXWBL - it draws 250 x circle and numbered text labels in rows; you can see that while the labels carry on the circles stop at 160/161. Am I coming up against some kind of hard limit with the renderer here, or is there a way around it? In the actual project the circles are moving and masking a gradient, which is why I can't just use a sprite for the circles. As far as I can tell, PIXI doesn't support gradient fills yet either. If I switch to the canvas renderer there's no limit, but performance is much worse in IE and FF. Yay! Any ideas, anyone? Thanks in advance! Tom
  3. acatcalledfrank

    "gl.disable is not a function" error in Chrome/FireFox

    Nothing as far as I'm aware. I've tried letting Pixi create the canvas as usual, and even manually creating a canvas element and attaching it to document.body, with the same result. Weird weird. Oh well. Thanks for the suggestions everyone, much appreciated. I'll keep going - will report back if I ever find out what it is!
  4. acatcalledfrank

    "gl.disable is not a function" error in Chrome/FireFox

    The weird thing is that getContext isn't returning null, as I'd expect if a 2D context was already requested or the browser was incompatible. When Pixi calls this.view.getContext('webgl', this._contextOptions) || this.view.getContext('experimental-webgl', this._contextOptions); the result is this: { _qid: 5 canvas: canvas frame: Array[0] id: 0 original: WebGLRenderingContext renderer: WebGLRenderer } ... the WebGL rendering context is there, but it's assigned to the "original" property of the returned object, rather than being the returned object itself. It's usable, and will render as expected if you point Pixi to it manually - that's why my hack posted above does let the app render using WebGL as expected. After plenty of googling I can't find any info on what this returned object might be - it seems getContent should return either a context or null, not some weird in-between thing. Any other suggestions/thoughts? Or do you think this'll just have to be something I live with? It works fine in IE and Safari (Win) so I'm wondering if it's some kind of browser rendering bug?
  5. acatcalledfrank

    "gl.disable is not a function" error in Chrome/FireFox

    Aha, thanks. There is another canvas element on the page (hidden, used for measuring text widths). So is this a problem with the specific canvas element that Pixi is using to draw (and maybe something else is trying to use), or just that there's already another canvas somewhere on the page with a 2d context? Thanks for your help!
  6. Hi all. I'm getting the following error when trying to create a Pixi renderer using autoDetectRenderer in Chrome and Firefox: gl.disable is not a function at WebGLRenderer._initContext at new WebGLRenderer at Object.module.exports.Object.assign.autoDetectRenderer I'm using Pixi as part of a much larger, complex framework and haven't tried taking the whole thing apart to see what's causing the problem yet; I was hoping that there might be an easy Pixi-related solution before I get to that... From having a poke around in the Pixi source code I can make the error go away by adding a small tweak: /** * Creates the gl context. * * @private */ WebGLRenderer.prototype._createContext = function () { var gl = this.view.getContext('webgl', this._contextOptions) || this.view.getContext('experimental-webgl', this._contextOptions); this.gl = gl; // *** adding the following line makes the error go away *** if (!gl.disable) this.gl = this.gl.original; // ********************************************************* if (!gl) { // fail, not able to get a context throw new Error('This browser does not support webGL. Try using the canvas renderer'); } this.glContextId = WebGLRenderer.glContextId++; gl.id = this.glContextId; gl.renderer = this; }; While this works, I'm not entirely sure why and obviously I'd rather not rely on hacked-around code in production. So: is there an obvious/known reason this is happening that I can fix? Or, alternatively, will using the above fix break anything important? Unfortunately I can't share a link because the project is pre-alpha still; I might be able to strip out enough to make a useful demo page but it'd be a big undertaking - I'm crossing my fingers and hoping there's something quick and obvious I can fix! Any help much appreciated. Cheers, Tom