Search the Community

Showing results for tags 'mesh'.

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
    • 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 242 results

  1. Disposing a mesh

    Hi, On a Stackoverflow found an advice to set the mesh variable to null after the dispose call (to tell the GC he can collect). Something like: ball.dispose(); ball = null; ... is this needed nowadays or is already implemented in BJS ?
  2. Hi everyone, I know it's possible and advised to use InstancedMesh when several meshes share the same geometry and the same material. Is there some recommended optimization to do when two meshes share the same geometry but have different materials ? For example with this case : (here VertexData object is already loaded) Is there something better than two calls to "applyToMesh" ? Like obj1.geometry = obj2.geometry, this kind of thing... (my question is based on the fact that Unity explicitly share the same geometry across objects, even when Materials are different. But perhaps it's only done to optimize data packing / loading and has no impact at runtime...) (I'm fairly sure I have already found this question somewhere, but can't remember the answer nor find where it was...) Thanks a lot for your inputs ! Have a nice day,
  3. Hi, I want to create a ground mesh from a plane. let plane = new Plane(-0.4, -0.2, -0.6, 0.1); //normal and offset let planeMesh = Mesh.CreateGround("planeMesh", 100, 100, 2, scene); //to make the planeMesh to fit the plane, transformation should be added to the mesh planeMesh.rotation = ... planeMesh.positon = ... someone can help me out? Thanks.
  4. Hello folks, i try load an .obj file and modify the material/texture scaling. Loading goes well, but not scaling of the textures When i try to access the material object i get a undefined error. meshes[0].material is undefined, in the screen shot you can see the property is there. I dont know what i do wrong // first param: ["myMesh1", "myMesh2"] // BABYLON.SceneLoader.ImportMesh("", "./assets/temp/house/", "restaurant.obj", game.scene, function (meshes, particleSystems, skeletons) { // do something with the meshes and skeletons // particleSystems are always null for glTF assets //console.log(meshes, particleSystems, skeletons); console.log(meshes[0]); });
  5. meshes get same material

    I'm using BabylonJS V3 with Blender 2.79 to create product visualizations. Many times, it is necessary for me to define more complex shaders in the JS code. I'm using lines like scene.meshes[1].material.emissiveColor = new BABYLON.Color3(1, 0, 0); to define the shaders after export. Usually every mesh can get it's own shader this way. Unfortunately, I can't get it to work somehow. Even in small test scenes (one red icosphere, one green cube, a hemi lamp and a camera), both objects get the same material. When trying to change the appearance like shown above, both meshes change color. When I navigate the camera, so that one object isn't visible, the right material gets loaded (green, in my sample scene). Here is a small video of the strange behavior: Both blender meshes have individual datablocks and individual materials. No duplication, instancing ... Do the mesh indices change, when a mesh gets unloaded? Where could I have made the mistake? In blender or in my .js? I am greatful for every hint!
  6. Hello, I'm able to attach spatial audio to an object in my scene. But as I'm now creating many objects and pushing them to an array, I cannot assign the audio to the mesh in the array. Here's the basic code: for (let b = 0; b <= 20; b++) { boxRotArray = BABYLON.MeshBuilder.CreateBox("box_rot" + b, {size:0.1}, scene); } const bgm = new BABYLON.Sound('backgroundMusic', './Demos/sounds/WubbaWubbaSound.mp3', scene, null, { spatial: true, maxDistance: 20, loop: true, autoplay: true }); bgm.attachToMesh(boxRotArray[0]); I've tried using the name of the object in the array, and I've also tried to assign a new variable to equal boxRotArray[0]. when I console.log(boxRotArray[0]); it is a mesh and I'm using this in many different other assignments. Any thoughts? Thanks, DB
  7. Hello, I need to create allot of boxes proceeduraly, and cannot figure out how. I tried many methods to create meshes (boxes), but nothing works. I tried the same code in the following playground scene; But I keep getting the message in the console that the variable function is not a constructor. Example using the code from the playground as a test in my scene: TypeError: YellowStar is not a constructor Please help if you can. Thanks, DB
  8. This is one simple question but I haven't found an answer in the doc or here so I ask When I simplify a mesh and clone it after. Will my cloned mesh be simplified too or not? And have I to wait for the mesh to be simplified before cloning it to have the simplification on it? Thanks, Pichou
  9. Optimize Mesh Selection

    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.
  10. Mesh.lookAt

    Hi Is there something about the Mesh.lookAt method that means it won’t work on imported models? I have a .babylon file exported from my Unity scene. I can select individual meshes using: var mesh=scene.getMeshByName(“someMeshName”) This works because the exporter maintains the Unity GameObject names. Yet, if I then try: box.lookAt(mesh.position); //box is a mesh created with Babylon The “box” object’s rotation never changes. If, however, i create a second box object and make it the target of the lookAt() call, the “box” object’s rotation does change. I’ve checked the position property of the mesh I’m selecting with getMeshByName() and it’s not null, so I feel like I’m missing something here. Any thoughts? Cheers!
  11. Hi I'm experimenting with Babylon and currently I'm trying to get a mesh (box) to follow a curve I've created. This part I've managed by borrowing various examples, but what i'd like to do now is make sure the box is always "facing" the direction of movement as it goes along the path. I've tried a few techniques I've found here and elsewhere but I seem to be having trouble making it work. Here's "my" code: It's based on an example by @celian-garcia because I was planning on using TweenMax for this and some other animations I have in mind. Once I can get the above working I will then parent a camera to the box and use this as a fly-by-wire animation for my final scene. Would appreciate any help. Cheers
  12. Hi, I noticed that when I load a mesh at a certain position, the bottom center of the mesh will be at that position. For example, If I create a ground and then load a mesh at (0,0,0) then the mesh will be on the ground. So the actual center of the mesh is above the ground. How can I change the center of the mesh so that, for example, its actual center appears at (0,0,0)? Is there some sort of offset I can add? I hope the question makes sense. Thanks!
  13. Hi, I´m new to BJS and trying to get along with a 3D visualization for warehouses. The 2D visualization already work pretty well, the coordinates are stored in a DB running on a remote server. Target is to provide a library of rack elements (frames and beams) of different dimensions (height, width, length). I can provide a JSON from server-side Java-application with all the necessary data (rack id, rack type, coordinates, etc.) I´m using OBJFileLoader for importing obj and mtl which works fine as well. This is 2D visualization of a warehouse: Every blue rectangle is a warehouse rack consisting of two frames an a bunch of beam pairs: Both elements, frame and beam, come from separate obj-files. In the end of the day, i want to have something like this: The displayed meshes are kind of super simple, but perfect for playing around with BJS (i´ve all models in high poly as well). For some reason I can´t move (or change) meshes imported by this method: I can specify the mesh position while importing like this (works for the sphere btw.): var loader = new BABYLON.AssetsManager(scene); var pos = function(t){ t.loadedMeshes.forEach(function(m){ var meshName =; var meshID =; m.position.z = 5; m.position.x = 7; }); }; var steher1 = loader.addMeshTask("steher_2500_900_120", "", "http://localhost:8080/MagllanMain/Babylon/Cyril/", "steher_2500_900_120.obj"); steher1.onSuccess = pos; var sphere = BABYLON.Mesh.CreateSphere("sphere", 0.5, 0.5, scene); var simpleMaterial = new BABYLON.StandardMaterial("texture2", scene); simpleMaterial.diffuseColor = new BABYLON.Color3(0, 1, 0);//Green sphere.material=simpleMaterial; sphere.position.x = Math.floor((Math.random() * 2) ); sphere.position.y = Math.floor((Math.random() * 2) ); sphere.position.z=3; BABYLON.OBJFileLoader.OPTIMIZE_WITH_UV = true; loader.load(); // Begin of User interaction via button event $("#move_z").click(function(){ //scene.meshes.forEach(function(k) {alert(;}); pilot.position.z = pilot.position.z + 1; sphere.position.z = sphere.position.z + 0.4; scene.getMeshByName('steher_2500_900_120').position.z +=10; }); Funny thing is, i can move all other meshed via click-event. In general, I´ve been asking myself if I´m using the best way of doing this (import-method, file-types: obj and mtl). The workflow should be like this: 1) get JSON from server with an array of IDs and their coordinates (e.g.: ID="10012", ID_name="rack_012", ID_pos_x="130", ID_pos_y="120", etc.); 2) Importing the rack elements that belong to a specific ID into existing BJS scene; 3) Every rack element uses the same obj-file(s) (meshes) because all racks shall be of the same rack type, but with different IDs in BJS; I don´t know how to give imported meshes their own unique, custom IDs so that I can access them in the scene. More in general: I have my server-side array and i need a client-side array as well. When i change the position of let´s say 10 of 2000 racks in my layout / scene, I need to know which meshes i have to "move" on client-side. If there are any other weak points my way of trying to achieve this, please tell me. Any help appreciated !!! Topper
  14. Mesh showBoundingBox is bugging

    Hello all, I just finished the migration to the new Babylonjs and all dependencies for my project. now i'm pointing to the latest builds directly from URLs. Something that i could not fix and that was working before is the showBoundingBox attribute in mesh, it looks like that Babylonjs is generating a wrong mesh fro the bounding box. It's reproducible in Playgroundground, tested on Firefox, Chrome and MS Edge Best regards DarkLight
  15. I've been prototyping a local co-op game that involves multiple players moving around on the same screen. Where my trouble has come, is with inputs and handling multiple key presses and movement. I've tried using the action manager to apply forces, impulses, or setting linear velocity on key down, but all of them seem to feel very buggy, especially when trying to press multiple keys. A sample of my code looks like the following: scene.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnKeyDownTrigger, function (evt) { console.log(evt.sourceEvent.key); var velocity = player.physicsImpostor.getLinearVelocity(); if (evt.sourceEvent.key == "w" || evt.sourceEvent.key == "W") { //player.applyImpulse(new BABYLON.Vector3(0, 0, 10), player.position); //player.physicsImpostor.applyForce(new BABYLON.Vector3(0, 0, 100), player.position); player.physicsImpostor.setLinearVelocity(new BABYLON.Vector3(velocity.x, velocity.y, 20)); } if (evt.sourceEvent.key == 'a' || evt.sourceEvent.key == 'A') { //player.applyImpulse(new BABYLON.Vector3(-10, 0, 0), player.position); //player.physicsImpostor.applyForce(new BABYLON.Vector3(-100,0,0), player.position); player.physicsImpostor.setLinearVelocity(new BABYLON.Vector3(-20, velocity.y, velocity.z)); } if (evt.sourceEvent.key == 's' || evt.sourceEvent.key == 'S') { //player.applyImpulse(new BABYLON.Vector3(0, 0, -10), player.position); //player.physicsImpostor.applyForce(new BABYLON.Vector3(0, 0, -100), player.position); player.physicsImpostor.setLinearVelocity(new BABYLON.Vector3(velocity.x, velocity.y, -20)); } if (evt.sourceEvent.key == 'd' || evt.sourceEvent.key == 'D') { //player.applyImpulse(new BABYLON.Vector3(10, 0, 0), player.position); //player.physicsImpostor.applyForce(new BABYLON.Vector3(100, 0, 0), player.position); player.physicsImpostor.setLinearVelocity(new BABYLON.Vector3(20, velocity.y, velocity.z)); } })); scene.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnKeyUpTrigger, function (evt) { console.log(evt.sourceEvent.key + " up"); var velocity = player.physicsImpostor.getLinearVelocity(); if (evt.sourceEvent.key == "w" || evt.sourceEvent.key == "W" || evt.sourceEvent.key == 's' || evt.sourceEvent.key == 'S') { player.physicsImpostor.setLinearVelocity(new BABYLON.Vector3(velocity.x, velocity.y, 0)); } else if (evt.sourceEvent.key == 'a' || evt.sourceEvent.key == 'A' || evt.sourceEvent.key == 'd' || evt.sourceEvent.key == 'D') { player.physicsImpostor.setLinearVelocity(new BABYLON.Vector3(0, velocity.y, velocity.z)); } })); My question is, what is the best practice to handle movement of a simple object (I'm currently just using a cube), and have it work with multiple key presses? Keep in mind this will be repeated for multiple players, so I'd like to to be as modular as possible
  16. I have a detailed SVG file, and I want to be able to zoom in and out of it in-game, by a large factor, in realtime, while still maintaining perfectly crisp antialiased edges. From what I've gathered, PIXI's SVG support is limited to pre-rendering a raster texture on load, which wouldn't work here as the required resolution for the closest zoom level would create an unmanagably huge texture. I don't need support for gradients etc, just simple colours and paths. I could triangulate the SVG file using something like svg-mesh-3d and then render it out as a mesh, however that leaves the question of how to render out the colours properly - I'm not quite sure how a PIXI mesh object could be made to handle this. Perhaps some kind of shader? Also, the triangulation has the downside that smooth curves will have a limited 'resolution' depending on the number of triangles, but that's not a massive issue for my application. Is there a better way I'm missing? If not, any guidance on how to handle the colour rendering on the mesh would be appreciated.
  17. I do have only ONE big mesh imported to BabylonJS. I need to visually highlight a small part (let us call it HotSpot) of the big mesh. What I did so far: Extracted all the positions via getVerticesData Collected the vertices Filtered only vertices of interest (HotSpot) So I ended up in an array vertexMapHS comprising all the HotSpot vertices. Now I need to either highlight using a HighlightLayer or apply a different color all the vertices in vertexMapHS. Does anybody have a hint how to do that? Here is the playground of what I have got so far: Thx in advance
  18. Mesh vs AbstractMesh

    Hi everyone, What's the difference between Mesh and AbstractMesh? I understand the Mesh extends AbstractMesh but I am trying to understand when I should use one and when I should use the other. An example would be great as well. Thanks!
  19. Hey everyone! Is there a way to add a smooth transition when changing the material of a mesh? Thanks, Pichou
  20. Hi, i need a help, how to access the mesh properties from another function code is below... it show Uncaught TypeError: Cannot read property 'position' of undefined how to fix it BABYLON.SceneLoader.ImportMesh("", "scenes/", "a44.babylon", scene, function (newMeshes) { player = scene.getMeshByName("Character"); } console.log(player.position);
  21. Mesh Intersect Timing

    Hi, I have two meshes. In my createScene function i have a point where I check if they are intersecting. The thing is I would like to first move one of the meshes (change its position) and then IMMEDIATELY check if they intersect BEFORE waiting for the next rendering iteration. The problem is if i change the position of one mesh so that it intersects with the other and then immediately check for intersection it says they don't intersect (I guess because the actual position is changed only while the render loop is called). Is there anyway to solve this? Thanks!
  22. Hello, i created a litle game, based on the car demo in the playground, Now i have noticed that when i click with the mouse (left, middle, right) the car bounce a litle for and then back. also when the key is released. I have created an video: Have a look on the console. I dont think this is not an problem with my game logic, more with the canvas. Like you drag & drop the frame. Has anyone an similar problem or a fix for me ? I dont know what to do.
  23. Hi, I do have a mesh with a huge amount of vertices (Meshlab say 1800000 vertices, after unifying duplicates still 304000 vertices). Its stored in an STL File. I import it as a mesh as shown in the example below It's doing well on a PC with FPS of almost 60fps. But using mobile devices I end up with 10-20 FPS. So, I am looking for an optimization solution. I read all the HowTo on your Web page. Since its only one model - instancing or cloning does not help. I thought about using LOD or Auto LOD. But trying that the framerate totally drops. See here (lines 43-45) From Unity I know that they split or slice models with lots of vertices in slices of max 16k vertices. Is there a way in BabylonJS to split huge meshes into slices of sub-meshes to improve FPS performance? Another idea is to keep the amount of vertices/triangles for the main areas of the model and decrease it for others. Do you support such a feature? What would you suggest to improve the performance while keeping the information? I know its a trade-off. Thx for your hints. See you
  24. Hello again, I'm trying to figure out how to check for collisions using intersectsMesh method. The problem is that when I start my scene, the intersectsMesh callback is called since I believe the meshes start at the origin point of the world on the first render before they are moved. The PG above demonstrates the problem. If you open up the browser's developer console, you would see "SHOULDNT HAPPEN" when the mesh intersections occurred. Any tips on how to prevent this problem? Thank you!
  25. Hello , It's my first post in the forum. I need your help. When i click in a mesh , i need the camera get in front of the Mesh. Thanks for your answers.