ivan.popelyshev

Members
  • Content Count

    3453
  • Joined

  • Last visited

  • Days Won

    79

Reputation Activity

  1. Like
    ivan.popelyshev got a reaction from 8Observer8 in The "Learn Pixi.js" book. TypeScript Port   
    Thanks for trying to making my job easier. The more stuff we make, the easier it will be to answer all the newbie questions.
    I'm also looking for the moment when i'll be able to integrate everything together - docs, wiki, hacks, examples, tutorials.
  2. Like
    ivan.popelyshev reacted to 8Observer8 in The "Learn Pixi.js" book. TypeScript Port   
    This is an official link to original book examples: https://github.com/kittykatattack/learningPixi
    I will public examples on:
    Playground. You will be able to see a code and a result. I use complication to  AMD modules (Asynchronous Module Definition) and the RequireJS library to load AMD modules GitHub Pages. I use compilation to CommonJS modules. I bundle JS files to bundle.min.js using Browserify and minify it to bundle.min.js using UglifyJS Source code on GitHub: will be later I will NOT use Webpack, Gulp, Grunt and so on. I will find an instruction how to build examples. I will public the instruction on GitHub in the README.md file.
    Note. Release version is loaded more quickly, but on playground you can see a code, you can make a fork, change the code and save it with new link.
    Hello World: playground, release Displaying the canvas: playground, release
     
  3. Like
    ivan.popelyshev reacted to alexzchen in anchor doesn't work in custom filter   
    I wrote a filter to achieve special effects. Part of the code is as follows,scale and rotate works well,but the anchor I set seems not right,the sprite still rotates around the upper left corner.
    constructor(texture:PIXI.Texture) { super(MyFilter.vertSrc, MyFilter.fragSrc) this.maskMatrix = new PIXI.Matrix(); let sprite = new PIXI.Sprite(texture); app.stage.addChild(sprite); sprite.visible = false; this.maskSprite = sprite; this.maskSprite.anchor.set(0.5) //it doesn't work! this._translate = [0, 0]; this.uniforms.mapSampler = sprite.texture; this.uniforms.filterMatrix = this.maskMatrix; } translate(x:number, y:number) { this._translate[0] = x; this._translate[1] = y; this.uniforms.vTranslate = this._translate; } scale(x:number, y:number) { this.maskSprite.scale.set(x, y); } rotate(rad:number) { this.maskSprite.rotation = rad; }  
  4. Like
    ivan.popelyshev reacted to mattstyles in How to make waterfall using pixijs?   
    That's nice using particles. Looks great.
    Using a shader would also be an option for water simulation.
  5. Like
    ivan.popelyshev reacted to jonforum in How to make waterfall using pixijs?   
    https://codepen.io/jackrugile/pen/Knawg?editors=0010
  6. Like
    ivan.popelyshev reacted to Likl in I am confused by PIXI.Graphics.getBounds () behavior   
    I am a new for PIXI.
    When I want to draw surrounding line on a rectangle , i use getBounds() method.
    But there is  something difference between 2 calls,  the first time I got a coordinate which is relative to the app stage,  second time I got a coordinate which is relative to the  browser window.
    However, between two calls, the  invoked PIXI.Graphics has the same parent and children .I just don't know why is it. 
  7. Like
    ivan.popelyshev reacted to jkm in Color palette Filter   
    Thanks  I sort of got a pallet limiter shader working. It's probably a monstrosity but it works. Code below in case someone ever finds it useful.
    For now I'm hardcoding each color into the fragment shader because I've had a lot of issues passing vec3 uniform into the shader and iterating it. 
     
    import { Filter } from 'pixi.js' import { defaultVertexShader } from './shaderDefaults'; export class PaletteLimiterBuilder extends Filter { constructor(palette: RgbColor[]) { super(defaultVertexShader, buildFragmentShader(palette)); console.log(this.program.fragmentSrc) } } const buildFragmentShader = (palette: RgbColor[]) => { let parsedPalette = `` for(const {r,g,b} of palette){ parsedPalette+= `TRY(${r/255}, ${g/255}, ${b/255});\n` } return ` precision mediump float; varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform vec4 filterArea; float hash(vec2 p) { return fract(1e4 * sin(17.0 * p.x + p.y * 0.1) * (0.1 + abs(sin(p.y * 13.0 + p.x)))); } float compare(vec3 a, vec3 b) { a*=a*a; b*=b*b; vec3 diff = (a - b); return dot(diff, diff); } void main(void) { const float pixelSize = 0.5; vec2 c = floor(vTextureCoord.xy / pixelSize); vec2 coord = c * pixelSize; vec3 src = texture2D(uSampler, vTextureCoord).rgb; vec3 dst0 = vec3(0), dst1 = vec3(0); float best0 = 1e3, best1 = 1e3; # define TRY(R, G, B) { const vec3 tst = vec3(R, G, B); float err = compare(src, tst); if (err < best0) { best1 = best0; dst1 = dst0; best0 = err; dst0 = tst; } } ${parsedPalette} # undef TRY gl_FragColor = vec4(mod(c.x + c.y, 2.0) > (hash(c * 2.0 + fract(sin(vec2(1.0, 1.7)))) * 0.75) + (best1 / (best0 + best1)) ? dst1 : dst0, 1.0); } ` } export interface RgbColor { r: number g: number b: number }  
  8. Like
    ivan.popelyshev reacted to mattstyles in Latest version persists in browser   
    Can you check what you have in your package.json to make sure npm is doing what you think it's doing? i.e. making sure it's explicitly setting 5.1.2
    After that check the package.json inside pixi.js inside your node_modules folder for the version there.
    After that you need to make sure your bundler is not mucking around, as you mention a service worker it looks like you're already looking at this.
    _edit_ ooh, have you checked your package-lock.json file? it could well be the 'caching' issue is in there.
  9. Thanks
    ivan.popelyshev got a reaction from jSwtch in How to PIXI.resources.SVGResource   
    actually, SVGResource is created automatically by loader, with baseTexture and Texture , its inside "res.svgTest.texture.baseTexture.resource"
    you can just create a sprite based on it: "new PIXI.Sprite(res.svgTest.texture" - that'll work  
    Yes, there are 5 different objects here :
    1. sprite - element of the stage tree, like in Adobe Flash.
    2. texture - region of baseTexture
    3. baseTexture - stores things in videomemory
    4. texture resource - DATA that can be uploaded to videomemory, and how exactly to convert it to RGBA
    5. raw data from loader
    When you get more experience, you'll understand why is it wrapped like that. Basically, if you have some other text vector format (not svg), you can make your own resource that have parsing and uploading algorithm and re-use it for many images.
  10. Like
    ivan.popelyshev got a reaction from Karthik in PIXI, Suggest optimizations to minimize CPU/GPU   
    Oh, I forgot to welcome you to the forums!
    I'm glad another "hi im new here but i need to do this hard task"  went well. Usually its 50/50 whether the person is good enough to solve hard problems straight from first post.
     
  11. Like
    ivan.popelyshev reacted to Aaron McGuire in Animate sprite on a graphics path with Pixi 5   
    Thanks Ivan!
    Really appreciate your help 🙌
    I put together an example https://www.pixiplayground.com/#/edit/pPTWD0iyuzrFQ4xUTYtY_
    I'm trying to make "circleNob" animate along the top of the path at same time but I can only get it to work after the path has been created.
    I'm not sure where "geometry.invalidate" would fit in here.
  12. Like
    ivan.popelyshev reacted to Karthik in PIXI, Suggest optimizations to minimize CPU/GPU   
    Hello Gurus,
    I'm working on a project where I have 400,000 static rectangles (5px*5px)  and a 20 rectangles that get added dynamically every second. At any given point in the frame, I only need to keep 3000 rectangles in the viewpoint. I'm using single graphics object and clear() method to render 3000 rectangles every sec (draw + clear). I have pan/zoom functionality added as well, and I'm using downsampling to remove overlapping pixels and reduce the number of points that I draw at any given point (to around 5000 rectangles).
    It works fine but the CPU/GPU usage is around 15%-23%. I'm looking for some suggestions to optimize CPU/GPU and  memory usage and reduce the load on CPU/GPU. I set antialias:false on the app. It seems to help a bit. Any further suggestions to improve performance would be greatly helpful. Thank you.
     
    Here are couple of things that I tried, but no luck.
    1)Instead of draw+clear, I created sprites using graphics and moved them around. That did not help either.
    2)I cannot avoid clear and redraw because I have 400,000 points to draw. So I cannot draw all at once and have to downsample. Also, dependeing on the view window, I need to rescale the rectangles, which is extremely difficult to achieve without repaint.
     
  13. Like
    ivan.popelyshev reacted to Karthik in PIXI, Suggest optimizations to minimize CPU/GPU   
    My response in red
    You certainly need chunks. Use transform (position) to scroll things. Store 200-500 points in a single graphics, update only last one, destroy or just make "renderable=false" those who dont appear in camera right now. For zoom use different set of graphics - every 2nd point, every 4th poiint, every 8th and so on, in other words spawn log2 strips , level of detail. LoD also helps the quality, because 100 vertex per pixel is really an overkill for geometry 😃 . I am doing the same thing (pick every ith point depending on window size, instead of showing it all) to reduce points. That being said, I'm having to do this real time (as I zoom in and out) so have to clear and repaint every frame depending on window size & total points in frame. May be if there is a way todo this without clear and repaint, it might solve my issue. If you could point me to some examples that do what you explained, that can really help. Thanks again.
    The other issue is Graphics lineWidth - if you want it to be adjustable through zoom, you change the style internally "graphics.geometry.graphicsData.lineStyle" and call "geometry.invalidate()" on all visible graphics elements. The line thickness is constant.
    Dont use drawCircle() for points when you have many points - geometry will have colossal size. Use lines or rectangles. I am using rectangles, and lines. No circles.
  14. Like
    ivan.popelyshev reacted to Karthik in PIXI, Suggest optimizations to minimize CPU/GPU   
    The line thickness is always constant (3pixels) in relative to the screen. The line length however is varying as I have to resize it to the window size. i shared a picture below that shows exactly how it looks.
    https://ibb.co/Gkhzw7G
    I'm not clear on how to avoid repaint with just reposition and scale, without a way to hide/show dormant rectangles.
     
  15. Thanks
    ivan.popelyshev got a reaction from Karthik in PIXI, Suggest optimizations to minimize CPU/GPU   
    Is line thckness constant relative to stage (zoom) or screen? You dont need to clear() and repaint every time if you just adjust position and scale. clear&refill is needed only for chunks that weren't visible in previous frame, or the one that is updated (new data).
    UPD: I love that kind of threads! When you make the main algorithm, while pixijs or any other renderer or framework is just your building blocks
  16. Thanks
    ivan.popelyshev got a reaction from Karthik in PIXI, Suggest optimizations to minimize CPU/GPU   
    OK, if its relative to screen then we're fucked. Try change lineStyle internally and call "geometry.invalidate()". https://www.pixiplayground.com/#/edit/3AKL1vurX38ct_sY~43Ap
    That eats a bit less CPU but its still a re-upload. I know that there's a plugin in development that allows to change lineWidth relative to screen entirely on GPU, but cant give you code yet.
  17. Like
    ivan.popelyshev got a reaction from Karthik in PIXI, Suggest optimizations to minimize CPU/GPU   
    Thank you!
    You dont need to show 400k points on the same screen because screen is maximum 4k , right?
    You certainly need chunks. Use transform (position) to scroll things. Store 200-500 points in a single graphics, update only last one, destroy or just make "renderable=false" those who dont appear in camera right now. For zoom use different set of graphics - every 2nd point, every 4th poiint, every 8th and so on, in other words spawn log2 strips , level of detail. LoD also helps the quality, because 100 vertex per pixel is really an overkill for geometry 😃
    The other issue is Graphics lineWidth - if you want it to be adjustable through zoom, you change the style internally "graphics.geometry.graphicsData.lineStyle" and call "geometry.invalidate()" on all visible graphics elements.
    Dont use drawCircle() for points when you have many points - geometry will have colossal size. Use lines or rectangles.
     
  18. Thanks
    ivan.popelyshev got a reaction from Karthik in PIXI, Suggest optimizations to minimize CPU/GPU   
    400k  is too slow to draw with any geometry, whether its Graphics or Sprites. maybe pixi-tilemap plugin can handle that but im not sure.
    You need RenderTexture's, organize them in chunks, redraw only those that were changed. In case of zoom you can make a queue - which renderTextures has to be re-drawn with better resolution.
  19. Like
    ivan.popelyshev reacted to d13 in Bump.js collides with sprite way too soon   
    Have you tried the pixi plugin for Chrome? It will display the actual sprite bounding boxes for you.
    https://chrome.google.com/webstore/detail/pixijs-devtools/aamddddknhcagpehecnhphigffljadon?hl=en
    Bump.js is my project, so I'm to blame if there's a problem with it! 😀 But my guess is that the actual width and height of the sprite is bigger than you think it is because of child sprites increasing its size.
  20. Like
    ivan.popelyshev reacted to Karthik in PIXI, Suggest optimizations to minimize CPU/GPU   
    Thanks for the reply Ivan. I see  your response in all the other posts and you don't know how much you have helped  me without you ever knowing it. I want to first thank you for all the time you spent sharing your knowledge in this forum.
    Let me elaborate a bit so that I explain my issue more clearly. I'm trying to plot time-series data that is captured every second upto a history of 1 day. That equates to 86400 points (roughly 100k) and 4 properties each second, so 400k points. Now, by default I show the last 1000 points, and the current information that comes every second. So the  frame is constantly moving to the right showing the current data. When the user zooms or pans I have to show historical data (that is static) by squeezing it and fitting it in the frame. So the overall data looks like a long horizontally elongated rectangle (image : https://ibb.co/7gw1mPb);
    So 99% of my data is static.  1% is dynamic data that gets captured second. So if there is a way to add all my points to a container that takes all the data, and later use some transformation to rescale and display, that would be the best.
    Also, I wouldn't mind paying for hourly rate for consultation  to provide some technical guidance on how to approach this problem.
    Thanks again.
  21. Like
    ivan.popelyshev reacted to visgotti in PIXI Spine shadow filter optimization?   
    Does anyone have experience optimizing/caching a DropShadow filter on spine animations? I was thinking that I apply the filter then each time a new unique combo of bones/trackEntries are played, i'll "hash" the combo (give it a unique string id based on frame index, skin name, etc) and then render the dropshadow to a render texture to be used the next time that "hash" is being played in the animation.
    Has anyone done anything like this or have any tips that can save me some time in the long run? 
  22. Like
    ivan.popelyshev got a reaction from charlie_says in Add functionality to existing PIXI Class   
    PIXI.Point.prototype.something = function() { ... }
  23. Like
    ivan.popelyshev got a reaction from motla in Apply a Container alpha to a child Mesh   
    Its relatively new API, you are the first one who ask to add more features to it.
    I believe it was made that way because of MeshMaterial: https://github.com/pixijs/pixi.js/blob/dev/packages/mesh/src/MeshMaterial.js#L146  , you can use "new MeshMaterial({ program: Program.from(...)})" , it has special "update" function that mixes alpha and tint to a single uniform.
    MeshMaterial is used by SimpleMesh and other generated meshes. When you have more experience, you can make custom generated meshes too
    Also, there are certain things that's better to leave for tutorials or "rights of passage"  Mesh is supposed to be basic class for user-custom things, if we put everything in it - it will stop being an easy one.
    However, I agree that we have to put it in wiki or in docs somewhere.
  24. Like
    ivan.popelyshev got a reaction from motla in Apply a Container alpha to a child Mesh   
    Welcome to the forums!
    Congratulations with hitting a problem that is not possible to solve through docs in your first question on this forums.
    However, PixiJS is not a black box, it has sources: https://github.com/pixijs/pixi.js/blob/dev/packages/mesh/src/Mesh.js#L275
    OK, either you override _renderDefault, either make "update" function that'll pass calculated alpha to uniform.
    https://www.pixiplayground.com/#/edit/dCSAWarvEMdFqWip1BcuO
    const shader = PIXI.Shader.from(` precision mediump float; attribute vec2 aVertexPosition; uniform mat3 translationMatrix, projectionMatrix; void main() { gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); } `,` precision mediump float; uniform float alpha; void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0) * alpha; }`); shader.update = function() { shader.uniforms.alpha = shader.alpha; }  
    btw, that code in _renderDefault is low-level pixi over webgl, you can add hack more stuff if you override it
  25. Like
    ivan.popelyshev got a reaction from jonforum in Apply a Container alpha to a child Mesh   
    Welcome to the forums!
    Congratulations with hitting a problem that is not possible to solve through docs in your first question on this forums.
    However, PixiJS is not a black box, it has sources: https://github.com/pixijs/pixi.js/blob/dev/packages/mesh/src/Mesh.js#L275
    OK, either you override _renderDefault, either make "update" function that'll pass calculated alpha to uniform.
    https://www.pixiplayground.com/#/edit/dCSAWarvEMdFqWip1BcuO
    const shader = PIXI.Shader.from(` precision mediump float; attribute vec2 aVertexPosition; uniform mat3 translationMatrix, projectionMatrix; void main() { gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); } `,` precision mediump float; uniform float alpha; void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0) * alpha; }`); shader.update = function() { shader.uniforms.alpha = shader.alpha; }  
    btw, that code in _renderDefault is low-level pixi over webgl, you can add hack more stuff if you override it