Procedural Meshes

Hi,
I thought I would try my hand at creating procedural meshes. I have managed to build meshes with 1000’s of triangles in a single pass but now I would like to add meshes during updates and refresh the model. Currently I am not getting any errors in my code but the model is not updating to display the new geometry.

here is what I have so far:

var Meshbuild = pc.createScript('meshbuild');

// initialize code called once per entity
Meshbuild.prototype.initialize = function() {
            this.node = new pc.GraphNode();

            //var mesh = pc.createBox(this.app.graphicsDevice);
    
    
    //
            this.positions =
            [
                0, 0, 0,
                3, 0, 0,
                3, 0, 3
            ];
            
            this.uvs =
            [
                0, 0,
                1, 0,
                1, 1
            ];
    
            this.indices = [ 2,1,0 ];
            
                
    
           
    
            this.normals = pc.calculateNormals(this.positions, this.indices);
    
            var options = {
                normals: this.normals,
                uvs: this.uvs,
                indices: this.indices
            };
    
           
    
    
            this.mesh = pc.createMesh(this.app.graphicsDevice, this.positions, options);

    //
    
    
    
    
    
    
            var material = new pc.StandardMaterial();
           
            //var meshInstance = new pc.MeshInstance(node, mesh, material);
    
            var instance = new pc.MeshInstance(this.node, this.mesh, material);

            this.model = new pc.Model();
            this.model.graph = this.node;
            this.model.meshInstances = [ instance ];

            this.entity.addChild(this.node);
            this.app.scene.addModel(this.model);
            this.count =1;
            console.log("init finsihed");
};

// update code called every frame
Meshbuild.prototype.update = function(dt) {
    console.log("creating");
     var size = 5;
     var newpositions = [  
                Math.random() * size,Math.random() * size,Math.random() * size,
                Math.random() * size,Math.random() * size,Math.random() * size,
                Math.random() * size,Math.random() * size,Math.random() * size
                ];
     var newuvs = [0,0,1,0,1,1];
     var newindices =[this.count*3,this.count*3+1,this.count*3+2];    
     var newnormals = pc.calculateNormals(newpositions, newindices);
     
    console.log("pushing");
    this.positions =this.positions.concat(newpositions);
    console.log(this.positions);
    this.uvs = this.uvs.concat(newuvs);
    this.indices = this.indices.concat(newindices);
    this.normals = this.normals.concat(newnormals);
    
     var options = {
                normals: this.normals,
                uvs: this.uvs,
                indices: this.indices
            };
    
    console.log("creating mesh");
    this.mesh = pc.createMesh(this.app.graphicsDevice, this.positions, options);
    console.log("material");
    var material = new pc.StandardMaterial();
    console.log("creating instance");
    var instance = new pc.MeshInstance(this.node, this.mesh, material);
    console.log("Setting instance");
    this.model.meshInstances = [ instance ];
     
     
    
     this.count++;
    
    
};



What you are trying to do as far as I can see is re-use the same model but replace its mesh instance. I did some testing and I confirmed your finding that nothing changes.

However, if you simply remove it from the scene then add it again, it works:

this.app.scene.removeModel(this.model);
this.app.scene.addModel(this.model);

That’s good to know, thank you. :grinning: