• Content Count

  • Joined

  • Days Won


Everything posted by bubamara

  1. Seems like iOS bug, people have reported that WebGL is not working at all https://github.com/pixijs/pixi.js/issues/6835
  2. it's 'Loader' with first capital letter and you need to change it for resources as well var loader = PIXI.Loader.shared; var resources = PIXI.Loader.shared.resources;
  3. AAC LC should give you seamless playback, but not AAC HE. Can't say much about performance, but I prefer using m4a + ogg (Vorbis) as fallback.
  4. Seems like precision problem over the time. Try adding: this.tile.tilePosition.x %= this.tileTexture.width;
  5. using m4a instead is the workaround
  6. Really should be mentioned in Pixi wiki as it's frequent question.. Add this to you webpack config file: plugins: [ new webpack.ProvidePlugin({ PIXI: 'pixi.js' }) ] ..and then only import pixi layers, spine, whatever.
  7. bubamara

    PIXI & DOM Inpus

    You can also use https://github.com/EneaEntertainment/pixi-html-element-wrapper It will link your HTML element with dummy PIXI.DisplayObject which you can then position, rotate and scale in scene as you would with any other display object.
  8. loader.onComplete is MiniSignal. There are 3 ways how to remove handler: const binding = loader.onComplete.add(handler); loader.onComplete.detach(binding); or const binding = loader.onComplete.add(handler); binding.detach(); or detaching all at once loader.onComplete.detachAll();
  9. Uint16Array actually, but glad you found it.
  10. this should work: const buffer = mesh.geometry.getBuffer('aVertexPosition'); updateLoop(() => { // change 1st vertex buffer.data[0]++; buffer.update(); });
  11. You're welcome. If you need to combine those two inside of pixi stage, you'll have to write your own pure pixi input unfortunatelly
  12. yes, not possible with HTML elements. You can position HTML element only above or below Pixi canvas.
  13. Hi, pixi-html-element-wrapper allows you to position HTML elements above or below Pixi canvas. Input is HTML element and image is sprite added to Pixi stage, is that correct? In that case it works like intended. Input's z-index will affect it's Z position only against canvas in which Pixi is living in. Sprite added to Pixi stage is 'part' of that canvas.
  14. You actually need to draw something to canvas plus it's missing new keyword before Sprite. Here's working demo for you: https://pixiplayground.com/#/edit/H7xf1sMhhQpzD2anLy51a
  15. You can still render grid tile to canvas, grab the texture from it and update.
  16. Do you really need shader for that? Wouldn't be simple tiling sprite enough?
  17. the other way is to use webpack's provide plugin : plugins: [ new webpack.ProvidePlugin({ PIXI: 'pixi.js' }) ]
  18. 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
  19. Here's the simple one for you : https://github.com/EneaEntertainment/Simple-Pixi-Slider
  20. 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
  21. should be : TweenMax.to(testGraphic, 1, { alpha: 0 });
  22. 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
  23. 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) }