[SOLVED] Is there any way to show model's wireframe and faces together?

Help & Support
1

I know I can use model.generateWireframe to show model’s wireframe, but this way will lose model’s faces.
Here is the screenshot of https://codepen.io/scarletsky/pen/PjyMqj

I wonder if there is any way to show wireframe and faces together ? Just like sketchfab ?

image.png755×818 78.3 KB

2

I implemented this by a very tricky way, render lines manually…

Here is a demo: https://codepen.io/scarletsky/pen/PjyMqj

And the screenshot is here:

Here is the core:

var color = new pc.Color(1, 0, 0, 1);
var vertexBuffer = cube.model.model.meshInstances[0].mesh.vertexBuffer;
var vertexIterator = new pc.VertexIterator(vertexBuffer);
var indexBuffer = cube.model.model.meshInstances[0].mesh.indexBuffer[0];

var points = [];
var verticesNum = vertexBuffer.getNumVertices();
var indices = new Uint16Array(indexBuffer.lock());
indexBuffer.unlock();

for (var i = 0; i < verticesNum; i++) {
  var index = vertexIterator.element.POSITION.index;
  var x = vertexIterator.element.POSITION.array[index];
  var y = vertexIterator.element.POSITION.array[index + 1];
  var z = vertexIterator.element.POSITION.array[index + 2];
  points.push(new pc.Vec3(x, y, z));
  vertexIterator.next();
}
vertexIterator.end();

var resultPositions = [];

for (var i = 0; i < indices.length; i++) {
  resultPositions.push(new pc.Vec3());
}

app.on('update', function(dt) {
  var transformMatrix = cube.getWorldTransform();
  for (var i = 0; i < indices.length; i += 3) {
    [ points[indices[i]], points[indices[i+1]], points[indices[i+2]] ].forEach(function(p, j) {
      transformMatrix.transformVector(p, resultPositions[i+j]);
    });
    app.renderLine(resultPositions[i], resultPositions[i+1], color);
    app.renderLine(resultPositions[i+1], resultPositions[i+2], color);
    app.renderLine(resultPositions[i+2], resultPositions[i], color);
  }
});

I am going to find another way to implement this, can anyone guide me?

1 Like
3

Could you clone the model or entity, make one wireframe and render both on top of each other?

1 Like
4

I don’t clone model or entity. I just get the mesh’s vertex buffer and index buffer, and draw line by app.renderLine.

Do you have any better implementation ?

5

Cloning model and rendering it as wireframe will be more optimal for performance.

1 Like
6

@yaustar @max I know what you guys mean. It seems a good idea. But how can I change the wireframe’s color ?

7

Have you tried listing meshInstances of wireframed model and checking what kind of material it has on it, and if it has color or diffuse parameters you can change.

1 Like
8

Great ! This implementation is really simple and graceful. Thanks !

This is the demo: https://codepen.io/scarletsky/pen/zzXQVg

cubeCloned = cube.clone();
cubeCloned.model.model.generateWireframe();
cubeCloned.model.model.meshInstances.forEach(mi => {
  mi.renderStyle = 1;
  mi.material = mi.material.clone();
  mi.material.diffuse.set(0,0,0,0);
  mi.material.specular.set(0,0,0,0);
  mi.material.shininess = 0;
  mi.material.emissive.set(1,0,0,1);
  mi.material.update();
});

app.root.addChild(cubeCloned);
3 Likes
9

Nicely figured out! :wink:

1 Like