Fix textToModel face normals for extruded text #8091

VANSH3104 · 2025-09-15T11:11:45Z

Resolves #8074

Changes:

Screenshots of the change:

Screencast.From.2025-09-15.15-30-14.mp4

PR Checklist

[ x] npm run lint passes
Inline reference is included / updated
Unit tests are included / updated

VANSH3104 · 2025-09-15T11:16:32Z

@davepagurek Could you please take a look at this PR and provide a review? Thanks!

davepagurek · 2025-09-15T12:24:44Z

Hi! So far this change just reverses the order of the vertices in front faces; I don't think we need to change that. I left a comment here #8074 (comment) explaining the approach I had in mind, which likely involves changing this part of the code that constructs the geometry:

p5.js/src/type/p5.Font.js

Lines 547 to 588 in fc8ca8a

    
           if (extrude === 0) { 
        
             const prevValidateFaces = this._pInst._renderer._validateFaces; 
        
             this._pInst._renderer._validateFaces = true; 
        
             this._pInst.beginShape(); 
        
             this._pInst.normal(0, 0, 1); 
        
             for (const contour of contours) { 
        
               this._pInst.beginContour(); 
        
               for (const { x, y } of contour) { 
        
                 this._pInst.vertex(x, y); 
        
               } 
        
               this._pInst.endContour(this._pInst.CLOSE); 
        
             } 
        
             this._pInst.endShape(); 
        
             this._pInst._renderer._validateFaces = prevValidateFaces; 
        
           } else { 
        
             const prevValidateFaces = this._pInst._renderer._validateFaces; 
        
             this._pInst._renderer._validateFaces = true; 
        
             // Draw front faces 
        
             for (const side of [1, -1]) { 
        
               this._pInst.beginShape(); 
        
               for (const contour of contours) { 
        
                 this._pInst.beginContour(); 
        
                 for (const { x, y } of contour) { 
        
                   this._pInst.vertex(x, y, side * extrude * 0.5); 
        
                 } 
        
                 this._pInst.endContour(this._pInst.CLOSE); 
        
               } 
        
               this._pInst.endShape(); 
        
             } 
        
             this._pInst._renderer._validateFaces = prevValidateFaces; 
        
             // Draw sides 
        
             for (const contour of contours) { 
        
               this._pInst.beginShape(this._pInst.QUAD_STRIP); 
        
               for (const v of contour) { 
        
                 for (const side of [-1, 1]) { 
        
                   this._pInst.vertex(v.x, v.y, side * extrude * 0.5); 
        
                 } 
        
               } 
        
               this._pInst.endShape(); 
        
             }

Currently there's an if/else that uses a different approach if extruding vs if creating a flat model. Instead, we'd probably always start with the flat model, but if we need extrusion, you could read the vertices/faces/edges properties of the geometry to manually construct a second extruded geometry.

VANSH3104 · 2025-09-29T09:26:19Z

@davepagurek can you review this now its working perfectly i add your recommendation of making a new geometry

davepagurek

This is looking good! I left a few little comments below. I think the big thing left to figure out is the normals. The problem currently is that each side face has its own normal, so the sides will look faceted instead of smooth.

Ideally, I'd like us to be able to just call extruded.computeNormals() and have it generate all the normals for us. It works per vertex by averaging the normals of the faces sharing that vertex. In order to do that, this means:

the side faces need to share vertices with adjacent side faces. This means adding all the vertices on each side to extruded.vertices once, and then adding faces that reference the vertex indices for each of those rather than creating brand new vertices in each face.
the side faces cannot share any vertices with the front and back faces. This is because if they do, the edge between the front/back and the sides will be smoothed, but we want a crisp edge there.

Let me know if you need any pointers on how to accomplish that!

src/type/p5.Font.js

davepagurek · 2025-10-03T20:44:42Z

src/type/p5.Font.js

+    });
+
+    if (extrude === 0) {
+      console.log('No extrusion');


We should take this out before merging so we don't clutter users' console.

src/type/p5.Font.js

VANSH3104 · 2025-10-04T11:10:13Z

@davepagurek The extrusion is still not rendering correctly on the top and bottom faces. In my earlier changes, the top and bottom rendered perfectly, but in this version they only work if I comment out extruded.computeNormals(). It seems that computeNormals() is overriding the normals in a way that breaks the top/bottom faces I think keeping of eeping the front and back faces with their own independent vertices and make the side faces share vertices with each other, so their normals average smoothly.. this is the code

textToModel(str, x, y, width, height, options) {
    ({ width, height, options } = this._parseArgs(width, height, options));
    const extrude = options?.extrude || 0;
    // Step 1: generate glyph contours
    let contours = this.textToContours(str, x, y, width, height, options);
    if (!Array.isArray(contours[0][0])) {
      contours = [contours];
    }

    // Step 2: build base flat geometry
    const geom = this._pInst.buildGeometry(() => {
      const prevValidateFaces = this._pInst._renderer._validateFaces;
      this._pInst._renderer._validateFaces = true;
      this._pInst.push();
      this._pInst.stroke(0);

      contours.forEach(glyphContours => {
        this._pInst.beginShape();
        for (const contour of glyphContours) {
          this._pInst.beginContour();
          contour.forEach(({ x, y }) => this._pInst.vertex(x, y, 0));
          this._pInst.endContour(this._pInst.CLOSE);
        }
        this._pInst.endShape(this._pInst.CLOSE);
      });
      this._pInst.pop();
      this._pInst._renderer._validateFaces = prevValidateFaces;
    });
    if (extrude === 0) {
      return geom;
    }

    // Step 3: Create extruded geometry with UNSHARED vertices for flat shading
    const extruded = this._pInst.buildGeometry(() => {});
    const half = extrude * 0.5;

    extruded.vertices = [];
    extruded.faces = [];

    const frontVertexOffset = 0;
    for (let i = 0; i < geom.vertices.length; i++) {
      const v = geom.vertices[i];
      extruded.vertices.push(new Vector(v.x, v.y, v.z + half));
    }

    for (const face of geom.faces) {
      if (face.length < 3) continue;
      for (let i = 1; i < face.length - 1; i++) {
        extruded.faces.push([
          face[0] + frontVertexOffset,
          face[i] + frontVertexOffset,
          face[i + 1] + frontVertexOffset
        ]);
      }
    }
    const backVertexOffset = extruded.vertices.length;
    for (let i = 0; i < geom.vertices.length; i++) {
      const v = geom.vertices[i];
      extruded.vertices.push(new Vector(v.x, v.y, v.z - half));
    }
    for (const face of geom.faces) {
      if (face.length < 3) continue;
      for (let i = 1; i < face.length - 1; i++) {
        const v1 = geom.vertices[face[i]];
        const v2 = geom.vertices[face[i + 1]];
        extruded.faces.push([
          face[0] + backVertexOffset,
          face[i + 1] + backVertexOffset,
          face[i] + backVertexOffset
        ]);
      }
    }
    // Side faces from edges
    const sideVertexOffset = extruded.vertices.length;
    for (let i = 0; i < geom.vertices.length; i++) {
      const v = geom.vertices[i];
      // Add vertex at front
      extruded.vertices.push(new Vector(v.x, v.y, v.z + half));
    }
    for (let i = 0; i < geom.vertices.length; i++) {
      const v = geom.vertices[i];
      // Add vertex at back
      extruded.vertices.push(new Vector(v.x, v.y, v.z - half));
    }


    const validEdges = geom.edges.filter(([a, b]) => a !== b);

    for (const [a, b] of validEdges) {
      // Indices for the 4 corners of the side quad
      const frontA = sideVertexOffset + a;
      const frontB = sideVertexOffset + b;
      const backA = sideVertexOffset + geom.vertices.length + a;
      const backB = sideVertexOffset + geom.vertices.length + b;
      
      // Two triangles forming the side quad
      extruded.faces.push([frontA, backA, backB]);
      extruded.faces.push([frontA, backB, frontB]);
    }
    extruded.computeNormals();
    return extruded;
  }

VANSH3104 · 2025-10-04T11:16:21Z

@davepagurek I think the problem could be duplication of normals for the top and bottom faces when using separate side vertices. When we create new vertices for the sides, each side face has its own independent vertices, so computeNormals() cannot average normals across adjacent side faces. This causes the sides to look faceted and can even distort the normals for the top and bottom faces.I also noticed that the extrusion renders correctly if we reuse the existing front and back vertices for the side faces instead of creating new ones.

   //removing sidevertexoffset
    const validEdges = geom.edges.filter(([a, b]) => a !== b);
   //changes here
    for (const [a, b] of validEdges) {
      // Indices for the 4 corners of the side quad
      const frontA = frontVertexOffset + a;
      const frontB = frontVertexOffset + b;
      const backA  = backVertexOffset + a;
      const backB  = backVertexOffset + b;

      // Two triangles forming the side quad
      extruded.faces.push([frontA, backA, backB]);
      extruded.faces.push([frontA, backB, frontB]);
    }
    extruded.computeNormals();
    return extruded;
  }

Am I on the right track? Which approach aligns better?

davepagurek · 2025-10-04T11:53:11Z

The first approach you mentioned looks right -- we intentionally don't want the front/back faces to share vertices with the sides so that there is a crisp edge. Can you send a screenshot of what the shading look like with that so I get a clearer idea of the problem?

Some thoughts though:

computeNormals is sensitive to the order of the vertices in the faces. Right now the front and back faces are in the same order, so we might end up with normals facing in the same direction for the front and back, when we really want them facing in opposite directions. So we might have to reverse the back faces, which we also used to do here

p5.js/src/type/p5.Font.js

Lines 594 to 597 in f76b2b6

    
           if (face.every(idx => geom.vertices[idx].z <= -extrude * 0.5 + 0.1)) { 
        
             for (const idx of face) geom.vertexNormals[idx].set(0, 0, -1); 
        
             face.reverse(); 
        
           }

There might be some numerical issues with small faces causing issues? we know that the front and back faces should all have normals facing in +/- [0, 0, 1]. So possibly after calling computeNormals() we can also just overwrite the normals at the indices for the front and back faces. In fact, to save some computation, we could actually add just the side faces first, call computeNormals, and then add the front/back faces with manual normals.

VANSH3104 · 2025-10-04T16:45:27Z

@davepagurek it looks same as original issue have top and bottom dont render normals properly its really getting way complex triying to figure out now

VANSH3104 · 2025-10-04T17:05:17Z

@davepagurek ok so I Initialized vertexNormals array manually and assigned exact normals of [0,0,1] to all front vertices and [0,0,-1] to all back vertices when creating them. This eliminates any numerical issues since we know these faces should be perfectly flat.Reordered the face creation process. Side faces are now added first, then computeNormals() is called which only affects the side vertices since front and back vertices already have their normals set. After that, front and back faces are added to the faces array. This optimization means computeNormals() doesn't waste computation on faces where we already know the exact normals.Reversed the winding order of back faces by swapping face[i] and face[i+1] in the back face loop. This ensures that when viewed from outside the geometry, the back faces have vertices ordered counterclockwise (opposite to the front faces), which is necessary for normals to point in opposite directions.I think that allign to your thoughts still it giving same rendering dont able to figure it now

const extruded = this._pInst.buildGeometry(() => {});
    const half = extrude * 0.5;

    extruded.vertices = [];
    extruded.faces = [];
    extruded.vertexNormals = [];

    const frontVertexOffset = 0;
    for (let i = 0; i < geom.vertices.length; i++) {
      const v = geom.vertices[i];
      extruded.vertices.push(new Vector(v.x, v.y, v.z + half));
      extruded.vertexNormals.push(new Vector(0, 0, 1));
    }

    const backVertexOffset = extruded.vertices.length;
    for (let i = 0; i < geom.vertices.length; i++) {
      const v = geom.vertices[i];
      extruded.vertices.push(new Vector(v.x, v.y, v.z - half));
      extruded.vertexNormals.push(new Vector(0, 0, -1));
    }
    // Side faces from edges
    const sideVertexOffset = extruded.vertices.length;
    for (let i = 0; i < geom.vertices.length; i++) {
      const v = geom.vertices[i];
      // Add vertex at front
      extruded.vertices.push(new Vector(v.x, v.y, v.z + half));
      extruded.vertexNormals.push(new Vector(0, 0, 0)); 
    }
    for (let i = 0; i < geom.vertices.length; i++) {
      const v = geom.vertices[i];
      // Add vertex at back
      extruded.vertices.push(new Vector(v.x, v.y, v.z - half));
      extruded.vertexNormals.push(new Vector(0, 0, 0)); 
    }


    const validEdges = geom.edges.filter(([a, b]) => a !== b);

    for (const [a, b] of validEdges) {
      // Indices for the 4 corners of the side quad
      const frontA = sideVertexOffset + a;
      const frontB = sideVertexOffset + b;
      const backA = sideVertexOffset + geom.vertices.length + a;
      const backB = sideVertexOffset + geom.vertices.length + b;
      
      // Two triangles forming the side quad
      extruded.faces.push([frontA, backA, backB]);
      extruded.faces.push([frontA, backB, frontB]);
    }
    extruded.computeNormals();
   //Add front faces
    for (const face of geom.faces) {
      if (face.length < 3) continue;
      for (let i = 1; i < face.length - 1; i++) {
        extruded.faces.push([
          face[0] + frontVertexOffset,
          face[i] + frontVertexOffset,
          face[i + 1] + frontVertexOffset
        ]);
      }
    }
    // Add back faces with reverse order
    for (const face of geom.faces) {
      if (face.length < 3) continue;
      for (let i = 1; i < face.length - 1; i++) {
        extruded.faces.push([
          face[0] + backVertexOffset,
          face[i] + backVertexOffset,
          face[i + 1] + backVertexOffset
        ]);
      }
    }
    return extruded;
  }

davepagurek · 2025-10-05T13:16:53Z

So it looks to me like computeNormals() is working properly and the faces are set up well. But seeing your screenshot, it looks like it has the original problem from the original issue where we have multiple contours overlapping. My new theory for why this is happening is that we're constructing the side edges not from the triangulation result, which should flatten the contours into one shape, but from the edges, which works a little differently and may be preserving the original multiple contours. The reason for this is that the edges array generated by p5 is meant to outline the contours you pass in, not the unified resulting shape.

A quick way to test this would be to generate the side edges not from the edges array, but by making a side face for every edge of every front triangle. I suspect that this will make the artifact on the sides go away if this is in fact the problem. If that's true, we won't be done, because it'll also be extruding faces inside the shape, which we'll want to see if we can get rid of somehow, but we can maybe wait and see first if this idea works before worrying about that:

If it doesn't fix it, it could mean that the output of triangulation is still giving us multiple contours that overlap, which would mean having to think harder about how to prevent that overlap, possibly with a different library to boolean the shapes together.

VANSH3104 · 2025-10-07T16:24:35Z

@davepagurek I tried your suggestion of generating side faces from the triangulation instead of geom.edges, but the overlapping issue was still there and, on top of that, the sides became very messy because internal triangulation edges also got extruded. So unfortunately that approach didn’t fix the problem

davepagurek · 2025-10-07T19:51:15Z

@VANSH3104 do you have a build of that you could put into a p5 web editor sketch? I can take a look and see if I can debug a bit to figure out what a next step should be.

VANSH3104 · 2025-10-08T13:37:34Z

Hi @davepagurek, I messaged you on Discord because I'm having some issues with the build. Could you please check?

…and normal calculation

VANSH3104 · 2025-10-28T18:09:46Z

@davepagurek here is editor for visualizing this https://editor.p5js.org/vanshkabra05/sketches/Qc--JMEgU

davepagurek

Awesome work on this, it's working great! I think there's just some minor cleanup left.

davepagurek · 2025-10-29T20:10:34Z

src/type/p5.Font.js

-    const contours = this.textToContours(str, x, y, width, height, options);
+
+    let contours = this.textToContours(str, x, y, width, height, options);
+    if (!Array.isArray(contours[0][0])) {


It looks like right now this is being used to create multiple begin/endShape calls. Do we need that? I assumed it would be ok to just get a list of contours and put them all in one shape.

Also I believe textToContours should always be returning an array of array of points (a list of contours, each contour a list of points), so I also wonder if we always go down the same branch here anyway.

I checked textToContours() it returns a flat array of contours like [{x,y}, {x,y}, ...] for a single character, so contours[0][0] is an object, not an array. The check wraps it into [[contours]] so the loop works correctly and i simplify it to one beginShape/endShape call with all contours inside its good idea

davepagurek · 2025-10-29T20:16:55Z

src/type/p5.Font.js

+      const prevValidateFaces = this._pInst._renderer._validateFaces;
+      this._pInst._renderer._validateFaces = true;
+      this._pInst.push();
+      this._pInst.stroke(0);


Does this do the same thing as noStroke()?

Yep, you're right I've removed the push/pop and stroke settings entirely since they're not needed for the geometry building.

davepagurek · 2025-10-29T20:19:26Z

src/type/p5.Font.js

    }
-    return geom;
+
+    console.log(`Found ${validEdges.length} outer edges from ${Object.keys(seen).length} total edges`);


Just a reminder to take this out before merging to not clog up the console

davepagurek · 2025-10-29T20:21:19Z

src/type/p5.Font.js

+    }
+
+    const vertexIndices = {};
+    const vertexId = v => `${v.x.toFixed(6)}-${v.y.toFixed(6)}-${v.z.toFixed(6)}`;


I had to remind myself that this was necessary because tessellation produces triangles with no shared vertices, so we need to deduplicate them here to find connected faces. Would you mind leaving a comment explaining this for future contributors' context?

davepagurek · 2025-10-29T20:30:26Z

src/type/p5.Font.js

+      const vA = newVertices[a];
+      const vB = newVertices[b];
+      // Skip if vertices are too close (degenerate edge)
+      const dist = Math.sqrt(


I think this still passes if we have a triangle that has collinear edges. I think in computeNormals, we check basically that the magnitude of the cross product is over a certain size. maybe we should match that?

yup you are right updated it to check the cross product magnitude instead, matching the logic in computeNormals

…and normal calculation with recomended chnages

VANSH3104 · 2025-10-30T06:27:11Z

@davepagurek could you please review this? If everything looks good, I’ll clean up my commit history.

Fix textToModel face normals for extruded text

5e557e5

VANSH3104 and others added 2 commits September 26, 2025 00:30

Merge branch 'dev-2.0' into fix-textToModel

9a7e956

Fix textToModel extrusion and degenerate face issues

3e567bf

Fix textToModel extrusion and degenerate face issues

4c91d6e

davepagurek reviewed Oct 3, 2025

View reviewed changes

Fix text extrusion with proper vertex deduplication, edge detection, …

a68bd7b

…and normal calculation

Merge branch 'dev-2.0' into fix-textToModel

db20daa

davepagurek reviewed Oct 29, 2025

View reviewed changes

VANSH3104 added 3 commits October 30, 2025 10:27

Fix text extrusion with proper vertex deduplication, edge detection, …

1a58251

…and normal calculation with recomended chnages

Fix text extrusion with proper vertex deduplication, edge detection, …

6894f2d

…and normal calculation with recomended chnages

Fix text extrusion with proper vertex deduplication, edge detection, …

0b31fa5

…and normal calculation with recomended chnages

Uh oh!

Fix textToModel face normals for extruded text #8091

Are you sure you want to change the base?

Fix textToModel face normals for extruded text #8091

Conversation

VANSH3104 commented Sep 15, 2025

PR Checklist

Uh oh!

VANSH3104 commented Sep 15, 2025

Uh oh!

davepagurek commented Sep 15, 2025

Uh oh!

VANSH3104 commented Sep 29, 2025

Uh oh!

davepagurek left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

VANSH3104 commented Oct 4, 2025

Uh oh!

VANSH3104 commented Oct 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

davepagurek commented Oct 4, 2025

Uh oh!

VANSH3104 commented Oct 4, 2025

Uh oh!

VANSH3104 commented Oct 4, 2025

Uh oh!

davepagurek commented Oct 5, 2025

Uh oh!

VANSH3104 commented Oct 7, 2025

Uh oh!

davepagurek commented Oct 7, 2025

Uh oh!

VANSH3104 commented Oct 8, 2025

Uh oh!

VANSH3104 commented Oct 28, 2025

Uh oh!

davepagurek left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

VANSH3104 commented Oct 30, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

davepagurek left a comment •

edited

Loading

VANSH3104 commented Oct 4, 2025 •

edited

Loading