Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

Calculate surface of mesh

swat0284

By swat0284,
in Questions & Answers

 Share

Recommended Posts

JohnK Newbie

JohnK

Posted
Posted

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.

 

 

 

 

 

 

 

 

 

 

 

Link to comment
Share on other sites
jerome Newbie

jerome

Posted
Posted

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.

Link to comment
Share on other sites
jerome Newbie

jerome

Posted
Posted

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 ?

Link to comment
Share on other sites
swat0284 Newbie

swat0284

Posted
  • Author
Posted

I have solution but it is very very slow

  

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

        <title>Babylon.js sample code</title>
        <!-- Babylon.js -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <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;
                padding: 0;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
        </style>
    </head>
<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>

   //$("#points").html("Loading...").load("infinity.svg");



        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
        window.addEventListener("resize", function () {
            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");

  // Add rect
  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>

 

Link to comment
Share on other sites
jerome Newbie

jerome

Posted
Posted

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.

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...