Code Monkey home page Code Monkey logo

edge-highlight's Introduction

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

edge-highlight's People

Contributors

alikim-com avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.