ZYandu

Members
  • Content Count

    39
  • Joined

  • Last visited


Reputation Activity

  1. Like
    ZYandu got a reaction from ivan.popelyshev in Long RAF execution behavior in Chrome devtools   
    I'm getting a lot of inconsistencies in fps due to requestAnimationFrame calls randomly taking a long time where it doesn't look like there is anything being called inside of it until the tail end of the call. What it does show in the call tree only takes PIXI 1-3ms to flush or update transforms while the RAF call can last anywhere from 8-15ms. The devtools are also showing that the GPU and other threads aren't doing any irregular work when the long RAF call happens. It happens at least 10-20 times within a 30 second Chrome devtools performance recording. Has anyone else experienced this kind of thing before? 
    https://imgur.com/a/8Uh8028
  2. Like
    ZYandu reacted to ivan.popelyshev in Long RAF execution behavior in Chrome devtools   
    I think devtools affects it. Is that the only RAF you have? do you have 1000 setTimeouts by chance?
  3. Like
    ZYandu reacted to jonforum in iOS: RAF fire takes much longer than actual processes / zoom focus issue   
    i don't know why you use canvas app for zooming with pixijs but did you have  
    --enable-gpu-rasterization Am really not sure if this can help but you can maybe experiment with result.
    From what i know, it should affect DOM painting and scaling elements.
    https://www.chromium.org/developers/design-documents/chromium-graphics/how-to-get-gpu-rasterization
  4. Like
    ZYandu reacted to ivan.popelyshev in iOS: RAF fire takes much longer than actual processes / zoom focus issue   
    > but the processes within don't take very long 
    then its on GPU side. You need better profiling tool. I remember that when I last time used chrome profiler, I saw bars of JS rows  and then bar on GPU row, and RAF started immidiately after las GPU bar ended
  5. Like
    ZYandu reacted to ivan.popelyshev in Composite Layer and GPU Performance Tips   
    btw, currently renderTexture in v5 eats 8.33 bytes per pixel because of one problem we'll patch in 5.1.1 but its anyway better than extra renderer.
  6. Like
    ZYandu reacted to ivan.popelyshev in Composite Layer and GPU Performance Tips   
    Use extra RenderTexture instead of another renderer. I believe there's enough info about it in pixijs examples.Dont forget to resize it on screen change like your renderer.
  7. Like
    ZYandu reacted to ivan.popelyshev in Composite Layer and GPU Performance Tips   
    > they cost nothing
    unless you use filters . If you have 5 containers with filters inside each other that'll eat 5 renderTextures. Depth is important. Container with filters is effectively a layer.
  8. Like
    ZYandu reacted to ivan.popelyshev in Composite Layer and GPU Performance Tips   
    Containers aren't actually layers, they cost nothing. Do you use any RenderTexture's ?
    Why do you need two renderers instead of one? I thought its usually for old devices where JS CPU load is more important, and one of them gets updated rarely.
    Also, "antialias:true" can be cause of higher memory estimate.
  9. Like
    ZYandu got a reaction from ivan.popelyshev in [solved]Transparent PIXI renderer on top of html image causing white border   
    Makes sense, that solves it for me! Thank you! 🤘
  10. Thanks
    ZYandu reacted to ivan.popelyshev in [solved]Transparent PIXI renderer on top of html image causing white border   
    > I believe all that is happening is it adds the backgroundColor to the border of the sprite. Does that mean I should just not have a backgroundColor when using a background html image?
    That's true, because alpha is premultiplied and background (R,G,B,0) actually is ADDED to it.
  11. Like
    ZYandu got a reaction from ivan.popelyshev in [solved]Transparent PIXI renderer on top of html image causing white border   
    Sorry, I was out of town for the weekend ^.^ Hopefully this pixi playground works for you: https://www.pixiplayground.com/#/edit/DLhN7lSrT6uHC3uZAN3eJ
  12. Like
    ZYandu reacted to ivan.popelyshev in [solved]Transparent PIXI renderer on top of html image causing white border   
    It looks like premultiplied alpha issue, but im not sure. Please make a demo.
  13. Like
    ZYandu got a reaction from ivan.popelyshev in [solved]Transparent PIXI renderer on top of html image causing white border   
    I'm getting a side effect from having PIXI sprites over the top of an html image background. It seems like a white border or artifacts are created when transitioning between displaying the sprite and the image background. 
    The z-index layout in html for the image and pixi: 
    <!-- Background Html image --> <div className={css` position: absolute; z-index: 0; width: ${window.innerWidth}px; height: ${window.innerHeight}px; overflow: hidden; `} > <img src={backgroundImg} /> </div> <!-- PIXI Stage --> <div className={css` position: absolute; z-index: 2; transform: scale(${Math.min(window.innerWidth / 1920, window.innerHeight / 400)}); transform-origin: top left; overflow: hidden; width: ${window.innerWidth}px; height: 600px; `} ref={element => { props.updatePixi(element); }} /> Renderer settings:
    const renderer = useRef( new PIXI.autoDetectRenderer({ width: highwayWidth.current, height: highwayHeight.current, preserveDrawingBuffer: true, transparent: true, backgroundColor: 0xffffff, antialias: false, }) ); Removing sprites from the stage reveals more of the background, but adds white border artifacts to the other sprites now too.
    https://imgur.com/a/wCuLlbr
    Removing the background added white artifacts to the next sprites transitioning to the html image:
    https://imgur.com/a/1xOiAyc
    Any advice on getting rid of this? Thanks for any help! 😁
     
  14. Like
    ZYandu reacted to ivan.popelyshev in Pixi.Mesh gl_FragColor Alpha Channel   
    void main() { gl_FragColor = vec4(vColor, 1.0) * 0.5; } We use premultiplied alpha everywhere. Instead of (r,g,b,a) we store (r*a, g*a, b*a, a)
  15. Like
    ZYandu reacted to cafelatte in Pixi.Mesh gl_FragColor Alpha Channel   
    Hi,
     
    I've tried to change the Alpha Channel on gl_FragColor on a Mesh, but it doesn't show a result as I expect.
    For example, on the pixijs.io example ( https://pixijs.io/examples/#/mesh/triangle-color.js )
    void main() { gl_FragColor = vec4(vColor, 1.0); } If we changed the line into
    void main() { gl_FragColor = vec4(vColor, 0.5); }  
    It doesn't show any difference. Is there any workaround/settings I need to adjust to use the alpha channel correctly?
     
     
    Thanks.
     
  16. Thanks
    ZYandu reacted to ivan.popelyshev in iOS - Cordova slow RAF performance [Solved]   
    I've sent you invite to pixijs slack, in case you are interested and you use slack.
  17. Like
    ZYandu got a reaction from ivan.popelyshev in iOS - Cordova slow RAF performance [Solved]   
    No, I wasn't using any filters on it. All the colors and design were done in Adobe Illustrator before putting it in the project 😎
  18. Like
    ZYandu got a reaction from ivan.popelyshev in iOS - Cordova slow RAF performance [Solved]   
    @ivan.popelyshev, I think you were right to question the pixel width and height! I looked at the blue arrow png and it was 1920x1080 because of a ton of extra transparent space around the arrow. I edited it down to a much smaller resolution in Photoshop instead of scaling it down in Pixi and now it shows up again! I think this means that the canvas has trouble drawing pngs that have a greater original width or height than the canvas itself in Cordova's WKWebView. 
  19. Like
    ZYandu reacted to ivan.popelyshev in iOS - Cordova slow RAF performance [Solved]   
    I mean size in pixels. Width, height
  20. Like
    ZYandu reacted to ivan.popelyshev in iOS - Cordova slow RAF performance [Solved]   
    antialias: false ,  just in case if you set it to true...
  21. Like
    ZYandu reacted to Jorasso in iOS - Cordova slow RAF performance [Solved]   
    Are you sure you didn't turn on Battery Safe Mode when trying Cordova?
  22. Like
    ZYandu reacted to MrBread in Best practice for consistently moving x value of many sprites   
    It appears from your code that all of your sprites are the same. If this is the case, I suggest using a ParticleContainer instead as this will vastly improve rendering performance.
     
    const renderer = new PIXI.autoDetectRenderer({ width: 1920, height: 1080, preserveDrawingBuffer: true, transparent: true, backgroundColor: 0xffffff, antialias: true, }); let stage = new PIXI.display.Stage(); let spriteContainer = new PIXI.ParticleContainer(); stage.addChild(spriteContainer); for (let i = 0; i <= 150; i++) { let sprite = PIXI.Sprite.fromImage(tallLine); sprite.x = i * 10; spriteContainer.addChild(sprite); } requestAnimationFrame(rafGameLoop); //move all the sprites left 10 pixels per frame const rafGameLoop = () => { requestAnimationFrame(rafGameLoop); spriteContainer.children.forEach(sprite => { sprite.x = sprite.x - 10; }); renderer.render(stage); }  
  23. Like
    ZYandu reacted to jonforum in Best practice for consistently moving x value of many sprites   
    If you really want move sprites individually and not from container this is more optimised
    for (let i=0, l=spriteContainer.children.length; i<l; i++) { spriteContainer.children[i].x-=10; };  
    But move the container are the best practice.
    spriteContainer.x-=10;  
  24. Like
    ZYandu reacted to themoonrat in Best practice for consistently moving x value of many sprites   
    First... Just move the sprite container left 10 pixels, then it's children will all move with it.
    Second, avoid creating functions every frame. Use a basic for loop, or create a function that's reused. But don't create a new anonymous function every frame for within a forEach. You do that everywhere and the garbage will add up quickly.
  25. Like
    ZYandu reacted to ivan.popelyshev in How to make a glow / color fade with PIXI.filters.GlowFilter?   
    I have solution for that thing - custom GlowFilter, but i dont want to publish it without extra preparations, because there are several filters i want to move to special plugin, filters that emulate Flash.
    I'm afraid that my queue of "who to help and make simple hack in 15 minutes" is too big right now
    Until then, I suggest to use make progress-bar sprite-basd and prerender everything you can in several frames in photoshop.