Use pixi v5 and also pixi-legacy for fallback concurrently

[irrationnelle]

Hello,

I use pixi v5 for Angular v6 on my project.

Recently, my customers who have devices without WebGL rendering asked me they would like to use my project.

So I decided that my project use pixi v5 and pixi-legacy together.

First, I think I can use ApplicationLegacy of pixi-legacy instead of Application of pixi v5 like below

import { Application as ApplicationLegacy } from 'pixi.js-legacy';
import { Application, Sprite, Container, Texture, BLEND_MODES, Renderer, TilingSprite, utils } from 'pixi.js';

 

constructor(
) {
  try {
    this.pixi = new Application({
      view: this.canvas,
      width: CANVAS_WIDTH,
      height: split ? SPLIT_CANVAS_HEIGHT : CANVAS_HEIGHT,
      backgroundColor: BACKGROUND_COLOR,
      antialias: true,
      preserveDrawingBuffer: true
    });
    initPixiSetting();
  } catch (error) {
    this.pixi = new ApplicationLegacy({
      view: this.canvas,
      width: CANVAS_WIDTH,
      height: split ? SPLIT_CANVAS_HEIGHT : CANVAS_HEIGHT,
      backgroundColor: BACKGROUND_COLOR,
      antialias: true,
      preserveDrawingBuffer: true
    });
    initPixiSetting();
  }
}

But, My project did not enter in catch statement when WebGL is not supported

And then, I knew that I imported just 'pixi-legacy' and my project is worked as canvas mode, not WebGL like this

import 'pixi.js-legacy';
import { Application, Sprite, Container, Texture, BLEND_MODES, Renderer, TilingSprite, utils } from 'pixi.js';

 

So I have a question

in this case, does my project use pixi v5 with devices which support WebGL but use pixi-legacy with device without WebGL?

Or, my project always uses pixi-legacy whenever my users deal with any devices which support WebGL or do not support WebGL?

Thank you in advance for your response

[ivan.popelyshev]

Its a general problem of imports.

Suppose you have a module A, and you also have a B that modified it. Does it modify A or its a completely new instance that you can use both of them?

In our case, pixi.js-legacy is just a collection of hacks on top of pixi.js. If you imported it, you actually use the same PIXI instance as in `pixi.js` , but with some mods: autoDetectRenderer is one of them.

Its not different PixiJS instance, its the same, if you import `pixi.js-legacy` it changes things permanently.

That's the source of bundle: https://github.com/pixijs/pixi.js/blob/dev/bundles/pixi.js-legacy/src/index.js

it swaps this one: https://github.com/pixijs/pixi.js/blob/873b65041bd3a5d173b0e0e10fa93be68bc033d9/packages/core/src/autoDetectRenderer.js

to this: https://github.com/pixijs/pixi.js/blob/873b65041bd3a5d173b0e0e10fa93be68bc033d9/packages/canvas/canvas-renderer/src/Renderer.js#L12

SUMMARY:

This is the correct one:

> Or, my project always uses pixi-legacy whenever my users deal with any devices which support WebGL or do not support WebGL?
 

Edited January 7, 2020 by ivan.popelyshev

[ivan.popelyshev]

Welcome to the forums!

[irrationnelle]

@ivan.popelyshev Thanks to your response! I am not confused now!😃

[Johnny Kontrolleti]

On 1/7/2020 at 12:39 PM, ivan.popelyshev said:

 Or, my project always uses pixi-legacy whenever my users deal with any devices which support WebGL or do not support WebGL?
 

I didn't really get what's the best practice here. 

I usually use `import * as PIXI from 'pixi.js';` to use pixi - but I want to have a fallback in case WebGl isn't enabled. How can I do so? 

Just use `pixi.js-legacy` all the time? What are the downsides? What the correct approach?

Because I use the following as my import, but smh still get the error that I should create a fallback:

import * as PIXI from 'pixi.js-legacy'

 

Edited May 6, 2020 by Johnny Kontrolleti

[ivan.popelyshev]

If its not TS, then only one place is enough