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

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 ?

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());

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

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

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

1 Like

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 ?

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

1 Like

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

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

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.meshInstances.forEach(mi => {
  mi.renderStyle = 1;
  mi.material = mi.material.clone();
  mi.material.shininess = 0;


Nicely figured out! :wink:

1 Like