# Calculate surface of mesh

## Recommended Posts

Hello how to calculate surface of mesh? I create mesh by

BABYLON.Mesh.CreateLines("sl", shape, scene);
var extruded = BABYLON.Mesh.ExtrudeShape("extruded", shape, path, 2, 0, 3, scene);

##### Share on other sites

mmmh... what do you call the surface exactly ?

I don't get what you intend to do with CreateLines and ExtrudeShape() together... have you an example please ?

##### Share on other sites

I create shape by createlines and then extrude it to make mesh. Surface is stg like surface=a*b for cube wall where a is height of cube wall and b is width of wall

##### Share on other sites

If you mean the surface area of a shape formed by extruding a shape then when A is area of shape, P is perimeter of shape and L is length of extrusion

Surface area = 2A + PL

If you know the facets that make up the shape and the positions of their vertices you should be able to find A and P. Don't have time to create a PG at the moment but might find time over the next few days.

##### Share on other sites

I agree with JohnK : 2A + PL is a very good approximation

Actually an extruded shape is built on a path (a series of points for axis). Under the hood, a Path3D object is built from this path. As the path is yours, you can create a Path3D from it : http://doc.babylonjs.com/tutorials/How_to_use_Path3D

Once you've got your Path3D, you can easily get its length (so the L of the equation) with the last element of the array returned by getDistances() http://doc.babylonjs.com/classes/2.3/Path3D

In brief, the last element of getDistances() is the total length of your path, so the L value.

You can compute P with the same tool, passing it the path of your model to extrude.

[EDIT] even easier : to know the path length, just use the Curve3 object, and its method length(), what is simpler to manage : http://doc.babylonjs.com/tutorials/How_to_use_Curve3#curve3-object

If your extrusion path isn't too twisted or curved, the JohnK's equation will be really close to the real final surface.

Else, I'm afraid you need to extract all the mesh facets and then compute each triangular surface one by one.

##### Share on other sites

BTW, it would be a nice exercice to implement a (User) function that calculates any mesh surface from its facets.

Added to my TODO list for one of these days ...

##### Share on other sites

Ok great, Do you know how i can fast create and extrude mesh from svg file path?

##### Share on other sites

I don't really know the SVG format but I suppose we can get the points from the SVG commands.

Another stuff to be added on my endless TODO list... argg : transform SVG to a series of successive points. Unless someone already did this somewhere in github or anywhere else ?

##### Share on other sites

I have solution but it is very very slow

``````<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Babylon.js sample code</title>
<!-- Babylon.js -->
<script src="http://www.babylonjs.com/hand.minified-1.2.js"></script>
<script src="http://www.babylonjs.com/cannon.js"></script>
<script src="http://www.babylonjs.com/oimo.js"></script>
<script src="http://www.babylonjs.com/babylon.js"></script>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
}

#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
<body>
<button type="button" onclick="javascript:test()">Click Me!</button>

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>Layer 1</title>
<path d="m329,204c1,0 4.07843,0.21014 7,-1c2.06586,-0.85571 5.07843,-2.78986 8,-4c2.06586,-0.85571 4.186,-1.69255 6,-3c1.14728,-0.8269 2,-1 2,-2c0,0 1.93414,-2.14429 4,-3c2.92157,-1.21014 4.4588,-0.69344 5,-2c0.38269,-0.92387 3.22885,-2.72961 8,-7c3.16132,-2.82951 7,-6 8,-7c1,-1 2.19073,-2.42215 6,-4c5.38708,-2.23141 11.74673,-7.37134 16,-10c3.80423,-2.35114 4.69345,-3.4588 6,-4c1.84775,-0.76537 5,-3 7,-4c4,-2 5.69345,-3.4588 7,-4c0.92389,-0.38269 2.02676,-0.77025 3,-1c4.35251,-1.02748 5.82376,-4.48625 8,-5c0.97324,-0.22975 1.15225,-0.23463 3,-1c2.61313,-1.0824 6,-6 9,-9c3,-3 4.29291,-3.29289 5,-4c0.70709,-0.70711 0,-3 0,-6c0,-2 -1,-5 -3,-9c-2,-4 -3.34619,-6.70546 -5,-9c-1.30746,-1.814 -3.22272,-3.72399 -7,-7c-7.47861,-6.48617 -13.21991,-13.97507 -23,-21c-6.54813,-4.70343 -13.3956,-7.10476 -21,-11c-6.41809,-3.28756 -14.80243,-11.43288 -21,-14c-2.92157,-1.21015 -4.87857,-2.49346 -8,-3c-0.98709,-0.16018 -4,0 -6,0c-1,0 -3,0 -7,0c-3,0 -7,0 -10,0c-3,0 -6,0 -8,0c-3,0 -5,0 -8,0c-2,0 -3,0 -4,0c-3,0 -5.08026,0.31074 -8,1c-2.17624,0.51374 -4.82376,1.48626 -7,2c-1.9465,0.45951 -5.80566,1.44841 -10,3c-3.867,1.4305 -6.88153,2.19028 -10,4c-3.86798,2.24469 -7.7265,4.29362 -12,8c-3.77728,3.27601 -6.32367,5.52016 -8,7c-2.703,2.38616 -3.61731,5.07612 -4,6c-1.0824,2.61313 -6.98283,6.01434 -12,12c-5.17905,6.17879 -9.6806,14.65426 -14,24c-3.58452,7.75572 -4.66069,16.53091 -8,23c-2.93704,5.68979 -6,10 -8,16c-2,6 -5.28473,13.92485 -7,21c-1.20139,4.95547 -2.95517,9.54915 -4,13c-1.15913,3.82837 -2.59308,7.85713 -4,15c-1.75,8.88467 -2.06143,17.9915 -3,25c-1.07013,7.99092 -1,12 -1,15c0,6 1.30649,13.04834 2,18c1.00977,7.20975 3.42215,12.19073 5,16c2.23141,5.38708 5,9 6,12c2,6 3.7464,10.16119 7,15c2.78995,4.14923 5.53165,9.51703 11,14c8.36497,6.85764 19,11 30,16c11,5 13.12601,4.82281 16,7c7.34894,5.56717 15.04294,9.92578 22,14c5.03162,2.94666 11.90436,7.25803 17,9c6.8887,2.35495 14,4 25,5c11,1 27,1 41,1c14,0 16,0 21,0c4,0 12.95847,-0.49924 22,-1c7.98776,-0.44241 18.10059,-1.38779 26,-3c7.13306,-1.45581 17.85739,-4.46765 27,-7c8.88501,-2.461 15.69363,-3.73038 22,-8c1.17105,-0.79285 2,-3 5,-6c4,-4 6.64886,-9.19577 9,-13c2.62866,-4.25327 4.71411,-8.21167 7,-11c2.68976,-3.28101 4.78986,-6.07843 6,-9c1.71143,-4.13171 4.49829,-7.93796 5,-14c0.41241,-4.98297 0,-14 0,-27c0,-7 -1.37537,-8.94003 -7,-12c-5.5556,-3.0224 -11.58707,-7.73125 -20,-12c-9.60468,-4.87344 -17.08743,-8.79393 -22,-11c-6.11951,-2.74806 -11.96329,-4.16042 -16,-5c-5.95532,-1.23863 -11.05798,-1.16779 -17,-2c-7.20975,-1.00977 -11.01691,-1.9034 -17,-3c-5.01547,-0.91925 -11.10059,-1.38779 -19,-3c-7.13306,-1.45581 -15.88138,-4.2935 -23,-7c-5.91171,-2.24762 -9.93796,-3.49829 -16,-4c-4.98297,-0.4124 -8,-1 -12,-1c-3,0 -5.31,0.66251 -8,-1c-2.40601,-1.487 -3.15225,-2.23463 -5,-3c-1.30655,-0.5412 -2,-1 -4,-1c-1,0 -2,0 -3,0c-1,0 -2,0 -3,0c-1,0 -2,0 -3,0l-1,-1l0,0" id="svg_3" stroke-width="5" stroke="#000000" fill="none"/>
</g>
</svg>

<canvas id="renderCanvas"></canvas>

<script>

var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);

var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3( .5, .5, .5);

// camera
var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
camera.setPosition(new BABYLON.Vector3(-5, -5, -1000));
camera.attachControl(canvas, true);
// lights
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
light.intensity = 0.7;
var spot = new BABYLON.SpotLight("spot", new BABYLON.Vector3(25, 15, -10), new BABYLON.Vector3(-1, -0.8, 1), 15, 1, scene);
spot.diffuse = new BABYLON.Color3(1, 1, 1);
spot.specular = new BABYLON.Color3(0, 0, 0);
spot.intensity = 0.8;
// material
var mat = new BABYLON.StandardMaterial("mat1", scene);
mat.alpha = 1.0;
mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
mat.backFaceCulling = false;
//mat.wireframe = true;

// show axis
var showAxis = function(size) {
var makeTextPlane = function(text, color, size) {
var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
dynamicTexture.hasAlpha = true;
dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color , "transparent", true);
var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
plane.material.backFaceCulling = false;
plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
plane.material.diffuseTexture = dynamicTexture;
return plane;
};

var axisX = BABYLON.Mesh.CreateLines("axisX", [
new BABYLON.Vector3.Zero(), new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, 0.05 * size, 0),
new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, -0.05 * size, 0)
], scene);
axisX.color = new BABYLON.Color3(1, 0, 0);
var xChar = makeTextPlane("X", "red", size / 10);
xChar.position = new BABYLON.Vector3(0.9 * size, -0.05 * size, 0);
var axisY = BABYLON.Mesh.CreateLines("axisY", [
new BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3( -0.05 * size, size * 0.95, 0),
new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3( 0.05 * size, size * 0.95, 0)
], scene);
axisY.color = new BABYLON.Color3(0, 1, 0);
var yChar = makeTextPlane("Y", "green", size / 10);
yChar.position = new BABYLON.Vector3(0, 0.9 * size, -0.05 * size);
var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
new BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3( 0 , -0.05 * size, size * 0.95),
new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3( 0, 0.05 * size, size * 0.95)
], scene);
axisZ.color = new BABYLON.Color3(0, 0, 1);
var zChar = makeTextPlane("Z", "blue", size / 10);
zChar.position = new BABYLON.Vector3(0, 0.05 * size, 0.9 * size);
};

// shape

showAxis(5);

return scene;

};

var scene = createScene();

engine.runRenderLoop(function () {
scene.render();
});

// Resize
engine.resize();
});

function PathToPoints(path, resolution, onDone) {
console.log("1" + path);
var ctx = {};
ctx.resolution = resolution;
ctx.onDone = onDone;
ctx.points = [];
ctx.interval = null;
console.log("tak");
// Walk up nodes until we find the root svg node
var svg = path;
console.log("tak");
while (!(svg instanceof SVGSVGElement)) {
console.log("tak");
svg = svg.parentElement;
}
// Create a rect, which will be used to trace the path

var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
ctx.rect = rect;
svg.appendChild(rect);

var motion = document.createElementNS("http://www.w3.org/2000/svg", "animateMotion");
motion.setAttribute("path", path.getAttribute("d"));
motion.setAttribute("begin", "0");
motion.setAttribute("dur", "10"); // TODO: set this to some larger value, e.g. 10 seconds?
motion.setAttribute("repeatCount", "1");
motion.onbegin = PathToPoints.beginRecording.bind(this, ctx);
console.log("tak");
motion.onend = PathToPoints.stopRecording.bind(this, ctx);
console.log("tak");

rect.appendChild(motion);
console.log("tak");
}

PathToPoints.beginRecording = function(ctx) {
console.log("1");
var m = ctx.rect.getScreenCTM();
ctx.points.push({x: m.e, y: m.f});
ctx.interval = setInterval(PathToPoints.recordPosition.bind(this, ctx), 1000*3/ctx.resolution);
}

PathToPoints.stopRecording = function(ctx) {
console.log("1");
clearInterval(ctx.interval);

// Remove the rect
ctx.rect.remove();

ctx.onDone(ctx.points);
}
var chuj = "";
var stulej;
PathToPoints.recordPosition = function(ctx) {
console.log("1");
var m = ctx.rect.getScreenCTM();
ctx.points.push({x: m.e, y: m.f});
console.log(ctx.points.length);
}

function test(){
console.log("tak");
var aInputs = document.getElementsByTagName('path');
for (var i=0;i<aInputs.length;i++) {
console.log("tak" + aInputs.length);
PathToPoints(aInputs, 100, function(p){
var shape = [];
chuj = JSON.stringify(p);

//points.textContent =chuj;
var s = ""

for(var i = 0 ; i<p.length; i++)
{

s = s + "new BABYLON.Vector3("+JSON.stringify(p.x)+","+ JSON.stringify(p.y)+", 0),";
console.log("zaczynam"+ i);

shape = new BABYLON.Vector3(p.x - p[0].x,p.y-p[0].y, 0);
}
console.log(s);
shape.push(shape[0]);

var path = [
BABYLON.Vector3.Zero(),
new BABYLON.Vector3(0, 0, -0.1)
];

var extruded = BABYLON.Mesh.ExtrudeShape("extruded", shape, path, 1, 0, 3, scene);
var material = new BABYLON.StandardMaterial("material01", scene);

extruded.material = material;
//material.diffuseTexture = new BABYLON.Texture("12281590_163625937325378_2125629366_o.jpg", scene);
//material.diffuseColor = new BABYLON.Color3(p.fill);

});

}
}

</script>
</body>
</html>
``````

##### Share on other sites

As far as I understand, you draw the SVG shape in a rectangle and then try to get back the points from the drawn figure, don't you ?

I wouldn't have done this way but would have instead "translate" the SVG directives into some BJS maths directives, and just compute the related positions, without drawing anything.

I would have first searched the web for this kind of "translator" or SVG parser.

##### Share on other sites

dunno how do this ;/

##### Share on other sites

don't know either... it will take time to learn about SVG commands and how to translate them

unless some library exists somewhere else... I suppose it might exist

## Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.