Hi everyone, I’m working on a custom 3D geometry layer in a Mapbox + Three.js environment. I’m generating a road-like surface with left/right side surfaces by interpolating points along a CatmullRom curve. Geometry is constructed via cross-section points per segment. The problem is that the faces appear distorted/Fuzzy or crumpled, even though the logic seems correct. The distortion gets worse when I use smaller values (due to precision issues), and sometimes face connectivity looks incorrect even after converting width units from meters to Mercator units. [image] [image] I previously used a small scale = 0.0000001 to shrink geometry, but it led to face artifacts. I switched to a meters-to-Mercator conversion function, but geometry was way off in the way it was created I suspect the issue may lie in how I’m connecting faces across segments, or possibly in the way I compute left/right offset vectors per cross-section? Code snippet of my createRoadGeometry() is attached below. Can someone check if the face-building logic is flawed? Thanks in advance! :folded_hands: Code: metersToMercatorUnits() function function metersToMercatorUnits(meters, latitude) { const earthCircumference = 40075016.686; return meters / (earthCircumference * Math.cos(latitude * Math.PI / 180)); } Cross-section vertex building const baseCenterLat = currentPoints[i]?.lngLat?.lat || 0; const widthInMercator = metersToMercatorUnits(params.width, baseCenterLat); const height = params.height; const heightParallel = params.heightParallel; const baseCenter = new THREE.Vector3().copy(point); const mainLeft = baseCenter.clone() .add(right.clone().multiplyScalar(-widthInMercator / 2)) .add(worldUp.clone().multiplyScalar(height)); const mainRight = baseCenter.clone() .add(right.clone().multiplyScalar(widthInMercator / 2)) .add(worldUp.clone().multiplyScalar(height)); const leftOuter = baseCenter.clone() .add(right.clone().multiplyScalar(-widthInMercator * 1.5)) .add(worldUp.clone().multiplyScalar(heightParallel)); const rightOuter = baseCenter.clone() .add(right.clone().multiplyScalar(widthInMercator * 1.5)) .add(worldUp.clone().multiplyScalar(heightParallel)); mainVertices.push(mainLeft, mainRight); leftVertices.push(mainLeft, leftOuter); rightVertices.push(mainRight, rightOuter); Face index pushing logic if (i < segmentCount) { const baseMain = i * 2; const baseLeft = i * 2; const baseRight = i * 2; mainFaces.push(baseMain, baseMain + 1, baseMain + 3, baseMain, baseMain + 3, baseMain + 2); leftFaces.push(baseLeft, baseLeft + 1, baseLeft + 3, baseLeft, baseLeft + 3, baseLeft + 2); rightFaces.push(baseRight, baseRight + 1, baseRight + 3, baseRight, baseRight + 3, baseRight + 2); } BufferGeometry building section const mainGeometry = new THREE.BufferGeometry(); const vertices = new Float32Array(mainVertices.length * 3); mainVertices.forEach((v, i) => { vertices[i * 3] = v.x; vertices[i * 3 + 1] = v.y; vertices[i * 3 + 2] = v.z; }); mainGeometry.setAttribute(‘position’, new THREE.BufferAttribute(vertices, 3)); mainGeometry.setIndex(mainFaces); mainGeometry.computeVertexNormals(); Road Function: createRoadGeometry: function(pathCurve) { if (!pathCurve || currentPoints.length < 2) return; // Define how many points to sample along the curve const segmentCount = Math.max((currentPoints.length - 1) * 15, 30); const wireframeInterval = Math.max(Math.ceil(segmentCount / ((currentPoints.length - 1) * 2)), 1); // Arrays for vertices and faces const mainVertices = []; const mainFaces = []; const leftVertices = []; const leftFaces = []; const rightVertices = []; const rightFaces = []; // Store wireframe points for each cross-section const wireframePoints = []; // Sample points along the curve for (let i = 0; i <= segmentCount; i++) { const t = i / segmentCount; const point = pathCurve.getPoint(t); const params = this.getInterpolatedParams(t, currentPoints); // Calculate the forward direction (tangent along the curve) const tangent = pathCurve.getTangent(t).normalize(); // Up vector for Mapbox GL JS coordinate system const worldUp = new THREE.Vector3(0, 0, 1); // Calculate the right vector const right = new THREE.Vector3().crossVectors(tangent, worldUp).normalize(); const scale = 0.0000001; // Scale factors for width and height const width = params.width * scale; const height = params.height * scale; const heightParallel = params.heightParallel * scale; // Center point at base level const baseCenter = new THREE.Vector3().copy(point); // Calculate cross-section points // Main road surface (gray middle) const mainLeft = new THREE.Vector3().copy(baseCenter) .add(new THREE.Vector3().copy(right).multiplyScalar(-width / 2)) .add(new THREE.Vector3().copy(worldUp).multiplyScalar(height)); const mainRight = new THREE.Vector3().copy(baseCenter) .add(new THREE.Vector3().copy(right).multiplyScalar(width / 2)) .add(new THREE.Vector3().copy(worldUp).multiplyScalar(height)); // Left side surface (yellow) const leftOuter = new THREE.Vector3().copy(baseCenter) .add(new THREE.Vector3().copy(right).multiplyScalar(-width * 1.5)) .add(new THREE.Vector3().copy(worldUp).multiplyScalar(heightParallel)); // Right side surface (yellow) const rightOuter = new THREE.Vector3().copy(baseCenter) .add(new THREE.Vector3().copy(right).multiplyScalar(width * 1.5)) .add(new THREE.Vector3().copy(worldUp).multiplyScalar(heightParallel)); // Bottom points for wireframe const bottomMainLeft = new THREE.Vector3().copy(baseCenter) .add(new THREE.Vector3().copy(right).multiplyScalar(-width / 2)); const bottomMainRight = new THREE.Vector3().copy(baseCenter) .add(new THREE.Vector3().copy(right).multiplyScalar(width / 2)); const bottomLeftOuter = new THREE.Vector3().copy(baseCenter) .add(new THREE.Vector3().copy(right).multiplyScalar(-width * 1.5)); const bottomRightOuter = new THREE.Vector3().copy(baseCenter) .add(new THREE.Vector3().copy(right).multiplyScalar(width * 1.5)); // Store vertices for each surface mainVertices.push(mainLeft, mainRight); leftVertices.push(mainLeft, leftOuter); rightVertices.push(mainRight, rightOuter); // Create faces (triangles) connecting this cross-section to the next if (i < segmentCount) { const base = i * 2; // Main surface faces mainFaces.push(base, base + 1, base + 3, base, base + 3, base + 2); // Left side faces leftFaces.push(base, base + 1, base + 3, base, base + 3, base + 2); // Right side faces rightFaces.push(base, base + 1, base + 3, base, base + 3, base + 2); } // Collect ALL possible wireframe points for this cross-section const crossSectionWireframe = [ // Top lines mainLeft, mainRight, // Top middle line mainLeft, leftOuter, // Top left line to outer left mainRight, rightOuter, // Top right line to outer right // Vertical connections bottomMainLeft, mainLeft, // Bottom to top left bottomMainRight, mainRight, // Bottom to top right bottomLeftOuter, leftOuter, // Bottom to top outer left bottomRightOuter, rightOuter, // Bottom to top outer right // Bottom lines bottomMainLeft, bottomMainRight, // Bottom middle line bottomMainLeft, bottomLeftOuter, // Bottom middle to left outer bottomMainRight, bottomRightOuter, // Bottom middle to right outer bottomLeftOuter, bottomRightOuter // Bottom outer line ]; // Only store wireframe points for selected intervals if (settings.wireframeMode && (i % wireframeInterval === 0 || i === 0 || i === segmentCount)) { wireframePoints.push(crossSectionWireframe); } } // Create wireframe lines if (settings.wireframeMode) { for (let j = 0; j 0) { const prevPoints = wireframePoints[j - 1]; const currentPoints = wireframePoints[j]; // Systematically connect corresponding points between cross-sections const connectPairs = [ [0, 0], // Top middle left [1, 1], // Top middle right [2, 2], // Top left outer [3, 3], // Top right outer [4, 4], // Bottom middle left [5, 5], // Bottom middle right [6, 6], // Bottom left outer [7, 7], // Bottom outer line left [8, 8], // Bottom middle left [9, 9], // Bottom middle right [10, 10], // Bottom left outer [11, 11], // Bottom right outer ]; connectPairs.forEach(([prevIndex, currIndex]) => { this.createWireframeLine( prevPoints[prevIndex], currentPoints[currIndex] ); }); } } } return { mainVertices, mainFaces, leftVertices, leftFaces, rightVertices, rightFaces }; },

@Fennec sorry to tag you on this, but I’ve been following your comments on other threads and thought you might have some insight or advice on this geometry issue :innocent: :folded_hands:

Do you find the centerpoint first, and then build the geometry relative to that, or are you defining the points in world space? if yr computing the points in world space, you might be hitting the limits of Float32 on the coordinates. Vertices are stored in Float32 Object.position is js 64 bit double

see [image] Create a curved plane surface which dynamically changes its size Questions Hello, I know there are several resources on this but I am not able to get a curved plane from a set of Vector3 points. This is the screenshot of the output. [curvedPlanePoints] The ends of red and green line segments represents the boundaries of plane. and I want to make a plane connecting all those points. I can even move those points and add new points. So I want my plane size to be flexible too. Can someone help me out here? [image] Car Racing - For lovers of fast cars! Resources A quick race. CarRacing [2021-06-11 15.19.43] [2021-06-11 15.18.50] Furthermore I have updated my old example RoadRace from the addon Addon to create special / extended geometries - #5 by hofk to a new state. THREEg.js/examples at master · hofk/THREEg.js · GitHub See also Struggling with paths BeginnerExample // … step 15: matrix, move along room curve Added a version with quaternions. white_check_mark CarRacingQuaternion uses THREE.Quaternion.prototype.setFromBasis = function…

thank you @manthrax , I tried the option you shared, but unfortunately it didn’t resolve the issue. I tried building the geometry relative to a center point and also experimented with anchoring the vector point and using an array of coordinates. The problem seems to arise specifically with small-scale geometry, when it’s scaled down to something like 0.00001, I start noticing a “zigzag-like” behavior. Interestingly, this issue disappears when the geometry is scaled to 0.1 or 1. I suspect this behavior might be caused by continuous re-rendering at such a small scale, but I’m not entirely sure. Do you have any advice or advice on how to address this?

@hofk Thank you! I actually used that as the base for my initial setup. However, the issue seems to be related to scale. I believe it’s a rendering issue, as the map appears to re-render when navigating or moving around, which in turn causes the geometry to re-render as well. This behavior is much more noticeable at smaller scales, whereas when the geometry is significantly larger than the map, the issue is no longer visible.

could scale all other stuff 100000 times…so you don’t have to scale this one…

i can not scale the map, and wont give correct geometry data either @towrabbit :slight_smile:

why not. scale whole things does not make any diffirence. the main idea is keep the precision. can you create a demo that produce this issue, I could help with it. go to WebGL Report. take a screenshot.this website could get the device webgl2 basic stats/ supports and something related.

@hofk @manthrax @towrabbit , so since I am using a geometry coordinate system and also working within a map coordinate system, scaling down in real-time on the map makes this zigzag appearance. I am thinking that this could be due to something similar to the frame’s bitrate?, for example like how reducing the resolution of a large video causes pixelation? I suspect this could be the issue, but I’m not entirely sure what the best approach would be to fix it. Do you have any suggestions?

I think that it is like that. Math in Javascript is 64 bit. Math in the renderer/glsl itself is 32bit. If you store the world space coordinates in the geometry itself… you’re limited to 32 bit precision, so if those numbers are really large or really small, you start to see jitter. (I think this is what you’re doing, but I’m not positive without seeing the code running somewhere.) But… you can instead store the location/center of the mesh itself in the threejs mesh.position (64bit)… then your vertices can be stored relative to that position, and therefore fit into the “bitrate” of the renderer (32bit). This also makes scaling/rotation/movement more convenient because you can just change mesh.position/rotation/scale instead of recomputing vertices… it lets you control the origin (pivot point) of the mesh… and if you scale the mesh, it will scale relative to that pivot, intuitively. What towrabbit is proposing would also work, but would require translating units from worldspace to the scaled space, and keeping track of that or doing all your calculations in that space rather than the more natural “world space”.

[Help] Fuzzy/Distorted Faces in Road Geometry Created from CatmullRom Curve – Three.js + Mapbox

Questions

hofk March 12, 2025, 7:46pm 4

see

Topic		Replies	Views
Lines and MeshLines Jitter in big scene however CylinderGeometry does not, why? Questions geometry , mesh , lines , cylinder	5	930	January 4, 2024
Extruded geometry shaking or flickering during zooming and orbiting Questions geometry , mapbox	1	129	September 4, 2024
Scale in blender and three js Questions	28	580	August 14, 2026
Line geometry flickering and vibrating when displaying massive geometry lines Questions geometry	5	2596	May 20, 2023
Convert Latitude / Longitude to Tube Geometry Questions math	3	509	November 20, 2023

[Help] Fuzzy/Distorted Faces in Road Geometry Created from CatmullRom Curve – Three.js + Mapbox

Related topics