[SOLVED] Change Vertices of a Model/Mesh

Beatnory · April 17, 2017, 5:20pm

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!

will · April 27, 2017, 3:05pm

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.

Beatnory · May 30, 2017, 8:37am

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.

Thomas_Due_Nielsen · May 30, 2019, 9:34am

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

yaustar · May 30, 2019, 9:39am

Do you have a model component on the entity?

Thomas_Due_Nielsen · May 30, 2019, 9:42am

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

yaustar · May 30, 2019, 10:28am

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.

Thomas_Due_Nielsen · May 30, 2019, 10:36am

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

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}

yaustar · May 30, 2019, 11:03am

I’ve just changed the example above to use only 3 vertices: PlayCanvas | HTML5 Game Engine

Thomas_Due_Nielsen · May 30, 2019, 1:55pm

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])

Thomas_Due_Nielsen · June 3, 2019, 4:41am

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