Mesh Resources Reference

Authors: Xunyi, youyou

Mesh resources are the necessary resource for rendering a mesh. The mesh can be obtained in a variety of ways:

• Automatically generated by the editor when importing the model into the editor
• Users can manually create or modify meshes from the script, it is very convenient to customize your own mesh by this way

A Mesh resource contains a set of vertex and multiple sets of indices. The index points to the vertex in the vertex array, and each three sets of indexes form a triangle. The mesh is comprised of multiple triangles.

Mesh resources support dynamic modification of vertex data and index data, and provides two simple APIs to use. Please refer to the API introduction below for details.

API introduction

• init(vertexFormat, vertexCount, dynamic)

Mesh resources allow custom vertex data, and users can set the properties of vertex data according to their own needs.
The init function creates internal vertex data based on the incoming vertex format vertexFormat and the number of vertices vertexCount. If vertex data is modified frequently, then dynamic should be set to true.

• setVertices(name, values, index)

We can modify the corresponding data to values according to the incoming vertex property name name, index indicates which set of vertex data is modified, the default is 0.

• setIndices(indices, index)

Modify the data of the specified index array to indices. index indicates which set of index data is modified. The default is 0.

Example

When the user needs to create a mesh dynamically in the code, the first thing to point out is the format of the vertex data storage in the mesh.

    let gfx = cc.renderer.renderEngine.gfx;

    // Define the vertex data format, only need to indicate the required properties, to avoid the waste of storage space
    var vfmtPosColor = new gfx.VertexFormat([
        // The user needs to create a three-dimensional box, so three values are required to save the location information
        { name: gfx.ATTR_POSITION, type: gfx.ATTR_TYPE_FLOAT32, num: 3 },
        { name: gfx.ATTR_UV0, type: gfx.ATTR_TYPE_FLOAT32, num: 2 },
        { name: gfx.ATTR_COLOR, type: gfx.ATTR_TYPE_UINT8, num: 4, normalize: true },
    ]);

    let mesh = new cc.Mesh();
    // Initialize mesh information
    mesh.init(vfmtPosColor, 8, true);

    // modify the position vertex data
    mesh.setVertices(gfx.ATTR_POSITION, [
        cc.v3(-100, 100, 100), cc.v3(-100, -100, 100), cc.v3(100, 100, 100), cc.v3(100, -100, 100),
        cc.v3(-100, 100, -100), cc.v3(-100, -100, -100), cc.v3(100, 100, -100), cc.v3(100, -100, -100)
    ]);

    // modify the color vertex data
    let color1 = cc.Color.RED;
    let color2 = cc.Color.BLUE;
    mesh.setVertices(gfx.ATTR_COLOR, [
        color1, color1, color1, color1,
        color2, color2, color2, color2,
    ]);

    // modify the uv vertex data
    mesh.setVertices(gfx.ATTR_UV0, [
        cc.v2(0,0), cc.v2(0, 1), cc.v2(1, 0), cc.v2(1, 1),
        cc.v2(1,1), cc.v2(1, 0), cc.v2(0, 1), cc.v2(0, 0),
    ]);

    // modify the index data
    mesh.setIndices([
        0, 1, 2, 1, 3, 2, // front
        0, 6, 4, 0, 2, 6, // top
        2, 7, 6, 2, 3, 7, // right
        0, 5, 4, 0, 1, 5, // left
        1, 7, 5, 1, 3, 7, // bottom,
        4, 5, 6, 5, 7, 6, // back
    ]);