edge-highlight

A vanilla JS code for finding 3D geometry edges and visualizing them via custom shader, works with THREE.js

Usage:

// import THREE.js library

import { init } from 'edge_finder.js'

const config = {
   width: 0.2, // border width, range [0, 1]
   alpha: true, // solid mesh background
   invert: false, // swap border/background style
   mode: 0, // border style: 0 - solid, 1 - smooth, 2 - neon
   wave: 0, // repeating border, 0 - disabled, recommended values [1, 2, 3, 4, ...]
   exp: 1, // border falloff: 1 - smoothstep, otherwise exponential, recommended range [2, 100]
};

const mesh = init( // returns THREE.Mesh
   geo, // THREE buffer geometry, indexed geometry will be converted to non-indexed
   THREE.Mesh, 
   THREE.ShaderMaterial, 
   THREE.Float32BufferAttribute, 
   config, 
   0.001, // edge detection precision in range (0, 1), higher values detect sharper edges only
   0.001, // matching vertice positions detection precision (for example, along uv seams)
);

Object config will be interactive, any changes to its properties will be reflected in real time on the next mesh render.

Live example: https://alikim.com/qcode/html/edge_finder.html

Discussion: https://discourse.threejs.org/t/edge-finding-and-highlighting/47827

alikim-com/edge-highlight

edge-highlight