All Activity

This stream auto-updates     

  1. Today
  2. Alain

    Low fps particles

    It has improved in Chrome, but in Firefox it's still the same.
  3. Yesterday
  4. That's exactly why a year ago we've added this awesome API into v5. Right now v5 is almost there, and you can experiment with v5-rc3. I really hope that you like that system because I made it exactly for cases like yours, it was VERY difficult to explain to everyone in the team and get an approval. People need access to textures, authors of PixiJS cant possibly know everything that user wants. This is how you get GLTexture: https://pixijs.io/examples/?v=v5.0.0-rc.2#/textures/gradient-resource.js if you call "baseTexture.update()" somewhere before the frame, it will notify TextureSystem that texture needs updating , and then when one of pixi renderers asks to bind that texture, it will call "TextureResource.upload" method. That's how it happens: https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/TextureSystem.js#L139 According to our main image resource, https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/resources/BaseImageResource.js#L64, you can track the state not only by dirtyId, but also by "glTexture.width/height" . Basically, if width and height are wrong you upload whole texture, otherwise you go for subImage. As for previous data, readPixels is tricky thing, its the only synchronous operation there. When I use it, I call it only after whole render(), only one time. I suggest to maintain your copy of teture independently from glTexture: in an array or in canvas in your TextureResource, that way you wont need to call readPixels(). SUMMARY: If glTexture width and height are wrong, upload whole array. Otherwise modify part of array you need, put that part into temporary array and call subImage. Dont forget to set width and height to correct values. and HAPPY DEBUGGING!
  5. Its better to use pure 2d context for that. Create a canvas, use `getImageData` . If you use it wiht pixi loader you can get canvas either in "texture.baseTexture.source" (v4) or in "texture.baseTexture.resource.source" (v5). Yes, PixiJS does not cover everything that 2d context does, its better to know how it works. I used context2d with pixi webgl many times : https://pixijs.io/examples/?v=v5.0.0-rc.2#/textures/gradient-resource.js Some people take images from loader, make bitmaps from them and use them for interaction P.S. You've missed, this thread is not related to your problem. It happens.
  6. Hello, My goal is to update a small part of a texture the fastest way possible with WebGL2, preferably using Pixi.js v5 (RC 3 is out). Am I right that a RenderTexture is going to re-upload the whole texture whenever there is a change? (this would not be good for a big texture, hence why I am looking for another method) I'm a complete noob when it comes to OpenGL, but I've googled a bit and figured that I can use gl.texSubImage2D() to upload just the part of the texture that I need to change. I didn't find a way to get the WebGLTexture object of a PIXI.Texture, so to be able to use that command I did something like this (not the complete code): renderer.addSystem(PIXI.systems.TextureSystem) renderer.TextureSystem.contextChange() // needed to do this loader.load(main) // and could not use gl.texSubImage2D() on tex before the loader called main function main() { let tex = resources['test'].texture let imgData = new Uint8Array(32*32*4) renderer.TextureSystem.bind(tex) renderer.gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, imgData) renderer.TextureSystem.unbind(tex) } But I wish that I had the WebGLTexture available so I could avoid messing around with PIXI.systems.TextureSystem, because I don't really know much about it or when and how it should be used. I also want to read the previous data and change it, I figured it can be done with: gl.readPixels(0, 0, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, imgData) But that needs the frameBuffer to be binded first... Hence I tried to also use the PIXI.systems.FramebufferSystem, lol: renderer.framebufferSystem.bind(fb) //fb = new PIXI.Framebuffer(tex.width, tex.height).addColorTexture(0,tex) gl.readPixels(0, 0, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, imgData) But it was not that easy, I didn't even find a way to unbind it. But I guess it is not supposed to be used for my little problem...? Maybe there should be some Pixi.js functions to do this? Maybe something similar to this: texture.getPixels(x, y, width, height, ArrayBuffer) texture.setPixels(x, y, width, height, ArrayBuffer) I'm new here btw, this is my first post I don't have much Pixi.js experience yet, but I really like it.
  7. Hello! I want to use png image as a height map for an isometric pixel game. I don't need to display it. I only need to load it and read pixel values in form of [r,g,b,a]. There are libs like png.js, which has png.getPixel(x,y). But I believe PIXI already has all I need for that. How can I do it? Instance of what class should I use? Or is there a way to convert a png image to a typed array? Or may be all this is a bad idea?
  8. You can use touchstart and touchend to track if user is holding down. Or pointerdown and pointerup.
  9. There is no such thing as pointerover for touch. It's the equivalent of mouseover, where you hover the cursor over an area but don't select it. Touch doesn't have that. Either you've pressed it or not.
  10. If you use projection for any kind of... projections , not just for ISO stuff, then I doubt it will work with canvas. otherwise just make "renderer.plugins['sprite2d'] = renderer.plugins['sprite'];"
  11. I'm totally new to pixijs and to game development in general. I need a help in fixing this error in devices that use canvas if webGL is not available. Im using projection plugin and it is seems like the error is from projection.sprite2d. I am researching about the issue and found PIXI.CanvasRenderer.registerPlugin but don't know how to use it. please help I'm stuck with this issue. TIA
  12. After a lot of googling I've fixed the problem with adding crossOrigin: true .add('tile_lumber', getImagePath('tile_lumber.svg'), { crossOrigin: true }) I have no idea what crossOrigin does or how it works but it seems to have solved the problem. I got the answer from If the problem occurs again, I'll post here.
  13. Please provide more information , my telepathy doesn't work on the words you wrote. @themoonrat is our pointer-master
  14. If you have too many canvases so that webgl context amount starts to break, you could use some canvases in 2d context. Also one thing that would need to be kept in mind is that only rerender the contexts that area actually visible / need rerendering, that way you can keep the performance hit at minimum. Custom application/render loop is something that you need in any case, as pointed out already by Ivan.
  15. I want to be a touch-like game, the pointerover on the mobile side has no effect.
  16. bubamara

    Low fps particles

    Now I have noticed you have these two in ticker loop : this.app.renderer.resize(window.innerWidth, window.innerHeight); this.mouse = this.app.renderer.plugins.interaction.mouse.global; Move them out of loop and resize the app on event to keep animate() as simple as possible animate() { this.app.ticker.add(() => { stats.begin(); this.particles.forEach(p => { p.update(this.mouse); }); stats.end(); }); }
  17. Last week
  18. Alain

    Low fps particles

    I'm using Firefox Dev Edition with Windows 10 and this is the result
  19. bubamara

    Low fps particles

    Hmm, for me it's a lot faster on Chrome (both Mac & Win), not so visible speed gain on Safari/Mac. On the other hand you're rendering ±100k sprites... edit: added screens
  20. Alain

    Low fps particles

    I changed the method, but the problem still persists. https://codepen.io/AlainBarrios/pen/MRXJxg
  21. Thanks, I really appreciate it! New cartoon-style texture images are ready here: TXR – BRICK - Cartoon https://soundimage.org/txr-brick-cartoon/ TXR – CONCRETE / PAVEMENT - Cartoon https://soundimage.org/txr-concrete-pavement-cartoon/ TXR – GROUND – Cartoon https://soundimage.org/txr-ground-cartoon/ TXR – METAL – Cartoon https://soundimage.org/txr-metal-cartoon/ TXR – WOOD – Cartoon https://soundimage.org/txr-wood-cartoon/ I hope some of them come in handy!
  22. thanks noel for your help have a good day bro
  23. From someone who is looking at transitioning from Phaser to Pixi and was looking at this exact question, thanks @ivan.popelyshev for answering this (and many other) Pixi questions!
  24. @ivan.popelyshev I had removed caching thus fixed the problem (sort of) But now I wanted my game to be faster thus I'm trying to cache everything. This problem is back. I'm digging deeper into what is going on, so far what I have found is - This bug happens only on chromium browsers (chrome, brave etc..) - This bug happens only when using webGL rendering not canvas: https://youtu.be/9oTXm5ejWWY I'm looking deeper into how renderers work but I lack a lot of knowledge. I might create a standalone project which reproduces the bug. I'll post here if I do.
  1. Load more activity