Search the Community

Hi All, Do you have any idea how I can select edges/vertices on mouse over? http://www.babylonjs-playground.com/#35HAW1 I appreciate your time and effort to help me out. Arte

I have an OBJ that starts like this: v -212.947922 761.461914 28.203093 v -213.405563 766.404602 28.193245 v -214.460007 771.238403 28.648092 v -214.639648 776.197327 28.477924 v -215.033905 781.149658 28.498495 v -215.717438 786.059753 28.729038 I copied the vertices to an array using mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind) When I look at vertices[0] I expected to get -212.947922 (the first value in the OBJ file) but it comes up with a value that's somewhere else in the OBJ file. How can I map a value from getVerticesData() to a location in the OBJ file? So for example a value I get from getVerticesData could be -215.033905 which would map to 12th value in the OBJ file.

Hi !, I'm looking at how vertices work so that I can work with and transform my mesh later. For that I started with a simple box to find the order and give a number on the vertices group. Can someone explain to me why numbers 3 and 7 are in the same place? https://playground.babylonjs.com/#3CZLNK Thank you !

Hello, noob back Just wanted to ask what may be the best way to approach creating something like a maze from 2D positional data. (Image below to show what im trying to accomplish) I had created something by creating custom meshes which mapped to 2D data but even creating 7 or so planes makes the performance extremely slow. I'm guessing this has something to do with computing normals or creating new vertex data... Not sure. So far each of the custom planes you see below are cloned from a base custom mesh object and then a new vertexData is created for each one based on the XY coordinates of the map and applied on the mesh. Because of the huge performance hit, I'm thinking that this isn't the best way. Can anyone provide any expertise on this please? Thank you. function linedef(startVertex, endVertex, material) { this.startVertex = startVertex; this.endVertex = endVertex; let customMesh = bustomMesh.clone(); const {x, y, z} = startVertex; var positions = [ x, 5, z, x, 0, z, endVertex.x, 0, endVertex.z, x, 5, z, endVertex.x, 0, endVertex.z, endVertex.x, 5, endVertex.z ]; var indices = [0, 1, 2, 3, 4, 5] var vertexData = new BABYLON.VertexData(); vertexData.positions = positions; vertexData.indices = indices; vertexData.applyToMesh(customMesh); var normals = []; //Calculations of normals added BABYLON.VertexData.ComputeNormals(positions, indices, normals); var vertexData = new BABYLON.VertexData(); vertexData.positions = positions; vertexData.indices = indices; //normals = normals.map((n) => {return -(n)}) vertexData.normals = normals; //Assignment of normal to vertexData added var uvs = [0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 1, 1]; vertexData.uvs = uvs; vertexData.applyToMesh(customMesh); //var redMat = new BABYLON.StandardMaterial("redMat", scene); //redMat.diffuseTexture = new BABYLON.Texture("textures/e1m1wall.png", scene); //redMat.bumpTexture = new BABYLON.Texture("http://i.imgur.com/wGyk6os.png", scene); //customMesh.material = redMat; //customMesh.material.backFaceCulling = true; //showNormals(customMesh, 5, null, scene); customMesh.checkCollisions = true; return customMesh; }

Hey crew. I've run up against trouble trying to move the vertices of an imported mesh. (So far I've tried a .babylon file and .glb.) Here's a Playground example where I've added a randomize-vertex-positions function to the glTF Importer (Boombox) example. Upon loading the scene file, we do this: //Add a "do this once the mesh loads" function to the example: var bb = scene.getMeshByName("BoomBox"); //Get the newly-loaded mesh bb.updateable = true; //Not clear if this does anything var positions = bb.getVerticesData(BABYLON.VertexBuffer.PositionKind); //Copy the mesh's vertex positions into an array var numberOfVertices = positions.length/3; //Randomize the vertex coordinates in the array for(var i = 0; i<numberOfVertices; i++) { positions[i*3] = Math.random()*5; positions[i*3+1] = Math.random()*5; positions[i*3+2] = Math.random()*5; }; var positionFunction = function() { //Create a function for updateMeshPositions to call... bb.updateVerticesData(BABYLON.VertexBuffer.PositionKind, positions); //...where we replace the old vertex data with our array }; bb.updateMeshPositions(positionFunction, true); //Call that updateMeshPositions function //And... nothing happens. The boombox remains as it was at import. No change. Any thoughts on what I might be doing wrong?

I'm new to BabylonJS. I've been successful at integrating the framework within an Angular 2 project. Now, I'm trying to integrate 3D models from the Unity Asset Store. I used the Unity exporter to generate a .babylon file. It rendered a gray beagle. The console complained about an old PBR Material version. I removed the albedo property and the error went away. So, did my beagle. I've attached my log from the console. I'm not sure where to start troubleshooting. What is the common approach to integrate 3D models into Babylonjs? Is there some linting tool to troubleshoot the .babylon file? Is my problem somewhere else? Thanks,

As far as I understand, updating the positions data on a mesh using updateMeshPositions - or other update* functions - only works when the mesh is set to be updateable. This setting can only be done at creation time. All basic shape creation* functions have the updateable option that can be set, but the standard mesh constructor has not. How do I make a custom shaped mesh updatable? I have thought of a workaround, by creating an updateable cube or something and replacing the vertices data with my custom mesh data. I have not tested this, but I will. And another question: it was my take that the updateMeshPositions is the fastest way to update the vertices positions. setVerticesData works also on non Updateables but seems to be slow. Is updateMeshPositions the fastest way to modify the vertices positions? And if not, what is? I am working on a sculpting app, my custom mesh has over 50K positions. Updating vertices is what the app is all about and I need it to be done as smooth and realtime as possible.

The following functionality applies the current vertices' positions to the same vertices(No change to the mesh). var arr = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind); for (var i = 0; i <mesh.getTotalVertices(); i = i++){ var fx = arr[i * 3 + 0]; var fy = arr[i * 3 + 1]; var fz = arr[i * 3 + 2]; arr[i * 3 + 0] = fx; arr[i * 3 + 1] = fy; arr[i * 3 + 2] = fz; } mesh.setVerticesData(BABYLON.VertexBuffer.PositionKind, arr); I'm unsure as to how to apply a random noise, that still takes into account the vertices that are on the same position? If I use something like fx/fy/fz + a random value, the faces split up, and creates holes in the mesh.

Hi, I'm running into an issue regarding collision detection against adjacent DisplayObjects. Let's say I have sibling objects that are a child of a Container that has been rotated. If I use getBounds() on the siblings they return a bounding box that is oriented to cardinal north. Using those bounds for collision detection may result in false positives, because the given bounds may not follow the actual shape and orientation of the DisplayObject. I created a codepen to illustrate the point: When you toggle the "rotate" buttons at the bottom of the pen you will see the purple box morphing to the shape of the bounds for "shape" and "label". The text will change from red to green if the collision detection returns positive. I would like to do a more robust collision detection algorithm (possibly based on Separating Axis Theorem), but I would need to grab the vertices for each shape correctly translated to the global coordinates regardless of their nesting within the scene graph (accounting for scale, rotation, and translation from the shape and all parent transforms). The case being that the collision detection that I would like to do may not be only between direct siblings within the scene graph. Is there a nested property that would give me what I'm looking for, or will I need to grab the graphics data and apply all of the recursive parent transforms myself for each vertex? Here is a fork of a codepen that demonstrates the Separating Axis Theorem:

I've been searching if babylonjs has the ability to reduce a mesh vertices and triangles

Hola! I have a collection of vertices in 3ds max that i would like to export for babylon with a few other meshes. The exporter shows an error, it likely thinks my vertices are useless. These are meant to be potential camera positions, but i am using a babylon camera and not exporting a 3ds max cam. Any suggestions are appreciated.

@jerome, love your new function getFacetData as introduced below and when you have finished any tweaking IMHO would be a great addition couldn't help playing around with it and adding a method of setting a color for an individual facet, http://www.babylonjs-playground.com/#1CRS0Z

The following function minimizes the number of vertices in a mesh. BABYLON.Mesh.prototype.minimizeVertices = function() { var _pdata = this.getVerticesData(BABYLON.VertexBuffer.PositionKind); var _ndata = this.getVerticesData(BABYLON.VertexBuffer.NormalKind); var _idata = this.getIndices(); var _newPdata = []; //new positions array var _newIdata =[]; //new indices array var _mapPtr =0; // new index; var _uniquePositions = []; // unique vertex positions for(var _i=0; _i<_idata.length; _i+=3) { var _facet = [_idata[_i], _idata[_i + 1], _idata[_i+2]]; //facet vertex indices var _pstring = []; //lists facet vertex positions (x,y,z) as string "xyz"" for(var _j = 0; _j<3; _j++) { // _pstring[_j] = ""; for(var _k = 0; _k<3; _k++) { //small values make 0 if (Math.abs(_pdata[3*_facet[_j] + _k]) < 0.0001) { _pdata[3*_facet[_j] + _k] = 0; } _pstring[_j] += _pdata[3*_facet[_j] + _k] + "|"; } _pstring[_j] = _pstring[_j].slice(0, -1); } //check facet vertices to see that none are repeated // do not process any facet that has a repeated vertex, ie is a line if(!(_pstring[0] == _pstring[1] || _pstring[0] == _pstring[2] || _pstring[1] == _pstring[2])) { //for each facet position check if already listed in uniquePositions // if not listed add to uniquePositions and set index pointer // if listed use its index in uniquePositions and new index pointer for(var _j = 0; _j<3; _j++) { var _ptr = _uniquePositions.indexOf(_pstring[_j]) if(_ptr < 0) { _uniquePositions.push(_pstring[_j]); _ptr = _mapPtr++; //not listed so add individual x, y, z coordinates to new positions array newPdata //and add matching normal data to new normals array newNdata for(var _k = 0; _k<3; _k++) { _newPdata.push(_pdata[3*_facet[_j] + _k]); } } // add new index pointer to new indices array newIdata _newIdata.push(_ptr); } } } _newNdata =[]; //new normal data BABYLON.VertexData.ComputeNormals(_newPdata, _newIdata, _newNdata); //create new vertex data object and update var _vertexData = new BABYLON.VertexData(); _vertexData.positions = _newPdata; _vertexData.indices = _newIdata; _vertexData.normals = _newNdata; _vertexData.applyToMesh(this); } If you check this playground http://www.babylonjs-playground.com/#1JBMJ3#15 and switch on the Debug Layer you will see the number of vertices is 366. Comment out line 78 (ie do not apply the minimize vertices function) the number of vertices is 435. Replacing line 78 with sphere.optimizeIndices() leaves the number of vertices as 435 EDIT Just to bring to the top RaananW's warning from his post, this will only help if the mesh material is a uniform colour or texture. Textures such as the map of the earth will not seam correctly if the above function is applied to the sphere. Questions Is this a useful function? Is there anything made not possible by applying the function? Could this already be done with existing functions? Some Background to The Developement Playing around with sphere with a small number of segments (1) (below) I counted 14 vertices but the Debug Layer showed 28 The console for the vertex data positions gave Array [ 0, 5, 0, 0, 5, 0, 0, 5, 0, 0, 74 more… ] and that for the indices gave Array [ 0, 1, 7, 7, 1, 8, 1, 2, 8, 8, 98 more… ] This showed two things (1) vertex positions are repeated, eg 0, 5, 0 is repeated at least three times (2) The indices for the first facet (one of the triangles used to construct a mesh) 0, 1, 7 gives the vertex positions as (0, 5, 0), (0, 5, 0) and (4.330126941204071, 2.5, 0). Since (0, 5, 0) accounts for two positions the facet 0, 1, 7 is not a true triangle but is a straight line. So I set about seeing if I could remove the redundancies. This playground http://www.babylonjs-playground.com/#1JBMJ3#16 shows it was possible. Next question was did the function affect sub meshes? This playground http://www.babylonjs-playground.com/#1JBMJ3#13 shows that it does not appear to? This playground http://www.babylonjs-playground.com/#1JBMJ3#14 (by uncommenting lines 79 and 80) seems to show that the function will take a flat shaded mesh and reverse it back. Is there a name for a mesh that is not flat shaded? A round shaded mesh does not sound correct.

Hi guys how can I get geometry vertices , in three.js i can get positions with box.geometry.vertices and returns coordinate for 8 points ( of a box ) ; now via Bjs i tried to use box.getVerticesData(BABYLON.VertexBuffer.PositionKind); , but seems returns 24 points ! am I wrong or Babylon js use duplicate/separate vertices for each face ! if so , how can I avoid to return duplicated coordinate ? thanks in advance .

Hello, I want to update the vertices of a lines mesh after it has been created. On a sphere, by contrast, I can do so fairly simply: mySphere.position.x = myX; mySphere.position.z = myZ; But there does not appear to be anything like that for lines mesh: // myLines.positions is undefined ???? myLines.positions[0].x = myPositions[0].x; myLines.positions[0].z = myPositions[0].z; myLines.positions[1].x = myPositions[1].x; myLines.positions[1].z = myPositions[1].z; // myLines._positions is null ???? myLines._positions[0].x = myPositions[0].x; myLines._positions[0].z = myPositions[0].z; myLines._positions[1].x = myPositions[1].x; myLines._positions[1].z = myPositions[1].z; Is the only way to make the mesh updatable and send a new array of points in via the options? Doable, but it's more of a pain, IMO. Insight appreciated. Thanks!

Hey guys, I want to edit the loading Object in the following code. I want to rotate it or to set the vertices and normals. I tried it with "this" . BABYLON.SceneLoader.Load(document.getElementById("path").value, document.getElementById("name").value, engine, function (scene) { // Ground var ground = BABYLON.Mesh.CreateGround("ground", 15,15, 1, scene, false); var groundMaterial = new BABYLON.StandardMaterial("ground", scene); groundMaterial.specularColor = BABYLON.Color3.Black(); ground.material = groundMaterial; //ground.rotation.x += Math.PI/2 ; //ground.rotation.y += Math.PI/2 ; // Light var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(, 1, ), scene); //newScene light1.intensity = 0.4 ; var cam = new BABYLON.VirtualJoysticksCamera("VJC",new BABYLON.Vector3(, 4, -10) , scene); //Attach a camera to the scene and the canvas scene.activeCamera = cam; cam.attachControl(canvas, false); //this.rotation.y -= 35;<---- ? // Render engine.runRenderLoop(function () { scene.render(); }); // Resize window.addEventListener("resize", function () { engine.resize(); }); }); // Babylon loader

Hi, How can I retrive heightmap vertices? I tried with the following: var Positions = ground.getVerticesData(BABYLON.VertexBuffer.PositionKind); It returns null. Is there a speical way to get all the vertices from my height map?

Hello, I am quite new to Babylon JS. I was wondering if there is a way to morph the selected vertices on click. I read the documentation, and tried all their examples, but have yet to come up with a solution. So far I have this code below. scene.onPointerDown = function(evt, pickResult) { if (pickResult.hit) { // code for mophing selected vertices here. var chosenMesh = pickResult.pickedMesh; } } I am stuck right at this point. I did some console logs and chosen mesh seems to select the entire plane. I also tried pickResult.faceId and it gives me the Id of the selected face, however, I am not sure how I can edit this particular face on the height map. Any ideas? Or examples? Thanks for your help.

Hi there, I just started learning BabylonJS some days ago (and I love it so far), but I'm having an issue. I am loading scenes, with a plane called WaterPlane, which is... The water plane. I am using some shaders to simulate water surface on it, however, as it only has 4 vertices, the vertex shader is not really useful... So I decided to convert it to a GroundMesh (which has more vertices), the only issue I am getting is regarding the size of the WaterPlane, I can't use the scaling data as it makes a huge water surface... I've spent some time looking on the internet, how I could get the scale of a plane after importing it from a scene, but I can't find a way to do it... I can't set the Ground mesh manually as the water plane will change size over different scenes, and I can't modify the plane to add more vertices before importing... Thanls in advance for your help guys !

I'm a JS developer using Babylon.js for the first time, and right now I'm just trying develop an understanding of what is happening under the hood. I've been programming forever, but have limited 3D experience, so Babylon.js looks like a perfect learning opportunity. I put together a simple program that takes a mesh, finds the screen coordinates of each of its vertices, and overlays triangles on a canvas on top of Babylon.js's renderCanvas. I'm getting some strange results, though. Most of the vertices are right where they should be, but others are completely wrong. When I do this with a cube, all the verticies look right, but if I open up the vertices array, what I'm seeing on-screen doesn't match the data. Screenshot: http://i.imgur.com/POtcnBr.png It's a bit simpler with a plane. All four vertices make a square using only X and Y, which is exactly what I would expect. For some reason when I run my program, the scene coordinates for vertices 0 and 1 end up floating in space, while 2 and 3 are right where they should be. Screenshot: http://i.imgur.com/s4e0HlH.png Not sure if it helps, but it gets even weirder with a sphere. Screenshot: http://i.imgur.com/pQU9yXg.png I guarantee I'm just missing something simple, probably in the getScreenCoords function, but so far I haven't had any luck. Am I just misusing the indices array? It seems that each number in the indices array corresponds to a specific vertex. I have a feeling that's what is failing, but so far I haven't been able to nail it down. Here's the function that does the work: engine.beginFrame = function() { box.rotation.y += 0.005; box.rotation.x += 0.003; ctx.clearRect(0, 0, drawCanvas.width, drawCanvas.height); ctx.fillStyle = 'rgba(255, 43, 0, 0.25)'; ctx.strokeStyle = 'black'; var vertexCoords = []; var vertices = box.getVerticesData(BABYLON.VertexBuffer.PositionKind); var indices = box.getIndices(); for (var i=0, len=indices.length; i<len; i+=3) { for (var v=0; v<3; v++) { var index = indices[i+v]; if(!vertexCoords[index]) { vertexCoords[index] = getScreenCoords(BABYLON.Vector3.FromArray(vertices, index), box); ctx.fillRect(vertexCoords[index].x-4, vertexCoords[index].y-4, 8, 8); } } ctx.beginPath(); ctx.moveTo(vertexCoords[indices[i+2]].x, vertexCoords[indices[i+2]].y); ctx.lineTo(vertexCoords[indices[i+0]].x, vertexCoords[indices[i+0]].y); ctx.lineTo(vertexCoords[indices[i+1]].x, vertexCoords[indices[i+1]].y); ctx.lineTo(vertexCoords[indices[i+2]].x, vertexCoords[indices[i+2]].y); ctx.stroke(); ctx.fill(); ctx.closePath(); } }; var getScreenCoords = function(vertex, mesh) { var coords = BABYLON.Vector3.Project( BABYLON.Vector3.TransformCoordinates(vertex, mesh.getWorldMatrix()), BABYLON.Matrix.Identity(), scene.getTransformMatrix(), camera.viewport.toGlobal(engine) ); return coords; };

I've got a fairly good understanding of how meshes keep track of their vertices, but how do they store data associated with faces? I've been searching through the documentation and digging into the mesh object locally, but I'm not understanding this yet. Are faces stored in a separate array, or is there an array that stores edge connections between vertices? How are faces stored and rendered? I've been able to extract screen coordinates for each vertex of a moving mesh, but I'm hoping to understand how that is turned into triangles during rendering. Thanks!

This code: this.mesh.setVerticesData(BABYLON.VertexBuffer.PositionKind, positions, true); this.mesh.setVerticesData(BABYLON.VertexBuffer.NormalKind, normals, true); this.mesh.setVerticesData(BABYLON.VertexBuffer.UVKind, uvs, true); this.mesh.setIndices(indices); Does work with Internet Explorer, and doesn't work with Chrome. When I say doesn't work I mean the mesh doesn't appear in the scene. It happened when I updated to the latest beta version. In previous version I worked with (where the setVerticesData had the signature (number[], string, boolean) instead of (string, number[], boolean) ) it worked just well in both browsers.