Creating a Procedural Mesh Using Mesh Builder

Hey Everyone,

Let me introduce you to mesh builder, useful for creating procedural effects!

Let’s see how we can create a Lens that draws a trail based on your phone’s position.

First we need to know where we should draw using our phone’s position. We can do this by creating an object in front of and attached to the camera. Let’s name this “cursor”.

Next let's put the mesh builder example into our scene. We can do this by creating an object in the scene and giving it a MeshVisual and Script component. I copy the example into a new script and bind it to the Script component on TurnOn since we only need it to run once. We use TurnOn instead of Initialize since we want to receive our phone’s position before rendering the first stroke.

Below you can see a modified version of the Mesh Builder example:

// Builds a quad mesh and applies it to meshVisual
//@input Component.MeshVisual meshVisual
//@input SceneObject cursor

var builder = new MeshBuilder([
    { name: "position", components: 3 }
]);

builder.topology = MeshTopology.Triangles;
builder.indexType = MeshIndexType.UInt16;

var left = -.5;
var right = .5;
var top = .5;
var bottom = -.5;

builder.appendVerticesInterleaved([
    // Position            Index
    left, top, 0,           // 0
    left, bottom, 0,     // 1
    right, bottom, 0,   // 2
    right, top, 0,        // 3
]);

builder.appendIndices([
    0,1,2, // First Triangle
    2,3,0, // Second Triangle
]);

if(builder.isValid()){
    script.meshVisual.mesh = builder.getMesh();
    builder.updateMesh();
}
else{
    print("Mesh data invalid!");
}

Since we want to make a procedural effect, we need to update the mesh over time. Let’s append an update loop to the bottom of our script. For now, to make sure everything is working, let’s grab our cursor’s position and print it out. We will use the world position because the cursor and our MeshBuilder object have different parents.

var event = script.createEvent("UpdateEvent");
event.bind(function (eventData)
{
    var pos = script.cursor.getTransform().getWorldPosition();
    print("Cursor position: " + pos.x + " " + pos.y + " " + pos.z);
})

At this point the position that will be printed out will not change every frame because we have not told the lens to keep track of our position in the world. We can do this by adding the “World Tracking” component to the camera. We can see how it would work when we move the phone by swapping the image to a video in the Preview panel.

Now that we have good positional information on where to draw, we can tell the mesh builder to use it! In our update function:

// First we add our current position to the list of vertices. 
builder.appendVerticesInterleaved([
    pos.x, pos.y, pos.z
]);

// Then we create a face by connecting the new vertex to the last two vertices. 
var lastVertexIndex = builder.getVerticesCount()-1;
builder.appendIndices([
   lastVertexIndex -2, lastVertexIndex-1, lastVertexIndex, 
]);

// Finally we tell the meshBuilder to render it
builder.updateMesh();

Lets also give our mesh visual a material so that we can make our mesh more visible. In our material, let’s check “Two-sided” since our path will only have one face per segment and we need to see both sides of the face.

Now that we are getting world tracking position, we should also modify your initial vertices to use it so that the drawing starts where the phone is. Additionally, we can remove the appendVerticesInterleaved call because we are now doing it in the update loop.

...

builder.indexType = MeshIndexType.UInt16;

var loc = script.cursor.getTransform().getWorldPosition();
builder.appendVerticesInterleaved([
    // Position              Index
    loc.x, loc.y, loc.z,   // 0 
    loc.x, loc.y, loc.z,   // 1 
]);

if(builder.isValid()){

...

Finally, since we are generating the mesh on the fly, we can add a random factor to each vertex and modify how our path looks in real-time to make our lens feel more magical.

builder.appendVerticesInterleaved([
    pos.x + Math.random() * 3, pos.y  + Math.random() * 3, pos.z  + Math.random() * 3
]);

And that’s it! We’ve made a basic procedural mesh in Lens Studio!

Bonus:

How can we use random to procedurally give our mesh random colors as in the first image?

Hint: You can pass in additional attributes to each vertex (e.g. a “color” attribute with 4 components (r,g,b,a)) and set your material to use “Vertex Color” as the “Base Texture”.

Happy Crafting!

Final code:

// -----JS CODE-----
//@input Component.MeshVisual meshVisual
//@input SceneObject cursor

var builder = new MeshBuilder([
 { name: "position", components: 3 },
 { name: "color", components: 4 },
]);

builder.topology = MeshTopology.Triangles;
builder.indexType = MeshIndexType.UInt16;

var loc = script.cursor.getTransform().getWorldPosition();

builder.appendVerticesInterleaved([
 // Position Color
 loc.x, loc.y, loc.z, Math.random(),Math.random(),Math.random(),Math.random(),
 loc.x, loc.y, loc.z, Math.random(),Math.random(),Math.random(),Math.random(),
]);

if(builder.isValid()){
 script.meshVisual.mesh = builder.getMesh();
 builder.updateMesh();
}

else{
 print("Mesh data invalid!");
}

var event = script.createEvent("UpdateEvent");
event.bind(function (eventData)
{

 var loc = script.cursor.getTransform().getWorldPosition();
 print("Cursor position: " + loc.x + " " + loc.y + " " + loc.z);

 // First we need to add our current position to the list of vertices. 
 builder.appendVerticesInterleaved([
 // Position Color
 loc.x + Math.random()*3, loc.y + Math.random()*3, loc.z, Math.random(),Math.random(),Math.random(),Math.random(),
 ]);

 // Then we can create a face by connecting the new vertex with the last two vertices. 
 var lastVertexIndex = builder.getVerticesCount()-1;
 builder.appendIndices([
 lastVertexIndex -2, lastVertexIndex-1, lastVertexIndex, 
 ]);

 // We tell the Mesh Builder to render the mesh as we did earlier
 builder.updateMesh();

});