Change renderer antialias setting at runtime?

[soylomass]

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.

[Exca]

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.

[soylomass]

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?

[Exca]

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.

[soylomass]

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.

[soylomass]

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