Search the Community

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.

I am informed by the behavior of the Blender exporter for BabylonJS. If you assign a skeleton to a mesh, it no longer writes an optimized list of verts/normals/UV/etc. It writes them all. Now I do not really know why this required, but lets assume it (I will challenge this through experimentation @ another time). This can create a choke point. As your mesh gets larger, if you have a skeleton you could reach the 65k limit of indices (likely causing problems for mobile), where as if they were optimized they would not. If you are not optimizing, would not requiring indices completely solve the problem? That is if it works. There is much checking if indices are defined in JS, but will the other buffers work without the index?

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; };

Hey! I was wondering how I could loop over indices of a phaser group with sprites. The order of the sprites is important, because I would like to add a different 'pause screen' when an enemy is caught. In that pause screen I would like to show a certain piece of text which corresponds to the index of the enemy caught (they are 10 vows of our company). Currently I'm just listing them all seperated, but that's of course not the best way to do it. I'm still learning a lot, I find loops and getting my code clear not the easiest things So right now I'm just doing this: if (!enemyGroup.getAt(0).alive) {this.managePause1();}if (!enemyGroup.getAt(1).alive) {this.managePause2();}etc. Thanks in advance!