• Content Count

  • Joined

  • Last visited

  • Days Won


bubamara last won the day on July 30

bubamara had the most liked content!


About bubamara

  • Rank
    Advanced Member

Contact Methods

  • Website URL
  • Twitter

Profile Information

  • Gender
    Not Telling
  • Location

Recent Profile Visitors

2081 profile views
  1. There's also planck.js : Planck.js is JavaScript rewrite of Box2D physics engine for cross-platform HTML5 game development. https://github.com/shakiba/planck.js
  2. Here's the simple one for you : https://github.com/EneaEntertainment/Simple-Pixi-Slider
  3. I've updated your playground: - don't call new PIXI.autoDetectRenderer(), use new keyword only before CanvasRenderer/WebGLRenderer - you've been missing update loop (animate), you just rendered stage once You don't need to use PIxi Plugin for GSAP, you can tween alpha directly
  4. should be : TweenMax.to(testGraphic, 1, { alpha´╗┐: 0 });
  5. Hey there. Both Three.js and Babylon.js are suitable for the job. If optimized, rendering 50k triangles in WebGL is not an problem for desktop computer. As you have found out, problem is draw calls. It's not WebGL, Three or Babylon related, it is same across all rendering engines. Everytime rendering engine needs to change shader, it generates new draw call (there are few more cases when new draw call is generated) Order of rendered elements is crucial. Let's say in your scene you have: wall, decoration, window, wall, decoration, wall; all types using different material (shader). If you draw them on screen in such order, material has changed 6 times -> hence 6 draw calls. But if you draw them in wall, wall, wall, decoration, decoration, window order -> you get 3 draw calls. You have successfully reduced draw calls by merging same type of geometries inside of one cube. But you have X cubes in your scene. So, next thought would be to merge all walls in scene into single mesh, all decorations in scene into another mesh, etc. In ideal world you will end up with one big mesh for walls, one big mesh for decorations, ... Avoid doing that for very large scene as you will loose culling capability. Divide it in reasonable large groups - you have to play with it and tune it up directly for your scene. As mentioned, you can reduce geometry/materials by using single texture applied to wall. If all your walls don't look same, merge couple of wall textures into one texture atlas and use 3D modelling app (Max, Maya, Blender) to shift UVs around it. You can still use normal map on top of it to make your decorations look like they are offsetted from wall. And you can also experiment with using LODs, instances. Hope that helped a bit, one last advice: fake everything you can
  6. you need to convert global coordinates to local coordinates : http://pixijs.download/dev/docs/PIXI.DisplayObject.html#toLocal function moved(e) { const global = e.data.global; const local = app.stage.toLocal(global); console.log(global.x, global.y, local.x, local.y) }
  7. bubamara

    Low fps particles

    In fact, it is not a black part, but transparent. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData where ImageData.data returns an array of RGBA pixels. If the particle size is 2, then 4 transparent pixels in that area, means particle if fully transparent (checking only alpha channel) and you don't want to be creating it. As for recommendations to improve performance: rule number one probably is to fake everything you can, users will not be able to tell difference anyway. Then you might read something about how WebGL works, how Pixi works. I'm pretty sure if you come back with a particular question (and maybe providing minimal code example) there are plenty of people here willing to answer it.
  8. bubamara

    Low fps particles

    I see you have optimized update loop even more, perfect. Now you can reduce amount of particles by not showing empty ones; total going from 29.000 down to ~3.400 in this case https://codepen.io/anon/pen/jRdQEo?editors=0010
  9. If you don't need gradients, there is this clever 3 sprites approach :
  10. bubamara

    Low fps particles

    Don't know why Firefox is so slow. But you could reduce number of particles shown/computed. Draw that texture to off-screen canvas, read pixels, check whether yours 2x2 particle is pure black and don't create it in that case
  11. 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(); }); }
  12. 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
  13. bubamara

    Low fps particles

    Looks like your update() method could be optimized. Replacing painfully slow Math.hypot with : const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY); speeds up things dramatically
  14. ogg, mp3, m4a are file formats. What you should use is Howler library (for example) to play them in your game : https://github.com/goldfire/howler.js/ https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API