Jump to content


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by Exca

  1. You could extract the frames from canvas with toDataUrl or use the extract plugin to get the actual pixel data of a single frame. Then gather all of the frames and encode them into a video with some encoder, dunno if those exist in the browser, most likely someone has made one. You can do stacked rendering with multiple different ways. - Have 2 containers that move with different speeds. - Use overlapping canvases with each having their own renderer and move them. - Have each of your object in the scene have a depth value and move everything based on that. - Use rendertextures
  2. The currentTime is a value that starts increasing when you start the context. That's why the timing is done with current-start calculation. https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/currentTime 80ms sounds like it is not calculating correctly. Havent used pixi sound myself so not really sure what might be wrong with the progress event. If the audio is played without webaudio (which shouldnt happen on a modern browser unless explicitly told to do so) then those delays sound possible.
  3. Usually with Webaudio you could use audiocontexts currentTime and store the starting time when song is started. From that you can calculate position = context.currentTime - soundStartedAt. This should have no delay at all. Are you using pixi sound? Checking that source code the progress event looks like it should be correct timing. Can you see if you are using webaudio internally or htmlaudio? The later one does not have exact timing available.
  4. Easy way on how to get better looking downscaling is to find out the points where your game starts looking bad and then instead of scaling down the game containers / elements, you keep that good looking resolution and scale down the canvas element. This way the downscaling algorithm is not impeded by webgl limitations but can use the one that browser uses natively. Little bit hacky way, but it's a pretty well working workaround that can be achieved with small effort.
  5. You could make a filter that takes the world texture as input and the light mask as input and then just draw the world if light has value at that same position. And otherwise keep value hidden. Something like this: vec4 world = texture(worldTex,uv); float light = texture(lightTex,uv).a; //Using only one channel for light, this could also be light color + alpha for intensity gl_FragColor = mix( vec4(0,0,0,1), world, light);
  6. Do you have only canvas on the page? Then using lighthouse wont give very much detail as it has no components to analyze canvases. Only the dom-side of things, loadspeeds and stuff like that. Most likely the LCP is for the canvas element and for some reason that fails to be analyzed. It should go similarly as with images. Do you have an example on the site which fails?
  7. How do you use it and what sizes are your textures? How complex is the scene you render to RT? There's no additional hidden costs in rendering to rendertexture vs. rendering to screen, other than the additional memory usage.
  8. Just listen for wheel event on the window/document/element https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event
  9. You have basically two options. 1. Render the expensive stuff into a separate rendertexture and use that as you would any other sprite. Rerender the rt when things change. 2. Use two canvases. Update the expensive canvas only when needed. [Edit] For 1 you can use cacheAsBitmap = true to create rt of a container and use that instead of the whole render list. Though I'd suggest using a custom handling with own RT to handle this as debugging cacheAsBitmap can be a nightmare if there's some errors.
  10. I dont think the regular tilingsprite supports mirrored rendering out of the box. You could create a custom shader for it that detects if it's on an odd or even tile and then flips the uv-coordinates depending on that.
  11. Check the network tab if you are still getting the cors error. To fix that you would need to either run the game on the same domain as the images to ignore cors-rules or have the server send a crossOrigin header that applies to your domain or just a wildcard. The renderers null error might just be due to asset not being loaded as cors blocks it.
  12. How many sprites you have? There's a batchsize limit. When that is reached the current batch is rendered and new one is starting. You can change that size with PIXI.Settings.SPRITE_BATCH_SIZE. Default is 4096.
  13. 2048x2048 is always a safe bet. It's supported by virtually all devices that can run webgl. There used to be a site that collected statistics on different device data but it seems to be gone from the internet. You could use gl.getParameter( gl.MAX_TEXTURE_SIZE ) to get largest dimension the device supports. Maximum I would go is 4096x4096 and for cases where device says lower use either a downscaled version or have multiple textures.
  14. The bottleneck when rendering squares is just the amount of squares you would need to render if you used basic sprites. Rendering the squares to rendertexture and then rendering that texture to screen would make the frames where rendering doesnt change faster. But when the rendertexture needs to be rerendered then it would still take some time. And in webgl the whole frame gets repainted every time. If you are sufficient with having pixels be the squares and dont need anything fancy like borders / textures to squares then you could use additional 2d canvas and do the game of lif
  15. Very simple optimization. Instead of graphics use sprites with single white rectangle as their basetexture. Then apply tint to them to color the sprite. That way the squares can be rendered as a batch. That should be good enough for 150*200 squares (30k sprites). But for 1000 x 1000 (1M squares) you need to go deep into webgl rendering or have some other optimization strategy. Or would those squares be all visible at the same time? If not, then that would be doable by separating logic from rendering and only rendering a subsection of the whole area. And here's a little rundown about diff
  16. Add filter to your main container. Set the filterArea of the filter to renderer.screen if I remember right.
  17. You could do that by creating a shader with two texture inputs which blend between those two. The actual code & math inside the shader is out of my scope in reasonable time. As a starting point I would propably try doing somekind of convolution with previous frame as feedback and then moving towards target image. This is the closest example for blending. In the example a perlin noise image is used to determine the blending. In your case that would be the shader somehow morphing the images. https://pixijs.io/examples/#/mesh-and-shaders/multipass-shader-generated-mesh.js
  18. Exca

    Unlimited FPS

    If you find one, I would also be interested in that, though to other way (forcing browser to do rendering slower). Tried many flags but couldn't get the raf interval to change.
  19. Best way is to make the textures in multiple sizes beforehand and then load only the ones that are your wanted size. In theory you could do resizing and dynamic texture generation in client also, but you would suffer qualitywise when compared to doing the resolution changes with software with better scaling algorithms. Anyways if you want to do without uploading large textures to gpu and while still using original sized textures then here's a short way how you could do that: - Create a temp canvas that is you target resolution size. - Get 2d context from it. - Draw your image
  20. Added spinners pull request to examples. You can check that from pr or wait until it gets accepted to see it at examples.
  21. Exca

    Sprite compression

    There's plenty you can do with compression. For png/jpg images the amount of original image doesnt change how much memory gpu takes for that image. As those images get unpacked. But you could use compressed textures to remove decompressing and lower gpu memory usage. https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Compressed_texture_formats One thing I'm not really sure is that if you have 8 bit png does that become 8bit or 32bit image after decoding. When it comes to loading related compression (targeting minimal dl time and no compressed textures needed) my basic wo
  22. We're currently doing "ie mode" by putting 2d canvas on and game to low-end rendering mode ( limited effects, low quality assets etc). Before getting to play client gets a lot of warnings that you should change your browser as MS no longer supports IE and it's a bad idea securitywise to use it. If some user has problems with IE, then no debugging is done for those, just a generic message that official support for IE has ended and you should change the browser. Also not full ES6 as I'm using Haxe mostly. With typescript projects I use ES5/ES6/ESNext depending on the project and target
  23. https://pixijs.io/examples/#/mesh-and-shaders/multipass-shader-generated-mesh.js That example has a texture that gets passed to next shader. You should do similar but instead of shader rendered texture you would render your heightmap into a texture and then pass that texture to your shader.
  24. The covering element has to have interaction enabled as well as the other item. Only those that are marked as interactive and whose parents dont have interactivechildren are taken into account when checking interactions.
  • Create New...