[SOLVED] Change Vertices of a Model/Mesh

Hi,

I want to create a simple Charackter Editor and I was thinking about doing this by changing the position of the Vertices.
But is this possible? I can’t find documentation about this topic and I have been looking thought the mesh Object, but coud only found the Vertices count (numVertices).

I think the data is stored in the VertexBuffer, but I can’t find it there.

Thanks!

–Update–
I also tried to create a new Mesh. But I keep getting this error in chrome:

[.Offscreen-For-WebGL-000002B279D04ED0]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0

and firefox:

Error: WebGL: drawElements: Driver rejected indexed draw call, possibly due to out-of-bounds indices.

The code is

var VertexTest = pc.createScript('vertexTest');

var vertexData = {
	"position": [new pc.Vec3(0.5, -0.5, 0.5), new pc.Vec3(-0.5, -0.5, 0.5), new pc.Vec3(0.5, 0.5, 0.5), new pc.Vec3(-0.5, 0.5, 0.5), new pc.Vec3(0.5, 0.5, -0.5), new pc.Vec3(-0.5, 0.5, -0.5), new pc.Vec3(0.5, -0.5, -0.5), new pc.Vec3(-0.5, -0.5, -0.5), new pc.Vec3(0.5, 0.5, 0.5), new pc.Vec3(-0.5, 0.5, 0.5), new pc.Vec3(0.5, 0.5, -0.5), new pc.Vec3(-0.5, 0.5, -0.5), new pc.Vec3(0.5, -0.5, -0.5), new pc.Vec3(0.5, -0.5, 0.5), new pc.Vec3(-0.5, -0.5, 0.5), new pc.Vec3(-0.5, -0.5, -0.5), new pc.Vec3(-0.5, -0.5, 0.5), new pc.Vec3(-0.5, 0.5, 0.5), new pc.Vec3(-0.5, 0.5, -0.5), new pc.Vec3(-0.5, -0.5, -0.5), new pc.Vec3(0.5, -0.5, -0.5), new pc.Vec3(0.5, 0.5, -0.5), new pc.Vec3(0.5, 0.5, 0.5), new pc.Vec3(0.5, -0.5, 0.5)],
	"normals": [new pc.Vec3(0, 0, 1), new pc.Vec3(0, 0, 1), new pc.Vec3(0, 0, 1), new pc.Vec3(0, 0, 1), new pc.Vec3(0, 1, 0), new pc.Vec3(0, 1, 0), new pc.Vec3(0, 0, -1), new pc.Vec3(0, 0, -1), new pc.Vec3(0, 1, 0), new pc.Vec3(0, 1, 0), new pc.Vec3(0, 0, -1), new pc.Vec3(0, 0, -1), new pc.Vec3(0, -1, 0), new pc.Vec3(0, -1, 0), new pc.Vec3(0, -1, 0), new pc.Vec3(0, -1, 0), new pc.Vec3(-1, 0, 0), new pc.Vec3(-1, 0, 0), new pc.Vec3(-1, 0, 0), new pc.Vec3(-1, 0, 0), new pc.Vec3(1, 0, 0), new pc.Vec3(1, 0, 0), new pc.Vec3(1, 0, 0), new pc.Vec3(1, 0, 0)],
	"uvs": [new pc.Vec2(0, 0), new pc.Vec2(1, 0), new pc.Vec2(0, 1), new pc.Vec2(1, 1), new pc.Vec2(0, 1), new pc.Vec2(1, 1), new pc.Vec2(0, 1), new pc.Vec2(1, 1), new pc.Vec2(0, 0), new pc.Vec2(1, 0), new pc.Vec2(0, 0), new pc.Vec2(1, 0), new pc.Vec2(0, 0), new pc.Vec2(0, 1), new pc.Vec2(1, 1), new pc.Vec2(1, 0), new pc.Vec2(0, 0), new pc.Vec2(0, 1), new pc.Vec2(1, 1), new pc.Vec2(1, 0), new pc.Vec2(0, 0), new pc.Vec2(0, 1), new pc.Vec2(1, 1), new pc.Vec2(1, 0)],
	"indices": [0, 2, 3, 0, 3, 1, 8, 4, 5, 8, 5, 9, 10, 6, 7, 10, 7, 11, 12, 13, 14, 12, 14, 15, 16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23]
};

VertexTest.attributes.add('material', {
    type: 'asset',
    assetType: 'material'
});

VertexTest.prototype.initialize = function() {
        
    var node     = new pc.GraphNode();
    var material = this.material.resource;
    
    var mesh = pc.createMesh(this.app.graphicsDevice, vertexData.position, {
        normals: vertexData.normals,
        uvs: vertexData.uvs,
        indices: vertexData.indices
    });
    
    var meshInstance = new pc.MeshInstance(node, mesh, material);
    
    var model   = new pc.Model();
    model.graph = node;
    model.meshInstances.push(meshInstance);
    
    this.entity.model.model = model;
    
    console.log(model);
};

Thanks a lot!

1 Like

You’re not passing correctly formatted data to the pc.createMesh function. It should be:

var VertexTest = pc.createScript('vertexTest');

var vertexData = {
	"position": [0.5, -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, -0.5, 0.5, -0.5, 0.5, -0.5, -0.5, -0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, -0.5, 0.5, -0.5, 0.5, -0.5, -0.5, 0.5, -0.5, 0.5, -0.5, -0.5, 0.5, -0.5, -0.5, -0.5, -0.5, -0.5, 0.5, -0.5, 0.5, 0.5, -0.5, 0.5, -0.5, -0.5, -0.5, -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, 0.5],
	"normals": [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 0, 0, -1, 0, 0, -1, 0, 1, 0, 0, 1, 0, 0, 0, -1, 0, 0, -1, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0],
	"uvs": [0, 0, 1, 0, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0],
	"indices": [0, 2, 3, 0, 3, 1, 8, 4, 5, 8, 5, 9, 10, 6, 7, 10, 7, 11, 12, 13, 14, 12, 14, 15, 16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23]
};

VertexTest.attributes.add('material', {
    type: 'asset',
    assetType: 'material'
});

VertexTest.prototype.initialize = function() {
        
    var node     = new pc.GraphNode();
    var material = this.material.resource;
    
    var mesh = pc.createMesh(this.app.graphicsDevice, vertexData.position, {
        normals: vertexData.normals,
        uvs: vertexData.uvs,
        indices: vertexData.indices
    });
    
    var meshInstance = new pc.MeshInstance(node, mesh, material);
    
    var model   = new pc.Model();
    model.graph = node;
    model.meshInstances.push(meshInstance);
    
    this.entity.model.model = model;
    
    console.log(model);
};

Note that each array just contains raw numbers, not pc.Vec2/3 objects.

1 Like

Thank you Will!

I also find a way to change the Vertices of a mesh.You can do that by adding bones and changing there position and/or rotation.

1 Like

[VertexTest.js?id=20273651&branchId=e7b177da-4b68-49d8-935e-b2f8c5c96e37:32]: Cannot set property ‘model’ of undefined

TypeError: Cannot set property ‘model’ of undefined
at script.VertexTest.initialize (https://launch.playcanvas.com/api/assets/files/Scripts/VertexTest.js?id=20273651&branchId=e7b177da-4b68-49d8-935e-b2f8c5c96e37:32:29)
at ScriptComponent._scriptMethod (https://code.playcanvas.com/playcanvas-stable.dbg.js:27236:21)
at ScriptComponent._onInitialize (https://code.playcanvas.com/playcanvas-stable.dbg.js:27254:16)
at ScriptComponentSystem._callComponentMethod (https://code.playcanvas.com/playcanvas-stable.dbg.js:27654:51)
at ScriptComponentSystem._onInitialize (https://code.playcanvas.com/playcanvas-stable.dbg.js:27659:10)
at Function._helper (https://code.playcanvas.com/playcanvas-stable.dbg.js:24357:14)
at Function.initialize (https://code.playcanvas.com/playcanvas-stable.dbg.js:24360:10)
at Application.start (https://code.playcanvas.com/playcanvas-stable.dbg.js:23753:24)
at https://launch.playcanvas.com/editor/scene/js/launch.js:7102:25
at Application._preloadScripts (https://code.playcanvas.com/playcanvas-stable.dbg.js:23536:7)

Do you have a model component on the entity?

I presume that ‘model’ is instantiated below (as explained by Will-script above as well):

pc.Model is not the same as pc.ModelComponent

    this.entity.model.model = model;

This is where that pc.Model gets used and assigned to the model component’s model property (yes the naming here is not great).

But I’m guessing in your case this.entity.model is null because the entity does not have a model component.

Ok, thanks so far - and again thanks for your, often, very rapid replies.
But how would you create a simple triangle then? :slight_smile:

PS… Changing:

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

// Create model
var modelThis = new pc.Model();
modelThis.meshInstances.push(meshInstance);

// Create entity
var entity = new pc.Entity();

entity.name = “testObj”;
// Add a new Model Component to the entity
entity.addComponent(“model”, {
model: modelThis
});

  • to:

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

    // Create model
    var modelThis = new pc.ModelComponent();
    modelThis.meshInstances.push(meshInstance);

    // Create entity
    var entity = new pc.Entity();
    entity.name = “testObj”;
    // Add a new Model Component to the entity
    entity.addComponent(“model”, {
    model: modelThis
    });

  • gives me this error instead:

[playcanvas-stable.dbg.js:24538]: Cannot read property ‘schema’ of undefined
{etc… some lines below}

I’ve just changed the example above to use only 3 vertices: https://playcanvas.com/editor/scene/763622

Ok, thats perfect … one final thing:
I have now played a little with the vertexdata enum-like structure, and I have experienced that Will’s points above forms a cube etc.
But where can I find more knowledge on how to use that structure in a useful way?
(PlayCanvas has https://developer.playcanvas.com/en/tutorials/terrain-generation/ laying within this search on Vertexdata; https://developer.playcanvas.com/en/search/?q=vertexdata, but most of it confuses me … need more knowledge on how the “normals”, “uv” and “indices”-types work [“position” seems quite straight forward though])

@will and @yaustar -> this is (for instances) me trying to break down how the ‘indices’ part works/is structured: