Creating a Procedural Mesh Using Mesh Builder

  • Great stuff. I'll definitely try this out. Thank you, Jonathan!

  • Can you post a sample project for this? I'm having some issues with the object setup and figure if I can see the actual project it would be easier to get working.

  • Hi Ralph,  Here is a sample project for this. Let me know if you are still having issues, and I would be happy to help!


    You're welcome Dpid! Show us what you end up making :)

  • Does meshbuilder fetch and put to a file and then load the graphics processor?  Is there a way to stream polys directly to the processor in the API.  My file is too large, but procedural.  I don't need to store them after they are produced.  It would be faster for all procedural files too!


  • Hi Alyn, MeshBuilder does not fetch or put to a file anything. It is streaming polys directly to the renderer.

    Can you explain a bit more what you're experiencing? Which file is too large? Thanks!

  • Great, good to know.  Here is the model.

    It was made with SuperD  (   It creates lots of polys, but it is a SubD-like modeler (without subdivision) so the control cage is small.  The polys generated from the cage are fast, so it is much better to stream.   I assume that meshbuilder.update streams them?  I am looking for a way to do VR/AR using the small control cage to stream high quality, complex models.

  • Typo

  • Hi Alyn, MeshBuilder is not intended to be used as a way to SubD polys. MeshBuilder does its job on the CPU. It would be better to import an FBX or OBJ with already generated polys.

    We recommend a limit of 10,000 triangles for all 3D objects in the scene (under Lens Content here: using materials and textures to add additional fidelity to your models (

  • Hi Jonathan,  I understand it is not Meshbuilder's design to recursively subdivide poly's.  I have developed a separate procedural method to generate polys rapdily and with continuity.  From a small, control mesh I stream polys to the GPU. (see  I would now like to apply this method to Sketchfab VR/AR.  It would greatly enhance the quality and speed of model display there.  What I need is a command in the API that lets me do this.  In Objective C I do this with an OpenGL call (including texture coords for preloaded materials).  Is there a way to access OpenGL commands in meshbuilder? or otherwise?  This could be a blow away improvement!  Thanks..


  • For something like this is it possible to reduce the randomness and create smooth flowing lines instead of jagged streams of geometry? I was testing different topology such as lines and triangle fans which were interesting, but not they weren't smooth enough. How might you create smooth lines with this idea?

  • Hi Alyn, 

    Currently lens studio does not support this feature; We'll add the desire to have additional control over MeshBuilder to our feature request list. Thanks for the input!


    Hi Tom,

    Yep definitely! We can remove the randomness from our new vertex position and get our phone exact location.

    loc.x, loc.y, loc.z, Math.random(),Math.random(),Math.random(),Math.random(),

    Additionally, If you have a list of points that you are drawing, you can consider using a mathematical function to smooth out the lines between your points (e.g.: cardinal, Bézier, etc.).

    For example, you can use ’s curve_calc.js and change the function so that it’s accessible globally and set to "Initialized" in the Inspector panel.

    global.getCurvePoints = function (points, tension, numOfSeg, close) {…}

    As you mentioned, you can use

    builder.topology = MeshTopology.TriangleStrip

    so that the points we add are automatically connected to each other.

    Then in the script above, instead of drawing on an update loop, you can just do it once on "Lens Turned On" (aka just remove the UpdateEvent since the script is on "Lens Turned On"), and process your points via the spline function before drawing it.

    // The cardinal-spline-js library accepts a list 
    // of points interleaved ([x1, y1, x2, y2, ..., xn, yn])
    var points = [-40,20, 0,100, 30,0, 20,70]

    // We’re giving it a tension of 3 (so it’s very curvy),
    // adding 20 additional points between each points above, and connecting the ends.
    // See the library for more information
    var interpolatedPoints = global.getCurvePoints(points, 3, 20, true);

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

    // Since we want some thickness in our lines we add two points and spaced 2 units apart.
    // We draw the mesh 20 units away so we can see it.
    // Then instead of random colors, we just give it a solid red.
    interpolatedPoints[i]-1, interpolatedPoints[i+1]-1, -20, 1,0,0,1,
    interpolatedPoints[i]+1, interpolatedPoints[i+1]+1, -20, 1,0,0,1,

    // Then we add the two vertices to our list.
    var lastVertexIndex = builder.getVerticesCount()-1;
    lastVertexIndex - 1, lastVertexIndex,

    // Finally, we tell the Mesh Builder to render the mesh as we did earlier

    You should see something like:

    Let me know what you end up creating!



Have a comment?

Please sign in to leave a comment.