• Content Count

  • Joined

  • Last visited

  1. Hello. What would be the best solution in order to switch the renderer type (webgl/canvas) dynamically? The case is: I change some textures on events (next/previous photo feature). Some of these cannot fit into webGL as the texture size is too big, so for them I have to switch to the canvas renderer. Currently I create two separated canvas elements and initiate two separated apps - one with the canvas renderer and the another one with the webGL renderer. For images which can fit into webGL I hide the app with the canvas renderer and use webGL for other I do the same with the second renderer. To achieve that I remove all children from the unused stage(app) and set renderer as display: none and then add new data to the second stage and display it. Not sure if it's the proper method in order to accomplish best results (performance etc). Is there a better way to do that?. I tried with just one app, and rebuilding it but I encountered a problem with the canvas element as it already had loaded certain context and could not do it again. I tried also with creating the canvas element dynamically (remove and create new then rebuild the app once again in order to get different context) but still with no luck. Any suggestions? Thanks in advance.
  2. Hello Ivan. I installed pixi.js-legacy and used it while creating the app (PIXI.Application) and set forceCanvas to true and it works now thanks. I have one more question. I use only PIXI.Application from pixi.js-legacy and the rest from pixi.js - is that good or should be changed?
  3. Hello Ivan, I was able to make it work by assigning CanvasRenderer as type to temp variable - then also app renderer has changed but now the error occurs: Uncaught TypeError: displayObject.renderCanvas is not a function
  4. Hello, how to set the canvas renderer properly? Even if I have installed pixi.js-legacy or pixi/canvas-renderer and set forceCanvas to true while creating the app, it still have webgl renderer.
  5. Hello Ivan thanks for reply, So if this is PC limitation why Chrome and Safari works okay but only Firefox not? Is there a way to detect if an image can be fit into webgl and if not then use canvas renderer?
  6. Hello I have problem with Firefox. When is comes to Safari or Chrome everthing works okay, but Firefox while loading image 8317x1024 throws a warning in the console: Error: WebGL warning: texImage2D: Requested size at this level is unsupported and the image is not rendered.
  7. Hello. Is there a way to do same with ImageBitmap? As I can see currently it is not possible to inject bitmap into BaseTexture as a resource.
  8. Hello Ivan, thanks for your reply. I haven't tested it yet under mobile OS. Currently I work on Chrome (Version 80.0.3987.106 (Official Build) (64-bit) / macOS Catalina 10.15. I also did a test on Firefox(73.0.1 (64-bit)) with almost same results - maybe it is a little bit smoother.
  9. Hello. I logged one of the textures and what I've noticed is that even if createBitmap parameter is set to true, the texture does not contain ImageBitmap object is that okay? (or perhaps it is create later?) but on the other hand in dev tools I can see that createImageBitmap is invoked - as you can see it still drops to ~14fps
  10. Hello. Thanks for your reply Ivan. I tried using this.texture = Texture.from(this.source, { resourceOptions: { createBitmap: true, }, }); instead of loader but with no luck - it still lags. I'll do more research about createImageBitmap and eventually prepare a demo. Thanks
  11. Hello. I have problem with dynamic change sprites texture. So the flow of the app is: I have two containers which overlap themselves. On the bottom I have container with one quite big image (6283x1024, 1MB) and on the top I have container for same image but tiled. Into the top container I put tiles (1024x1024, 100 - 300 KB) in a better quality. When app starts at the beginning I put only image for the bottom container in one sprite and prepare structure for the top(tiled) container - sprites without texture but with proper width/height/x pos/y pos. While sliding image (left or right) I detect which sprites from the top tiled container are visible on the screen and for those which are, I download images and replace textures. If all textures are loaded for the tiled container then I hide the underneath container and display tiled image in high quality. Tiled container has higher z-index then the second container, to make the image consistent while tiles are being downloaded. I have also slider service which uses ticker for auto-slide (left / right). The problem is that, when I replace textures I have lags and fps drops - from 60 to ~20-30. Is there a way to keep proper fps while replacing textures and keep the slide smooth without lags? Some code which belongs to my custom sprite class which extends Sprite class: // Detect if the sprite is on the screen isOnTheScreen(): boolean { const globalPosition: Point = this.getGlobalPosition(); return globalPosition.x + this.width > 0 && globalPosition.x < window.innerWidth; } // load it load(): void { if (this.isLoaded) { return; } this.isLoaded = true; this.loaderService.load$(this.source).subscribe((resources) => { const texture: Texture = resources[this.source].texture; this.canvasService.app.renderer.plugins.prepare.upload(texture, () => { this.texture = texture; }); }, // ToDo: error handling, perhaps retry downloading tiles once again. () => { this.isLoaded = false; }, () => { this.event$.unsubscribe(); }, ); } // event which says if we slide the image or do any other interaction setEventSubject(event$: Subject<boolean>) { this.event$ = event$.subscribe((detect: boolean) => { if (detect && this.isOnTheScreen()) { this.load(); } }); } // Slider service // ticker code which is in slider service this.ticker.add((delta) => { nextX = this.imageService.position.x - 5 * Math.round(delta); this.imageService.updatePositionX(nextX); this.canvasService.moveSprites(); // the event which goes to each sprite to start detection if they are visible on the screen this.canvasService.interactionEventTrigger$.next(true); }