• Content Count

  • Joined

  • Last visited

About Exca

  • Rank
    Advanced Member

Recent Profile Visitors

2,146 profile views
  1. Exca

    Performance question

    Here's a good source of info on spritesheets in pixi. A tutorial using texturepacker https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-and-animations-with-pixijs Basically what you do is use a tool that packs all your images into a single file + a file telling where each image is on that sheet. Then you load that configuration file (json in most cases) and use the textures/sprites from that sheet instead of an image. There are a lot of free tools also available, but I've been really happy with texturepacker so I dont really know about what's the best free one.
  2. Invisible is better than moving them outside. Items with visible = false do not update their transformations during the main loop. Items that are outside of the screen do, and they also get their rendering called if there's no culling implemented.
  3. Exca

    Performance question

    One way to optimize drawing of lots of different images is to store them in a spritesheet. That way you will use only one basetexture instead of multiple ones. That allows the images to be drawn in a singe batch instead of swapping textures every time image is drawn.
  4. Exca

    WebGL or Canvas Renderer as default

    You could also have an option screen and let player select what rendering to use. And then maybe have an FPS tracking system that notifies player that they could get better performance with another mode and then give a button to change renderer.
  5. Exca

    How to decrease heating up computer.

    One really great way of reducing gpu/cpu utiliziation is to skip rendering when nothing has changed. Especially good if you have lots of static content. Easiest way to do that is to have some global flag and everytime you update something set it to true and when rendering set it to false. Then just check before render if it's true or not. Skip rendering on false. That way you only get rendering when it is actually needed.
  6. If you have already working subprocess that does the thing, why not pass the output as base64 data inside a json if json is the only available transfer method? That way you could just create the basetexture with image that has src as something like "data:image/png;base64, datahere".
  7. Exca

    PIXI - many filters cause fps drop

    Depending on filters and the area they are applied to it they can be really expensive. What kind of filter you have?
  8. Exca

    Understanding pixi-particles

    You have the update timer running multiple times and your main emitter is common to all fo the particleExample instances. So you will have all of the previous updates ticking away with the current one. So each added panel is a multiplier for the speed.
  9. Exca

    shader toy shader to pixi filter

    I updated the fiddle to use another method for calculation of the implosion/explosion https://jsfiddle.net/6f5Lydot/1/ to make it a bit clearer for me as the one in shadertoy does things a lot differently how I usually do. That should produce uniform changes to center no matter what resolution the renderer is. Changing the formulas used in bulge & implosion can be used to change the look of the effect. [Edit] Also updated the pixi to latest.
  10. Exca

    shader toy shader to pixi filter

    Yeah, but that would be different when using the screen render as renderarea. Using app.renderer.screen is a special case with filters where the vTextureCoord maps directly from 0 to 1 for the visible area. When using filters with other filterareas, the rendering is done using a texture that is larger than the image (often to the closest power of two in widht & height), so the calculations wont match to 0.5 as the center. And as you want to have fullscreen effect you should use screen as filterarea. The problem with that with jsfiddle is that they have too old pixi version, it doesn't have the app.renderer.screen available.
  11. Exca

    shader toy shader to pixi filter

    You might need to divide or multiply something with the prop value. Not exactly sure what as the fiddle has no screen value so the values dont go exactly as they would with it.
  12. Exca

    shader toy shader to pixi filter

    https://jsfiddle.net/parsab1h/764/ The fiddle is using too old version of pixi to have the app.renderer.screen value as defined. So that effect wont work with that if image resolution is not the exact resolution of the screen. Should work with newer pixi also. Might require a bit of adjustments. I also refactored the iMouse & iResolutions off as they are shadertoy specific stuff and those dont really carry to pixi that well.
  13. I have done similar thing by adding single listener to the parent container and then raycasting in 2 dimensions to see what was hit. Basically just iterating the containers children and collecting the items which have hitarea containing the point.
  14. Exca

    shader toy shader to pixi filter

    Ah, that's because the shadertoy code is not complete webgl program. As in shadertoy the code you provide is injected into their main program that calls the mainImage function. You should pick up some of the existing filters and start from that point and apply the calculations to that.
  15. Exca

    shader toy shader to pixi filter

    Most of the changes you can catch from shader compilation errors. Cant remember the changes other than texture vs texture2d. The iChannel0 is a sampler2D from shadertoys first texture slot. It is given in shadertoy, if you are using filters then you should use uniform sampler2D uSampler; to get the texture to which you are applying the filter.