Search the Community

Showing results for tags 'performance'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 237 results

  1. Hi all, Just wanted to share a workaround I made today while trying to increase the performance of tilemaps in my game. My game has maps that could be 2048px X 2048px (64x64 32px X 32px tiles) or maybe even bigger down the road, and contain up to 8 layers for applying detail. The problem I ran into was, when scrolling the camera, I was seeing huge performance drops, even on powerful computers. Turns out, Phaser was redrawing the tilemap every frame you move the camera. My tilemap, after being loaded, never really changes. So I wanted to find an easy way to force Phaser to draw the entire tilemap once and then use it for a static sprite after that. I tried using, but it didn't seem to work. Not sure if I was missing something there. So my solution was to resize the layer before getting the texture: myLayer.resize(,; myLayerTexture = myLayer.generateTexture(1, PIXI.scaleModes.DEFAULT, game.renderer); myLayer.visible = false; game.add.sprite(0, 0, myLayerTexture); this way, instead of the tilemap being added as a dynamic thing that gets redrawn constantly, it functions as a static image. But because each layer is still treated as a separate image, I preserve rendering order. In the background, I keep the actual layers hidden to preserve collision data. Unfortunately, if the tilemap were to change ever beyond initial creation, the texture would need to be updated, which would be expensive. But since I'm not really planning on doing that, it seemed like a reasonable solution to me. Hope this helps someone else who has this problem.
  2. Hi ! I precise that my question is only about meshes Should we prefer to load small objects (between 0 and 10 units for example, with a high precision like 5.554) or it does not impact performance at all and we can work with huge numbers as well (10k, 100k) ? I speak about width/height of a box for example. I guess the more important things are the number of vertices/edges/facets and how impostors are used (mesh vs box), but I would like to know regardless of that, if the size of meshes matters. Same for textures : should we prefer a texture repeated 1000 times on a plane or a bigger texture repeated 10 times for example ? Thank you
  3. I'm aware that the client's computer GPU might affect the game's performance (smoothness and freezing). But the game I'm creating now is being affected differently. The client's GPU is literally affecting his player movement speed globally (even on the other player's views, not only locally for him). If you check other .io games like and, even with a slow computer, you will notice that the player movement speed is is the same (based on the same player level). It skips a few frames and it isn't smooth at all. But the movement speed is the same. Every player on my game needs to have the same movement speed (that's one of the most important features of my game). I've also noticed that if I'm using the maximized window, the game slows down. But if I use like half browser screen, it comes back to being fast again: It wasn't supposed to happen. If you need further information from me, please let me know. Please help. Thanks in advance.
  4. Hi everyone, i was stuck in performance of game DETAIL: the above picture shows the game with screen zoom is 100 percentage this picture show the screen zoom size with 25 percentage when the zoom size is 100 % the game performance is good but when i change the zoom size of screen to below 50 percentage there is lack of performance(the player will move very very slowly) when screen zoom size is 67 - 100 percentage fps : 60 when screen zoom size is 50 - 67 percentage fps : 45 - 50 when screen zoom size is less than 50 percentage fps : 15 - 20 when on igcnito mode when screen zoom size is 200 - 500 percentage fps : 55 when screen zoom size is 110 - 200 percentage fps : 50 when screen zoom size is 67 - 100 percentage fps : 45 when screen zoom size is 50 - 67 percentage fps : 35 when screen zoom size is less than 50 percentage fps : not running anyone know what is the problem??? and how to make fps 60 for all zoom size of screen??
  5. Hey! Did anybody compare Phaser and pixi for performance? We're going to make isometric game. bottom line is about objects you could render per screen. What do you think? What to choose? Phaser 2, PIXI, or maybe Phaser 3? Need the canvas renderer of course, not webgl. Update: I've the same question in the phaser slack channel. It seems that the PIXI would be better for isometric game then Phaser 2.
  6. I am working a brand new application. Not a game. I am pushing Babylon in ways that may be unique. I could really use some advice on high mesh-count situations. Please! Here is the deal. I generate graphics about crime data on SVG. WebGL can look a lot better but it is still kinda balky. The first two images are Attempted Murder in San Francisco for the past three years. What you cannot see in those images but can see in the next two (aggravated assault) is that the whole city is tiled in hexagons. About 40K for San Francisco, more for Chicago. All results are delivered by presenting color, opacity (and now elevation) in hexes. Image 5 shows increases and decreases of theft from Motor Vehicle between two six-month periods. Right now, I create a scene as follows: ~ Generate individual meshes to correspond with all "visible" hexes ~ Pattern-match materials and merge the hexes down from 30K meshes to about 200. ~ Dispose of the unmerged meshes ~ Show the scene ~ Gradually dispose of the meshes These unused meshes are consuming a lot of time. Especially since, except for a handful that are not merged, none of them are shown to the user! It would be conceptually far more ideal to create the hexagonal geometries and group them directly rather than creating meshes. I lack the chops to do it but am reasonably sure it is possible. I welcome advice, snippets or . . . consulting offers?
  7. Hi Folks, I have several questions regarding rendering performance. Question 1: about the acceleration structures. As we know that in Babylon we have Octree, it seems to be used for both frustum culling and picking. But I saw that we had also an interface called IActiveMeshProvider. Is it used for implementing other acceleration structure like BSP or BVH? I've seen some rendering engine which use BVH to do frustum culling. What are the advantages of Octree against BVH? @Deltakosh told me that we have a complete frustum culling stuff internally. How does it work? Does it work by using the Octree? Question 2: About sorting. Do we have bulit-in pre-sorting process so that we can avoid useless shader binding? Question 3: About mesh merging. I think I can use MergeMeshes to merge the meshes which share the same shader. However I need to keep the original one for picking. How can I distinguish the "Visual Tree" and the "Selection Tree"? Thanks guys
  8. Watch out for gl.clear()!

    Hello, everyone! I just wanted to pass along some very important information that I just discovered regarding optimization that has been completely overlooked in optimization articles that I've read, and can have a huge impact on your apps! I have a game that pushes a pretty similar number of triangles and commands as the Sponza demo, but I wasn't enjoying anywhere near the same frame rate on slower systems. I fired up SpectorJS, cleaned up as much as I could in terms of draw calls and such, and wound up with a game that had fewer calls, fewer commands, and yet STILL ran a good deal slower than Sponza. However, there was one more metric that I had yet to take a close look at, and that was "clear()". I had 6 of them, while Sponza was using only 1. My game is a first-person-shooter that uses an additional camera to draw UI components, and on a different layer, so game geometry doesn't interfere with it. The player's hands and weapons are also drawn in a different rendering group for the same reason. It turns out, however, that for every new layer and group, Babylon kicks off a gl.clear() (which makes sense), and on systems with poor fill rates, this can absolutely wipe you out. In my case, the engine was clearing various buffers 6 times per frame, including multiple times per group/layer. Disabling Babylon's engine.prototype.clear() entirely made a world of difference in terms of FPS, though I do need at least 1 or 2 gl.clear() calls to accommodate my layering requirements. 6 is excessive and unnecessary, however, and I'm currently investigating ways to minimize that. Hopefully, I can do it all by simply modifying my code, but I suspect I might have to make some small engine modifications as well so I have greater control over when gl.clear() gets called, and just how many times. Edit: Just discovered scene.autoClear and scene.autoClearDepthAndStencil. Setting both to false takes care of... well... one of them!
  9. I had a huge loading performance a couple days ago. I have gotten past it now but it seems like something you should know about. I was trying to load a *lot* of meshes, say up to 20,000, and ran into a serious wall below that. The time for the first render completion was over a minute. I did the most practical thing, hit pause a few times to see what the system was doing. My system was spending all of its time in a FOR loop in Material.prototype._markAllSubMeshesAsDirty. (Attach 1) getScene().meshes is all of my meshes, so this was a long FOR loop. The plot thickens because it was a downstream side-effect of another FOR loop Scene._evaluateActiveMeshes. This FOR loop was also the length of all of my meshes. So, my first render was blocked by an n-squared algorithm that evaluating dirtiness. Lots and lots of dirtiness. I got past this with a hack, initially. I disabled Material.prototype._markAllSubMeshesAsDirty for the *first* *render* only. No ill effects. Later, I started merging meshes. Let me tell you, the mesh merging is the bomb! It changed everything for my application. Instances, yawn. Clone, snore. Merging killed it. I do 3-d graphs and there are a lot of similar meshes (everything is a hexagon, for starters). In my tests, I could reduce independent mesh count by a factor of twenty. Now I am loading 150K hexes fast and with good frame rate. I archived the original problem child at
  10. GUI Performance

    Hello, I am trying to use the GUI TextBlock and Image components to display an icon and a text underneath it (number count) on top of a hexagon. In the scene, there can be hundreds of hexagons at once. Without instantiating the GUI components, the scene runs with no much problem at all, 200~ hexagons at 60fps... With it, the fps drops considerably. Is there any GUI optimization advice you guys can give me? I would appreciate it. constructor(parentHex, text, sizeScale, icon) { if (global.Image) { const GUI = require('babylonjs-gui'); const materialType = MATERIAL_TYPES.DYNAMIC_LABEL; const name = `hex_label_plane_${sizeScale}`; let plane = Main.scene.getMeshByName(name); if (!plane) { plane = BABYLON.MeshBuilder.CreatePlane(name, { size: 1.1 * sizeScale }, Main.scene); Util.setMaterial(plane, materialType); Util.setScalingToZero(plane); } plane = plane.clone('clone'); plane.position = Util.getNewVector(parentHex.position); plane.position.y += (parentHex.extents.y * Config.HEX_Y_SCALE) + 0.01; plane.rotation.x = Math.PI / 2; Util.setScalingToOne(plane); plane.setParent(parentHex); plane.originalScaling = Util.getNewVector(plane.scaling); plane.setVisibility = (visible) => { visible ? Util.setScalingToZero(plane) : Util.resetScaling(plane); }; const panel = new GUI.StackPanel(); panel.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_CENTER; this._panel = panel; if (icon) { const image = new GUI.Image('hexLabelIcon', icon); image.height = `${Config.HEX_LABEL_ICON_HEIGHT / sizeScale}px`; image.paddingBottom = `${Config.HEX_LABEL_ICON_PADDING_BOTTOM / sizeScale}px`; image.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_BOTTOM; image.stretch = GUI.Image.STRETCH_UNIFORM; panel.addControl(image); } const textBlock = new GUI.TextBlock(`hex_label_${text}`, text); textBlock.height = `${Config.HEX_LABEL_FONT_SIZE / sizeScale}px`; textBlock.color = 'black'; textBlock.fontSize = `${Config.HEX_LABEL_FONT_SIZE / sizeScale}px`; textBlock.textVerticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_TOP; panel.addControl(textBlock); this.advancedTexture = GUI.AdvancedDynamicTexture.CreateForMesh(plane); this.advancedTexture.addControl(panel); return plane; } }
  11. Hi everyone I read this about gltf : and test it with "Adam head " : The render system is the same than Sketchfab for post processes. It's really cool because when there is no animations, the engine calculate step by step a better render quality. Post processes like ambiant occlusion look really great and not drop fps. This allow us to run scene with 60fps with animation and to return a beautiful image when all meshes are fixe. All post processes and shadows seem to be calculate with a rough noise at the beginning and with more precision at the end. ( It's look like a trick to get more performance ...) So, I open this post to discuss about that and to see if it will be a great idea to add it in Babylon What do you think ? Have a nice day ! PS : I ask this because I'm working on this :
  12. In my platformer, the player has a number of different weapons (gun, energy blast, homing missile) and there may be a number of enemies (up to maybe 6) who will have one of the same weapons. From my understanding of the weapon plugin and tutorials, I should then be making a different weapon object for each of the players weapons and for each enemy. As I am wanting to attach a particle emitter to missiles I'm then going to extend the bullet class to make a missile. Question 1: I want autofire from enemies to fireAtSprite rather than just fire, I'm assuming the best way to do this is to extend the weapon class and overwrite the fire() method to call fireAtSprite() instead? Or is there a better way? Question 2: Where do I put the collision checks for the bullets? I can see a couple of options but would really like to know the performance implications as to which would be better. 1) Put an arcade collision call in the extended bullet update method to handle hitting scenery and hitting enemies - this seems neat in some ways as the code for the bullet hitting something sits with the bullet itself, however it feels like I'm going to end up with a lot of separate collision calls. 2) Put an arcade collision call in the state update along the lines of: this.enemies.forEach(function(enemy){, this.collisionLayer, this.shotCollisionLayer, null, this);, this.player, this.shotPlayer, null, this); }, this); 3) In the custom bullet constructor, add all enemy bullets to an enemyBulletsArray and collide this in the state update method, this.collisionLayer, this.shotCollisionLayer, null, this);, this.player, this.shotPlayer, null, this); Many thanks, Gordon
  13. long loading time

    Hello again. I continue develop a site with babylonjs, but I have a few problems. I have a scene created with blender, I generate the babylon file, the scene has some textures, I converted the textures to a ktx format, with the script in the babylon page. You can see the page in: I import the scene with: if (!BABYLON.Engine.isSupported()){ console.log("Motor no soportado"); return; } canvas = document.getElementById("renderCanvas"); engine = new BABYLON.Engine(canvas, true); // Asignamos los tipos de textura compimidos que se pueden usar var available = ['-astc.ktx', '-dxt.ktx', '-pvrtc.ktx', '-etc1.ktx', '-etc2.ktx']; var formatUsed = engine.setTextureFormatToUse(available); BABYLON.SceneLoader.Load(blendPath + "scene1/", "landScape.babylon", engine, function (newScene) { // asignamos la escena scene = newScene; // Creamos el entorno y las luces createSkybox("models/scene1/sky2.jpg"); createWaterMesh("waterMesh", imgPath + "waterbump.png", new BABYLON.Vector3(0, -0.08, 0), 6, getMeshListToRender()); createCamera(1, new BABYLON.Vector3(-0.23, 0.56,-2.73), new BABYLON.Vector3(0, 0, 0)); // arch camera createParticleSystem(); createLights(); createShadows(); createVolumetricLightEffect(); createActionsContollers(); // Wait for textures and shaders to be ready scene.executeWhenReady(function () { // Quitamos la imagen del cargador cuando termine el proceso de carga $("#loaderPadre").remove(); scene.createOrUpdateSelectionOctree(); // quitamos los calculos de los objetos para hacer mas eficiente la escena scene.meshes.forEach(function (mesh) { if("NO_") === -1) mesh.freezeWorldMatrix(); }); // Funcion para cuando se redimensiona la ventana $(window).on('resize', function() { engine.resize(); }); // Once the scene is loaded, just register a render loop to render it engine.runRenderLoop(function() { // console.log(engine.getFps()); scene.render(); }); }); }, function (progress) { if( == 0) return; $(".textoCarga").text( ((progress.loaded/*100).toFixed(2) + "%"); }); In the callback function I return the loadign progress, but in some devices the progres is too slow, and When I already have 100% the scene still takes time to show, maybe i have doing some wrong. Somebody know, What I can do for resolve that? And other problem is the performance of the scene, I rremoved some elements and I have down the quality of the shadows, but the fps is 30, How I can increase the speed? the complete code is in: in the folder: entorno-models/code/proyBabylon/entorno/ here you can see the project. I hope you can help me. Thanks and regards.
  14. webgl debug by firefox

    Hi all, currently I'm read master RICH's tutorial for improve performance by batch texture. when I use the firefox dev tools canvas capture in the article it works when I use canvas renderer, but when I change to webgl, it can not capture the analysis. FF shows error and break the app. TypeError: methodSignatureEnums is not a function-----------------call-watcher.js:168:34 I tried many version of FF and phaser. none of them can work. is there anyone tried this before and works. please give me a workable FF version, many thanks
  15. Hi, I'm a total noob at Babylonjs, but I'm playing around with remaking a previous raw Threejs project in Babylonjs. It's a physics based stacking game, and is really very simple (nothing but boxes), but I still seem to get really bad framerates. The thing is, when I made this in Threejs I had no such problems. I’m using 3.1.0-beta3 (which seems to be the default through NPM). I’ve tried switching to the previous release but that gives me the error TypeError: Cannot assign to read only property 'RGBA16F' of object '#<WebGL2RenderingContext>'. I’ve also played around with anti-aliasing and adaptToDeviceRatio on/off but that seems to make little difference. Also SceneOptimizerOptions causes a bug in CSG for me, where it errors out on finding position of null of my mesh. My project consists of 2 files, scene.js and app.js (sorry about the formatting, why isn't here a code tag) // app.js import { Vector3, Animation, MeshBuilder, CSG, PhysicsImpostor, StandardMaterial, Color3 } from "babylonjs" import { scene } from "./scene" const stack = [] function makeGround() { var ground = MeshBuilder.CreateBox('ground1', { height: 40, depth: 35, width: 35, subdivisions: 1 }, scene) ground.position.y = -22.5 ground.physicsImpostor = new PhysicsImpostor(ground, PhysicsImpostor.BoxImpostor, { mass: 0 }) stack.push(ground) } function makeBox() { let top = stack[stack.length - 1] var boundingBx = top.getBoundingInfo() let boundingBox = boundingBx.boundingBox var box = MeshBuilder.CreateBox('box1', { height: 5, depth: boundingBox.extendSize.z * 2, width: boundingBox.extendSize.x * 2, subdivisions: 1 }, scene) box.position = boundingBx.boundingBox.centerWorld.clone() box.position.y = (stack.length - 1) * 5 box.material = new StandardMaterial("xx", scene) box.material.diffuseColor = new Color3(Math.random(), Math.random(), Math.random()) box.physicsImpostor = new PhysicsImpostor(box, PhysicsImpostor.BoxImpostor, { mass: 0 }) stack.push(box) animateBox(box) } function makeFirstBox() { var box = MeshBuilder.CreateBox('box1', { height: 5, depth: 35, width: 35, subdivisions: 1 }, scene) box.position.y = 0 box.physicsImpostor = new PhysicsImpostor(box, PhysicsImpostor.BoxImpostor, { mass: 0 }) stack.push(box) animateBox(box) } function animateBox(box) { let lefty = (stack.length - 1) % 2 == 0 let prop = lefty ? "x" : "z" var animation = new Animation("anm", "position." + prop, 60, Animation.ANIMATIONTYPE_FLOAT, Animation.ANIMATIONLOOPMODE_CYCLE) var keys = [ { frame: 0, value: 60 }, { frame: 200, value: -60 }, { frame: 400, value: 60 } ] animation.setKeys(keys) box.animations = [animation] box.animation = scene.beginAnimation(box, 0, 400, true) } function match() { let top = stack[stack.length - 1] top.animation.stop() top.position.y -= 5 let a = CSG.FromMesh(top) let b = CSG.FromMesh(stack[stack.length - 2]) let intersection = a.intersect(b) let subtraction = a.subtract(b) if (!intersection.polygons.length) { top.physicsImpostor.setMass(5) top.position.y += 5 console.log("Missed - game over!") } else { let box = intersection.toMesh("s", top.material, scene, false) let leftover = subtraction.toMesh("ss", top.material, scene, false) box.position.y += 5 box.physicsImpostor = new PhysicsImpostor(box, PhysicsImpostor.BoxImpostor, { mass: 0 }) leftover.position.y += 5 leftover.physicsImpostor = new PhysicsImpostor(leftover, PhysicsImpostor.BoxImpostor, { mass: 5 }) stack.splice(stack.length - 1, 1) stack.push(box) top.dispose() makeBox() } } document.addEventListener("click", () => { match() }) makeGround() makeFirstBox() // scene.js import { Engine, FreeCamera, Scene, CannonJSPlugin, HemisphericLight, Vector3, Camera, Color3, PointLight } from "babylonjs" const frustumSize = 100 const aspect = window.innerWidth / window.innerHeight const canvas = document.getElementById("app") const engine = new Engine(canvas, false, { deterministicLockstep: true, lockstepMaxSteps: 4 }, false) const scene = new Scene(engine) const camera = new FreeCamera("camera", new Vector3(-45, 45, -45), scene) const light = new HemisphericLight('light1', new Vector3(0, -1, 0), scene) const physEngine = new CannonJSPlugin(false) physEngine.setTimeStep(1/60) scene.enablePhysics(new Vector3(0, -9.81, 0), physEngine) scene.gravity = new Vector3(0, -9.81, 0) camera.mode = Camera.ORTHOGRAPHIC_CAMERA camera.orthoTop = frustumSize / 2 camera.orthoBottom = frustumSize / - 2 camera.orthoLeft = frustumSize * aspect / - 2 camera.orthoRight = frustumSize * aspect / 2 camera.setTarget(Vector3.Zero()) light.groundColor = new Color3(0, .5, 0) light.diffuse = Color3.White() light.intensity = .4; engine.runRenderLoop(() => scene.render()) window.addEventListener('resize', () => { const aspect = window.innerWidth / window.innerHeight camera.orthoTop = frustumSize / 2 camera.orthoBottom = frustumSize / - 2 camera.orthoLeft = frustumSize * aspect / - 2 camera.orthoRight = frustumSize * aspect / 2 engine.resize() }) export { scene, camera }
  16. I noticed that in my game the Pixi Application takes lot of CPU resources when it's running. Even when it's in background or is not visible, it consumes the CPU. Two Chrome processes are constantly using 25-30% CPU on my linux box (more on my macOS). It became very troublesome while working from a cafe on my macbook pro without charger. The app drained by battery in no time. Only way to avoid this is to stop the pixi application ticker when you don't want it to consume resources. For a typical Pixi.js application, i.e. a game, it does make sense for the game to pause when it goes in background. Therefore I wrote this small routine using the `blur` event handler, to pause the Pixi app, whenever the window looses focus. This drops the CPU usage to 6-7% by Chrome processes. In a browser or electron app, the window.onblur callback will get called whenever the focus switches from the app window to some other application (or even dev console). However in jsfiddle environment, you need to click on the application first and then click somewhere else for testing this functionality. That's because the code runs inside an iframe on jsfiddle page. The simple resume dialog lets you resume the app when you want. You can try it here: If you have any other tips, or suggestions to reduce CPU usage, I would love to know.
  17. Hi all, Another silly question. Does mesh (simple mesh) size affect performance? Regards
  18. Hi everybody. Here I come again with a new question for this incredible community. By the way, I think it will be "super easy" for someone which a good knowledge of the BJS internals. The case is that, following with my current development (tap simulator) I'm now focused on the performance. My doubts are mainly about the proper use of the method "clone" of the "Texture" object. Doubt 1) Suppose you have a Standard Material, you create it following the usual way, something like this: matFoo=new BABYLON.StandardMaterial("Foo_Material",myScene); matFoo.diffuseColor=new BABYLON.Color3(0,0,0); matFoo.opacityTexture=textFoo; matFoo.emissiveTexture=textFoo; Note that we are using the texture (textFoo) on two channels, opacity and emissive. Is this effective in terms of resource economy or I must follow this other approach?: matFoo=new BABYLON.StandardMaterial("Foo_Material",myScene); matFoo.diffuseColor=new BABYLON.Color3(0,0,0); matFoo.opacityTexture=textFoo.clone; matFoo.emissiveTexture=textFoo.clone; Doubt 2) Now we have a similar scenario, when we must assign a previously created texture, but this time we want to assign it to a series of Particles: ... textSprite=new BABYLON.Texture("assets/textures/flarealpha.png",myScene); ... myParticles=new BABYLON.ParticleSystem("Particles",10000,myScene); myParticles.emitter=new BABYLON.Vector3(0,0,0); myParticles.particleTexture=textSprite; ... This time, as we have a lot of particles chances are that it is better to use textSprite.clone() in order to assign the sprite image to each particle, at last line of shown code. Isn´t it? Doubt 3) Last but not least. When you (as me) arrives at the conclusion that PBR materials are the way-to-go (in order to achieve a decent look with your CGs), you are going to use, among others, the environment channel (dds files in current 3.0 version of BJS). Here I have certainly a doubt and a thought. Going first with the last, I think the environment should not be a PBR Material property (as currently is), but a scene one, as certainly is very weird to think in a scene with more than one environment (?). Anyway, as at the moment this is not the case, and we have to assign the same value of "environment" for each PBR Material, we find ourselves setting time after time the same texture (dds file) in this way (please focus only on the reflectionTexture property): ... matTube=new BABYLON.PBRMaterial("MaterialPBR_Tube",myScene); matTube.albedoTexture=new BABYLON.Texture("assets/models/Tubo_BaseColor.png",myScene); matTube.metallicTexture=new BABYLON.Texture("assets/models/Tubo_Metalico_PBR.png",myScene); matTube.bumpTexture=new BABYLON.Texture("assets/models/Tubo_Normal.png",myScene); matTube.reflectionTexture=textEnvironment; matTube.microSurface=0.96; matTube.useRoughnessFromMetallicTextureAlpha=false; matTube.useRoughnessFromMetallicTextureGreen=true; // matTap=new BABYLON.PBRMaterial("MaterialPBR_Tap",_Scene); matTap.albedoTexture=new BABYLON.Texture("assets/models/mono/Manetas_BaseColor.png",myScene); matTap.metallicTexture=new BABYLON.Texture("assets/models/mono/Manetas_Metallic_PBR.png",myScene); matTap.bumpTexture=new BABYLON.Texture("assets/models/mono/Manetas_Normal.png",myScene); matTap.reflectionTexture=textEnvironment; matTap.microSurface=0.96; matTap.useRoughnessFromMetallicTextureAlpha=false; matTap.useRoughnessFromMetallicTextureGreen=true; // matSprinkler=new BABYLON.PBRMaterial("MaterialPBR_Sprinkler",myScene); matSprinkler.albedoTexture=new BABYLON.Texture("assets/model/mono/Resto_BaseColor.png",myScene); matSprinkler.metallicTexture=new BABYLON.Texture("assets/models/mono/Resto_Metallic_PBR.png",myScene); matSprinkler.bumpTexture=new BABYLON.Texture("assets/models/mono/Resto_Normal.png",myScene); matSprinkler.reflectionTexture=textEnvironment; matSprinkler.microSurface=0.96; matSprinkler.useRoughnessFromMetallicTextureAlpha=false; matSprinkler.useRoughnessFromMetallicTextureGreen=true; ... Here, as in the case of my first doubt, I'm thinking, obviously in using "matXXX.reflectionTexture=textEnvironment.clone();", but I don´t know if that is a way to enhance performance, and by the way if dds files are buffered in a way they can benefit of texture cloning mechanism. Ok, this is all, sorry for the length of the question and, as always, thanks in advance for your time! Regards.
  19. Raycast Performance

    Hey guys... got a couple of quick questions about raycasting... 1... Is recasting an 'Expensive Thing' for BabylonJS. I ask because in unity, a fully scripted player character might by casting 6 - 10 rays on each frame... One ray might be be checking ground distance... Four separate rays might be casting to the four near clip plane points of the camera to check for Collision and or occlusion and one ray might checking wall distance ... and so on... Now that apparently is FINE in Unity on a native platform... Would that many rays be TOO MUCH for a BabylonJS Game... ??? 2... Is is possible to create a "Sphere Cast" type functionality like Unity Has... Example: Physics.SphereCast public static bool SphereCast(Vector3 origin, float radius, Vector3 direction, out RaycastHit hitInfo, float maxDistance = Mathf.Infinity, int layerMask = DefaultRaycastLayers, QueryTriggerInteraction queryTriggerInteraction = QueryTriggerInteraction.UseGlobal); Parameters origin The center of the sphere at the start of the sweep. radius The radius of the sphere. direction The direction into which to sweep the sphere. hitInfo If true is returned, hitInfo will contain more information about where the collider was hit. (See Also: RaycastHit). maxDistance The max length of the cast. layerMask A Layer mask that is used to selectively ignore colliders when casting a capsule. queryTriggerInteraction Specifies whether this query should hit Triggers. Returns bool True when the sphere sweep intersects any collider, otherwise false. Description Casts a sphere along a ray and returns detailed information on what was hit. This is useful when a Raycast does not give enough precision, because you want to find out if an object of a specific size, such as a character, will be able to move somewhere without colliding with anything on the way. Think of the sphere cast like a thick raycast. In this case the ray is specified by a start vector and a direction. Notes: SphereCast will not detect colliders for which the sphere overlaps the collider. Passing a zero radius results in undefined output and doesn't always behave the same as Physics.Raycast. See Also: Physics.SphereCastAll, Physics.CapsuleCast, Physics.Raycast, Rigidbody.SweepTest. using UnityEngine; using System.Collections; public class ExampleClass : MonoBehaviour { CharacterController charCtrl; void Start() { charCtrl = GetComponent<CharacterController>(); } void Update() { RaycastHit hit; Vector3 p1 = transform.position +; float distanceToObstacle = 0; // Cast a sphere wrapping character controller 10 meters forward // to see if it is about to hit anything. if (Physics.SphereCast(p1, charCtrl.height / 2, transform.forward, out hit, 10)) { distanceToObstacle = hit.distance; } } } Yo @Deltakosh ... Gotta ping you in here ???
  20. Stuck at 33 FPS on iOS 11

    Ever since I updated to iOS 11, I’ve noticed phaser games now seem to be stuck on 33fps on my iPhone 7. I wondered if it was just the games I made then I tested the bunny mark link below and it was the same. Has anyone experienced this?
  21. Hi, I'm currently preloading in a single sprite atlas (png image with a json data file) for one sprite (by this i mean a character i want to animate). However, the problem is that the sprite atlas image file is pretty big (over 8000x6000 sometimes) and there's FPS drops on lower end machines/older browsers. I'm not 100% sure that the FPS drops are caused by the large image file, but when i reduced the sprite atlas image file's size, it fixed the issue. My question is, is there a good way I can assign multiple sprite atlases to one character/sprite? Also, would that even help the issue? I want to keep decently high resolution frames so in the end this solution doesn't actually reduce the total size of images being preloaded, just preloads multiple smaller images instead of one huge one. I want to do something like: game.load.atlas('mysprite', 'assets/sprites1.png', 'assets/sprites1.json'); game.load.atlas('mysprite', 'assets/sprites2.png', 'assets/sprites2.json'); this.sprite = game.add.sprite(, 300, 'mysprite'); // 'walking' is part of the sprites1.png this.sprite.animations.add('walking', Phaser.Animation.generateFrameNames('walking', 1, 6), 5, true); // 'flying' is part of the sprites2.png this.sprite.animations.add('flying', Phaser.Animation.generateFrameNames('flying', 1, 6), 5, true);
  22. get data from Texture

    Hey, i'm trying to get the data source from a loaded Texture in BABYLON. But I haven't found a way to do this. Basicly my idea is to get the data from the image and save it as base64 in the local cache. And then I can get the image from the cache again and load it into BABYLON. This should improve performance and result in faster loading times once you already loaded the scene once. Does this accually makes sense or is there a better way of caching textures?
  23. Choppy tweens on mobile (Cordova)

    Hi all, I have a game which I've turned in to a cordova app. Gamephysics with collision are working smooth, but when I am using tweens it sometimes lags a little bit. I am using Crosswalk and are testing on a Sony Xperia Z3. I've tried removing all backgrounds and animation and left only one sprite doing the tweens, but the lags remain. Everything is smooth on the desktop browser. Anybody got any tips on improving the performance?
  24. Work offer

    Hi guys, After some previous attempts to solve some problems in our project, we saw that we were not getting anywhere so we decided that we needed a professional help. This is the offer we published on the Upwork platform, so if anyone is seriously interested in completing the job, please contact us. This is the text of the offer: _______________________________________________________________________________________________________________________________ Representation of a snow-covered mountain scene in Babylon.js Engine The task consists of representing a snow-covered mountain landscape with forest and water bodies in Babylon.js. The focus has to be made on the visual attractiveness while still offering high performance. An example of a scene like that would be this one (Scene1), made in Three.js. We are providing a basic scene (Scene2) made in Babylon.js, and the following improvements have to be made to this scene: 1) Implementing a GLSL Shader / Babylon.js Custom Material which accepts the following criteria: Terrain Texture: - Rocks: should be a procedural texture with a nice natural transition between the snow and the rock texture like in the Scene1. - Water: should be the WaterMaterial provided by Babylon.js Material library. - Snow: it is already acceptable in the Scene2, but any visual improvement is welcome. If needed, the mask image for the texture mapping can be also provided as three separated alpha mask images, one for each type of texture. Furthermore, it has to support a Dynamic Texture on top of the Terrain Texture, so that it should be possible to draw directly on the ground. An example of this would be this scene (Scene3), implemented with ShaderBuilder : The problem with this scene is that it lacks bump maps, fog and shadow effects. There should be visual consistency across the most popular browsers: Chrome, Firefox, Edge and Safari. _______________________________________________________________________________________________________________________________ If you have any questions, we're ready to answer them. Thanks!
  25. Hello! I'm building a soccer keepie uppies game. I have many texture atlas' that make up the player and ball for my animations and some static images placed in the scene. There is also a score text in the top left corner. This all runs fine on desktop but on my iPhone 6s the fps is around the high 40's. If I remove the BitmapText then it's back up to 60fps. Even removing the player and ball and pretty much having only the score text in the scene I am noticing a hit in performance. Even if I don't update the score and have it just static at 0 points. I'm really wracking my head with this. I've been looking for a solution for nearly a week now and can't seem to come up with anything. I fell like I've tried all the tricks : ( Unfortunately I can't show any code as I am not permitted to. Has anybody else ran into an issue like this? Really hope somebody can help as I'm at a loss... Thanks!