ExtrudeGeometry or ProfiledGeometry using WASM


My attempt at creating extrude geometry along a 3D path using WASM. The link to the repository is here

Example with a custom SVG design

Extrusion with solid color

Extrusion with PBR textures



Good. A few questions:

  • It looks like both the profile and the path must be decomposed into sequences of points before using the wasm extrusion. Is this so?
  • When a path is closed curve, do both ends touch perfectly? (i.e. the same orientation, smooth UVs, no visible seam)
  • How to define holes in the extrusion profile?

Great questions.

  • I think the decomposition of sequence of points for the path is how it works currently with threejs. However for the decomposition of points for the profile shape is not necessary. But internally in threejs they get the points of the profile shape (from my intuition point of view) and extrude similar to what this code does. I too in my implementation load a custom SVG as Shape and decompose it into points before sending it to the WASM module
  • Yes, when the path is a closed curve they touch perfectly and last points in the curve (actually the first points that loops back) are identified as seams. If the point is a seam then they are placed at UV extremes based on the width(path perimeter), and height(shape perimeter) of the extrusion. Until now after running couple of tests I do not notice any artefacts with UV’s. When the path is not a closed loop the shape ends at 90°
  • aaah, interesting use case. I believe you are referring to a shape with a hole in center to define a tubulur structure of sorts, am I right? In that case they are nothing but two different shapes following the same path. I understand a tubular structure is valid with open loops (to view the thickness), I didn’t think about this. Thank you and I will update to include this use case. But it is going to take a while as I am not able to think of a way to tesellate two different shapes with different number of points. What do you think? Any ideas on how to tesellate the closing faces given there are multiple such faces? Or convert them to shape geometry and use those vertices as the sequences?

However, I believe this is a reinvention of the wheel given the awesomeoness of the people behind threejs who have moved more than mountains but worlds in giving us a superb webgl framework to play with. But the aspect of WASM and C++ was the objective of this exercise. I believe it is quite faster than a native javascript implementation. Or so I think from my limited knowledge.