Search the Community

Babylonjs has been great so far, but yesterday I ran into an issue that I can't seem to fix. Problem: I'm trying to load in additional animations from .babylon files, however, when playing the animations on the original character it seems the original character's blend pose interferes with the newly loaded animation. The main character is a skinned mesh in a T-Pose without any animations. I then load in the walking animation (code snippet below) Loading the main character: BABYLON.SceneLoader.ImportMesh("", "./assets/models/babylon/", "character.babylon", this._scene, function(meshes, particleSystems, skeletons, animationGroups){ // Init character }); // later BABYLON.SceneLoader.Load("./assets/models/babylon/", "[email protected]", t._engine, function(s) { // Copy all skeletons let children = t._player.getChildMeshes(); for(let i = 0; i < children.length; i++) { if(children[i].skeleton) { children[i].skeleton = s.skeletons[0]; // children[i].updatePoseMatrix(s.skeletons[0].getPoseMatrix()); } } t._scene.beginAnimation(s.skeletons[0], 0, 59, true); }); However, I get this result. The t-pose is blended into the character animations causing this super wide stance; Which would suggest the walking animation transforms are relative? Can I make them absolute? Loading the [email protected] file at the start makes it behave as expected. I simply want to load it in at a later time. Preferably I wouldn't change the skeleton or bones but instead, copy over the animators onto the main rig, but this didn't seem to work either. Any help would be greatly appreciated.

Hello there. What is intended method of playing the same sound multiple times *concurrently* without re-downloading the sound file from the server? const gunshot = new BABYLON.Sound('foo', "sounds/gun_semi_etc.wav", scene, null, { volume: 1 }) If I have multiple players or bots in my game, any of them can produce gunfire. As each of them shoots, I end up with a separate web request per entity: I'm accustomed to howler, where the first time a sound is created, like 'foo.wav' it will load it from the server. Any subsequent sound objects created that play 'foo.wav' will build themselves from the same sound data without an xhr. How do I accomplish the equivalent? TY TY

I always found a little too cheap the rotating effect of the logo in the default loading screen (asymmetry and logo upside-down). Since the 4.0 coming, that could be a detail to enhance. So I've started to do few tests, that you will find here: https://www.nothing-is-3d.com/tmp/bjs-logo-ideas/ But before going further, 'cause these kind of things takes a lot of time to test, I wants to know: what do you think about updating this loading logo? what do you think about my tests linked above? have you other ideas to suggest? what are the technical limitations of this loading? (cause I supposed it's write in the core of babylon.js, that's whyI made few tests using embed svg)

Hi everyone.. I'm here again with a fresh question... I'm trying to do create custom loading screen.. A lot of topic inside of the forum anf i have already read document about loading screen, and also i did some thing (you can find PG link below and if you want you can update it) but how we can add a video to the loading screen background i couldn't find a solution or sample, and also i can't count items on the scene... PG Link: https://playground.babylonjs.com/#WV4PLS Somebody can show me the way about this? Thanks in advance..

Hey everyone I recently started trying to put my webapp made in Babylonjs and typescript into a Cordova android app. Before this I was just setting up a local server, this way I could load all of my assets easily. However when my app gets built for android it makes all of the assets go through this type of path file:///android_asset/www/Audio/ Which I don't believe Babylonjs can handle er something. Except some of the sound files load source: I can hear them but they still give the error. So I was wondering what the next best solution would be, but I don't have my own server to host these assets on, I was thinking GitHub maybe but I don't know how I would reference that in my code. The type of assets I have are babylon scenes, images, textures, and sound files so imgur won't work (I think). Im going to try the GitHub approach for now. They would need to be private so no one but me can see them but I also need them to be accessible to anyone who has the app so I'm kinda stumped about how to do it with that respect... Any ideas ? More details in these posts about my problems: Thanks have a beautiful time!

Hello everyone my first day with Babylon, so please indulge. I have the same problem as Emiya0306 but not with the gltf Exporter but with the Babylon Exporter (*.babylon) I have read the whole thread, but frankly, I didn't understand very much. The Arc Rotate camera goes through my object (with middle (Scroll)Mouse-Button). I have checked Collisions for the Object and the Camera. Did I miss something? Online: http://www.experimente.bplaced.net/collisions/collisions.html The Blend: http://pasteall.org/blend/index.php?id=49326 Babylon 3.1.0 Babylon-Exporter 5.62 Blender 2.79B Many thanks in advance Hans

Evening Guys Im working on a game for an iso platform that houses several games. This platform handles the loading of assets and sends them back to my game as base64 assets. Im loading in 3 different types of assets: *XML *Sound *TextureAtlas my questions are these: 1) how can i load and play an audio file recieved as a base64 string? 2) how can i load and create a new XML object from a base64 string? 3) how can i create a game.load.atlasXML from base64 strings? any help or notch in the right direction is appreciated. thanks

Hi, is it possible to show a timer indicator when the gaze is pointing at a plane in VR mode? Would like to do it like the video that i've attached here loading.mp4

Hey guys, I have made a game that needs to parse and render large save files. The issue I have is that whiles the javascript in Phaser is doing its thing all I can do is show a gif spinner in html whiles the player waits for the game to load. I would like to show a progress bar, I have made a global var that basically ticks up at key intervals in the loading process. The problem is is that the number does increment however the UI in phaser does not update as well as the HTML (in html I just made a update tick and read the loadingProgress var every tick) . I have tested this using debug.text, html span and a phaser ext object. My entire game just locks up when processing stuff but I would like a hook that could be independent and update a number at core intervals.

Hi guys, I've started to try playing with custom loading screen (it's fun), and I have a little idea: show in wireframe mode the scene while loading. This can lead to a cool effect I think. But is it even possible? Because for now if I well understand, the engine show the first render of the scene only when all assets are loaded (that's make sense ), but is it possible to tell it to show while "building" the meshes? (Sorry I don't know how to reproduce a loading screen in the playground to play around)

HI, Apologies for the rather basic question, but, the almost all of the articles & threads I've found are about loading JSON files in relation to a tileset or atlas. I just need to load some data, it doesn't have to be JSON, it could be csv, but examples are a bit thin on the ground. Is this possible? I have found one example, but it has a separate loader just for the JSON, it doesn't appear to add it into the loader resources - does it have to be done this way? Thanks! <edit> So, immediately after this I got it working by accessing the resources in loader complete method. But, I still wonder if it's possible to access the JSON from the cache as you do with sprites?

Can I change the template of loading source logo babylonis by my own ? like viewer here ? https://doc.babylonjs.com/extensions/the_templating_system

Hi It's been a while since I last wrote here. I friend of mine told me that he couldn't load my HTML5 game and that the page got stalled on chrome for windows . However every test I have done so far using different browsers and operating systems worked for me including Android and some iOS versions. I'm puzzled by this. Usually, the first time it will take around 30 seconds to load the app and another 15 seconds to be able to play but now I'm not sure. So It will be awesome if you can give me any type of feedback regarding this issue (please provide browser version and OS version). Any help will be very much appreciated. You can try dom-dom ( a domino game) here: http://dom-dom.mx The above link will redirect your browser to https://dom-dom.mx where the actual game resides. Once fully loaded you shall see something like the attached image. Thanks in advance. Cheers.

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 http://www.brianbutton.com/chart3d/carthagevirgin.html

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: http://entornomexicano.com/ 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(mesh.name.search("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(progress.total == 0) return; $(".textoCarga").text( ((progress.loaded/progress.total)*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: https://github.com/flelix/entorno-models.git in the folder: entorno-models/code/proyBabylon/entorno/ here you can see the project. I hope you can help me. Thanks and regards.

Hello I want to load a scene generated from blender, the generated file is .babylon, in my local, I have no a problem loadding the sene but in the host I can´t, in the console I have the next problem: Uncaught Error: Error status: 404 - Unable to load models/scene1/landScape.babylon at XMLHttpRequest.e.onreadystatechange (babylon.custom.js:3) Searching in google I se that I need to add mime types but I don´t know how. my html code is: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Entorno Mexicano</title> <link href="css/style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <canvas id="renderCanvas"></canvas> <!-- Carga de los js que se utilizan --> <!-- Babylon.js --> <script src="js/babylon.custom.js"></script> <script src="js/jquery-3.1.0.min.js"></script> <!-- codigo js personalizado --> <script src="js/main.js"></script> </body> </html> and my js file is: if (BABYLON.Engine.isSupported()) { canvas = document.getElementById("renderCanvas"); engine = new BABYLON.Engine(canvas, true); BABYLON.SceneLoader.Load("models/scene1/", "landScape.babylon", engine, function (newScene) { scene = newScene; // Wait for textures and shaders to be ready scene.executeWhenReady(function () { // Once the scene is loaded, just register a render loop to render it engine.runRenderLoop(function() { scene.render(); }); // Funcion para cuando se redimensiona la ventana $(window).on('resize', function() { engine.resize(); }); }); }, function (progress) { $(".textoCarga").text( ((progress.loaded/progress.total)*100).toFixed(2) + "%"); }); } Any idea why I can do Thanks an regards

I'm stuck with loading my meshes. I'm new to all the 3D and modelling so any thoughts are highly appreciated. Basically I want to extends Babylons default Mesh class called BaseMesh and add a 'load' function to it to get rid of clutter in my scene code. I'm extending this BaseMesh class for each model I have. My BaseMesh class: (Note that all code examples are written in TypeScript) // BaseMesh.ts class BaseMesh /* extends BABLYON.Mesh */ { public readonly BASE_URL: string; // I want these to be static public readonly MODEL_URL: string; // I want these to be static public readonly NAME: string; // I want these to be static public body; /* constructor( scene ) { // I don't know what to do here super( this.NAME //name scene // scene null // parent ? // source ); } */ public load( assetsManager: BABYLON.AssetsManager ) { return assetsManager.addMeshTask( this.NAME + ' task', // name "", this.BASE_URL, this.MODEL_URL ); } public onLoaded( results ) { // I don't know what to do here this.body = results.loadedMeshes[0]; } public update(): void {} }; A model class would looks like this: // Robot.ts class Robot extends BaseMesh { public readonly BASE_URL: string = '/models/'; public readonly MODEL_URL: string = 'robot.babylon'; public readonly NAME: string = 'robotMesh'; public update(): void { this.body.rotation.y += 0.03; } } In my code above I store the loadedMesh from the AssetsManager into this.body. But here is question 1: why is my model already showing on the scene when the meshtask has run? I'm only loading a mesh, I've not put anything about putting it on the scene. Question 2: How do I extend my BaseMesh class from BABLYON.Mesh so that the result (loadedMeshes) of my load function is "the mesh itself" (instead of an attribute this.body). For example this would mean I could change my update function to 'this.rotation.y += 0.03;' and just generally makes more sense. Question 3: I'm really confused about the relationship between my "code" and my "model/.babylon files". Is there any good documentation/tutorials about this? These questions range from: - when is it healthy to split different parts of a model in different files - do I apply textures in my code or do I do that in my .babylon file - do I apply animations in my blender file or do I code them - ... This was a pain to type, if you have any questions please do ask Thank you in advance!

Hey Guys, I'm currently moving my camera around a series of sprites but the movement is painful to look at and jerky when moving the sprites and especially with higher speeds, is there anything you can do to fix/help the lag/poor performance as it isn't really usable as a build in this current state. I also as @Wingnut said have the issue that the transparent background is still clickable. Here is my current playground: https://www.babylonjs-playground.com/#41N19L#3 @Deltakosh @Wingnut @JohnK Any incites Guys?

Hi all. I'm trying to return an array of objects loaded by the Mesh Importer for later use. I would like to be able to call a function to load my objects and outside of the function, affect & change each one of them OUTSIDE of the function. Here is the small demo I made :: http://www.babylonjs-playground.com/#1QJUDF#3 Thank you! <3 Mythros

Hi Guys, I'm currently making a game and I've run into a bit of an issue with one of the states that is loading multiple animations. There are 5 animations in total that play as soon as the state loads. They also loop. The problem that I'm having is that the state with the animations is taking around 5+ seconds to load, even though the spritesheets have been loaded in the Preload State. I feel this might be because the animations are being set so 60 FPS. I would prefer it if I could add this extra loading time to the Preload State if possible (because it has a loading bar) so I was wondering if there is a way to create the animations in a previous state and then have them play instantly on the page I need them to. Any help would be appreciated.

I have issue with loading images from atlas! Game I developing works great , but on older devices after loading , images are not shown! This happens on Samsung Galaxy Tab 2 in every browser (chrome , opera ,firefox). So if somebody have solution , please help

Okay, so a lot of the tutorials for Pixi.js seem a bit outdated. Most of the information out there still uses the old way of creating a new Pixi application by not using the newer 'convenient' Application class and setting up the renderer, container, and ticker by hand. A lot of the guides and articles also seem to be written before Pixi adopted and extended on a third-party loader module. Anyway, could someone explain to me how loading assets works, and what it means exactly? Normally, to start displaying some visuals with Pixi, you need to create a texture, and then a sprite from that texture, yes? Example: var texture = PIXI.utils.TextureCache["images/anySpriteImage.png"]; var sprite = new PIXI.Sprite(texture); But then comes the 'loader' to the rescue. From my understanding, the Pixi loader is an object that simplifies handling assets because it creates the textures for you? For example: const loader = PIXI.loader .add('image1', '/assets/images/image1.png') Am I correct? I can't wrap my head around this. Here's my code altogether (it doesn't work by the way): const app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb}); document.body.appendChild(app.view); const sprites = []; const loader = PIXI.loader .add('image1', 'assets/images/image1.png') .load(function(loader, resources) { sprites.image1 = new PIXI.Sprite(resources.image1.texture); init(); }); function init() { app.stage.addChild(sprites); } Do I need to render the stage in the 'init' function as well? Do I have to call 'load()' at some point? I'm so confused! However, this code works and I'm not sure why: const app = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb}); document.body.appendChild(app.view); const loader = PIXI.loader; loader.add('image1', '/assets/images/image1.png'); loader.once('complete', function(loader, resources) { init(); }) loader.load(); function init() { let sprite1 = new PIXI.Sprite(PIXI.loader.resources.image1.texture); app.stage.addChild(sprite1); } EDIT Okay, it's making a lot more sense to me now. Here is the cleanest way I've come up with when using loader: const app = new PIXI.Application(800, 600); document.body.appendChild(app.view); const loader = PIXI.loader; loader .add('image1', '/assets/images/image1.png'); loader.on('complete', function(loader, resources) { let sprite1 = new PIXI.Sprite(loader.resources.image1.texture); app.stage.addChild(image1); }); loader.load();

What benefits importing assets in .babylon format has over .obj format? Which is better for performance, especially for loading very big high poly objects (for example, 100mb)?

hi guys, im here again asking for your wise advices i wonder how to achieve different ways to show loading bars in phaser. i mean something like a bar filling another and a % number indicating how it goes. would you mind to share with me some example? i would like to explore other ways to improve my load state

Hi! I've been using Babylon for a week or so now and really like how easy it is to use and how well the tutorials are written (I'm using it for a robotics simulation project I'm currently working on). Anyways, I have a question about how textures (and other AssetTasks as well: https://github.com/BabylonJS/Babylon.js/blob/master/src/Tools/babylon.assetsManager.ts) are loaded using the AssetManager. I have a texture image that's being served at /app/assets/sceneassets/mytextureimg.jpg. My Babylon scene is loaded at the url /app/testbabylon. When I try to load a texture using the addTextureTask method of the AssetManager, I specify that the asset is located at "/app/assets/sceneassets/mytextureimg.jpg", however, the network request that the AssetManager makes is to "/app/testbabylon/app/assets/sceneassets/mytextureimg.jpg". This is clearly relative to my current path, I can use an absolute path (in dev: "http://localhost:4000/app/assets/sceneassets/mytextureimg.jpg") and it works correctly, however this seems messy (especially if switching domains). If I end up using "//app/assets/sceneassets/mytextureimg.jpg" the network request is "http://app/assets/sceneassets/mytextureimg.jpg" - which doesn't point to anything. My main question is whether its possible to specify the AssetManager to use the root url of my domain for texture (and/or image, cubetexture, etc.) loading (or have something like a "rootUrl" parameter like AddMeshTask seems to have). Just for reference, here's a snippet of the code I'm using (material is an object that has a name and diffuseTexture property; where diffuseTexture is the url string, scene is a Babylon Scene object). setupMaterial(material, scene) { const babylonMaterial = new Babylon.StandardMaterial(material.name, scene); if (material.diffuseTexture) { const diffuseTask = scene.loader.addTextureTask( `diffuseTextureTask${material.name}`, material.diffuseTexture); diffuseTask.onSuccess = (task) => { babylonMaterial.diffuseTexture = task.texture; }; } return babylonMaterial; } Thanks for any help, Flux159