Three.js - Generating new faceVertexUvs when subdividing a geometry - three.js

Question

Summary
I'm currently researching different types of subdivision algorithms.
When I subdivide a geometry, UVs are not generated properly, resulting in faces with no material, i.e holes in my mesh.
Here is a link to my exercise.
(I need more reputation to post images..)
https://raw.githubusercontent.com/larryzodiac/Generative-Jewellery/master/images/shape.png
https://raw.githubusercontent.com/larryzodiac/Generative-Jewellery/master/images/shape-gaps.png
Three.js uses Loop subdivision. I have been coding based on a Three.js example found here.
As part of my research I have coded a working(nearly) example of Catmull-Clark subdivision
Problem
Using Catmull-Clark on a face results in three new faces(quads) in place of the source face.
As THREE.Face4 is deprecated, I have opted to simply create two triangles(Face3) in place of each quad. I know this is odd and not optimal but try to ignore it.
Therefore, there will be six new faces created in place of a source face.
Some of the faces have UVs. I can't figure out where I am going wrong in mapping UVs to all newly created faces.
Code Extracts
Here is a link to the exercise code on Github.
Catmull-Clark.js:
...
/*
Step 4
Redraw geometry
*/
// Throwing together all new/old vertices for the new geometry
const newVertices = vertexPoints.concat(edgePoints,facePoints);
const newFaces = [];
const newUVs = [];
let uv, x0, x1, x2; // Source triangle face points
let xe0 = new THREE.Vector2(); // Edge points (mid-points)
let xe1 = new THREE.Vector2();
let xe2 = new THREE.Vector2();
let xf = new THREE.Vector2(); // Face point of face (centre-ish)
// Loop through each face, create sudivided faces from found algorithm points
for (let i = 0; i < sourceFaces.length; i++) {
const face = sourceFaces[i];
const edgePoint1 = getEdgePoint(face.a, face.b, sourceEdges, edgePoints) + sourceVertices.length;
const edgePoint2 = getEdgePoint(face.b, face.c, sourceEdges, edgePoints) + sourceVertices.length;
const edgePoint3 = getEdgePoint(face.c, face.a, sourceEdges, edgePoints) + sourceVertices.length;
const facePoint = getFacePoint(face.a, face.b, face.c, sourceEdges, facePoints) + sourceVertices.length + edgePoints.length;
/*
Catmull for ARBITRARY shapes, all faces after the first iteration become quads.
THREE.Face4 has been depreciated in the new Three.js build
Solution will be to draw a quad using two triangles.
*/
createNewFace(newFaces, face.a, edgePoint1, edgePoint3, facePoint);
createNewFace(newFaces, face.b, edgePoint2, edgePoint1, facePoint);
createNewFace(newFaces, face.c, edgePoint3, edgePoint2, facePoint);
// create 4 new uv's
uv = sourceUvs[i];
x0 = uv[0];
x1 = uv[1];
x2 = uv[2];
// xe0.set(midpoint(x0.x, x1.x), midpoint(x0.y, x1.y));
// xe1.set(midpoint(x1.x, x2.x), midpoint(x1.y, x2.y));
// xe2.set(midpoint(x0.x, x2.x), midpoint(x0.y, x2.y));
// xf.set( ((x0.x + x1.x + x2.x)/3) , ((x0.y + x1.y + x2.y)/3) );
xe0.set(newVertices[edgePoint1].x, newVertices[edgePoint1].y);
xe1.set(newVertices[edgePoint2].x, newVertices[edgePoint2].y);
xe2.set(newVertices[edgePoint3].x, newVertices[edgePoint3].y);
xf.set(newVertices[facePoint].x, newVertices[facePoint].y);
createNewUv(newUVs, x0, xe0, xf);
createNewUv(newUVs, x0, xe2, xf);
createNewUv(newUVs, x1, xe0, xf);
createNewUv(newUVs, x1, xe1, xf);
createNewUv(newUVs, x2, xe1, xf);
createNewUv(newUVs, x2, xe2, xf);
}
geometry.vertices = newVertices;
geometry.faces = newFaces;
geometry.faceVertexUvs[0] = newUVs;
This is the way I have it working, forgive the bad diagram:
// ------------------------------------------------- //
// x0
// / \
// / \
// / \
// / \
// xe0 \ / xe2 // Creates three quads
// / \ xf / \
// / | \
// / | \
// / | \
// x1 - - - - - - xe1 - - - - - - x2
// ------------------------------------------------- //
// ------------------------------------------------- //
// x0
// / \
// / | \
// / | \
// / | \
// xe0 \ | / xe2 // Need to divide quads into two triangles
// / \ xf / \
// / / | \ \
// / / | \ \
// / / | \ \
// x1 - - - - - - xe1 - - - - - - x2
// ------------------------------------------------- //
structure-query-functions.js :
// THREE.Face4 depreciated
// Need to draw two triangles to emulate quad
const createNewFace = (newFaces, a, b, c, d, materialIndex) => {
newFaces.push(new THREE.Face3(
a, b, d, undefined, undefined, materialIndex
));
newFaces.push(new THREE.Face3(
a, c, d, undefined, undefined, materialIndex
));
}
const createNewUv = (newUvs, a, b, c) => {
newUvs.push( [ a.clone(), b.clone(), c.clone() ] );
}
const midpoint = (a, b) => (Math.abs(b - a) / 2) + Math.min(a, b);
Have I missed or overlooked anything? I have been studying different questions on Stack and the Three website but to no avail. Regardless, cheers for taking the time to read, offer feedback, and help.
I hope I am making sense.
Sound, Papa bless.

Answer 1

In your demo I can see missing faces from the other side.
Seems you encountered backface culling.
When adding new face check if it is oriented as intended. In your example you have all required info to order vertices properly.
In more general case you can check dotProduct(crossProduct(B-A, C-A), supposedFaceNormal) > 0. If face is not oriented properly just flip it by rearranging vertices (ABC -> ACB).
To make both triangle sides drawn set material.side property to THREE.DoubleSide.
Can't see uv generation problems with single red color. If there is one - please demonstrate it in example with uvs drawn somehow.