Jump to content

Change renderer antialias setting at runtime?


Recommended Posts

Hi, I'd like to give the users the possibility to turn off antialias at runtime, is there anyway to do it? Changing renderer.options.antialias at runtime does nothing.

I've thought of just refreshing the website with a query parameter when the option is changed, but the game must also run on mobiles (Cordova) where refreshing a website isn't possible.

 

PS: If it's possible, it would be even better if user could change between native antialias, fxaa, and completely disabled.

Link to post
Share on other sites

The attributes given in the creation of webgl context are immutable. So you would need to create new webgl context and destroy the old one.

Easiest way to do that would be something like this:
 


var newOptions = {
  view: renderer.view,
  width: renderer.width,
  height:renderer.height,
  ...settings from your setup & default values needed...
}

renderer.destroy(false);
renderer = PIXI.autodetectRenderer( newOptions);

So basically destroy the old renderer, keep the view intact and pass it on to the next renderer.

Link to post
Share on other sites
On 9/21/2018 at 9:49 PM, Exca said:

The attributes given in the creation of webgl context are immutable. So you would need to create new webgl context and destroy the old one.

Easiest way to do that would be something like this:
 



var newOptions = {
  view: renderer.view,
  width: renderer.width,
  height:renderer.height,
  ...settings from your setup & default values needed...
}

renderer.destroy(false);
renderer = PIXI.autodetectRenderer( newOptions);

 So basically destroy the old renderer, keep the view intact and pass it on to the next renderer.

I've tried doing this, with varying results:

If the application starts with a canvasRenderer, I can recreate the renderer with forceCanvas = true, but if I set it to false, the following error appears:

Quote

createContext.js:20 Uncaught Error: This browser does not support webGL. Try using the canvas renderer
    at Object.createContext (createContext.js:20)
    at new WebGLRenderer (WebGLRenderer.js:210)
    at Object.autoDetectRenderer (autoDetectRenderer.js:63)
    at <anonymous>:10:17

 

If the application starts with a webglRenderer, and I want to recreate a webglRenderer, the following error appears:

Quote

checkMaxIfStatmentsInShader.js:19 Uncaught Error: Invalid value of `0` passed to `checkMaxIfStatementsInShader`
    at checkMaxIfStatmentsInShader (checkMaxIfStatmentsInShader.js:19)
    at SpriteRenderer.onContextChange (SpriteRenderer.js:155)
    at WebGLRenderer.emit (index.js:150)
    at WebGLRenderer._initContext (WebGLRenderer.js:327)
    at new WebGLRenderer (WebGLRenderer.js:245)
    at Object.autoDetectRenderer (autoDetectRenderer.js:63)
    at <anonymous>:10:17

 

And if I want to recreate a CanvasRenderer, the following appears:

Quote

CanvasRenderer.js:111 Uncaught TypeError: Cannot read property 'imageSmoothingEnabled' of null
    at new CanvasRenderer (CanvasRenderer.js:111)
    at Object.autoDetectRenderer (autoDetectRenderer.js:66)
    at <anonymous>:10:17

 

 

So, it only seems to work when using a Canvas renderer and trying to recreate a Canvas renderer. But I can't recreate a WebGL renderer, which most people use. Any idea?

Link to post
Share on other sites
On 9/24/2018 at 3:37 PM, Exca said:

One canvas can only support either 2d canvas or webgl. Not both. So if your old renderer is a canvasrenderer then you need to recreate the view also to switch to webgl. And other way round.

WebGL to WebGL didn't work either (it threw that checkMaxIfStatmentsInShader.js:19 Uncaught Error: Invalid value of `0` passed to `checkMaxIfStatementsInShader` error that I posted above).

I'll try to recreate the view or directly reload the whole game.

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

I've solved it by recreating the canvas and the renderer when settings are changed:

        let renderer = this.renderer;

        let canvas = document.createElement('canvas');

        canvas.id = "game-canvas";

        let body = document.getElementsByTagName("body")[0];
        body.appendChild(canvas);

        let newOptions = <RendererOptions>{
            view: canvas,
            width: renderer.width,
            height: renderer.height,
            forceCanvas: forceCanvas,
            antialias: antialias,
            forceFXAA: forceFXAA,
            resolution: resolution
        }
    
        renderer.destroy(true)
        renderer = PIXI.autoDetectRenderer( newOptions);
        this.app.renderer = renderer;

 

You can see it working here

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.

Guest
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.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...