Hey @Newbie_Coder,
The issue lies in a slight misinterpretation of how the resolution parameter and its related math works. It’s a bit unintuitive at first, but bear with me.
Before we start, let’s simplify the problem - let’s try to generate a plane with resolution 3 and 100 extent instead. This makes things simpler so we can understand the numbers. The result of generating a mesh with those parameters should be this:
With lower numbers, we can still observe the issue where the mesh is smaller than we expected. But why? Let’s try to get some more clarity by visualising the composing elements of the mesh - the vertices. I’ll spawn red dots where we expect vertices to be:
Now we start to get some more useful info. While the mesh is still smaller than we expected, we can see that our resolution, 3x3, is indeed being generated as it should - we can see three dots in either direction.
The problem, though, is that we want to have a fourth, last line of vertices/points to build the very end of the mesh with. We can’t just increase the resolution by one because this will only make the problem smaller, not outright fix it:
This occurs because of a small mistake in the code where we don’t account for the extra necessary vertex when calculating the total amount of vertices. In the regions where we account for the total number of vertices, we should use resolution + 1.
With the fix, the code looks like this:
var MeshGeneration = pc.createScript('meshGeneration');
MeshGeneration.attributes.add('meshDeformTarget', { type: 'entity' });
// initialize code called once per entity
MeshGeneration.prototype.initialize = function () {
const app = this.app;
this.time = 0;
// Generate a 3D grid plane with world size of 20, and resolution of 60
const resolution = 100;
const vertexCount = resolution + 1;
this.resolution = resolution;
const extent = 100;
const scale = extent / resolution;
// Generate positions and uv coordinates for verticies, store them in Float32Arrays
const positions = new Float32Array(3 * vertexCount * vertexCount);
this.positions = positions;
const uvs = new Float32Array(2 * vertexCount * vertexCount);
this.uvs = uvs;
let index = 0;
for (let x = 0; x <= resolution; x++) {
for (let z = 0; z <= resolution; z++) {
let px = scale * (x - resolution * 0.5);
let py = 0;
let pz = scale * (z - resolution * 0.5);
positions[3 * index] = px;
positions[3 * index + 1] = py;
positions[3 * index + 2] = pz;
uvs[2 * index] = x / resolution;
uvs[2 * index + 1] = 1 - z / resolution;
index++;
}
}
// Generate array of indices to form triangle list - two triangles per grid square
const indexArray = [];
this.indexArray = indexArray;
for (let x = 0; x <= resolution - 1; x++) {
for (let y = 0; y <= resolution - 1; y++) {
var cornerA = x * vertexCount + y + 1;
var cornerB = (x + 1) * vertexCount + y;
var cornerC = x * vertexCount + y;
var cornerD = (x + 1) * vertexCount + y;
var cornerE = x * vertexCount + y + 1;
var cornerF = (x + 1) * vertexCount + y + 1;
indexArray.push(
cornerA,
cornerB,
cornerC,
cornerD,
cornerE,
cornerF
);
}
}
// Create a mesh with dynamic vertex buffer and static index buffer
const mesh = new pc.Mesh(app.graphicsDevice);
this.mesh = mesh;
mesh.clear(true, false);
this.updateMesh(mesh, true);
// create material
const material = new pc.StandardMaterial();
material.diffuseMap = this.app.assets.find('playcanvas-grey.png').resource;
material.shininess = 50;
material.metalness = 0.3;
material.useMetalness = true;
material.update();
// Create the mesh instance
const meshInstance = new pc.MeshInstance(mesh, material);
// Create the entity with render component using meshInstances
const entity = this.entity;
entity.addComponent("render", {
meshInstances: [meshInstance]
});
};
MeshGeneration.prototype.updateMesh = function (mesh, initAll) {
mesh.setPositions(this.positions);
mesh.setNormals(pc.calculateNormals(this.positions, this.indexArray));
// update mesh Uvs and Indices only one time, as they do not change each frame
if (initAll) {
mesh.setUvs(0, this.uvs);
mesh.setIndices(this.indexArray);
}
// Let mesh update Vertex and Index buffer as needed
mesh.update(pc.PRIMITIVE_TRIANGLES);
};
And it will output the mesh as we desire:
If you wish to look deeper into it, go ahead and take a look at the fork of your project I made. It contains the working fix. Let me know if you need further help!
