The Optimal Method for Calculating an SDF for a Triangle Mesh

https://i.sstatic.net/L7Zmz.jpg

Hey there!

For the past month, I've been diligently researching various sources in hopes of finding a solution to my unique problem. Here's the issue I'm grappling with:

In the context of a mesh represented as buffer geometry (comprising 32-bit arrays of vertex coordinates and indices along with additional arrays like vertex normals, UVs, or tangents), how can I calculate a signed distance function (SDF) for a uniform grid of points surrounding the geometry?

Specifically, my goal is to create something akin to a MetaBall object within 3D engines such as Cinema4D or Blender. While I've successfully implemented distance functions for simple geometric primitives, generating an SDF for arbitrary meshes has proven challenging due to the brute force approach required - testing distances for every triangle against each grid point results in performance issues when dealing with complex meshes.

Upon further research, I came across tree-like structures like Octrees, KD-trees, BSP-trees, or AABB-trees. Additionally, I encountered articles on the Fast-Sweeping algorithm, designed to solve the Eikonal equation, which involves setting grid points along the boundary (or nearest to the mesh) to 0 and others to infinity before iteratively solving the hyperbolic boundary value problem using Gauss-Seidel iterations. I also discovered an open-source implementation of a mesh SDF method within the CGAL library. Another avenue considered was leveraging shader libraries like GLSL for GPU-accelerated tree construction, although I lack experience working with shaders in JS or TS projects.

My challenge lies not only in selecting the optimal method but in effectively implementing it. For instance:

  • If I were to pursue the Fast-Marching Method, I would need to iterate through all triangles and, for each one, cycle through individual grid points to interpolate values based on intersected cell vertices. This approach appears time-consuming and unsuitable for real-time applications.

  • While exploring examples of Ray Marching SDF computation in Unity, I stumbled upon GPU-based computations capabilities without fully grasping the parallel computing limitations or processes involved. Is it feasible to parallelize distance computations per triangle and subsequently sort these distances for each grid point efficiently? And if so, how could I integrate this into a TypeScript project?

  • Considering the creation of an AABB-tree around mesh triangles, locating the closest leaf from a given grid point and calculating the Euclidean distance to the contained triangle seems promising. However, the complexity analysis suggests potential drawbacks compared to a brute force approach, leading me to question its effectiveness.

As I contemplate merging multiple approaches, the overwhelming nature of the task becomes evident. The prospect of utilizing the CGAL library or adapting it for my project presents challenges due to dependency complexities within the existing C++ codebase. Has anyone navigated a similar terrain before? What recommendations do you have?

Appreciate any insights shared.

Answer №1

I approached this problem by breaking it down into three key steps:

  1. Created an AABB tree representing the mesh's triangle soup

  2. Utilized the AABB tree to divide regular bounding cubes when they intersected with the mesh, forming an Octree. Calculated exact squared distances from cube centroids to triangles, storing the smallest distance in a grid based on cube coordinates.

  3. Assigned precise distance values to voxels intersecting with the mesh and high values to others, then ran the Fast Sweeping algorithm 8 times to populate the scalar grid with accurate distances.

  4. (optional) Implemented a flood fill algorithm to ensure that inside voxels have negative values relative to an outline of initial marked voxels (this step can be slow for grids larger than 100^3).

If you're interested in a more comprehensive view of my implementation along with performance metrics, check out my blog at:

Thank you for your support and feedback! :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Refresh the information in the <ion-datetime> component by utilizing the formGroup

I am currently working with a form that has been created using 'FormBuilder'. The form includes a date control and I am trying to figure out how to update the data in that control using the patchValue() method. In the template, the control has d ...

Place a geometric form directly in the camera's field of view on a spherical object using AFrame (adjusting camera rotation and position)

Struggling to develop a basic application where a 360 image is displayed on a Sphere with interactive 'hotspots'? Look no further! With various attempts and exploring different methods, including diving deep into Three.JS, the task seems more com ...

Verify whether the message received contains a specific text within the property

Currently, I am facing a challenge with displaying a specific div in my component template only if any incoming messages contain the TYPE_OTHER property. With numerous variations of the TYPE_OTHER identifier, I am pondering on creating a condition that can ...

Leveraging Interface in Protractor Testing

As a newcomer to Typescript and Protractor, I have been working with reusable code in various classes. Instead of importing each library class separately into my test class, I am trying to find a way to import just one class or interface that will contai ...

Issue: Module '/Users/MYNAME/Desktop/Projects/MYPROJECTNAME' not found

I am currently in the process of compiling Node using TypeScript, and I'm still getting acquainted with it. An issue I encountered was that my /src files were not being updated when I made changes and restarted the server. To troubleshoot, I decided ...

Currently focused on developing vertical sliders that can be manipulated by dragging them up or down independently

https://i.stack.imgur.com/NgOKs.jpg# I am currently working on vertical sliders that require dragging up and down individually. However, when I pull on the first slider, all sliders move together. The resetAllSliders button should also work independently, ...

How to access an element through the router-outlet in Angular 6?

<side-navigation [navigationTitle]="navTitle"></side-navigation> <router-outlet> </router-outlet> Within my project, I have a navigation bar located in the root component. I have set up [navigationTitle] as an @Input Decorator wit ...

React animation failing to render underline animation

After tinkering with the underline animation while scrolling down on Codepen using Javascript, I successfully implemented it. You can check out the working version on Codepen. This animation utilizes Intersection Observer and a generated svg for the underl ...

Guide on importing JavaScript into TypeScript without using noImplicityAny and while not allowing Js

In my development setup, I am utilizing Webpack along with @babel/typescript to compile a project that consists of a mix of TypeScript and JavaScript. To ensure better typing and take advantage of the benefits it offers, I have enabled the --noImplicitAny ...

Challenges encountered while setting up Hotjar integration in Next.js using Typescript

I am encountering issues with initializing hotjar in my Next.js and TypeScript application using react-hotjar version 6.0.0. The steps I have taken so far are: In the file _app.tsx I have imported it using import { hotjar } from 'react-hotjar' ...

Leveraging AngularJS services within an Angular service

I am currently in the process of transitioning my AngularJS application to Angular. To facilitate this transition, I plan to create a hybrid application that combines both frameworks until the conversion is complete. However, I have encountered an issue wi ...

Whenever I attempt to render a component passed as a prop, I encounter error TS2604

I am attempting to pass a component as a prop to another component in order to wrap the content of a material ui modal This is my attempt so far: import React, { Component } from 'react'; import withWidth, { isWidthDown } from '@material-u ...

Implementing Multiple UV Maps for Enhanced Texture Rendering in a threejs Model

Seeking advice and opinions on a complex matter: I have a 3D model of a men's dress shirt in Collada format, accurately sized with a 16-inch neck and 34-inch sleeves. I also have three polka-dot fabrics (perhaps I have a penchant for polka dots). Here ...

Exploring the Viability of Utilizing TypeScript and ES6 Modules for a Compact Library Package

Currently, our team is in the process of developing a custom JavaScript library for integration with one of our flagship products. The development workflow involves: Utilizing TypeScript and internal modules to create namespaced classes (internal and pub ...

Is there a way to identify when a Tween.js animation has completed?

Is there a completed or finished event available when using this code for animating the camera in a scene with tween.js? tween : function (target){ var position = camera.position; var tween = new TWEEN.Tween(p ...

Contrast between categories and namespaces in TypeScript

Can you clarify the distinction between classes and namespaces in TypeScript? I understand that creating a class with static methods allows for accessing them without instantiating the class, which seems to align with the purpose of namespaces. I am aware ...

Setting a dynamically addressed property within a TypeScript interface

I have a situation where I need to dynamically access an object property using a variable that represents a keyof the object type. Here's an example: interface FidelityCheckRow { P1: number; P2: string; P3: string; } const keys: (keyof F ...

Creating 3D Shapes with three.js

I am currently in the process of importing an STL object into my three.js scene. Unfortunately, this particular object seems to be using a large amount of GPU resources for rendering and animation, causing the overall performance of the scene to suffer. B ...

Having trouble with Angular routing when attempting to directly access a specific URL path?

Seeking help with my routing setup in Angular. Using v12 of Angular. Encountering a 404 Not Found error when trying to access the direct URL for "register" at somesite.com/register. Uncertain if this is a server or Angular issue. Here is my router module ...

How can I retrieve the /api/auth/me resource serverside using the NextJS AppRouter?

I am looking to implement app router in my Next.js project and have encountered an issue. In order for my app to function properly, I need to make a call to /api/auth/me which will return either a user object or null if the user is not logged in. To achiev ...