ivan.popelyshev

Members
  • Content Count

    3069
  • Joined

  • Last visited

  • Days Won

    32

Reputation Activity

  1. Like
    ivan.popelyshev got a reaction from jonforum in Need guidance on how to do some low level GL operations   
    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!
  2. Like
    ivan.popelyshev reacted to JoakimCh in Need guidance on how to do some low level GL operations   
    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.
  3. Like
    ivan.popelyshev got a reaction from Rodrigo in Canvas renderer - masks problems   
    OK, so i was wrong about place, its here: https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/canvas/utils/CanvasMaskManager.js#L76

    https://www.pixiplayground.com/#/edit/wJM_TMiQGVGBuLCdXmKQ4
    I made a patch in the end of that fiddle. That patch works only if you specify holes in different direction than the shape.

    Pixi is not an engine, its open-source lib that can be a part of your engine, and whoever uses it also patches whatever he needs and submits PR. There's no guarantee that certain bug will be fixed, it all depends on the mood of core team and contributors.

    Holes were added only a year ago, because they weren't available in WebGL version and we cant add canvas-only features. They are passed to "earcut" triangulator lib. When it was done, those changes didnt affect CanvasMaskMakager.
  4. Like
    ivan.popelyshev got a reaction from lei in how to register projection plugin in PIXI.canvasRenderer   
    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'];"
  5. Like
    ivan.popelyshev reacted to takopus in SVG 'leaking' bug with WebGL renderer on Apple devices   
    Some time ago there was a bug report of a problem with rendering SVGs in iOS and MacOS, at least older ones. You can see it there: https://github.com/pixijs/pixi.js/issues/3433, but here is a short description as far as I've digged it. On some old Apple devices, iPad 4 / iOS 10 for me, if you load a number of SVGs, make sprites of them and place said sprites on stage, some of these sprites will 'leak' on one another. For example, if you load a green rectangle SVG and then blue circle SVG, sprite made from second one will contain expected circle drawn above unexpected rectangle. This is an old bug still found in v5.0.0 rc-3.
    Sadly, I found no solution to it. There are cases when it shows and cases when it doesn't, but no way to be sure. Since it is crusial for the project I'm working on, I've made a short test code to check if the current device have this bug, so I can switch to PNGs. In case anyone needs this, you can see it below. It is written for Pixi v5.0.0 rc-3
    https://codepen.io/takopus/pen/EJpjXL
    The idea is simple: I load assets - rectangle and circle - make sprites, place them on stage and render it (you have to do it to catch the bug). Then I extract circle into Uint8ClampedArray of pixels and get alpha value of some corner pixel. If there is no bug, it will be 0 (since there is no pixel there). If the bug is here, it will be 255 cause of rectangle rendered below the circle.
    Hope this will help someone until this bug gets fixed!
  6. Like
    ivan.popelyshev got a reaction from jonforum in Prevent event from propagating to parent   
    https://github.com/pixijs/pixi.js/blob/dev/packages/interaction/src/InteractionEvent.js#L52
  7. Like
    ivan.popelyshev got a reaction from j0k3r in How to run animatedsprite outside ticker   
    In general: handle animations, events and cleanups separately. 
     
    app.ticker.add(() => { //code that updates ALL MY ANIMATIONS MANUALLY }); app.ticker.add(() => { // suppose we want to clear someContainer let children = someContainer.children; let j = 0; for (let i=0;i<children.length;i++) { var child = children[i]; if (child.dead) { //delete it somehow, remove from list of animations and so on } else { children[j++] = i; } } children.length = j; }); Of course it has to be adapted to your style of coding and your case.
    I know that most people when they start something more than stupid demo stumble across the problem, and I provided PR in PixiJS that adds API but it was too experimental for our team, it was rejected. I'll try to make it again this summer. It was about `detachChild` thing that handles actual removal later, after all events.
     
  8. Like
    ivan.popelyshev got a reaction from ZYandu 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.
  9. Like
    ivan.popelyshev reacted to jonforum in PixiJS Examples   
    To be honest I really like the new organization, thank you very much for your work and all the teams your were awesome!.
    Difficult to target lack example without being confronted in real time, however I can bring some suggestion.

    In my opinion, I am not very comfortable and not yet study any of the following theoretical notions.
    So you can take what you want  if you want add more basic fun example.
    Demo on batching and wrong batch hierarchy and theories. Demo on the implementation and setup of customs shadders filters can be take from https://www.shadertoy.com/
    https://github.com/pixijs/pixi.js/wiki/v5-Creating-filters
    https://www.pixiplayground.com/#/edit/5bqI8BM2qadFFt8eCWc7n Demo of a basic view-port and culling stage Demo for get pixel , similar in phazer https://phaser.io/examples/v2/bitmapdata/get-pixel Demo for timeLapse, slow motion the pixijs tikers  Demo of pixi-sound plugin. PLUGIN-LAYERS with container mask for lights Let's be a little crazy, a little live inspector and debugger inspired by the work of bfanger https://github.com/bfanger/pixi-inspector
    ...
     
     

     
  10. Like
    ivan.popelyshev got a reaction from DNIWE in Structs as uniform type (in fragment shader)   
    wait a moment, making a demo. I believe we have something like that in v5, i dont remember about v4.
  11. Like
    ivan.popelyshev got a reaction from Jeremy G in Pixel shift on iOS only   
    What version of PixiJS do you use? I remember that I fixed serious precision problem somewhere in 4.8.3
  12. Like
    ivan.popelyshev reacted to jinzo7 in "Operation is insecure" error in Firefox - Texture.fromVideo(videoElement)   
    Said in that way sounds very trustworthy.

    Okay I will make more research around. Think the Firefox forum will be affected too.

    Thank you very much! I will write when something new emerges on the horizon !
  13. Like
    ivan.popelyshev got a reaction from jinzo7 in "Operation is insecure" error in Firefox - Texture.fromVideo(videoElement)   
    > I know it's not directly linked by PIXI but still I need help.
    You're very humble, I pinged people who have experience with videos in pixijs to help you  
  14. Like
    ivan.popelyshev reacted to jinzo7 in "Operation is insecure" error in Firefox - Texture.fromVideo(videoElement)   
    Hello!
    The project is old so PIXI v.3.0.11 is used.
    For streaming - Flashphoner via WebRTC
    Steps to reproduce

    1. Start video stream in html video element - stream.start(myDiv) which creates streamVideoElement in myDiv
    2. When stream fires STREAM_PLAYING event the method PIXI.Texture.fromVideo(streamHtmlVideoElement) is called and the returned texture is set to the specific PIXI.Sprite instance.
    3. Somewhere after this the Firefox browser receives error thrown by WebGl:
    Additional information
    The problem is happened very rerely Only Firefox Stream(video element) is not failed after the error   In the PIXI source code that means:
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); What we tried
    tried to set  video.crossOrigin = "anonymos" to the video element but no success. tried to dispose video like video.src = "" and etc according some advices related to the localStorage caching I know it's not directly linked by PIXI but still I need help.
    And the image of the current block when exception was thrown.
     

  15. Like
    ivan.popelyshev reacted to ZYandu in Shrinking rectangle graphic width is also shrinking / hiding graphic lineStyle   
    That makes sense! Mad respect Ivan, you are always very helpful! 🤘
     
  16. Like
    ivan.popelyshev reacted to ZYandu in Shrinking rectangle graphic width is also shrinking / hiding graphic lineStyle   
    I'm setting the starting width of the blueBar rectangle based on how long a chord needs to be held. Then I decrease the width of the blueBar in the game loop:
    const holdBar = new PIXI.Container(); let blueBar = new PIXI.Graphics(); blueBar.lineStyle(2, 0x006ba6); blueBar.beginFill(0xffffff); blueBar.drawRect(0, 0, Math.floor( 8 * (howLongDoesTheChordLastInMs / 16.67) - 50 ), 10 ); holdBar.addChild(blueBar); containers.current.holdBar.children.forEach(blueBar => { console.log("my linestyle is:", blueBar.lineWidth); if(blueBar.x <= 100){ blueBar.width = blueBar.width - 8; } else{ blueBar.x = blueBar.x - 8; } }
    The result is that the lineStyle is getting chopped off even though the console.log still shows a lineWidth value of 2.

    My guess is that the lineStyle is getting hidden by the container, or that graphics don't like having width dynamically changed in the game loop. 
    Thank you for any advice on how to fix this! 😁
  17. Like
    ivan.popelyshev got a reaction from ZYandu in Shrinking rectangle graphic width is also shrinking / hiding graphic lineStyle   
    setting width is actually changing scale. Unlike Flash, PixiJS doesnt have auto-scaled lines, lineWidth works in local coordinates, so vertical lines become very thin if your scale is small. If you have only a few bars (20 or so) you can just clear() them and refill again with the other drawRect width param. Judging by your labels that's the case
  18. Like
    ivan.popelyshev reacted to Jeremy G in Pixel shift on iOS only   
    I am having a strange issue that only occurs on iOS devices. I am working on a slot machine, and when the reels stop I need to animate the symbols that have landed. The reel symbols are standard images, and to animate them I overlay an animated sprite on top of them (at the same position) and play their animation. This works perfectly fine on desktop and android browsers, but for some reason on iOS the animated sprite seems to be slightly shifted to the left (like 1 pixel or seemingly less...). This also occurs when I use pixi-spine animations, but only on iOS.  
    So far I have tried setting the roundPixels propriety of the renderer to true, but it did not do anything. I have also tried setting the precision of the fragment shader to "highp" but it did not resolve the issue. The game I am working on has not yet be released so unfortunately I cannot include screenshots/code from the project to illustrate my problem. I know this leaves you guys with not much information about the problem, sorry about that. I can provide more details and clarifications if needed. But I am not doing anything out of the ordinary, I am just creating an animation, adding it as a child of my slot machine's reels and then playing it.
    Since this is iOS specific I was wondering  if there was a setting or something that I could try to eliminate the problem. I have even remote debugged my iOs device and when I do a console log of the animated sprite position and of the image position, I get the exact same values as I do on desktop and other devices. 
    Previously I had an issue with "animation wobble" on ios (https://github.com/pixijs/pixi.js/issues/3742) which was solved by setting the fragment shader precision to high, but this is a different issue, it's really a position shift/offset. Also I am using the latest version of pixi.
    Does anyone have a suggestion I could try?
    Thanks!
  19. Like
    ivan.popelyshev reacted to xerver in Request to moderator to stop cyberbullying in the forum.   
    No bans are happening here (yet). @5neia_opo2@google-mail.ooo, try to understand the frustration people are experiencing. A new user came to the forum and in nearly every post they made trashed the project they were asking about. A lot of people here put in a lot of time and effort to not only to develop the project, but answer questions here as well. I was definitely frustrated reading your responses as someone who has put 6+ years of their life into this project. @botmaster did a poor job of handling that situation, but has apologized and I'm sure will do better in the future, as will you as well.
    Let's all be adults about this, acknowledge we did something wrong, and move on.
    @5neia_opo2@google-mail.ooo you are free to ask any question you need help with, but I definitely recommend reading through some tutorials, the examples, and checking the API docs before asking questions. It will often lead to you finding the answer yourself, and there will be less fatigue for the people answering here on the forum. I'd also recommend you approach things you don't understand, or decisions you disagree with, with a more open mind. Try to learn and grow the new library, not all libraries are alike and different problem spaces call for different solutions. Having a bad attitude is a good way to earn ill-will in the community and you may no longer get the help you expect if you are ungracious about it.
    When you find inconsistencies, or things you think should work differently, then change it! Pixi.js is an open source library built by the community. Everyone gets a chance to make the library better by contributing to it. The best way to get problems you have fixed, are to fix them yourself.
  20. Like
    ivan.popelyshev reacted to botmaster in Request to moderator to stop cyberbullying in the forum.   
    I've been asked to apologize so here it is, I apologize. That user can keep blasting PIXI post after post I will not respond to it. 
  21. Like
    ivan.popelyshev reacted to mcfly in Another collision detection discussion   
    Hi all,
    I'm new to Pixi.js, so excuse me, if the answer to my question is obvious.
    I'm building a 2d platformer where I have a PIXI.Container which contains a few sprites (let say player's arm, body, head etc.).
    Based on the user input I'm moving the whole container (not each sprite individually). I also have container which contains all platforms of the level (they are all of type PIXI.Spirte).
    I want to detect when the player's container intersects with any of the platforms and stop the container from moving forward (the usual stuff).
    Currently I'm using the Bump.js library (https://github.com/kittykatattack/bump). But I'm encountering few problems.
    First of all Bump.js doesn't work for 'container vs array with sprites' type of collision, so I've tried to detect an intersection between each player's sprite against the array with platforms. Basically I'm using the following:
    player.move(); // move the player's container to any direction BUMP.hit(playersArm, platformsArray, true, false, true); BUMP.hit(playersBody, platformsArray, true, false, true); BUMP.hit(playersHead, platformsArray, true, false, true); This is testing for intersection between each player's sprite and stops it from moving, if there is a collision. All this is working fine and if there is an intersection the intersecting player's sprite position will be set to a value that is not intersecting with the platforms. However all the other sprites will continue moving, as they are not yet intersecting with the platforms. Hope I expressed myself clear.
    Have you ever had such problem and how did you solve it? I can only think of building a custom collision detection logic which works with 'container vs array with sprites', so I don't have to care for each player's sprite individually, but work with the container. Do you know of any library that already handled such cases?
    Or maybe I've been wrong from the start by taking such approach (having player's container with several sprites in it)?
    Thank you in advance.
  22. Like
    ivan.popelyshev reacted to mcfly in Another collision detection discussion   
    @ivan.popelyshev, I understand that PIXI is used for rendering only. I don't expect it to have built-in physics methods. I was trying to understand if I'm doing something wrong, as I'm sure a lot of people has encountered the same problem. Thank you for your detailed explanation. I'll definitely wait for the article you've mentioned.
    @bubamara, thank you too for your suggestion.
    I'll try to work something out of both your suggestions.
  23. Like
    ivan.popelyshev reacted to 5neia_opo2@google-mail.ooo in def   
    def
  24. Like
    ivan.popelyshev got a reaction from hard75 in Pixi js editor   
    i think that editor was for phaser2, and phaser2 was built on pixi so you can do something like that , even take some code. I can ask mightyfingers if they are ready to share their old work
     
  25. Like
    ivan.popelyshev got a reaction from hard75 in Pixi js editor   
    There are solutions but nothing is easy. There's pixi-svg https://github.com/bigtimebuddy/pixi-svg that can take info from svg. There's also Tiled editor and https://github.com/eXponenta/pixi-tiled that allows to take polygons and sprites from it, but I dont remember if it has export to graphics, but hey, you can add it!
    Currently I work on solution to open SWF files so people would create graphics in Adobe Animate. 
    I think that you can do something for your case, I saw that teams who made games on pixi with their own engine always did their own editors.
    I do not know why there is no Graphics, I never needed it and I guess people hold their stuff and dont release it  I think that https://twitter.com/Pix2d is going to add support to pixi soon.