Search the Community

Hello, I am using babylonjs to implement a 3D visualizations inside my app. The app allows a user to define a scene in a 2D view. The scene is static in the 3D view - meshes cannot be moved, edited etc. A user can interact with objects using mouse - selection by click, hover on mouse move, double click to open in another view. In my opinion the most natural way to present that something is happening when user moves mouse is to change meshes’ colors. Everything works well (50-60 fps) when there isn't much meshes – 300-400. Unfortunately, performance drops down when the scene becomes more complex – about 4k meshes. I’ve already tried improving performance by using: mesh instances (cause a lot of them have the same texture and vertex data) - unfortunately I haven't found a way to color a mesh instance on mouse selection. I found a method set/updateVerticesData but VertexData.ColorKind cannot be updated when mesh instances are used (an error occurs when I try to set argument makeItUnique to true) mesh clones - it works like I expected because clones do not share material, but the performance problem still exists solid particle system - when I started implementing and saw the results I was amazed and thought that I found a solution. But then I realized that I cannot use particles as parents for other meshes. Am I right? I’ve prepared a playground showing my problem. On the left-hand side of the scene (3 boxes) is my real use case. It shows how I use mesh parent system. On the right-hand side there are rendered boxes that represent objects in my scene. https://playground.babylonjs.com/indexStable.html#U0KFSU#5 I am afraid that I am bound to CPU due to having a lot of transparent textures and a lot of meshes. When I was profiling my scene a lot of CPU time was spent on recognizing which meshes are active (I freezed activemeshes on the scene by calling scene.freezeActiveMeshes()). Now i get around 12/13 FPS (measured with Chrome DevTool/Rendering and FPS meter feature), CPU usage (in windows task manager) is around 35%, GPU usage (in windows task manager) 19%. Is there anything else I can do to have at least 25-30 FPS and still react to mouse operations? Thank you in advance for any suggestions ?

Hello, I have a pretty complex scene built and I am having very heavy lag issues. Even though I have a lot of meshes, they are all instances of default ones... so I don't think there's any reason I should be getting only ~10 FPS. Could anyone provide me with any sort of clue as to why my performance is so low? By the way, each of those cylinders are composed of many layers of cylinders. There's usually 3 cylinders (the middle one, the border, and the outline) and under them could be at least 3 others stacked (the ones that look like shadows). Aside from that, each little "group" that you see in the screenshot has a "mapMesh" object which the cylinders are parented to. All those mapMeshes are parented to a worldMesh. For the GUI text and images, each letter/image is an instance of a previously generated text/image. Each letter is parented to a wordMesh, which is then parented to a labelMesh, which is then parented to the mapMesh or the cylinder in the case of the ones on top of it. The background with a gridMaterial has size 300 x 300 and gridRatio of 4. There's also a linear fog which starts at the end of the camera (usually 50 units apart from cylinders in the y axis) and ends at 50 units after that and has a density of 0.01. After this scene is fully generated, there isn't much coding running at all... no animations or anything, it's pretty static. However, I cannot freeze world matrices because I might need to move the cylinders. I appreciate any help, really stuck on how to improve performance here and not degrade the quality of my scene.

Hello, What is the best way to optimize mesh selection? Going by the babylonjs inspector, it always takes around ~5ms with ~1200 meshes and over 10ms with ~2000 meshes. Is there any way to disable it and don't use it at all? I'm fine with always rendering every mesh as it doesn't impact the performance as much. Also, using `alwaysSelectAsActiveMesh` on every mesh does not boot performance of mesh selection significantly.

Hi all, I have two sprites ( sprite A and sprite B ) that I want to select and move around the screen one at the time, like this: click on sprite A to select it, sprite B should be then deselcted click anywhere in the world to move sprite A to where the mouse clicked double click on a sprite A to cast spell 1 double click on sprite B to cast spell 2 Issues I have are: Issue: If sprite A is already selected, and I single click on sprite B to select it, then sprite A moves to location of sprite B. Intended: no sprite moves, sprite B is selected and sprite A is deselected Issue: If a sprite is already selected, and I single click on it, the sprite is deselected (and the other is selected). Intended: the sprite remains selected Issue: Double clicking on the world (outside any sprite) cause a selected sprite to move two steps towards where clicked. Intended: Double clicking on the world should be ignored Issue: Single clicking anywhere but the center of a selected sprite makes it move a bit towards where clicked. Intended: single clicking on a selected sprite should be ignored Issue: The two sprite overlap. Intended: collision and separation What I'm doing wrong Thanks! Code var playState = { create: function() { this.mouseClicks = 0; this.mouseClicksStarted = false; this.createPlayers(); this.myEvent = game.input.onDown.add(this.movePlayer, this); this.playerGroup.forEach(function(player) { player.events.onInputDown.add(this.countClicks,this); //param 1: sprite, param2: pointer }, this); }, update: function() { game.physics.arcade.collide(this.playerGroup); }, countClicks: function(player, pointer) { this.mouseClicks ++; this.player.canMove = false; if (this.mouseClicksStarted) { return; } this.mouseClicksStarted = true; //call function after x seconds setTimeout(function() { if(this.mouseClicks > 1) { if(player.role == "thrower") { console.log("double: casting thrower spell") } else { console.log("double: casting catcher spell") } //One click } else { this.selectPlayer(player); } this.mouseClicksStarted = false; this.mouseClicks = 0; }.bind(this), 250); }, selectPlayer: function(player) { this.playerGroup.forEach(function(player) { if(player.isSelected) { player.isSelected = false; player.tint = 0xffffff; } else { player.isSelected = true; player.tint = 0xff0000; } }, this); }, createPlayers: function() { this.playerGroup = game.add.group(); this.player = new Player(this.game, 'player', 'thrower', true); this.game.add.existing(this.player); this.playerGroup.add(this.player); this.player.reset(game.world.randomX, game.world.randomY); this.player2 = new Player(this.game, 'catcher', 'catcher', false); this.game.add.existing(this.player2); this.playerGroup.add(this.player2); this.player2.reset(game.world.randomX, game.world.randomY); }, movePlayer: function (pointer) { this.playerGroup.forEach(function(player) { if(player.isSelected) { if (this.tween && this.tween.isRunning) { this.tween.stop(); } var duration = (game.physics.arcade.distanceToPointer(player, pointer) / 400) * 1000; this.tween = game.add.tween(player).to({ x: pointer.x, y: pointer.y }, duration, "Sine.easeInOut", true); game.add.tween(player.scale).to({x: 1, y: .8}, duration).to({x: 1, y: 1}, 1000, Phaser.Easing.Elastic.Out).start(); player.rotation = game.physics.arcade.angleToPointer(player); } }, this); }, }; Player var Player = function (game, sprite, role, isSelected) { //save passed variables so they can be accessed later this.role = role; this.isSelected = isSelected; this.max_energy = 100; this.currentEnergyLevel = 0; Phaser.Sprite.call(this, game, game.width/2, game.height-150, sprite); this.anchor.setTo(0.5, 0.5); this.scale.setTo(1); game.physics.enable(this, Phaser.Physics.ARCADE); this.body.collideWorldBounds = true; this.body.bounce.setTo(0.9, 0.9); //this.body.immovable = true; this.playerKillParticles = game.add.emitter(0,0,15); this.playerKillParticles.makeParticles('playerParticle', 2); this.playerKillParticles.setYSpeed(-100,0); this.playerKillParticles.setXSpeed(-100,100); this.inputEnabled = true; this.input.useHandCursor = true; //this.input.priorityID = 1; }; Player.prototype = Object.create(Phaser.Sprite.prototype); Player.prototype.constructor = Player; Player.prototype.setRole = function(role) { this.role = role; }; Thanks!

I need a way to allow the user to select a colour by clicking on a certain point of a wheel. The colour wheel that I am using looks like this (Sorry for huge image) : I would like a way for the user to be able to click somewhere on the wheel, and for phaser to be able to get the hex value of that point. I know that this can be done with canvas but my game uses webGL as well so I need the solution to work with both of possible. Thanks for any help

When creating a box, there's the assumption that all sides are of equal length. However, for a rubberband selection in an RTS I'd like to create a rectangular box on the fly (from the screen down to the ground) and then check intersections with all units on the screen to select them. How could I create a rectangular box, or is there even a better way to do rubberband selection in BabylonJS?

I use Graphicsgale for creating pixel art. It has many cool features, but that one, that is missing for me, is object selection. Everyone, who have used flash, will understand - after drawing a simple object, like ball or more complex character, after conveting it to symbol or movieclip, whenever you click at this image, you can drag and edit it, cause it's properties are saved in memory. Is it possible to save object like this in graphicsgale or another bitmap graphics tool(free, paid)? Cause it takes much time to select area of object each time, when working with 2 or more on the scene. I'm looking for something like quick selection tool, but better are saved objects - for bitmap graphics!