• Stars
    star
    306
  • Rank 136,456 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 2 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A flexible, memory compact, fast and dynamic CSG implementation on top of three-mesh-bvh

three-bvh-csg

npm version build github twitter sponsors

An experimental, in progress, flexible, memory compact, fast and dynamic CSG implementation on top of three-mesh-bvh. More than 100 times faster than other BSP-based three.js CSG libraries in complex cases. Contributions welcome!

Note All brush geometry must be two-manifold - or water tight with no triangle interpenetration.

Warning Due to numerical precision and corner cases resulting geometry may not be correctly completely two-manifold.

Roadmap / Help Wanted

  • Fix triangle splitting / missing triangle issues #73 #68
  • Polygon splitting & triangulation #51
  • Worker Support #14

And more!

Examples

Simple CSG

Complex Model CSG

Multimaterial CSG

Hierarchical Operations

Use

import { SUBTRACTION, Brush, Evaluator } from 'three-bvh-csg';
import { MeshStandardMaterial, Mesh, SphereGeometry, BoxGeometry } from 'three';

const csgEvaluator = new Evaluator();
const brush1 = new Brush( new SphereGeometry() );
const brush2 = new Brush( new BoxGeometry() );

const result = csgEvaluator.evaluate( brush1, brush2, SUBTRACTION );

// render the result!

API

Constants

CSGOperations

CSG operations enums for use with Evaluator.

ADDITION
SUBTRACTION
DIFFERENCE
INTERSECTION

Brush

extends THREE.Mesh

An object with the same interface as THREE.Mesh but used to evaluate CSG operations. Once a brush is created the geometry should not be modified.

Note

It is recommended to remove groups from a geometry before creating a brush if multi-material support is not required.

Operation

extends Brush

This is an extension of the Brush class. With this class is possible to create a mesh and pass the CSG Operation constant to define which operation computes on the mesh. The result is a Mesh whose effect is defined from the operation selected. You can see how it works in the hierarchy example.

.operation

operation = ADDITION : CSGOperation

The operation to perform on the next brush in processing chain when running Evaluater.evaluateHierarchy.

.insertBefore

insertBefore( brush : Brush )

Inserts the brush before the operation element that calls the method, in the list of the children of the operation's parent.

.insertAfter

insertAfter( brush : Brush )

Inserts the brush after the operation element that calls the method, in the list of the children of the operation's parent.

OperationGroup

extends THREE.Group

A class with the same interface as THREE.Group but used to group a list of Operation mesh through the .add method inherited from the THREE.Group class. You can create a group starting from single Operation meshes as in the hierarchy example.

Evaluator

.useGroups

useGroups = true : Boolean

Whether to use geometry groups when processing the geometry. If geometry groups are used then a material array and groups will be assigned to the target Brush after processing. If groups are disabled then a single coherent piece of geometry with no groups will be produced.

.evaluate

evaluate(
	brushA : Brush,
	brushB : Brush,
	operation : CSGOperation,
	target = null : Brush | Mesh
) : Brush | Mesh

Performs the given operation on brushA with brushB. If no target is provided then a new Brush will be created with the new geometry. Otherwise the provided Brush will be modified in place and geometry disposed or marked for update as needed.

.evaluateHierarchy

evaluateHierarchy(
  root: Opertation,
  target = new Brush : Brush | Mesh
) : Brush | Mesh

The method gets as parameters a root, an Operation mesh and a target if it is provided, otherwise, a new Brush will be created. First sets the updateMatrixWolrd of the root to true then calls the traverse function with the root parameter to evaluate the mesh and its children.

evaluate( brush, child, child.operation );

In this case, the arguments passed to evaluate is the root as brushA, the child as brushB and the child.operation as the operation to apply to the mesh.

OperationDebugData

This class is used in the constructor of the Evaluator class. When the Evaluator is defined the constructor creates a debug property of type OperationDebugData and it is used to set the debug context, that is addEdge and addIntersectionTriangles to, for example, an EdgesHelper or a TriangleHelper.

.enabled

enabled = false : Boolean

Whether to collect the debug data during CSG operations which has a performance a memory cost.

.intersectionEdges

intersectionEdges = [] : Line3

A list of edges formed by intersecting triangles during the CSG process.

GridMaterial

extends THREE.MeshPhongMaterial

A material with the same interface as THREE.MeshPhongMaterial. It adds a stylized grid on the mesh for more easily visualizing mesh topology and measurements.

.enableGrid

enableGrid = true : Boolean

Sets the visibility of the grid on the mesh.

HalfEdgeMap

TODO

constructor

constructor( geometry : BufferGeometry = null )

.getSiblingTriangleIndex

getSiblingTriangleIndex( triIndex : Number, edgeIndex : 0 | 1 | 2 ) : Number

.getSiblingEdgeIndex

getSiblingEdgeIndex( triIndex : Number, edgeIndex : 0 | 1 | 2 ) : Number

.updateFrom

updateFrom( geometry : BufferGeometry ) : void

PointsHelper

extends THREE.InstancedMesh

Helper class for generating spheres to display.

.setPoints

setPoints( points : Vector3[] ) : void;

Sets the points, passed as Vector3, and visualizes them as spheres.

EdgesHelper

extends THREE.LineSegments

Helper class for generating a line to display the provided edges.

.setEdges

setEdges( edges : Line3[] ) : void

Sets the list of lines to be visualized.

HalfEdgeMapHelper

extends EdgesHelper

This is a helper class that takes the HalfEdgeMap object and visualizes the connectivity between triangles.

.setHalfEdges

setHalfEdges( geometry : Geometry, halfEdges : HalfEdgeMap ) : void

Sets the half edge map to visualize along with the associated geometry.

TriangleSetHelper

extends THREE.Group

Helper class for displaying a set of triangles. In the Simple CSG example is possible to enable/disable the visibility of the triangles helper via displayTriangleIntersections checkbox.

The helper is composed of two meshes, one is a mesh with a MeshPhongMaterial and the other is a mesh with a LineBasicMaterial.

.setTriangles

setTriangles( triangles:  Triangle[] ) : void

Sets the geometry of the mesh and the line with the position of the triangles passed as a parameter of the method.

Functions

computeMeshVolume

computeMeshVolume( mesh : Mesh | BufferGeometry ) : Number

Computes the volume of the given mesh in world space. The world matrix is expected to be updated before calling this function.

Gotchas

  • All geometry are expected to have all attributes being used and of the same type.
  • Geometry on a Brush should be unique and not be modified after being set.
  • All geometry must be two-manifold - or water tight with no triangle interpenetration.
  • CSG results use Geometry.drawRange to help maintain performance which can cause three.js exporters to fail to export the geometry correctly. It is necessary to convert the geometry to remove the draw range before exporting.

References

More Repositories

1

three-mesh-bvh

A BVH implementation to speed up raycasting and enable spatial queries against three.js meshes.
JavaScript
1,715
star
2

three-gpu-pathtracer

Path tracing renderer and utilities for three.js built on top of three-mesh-bvh.
JavaScript
934
star
3

threejs-sandbox

Set of experiments and extensions to THREE.js.
Roff
522
star
4

urdf-loaders

URDF Loaders for Unity and THREE.js with example ATHLETE URDF Files open sourced from NASA JPL
JavaScript
290
star
5

unity-dithered-transparency-shader

Unity material and shader for applying clipped, dithered transparency
ShaderLab
252
star
6

closed-chain-ik-js

A generalized inverse kinematics solver that supports closed chains for parallel kinematics systems, dynamic reconfiguration, and arbitrary joint configuration based on damped least squares error minimization techniques
JavaScript
109
star
7

source-engine-model-loader

Three.js loader for parsing Valve's Source Engine models
JavaScript
60
star
8

unity-clip-shader

Unity shader and scripts for rendering solid clipped geometry
C#
41
star
9

webgl-gpu-power-estimation

Utility for estimating the power of the GPU in the browser using WebGL debug parameters.
JavaScript
37
star
10

collaborative-code-editor

Collaborative code editor using Ace Editor, Code-Mirror, and ShareDB
HTML
32
star
11

unity-custom-shadow-experiments

A few custom shadow implementation experiments within Unity
GLSL
26
star
12

js-framerate-optimizer

Library for tracking and iteratively improving page framerate over time
JavaScript
26
star
13

unity-rendering-investigation

Investigation into different Unity rendering approaches with an eye on performance
C#
25
star
14

threejs-octree

A rough octree implementation to support frustum culling and raycasts in complex THREE.js scenes
JavaScript
25
star
15

webgl-shader-editor

Realtime editor for creating webgl shaders
HTML
23
star
16

xacro-parser

Utility for parsing and converting ROS Xacro files in Javascript.
JavaScript
20
star
17

nasa-urdf-robots

Pre-built URDF files from the open source Robonaut 2 and Valkyrie projects from JSC
HTML
19
star
18

coordinate-frame-converter

A Unity utility for simply converting between different coordinate frames.
C#
19
star
19

unity-wireframe-shader

Unity wireframe material using Geometry Shaders
HLSL
19
star
20

3d-demo-data

Set of gltf models to load in online demos and examples
17
star
21

webgl-precision

Webpage for computing and displaying a devices float and int precision for vertex and fragment shaders.
JavaScript
14
star
22

threading-js

Wrapper for Web Workers for easily running a function from the client without serving the worker a script
JavaScript
14
star
23

threejs-model-loader

THREE.js Model Loader for delegating to the appropriate geometry loader and associated Web Component
JavaScript
13
star
24

webxr-sandbox

Set of experiments and extensions for WebXR with Three.js.
JavaScript
11
star
25

vscode-urdf-preview

VSCode extension for viewing and testing a URDF file
JavaScript
9
star
26

three-sketches

JavaScript
8
star
27

unity-bezier-curve-shader

Unity experiment using geometry, domain, and hull shaders to render bezier curves
GLSL
8
star
28

unity-vector-extensions

Vector extensions to add hlsl-like functionality
C#
6
star
29

webgl-gpu-power-estimation-data

JavaScript
6
star
30

js-struct-data-view

Set of functions used to read and write object data to and from an ArrayBuffer
JavaScript
5
star
31

unity-fragment-sorted-transparency

Visually correct fragment sorted transparency for Unity
ShaderLab
5
star
32

urdf-editor

Text editor for viewing and modifying URDF models.
4
star
33

collada-exporter-js

Collada / DAE Format exporter for THREE js geometry
JavaScript
4
star
34

ply-exporter-js

PLY geometry format exporter for THREE js
JavaScript
4
star
35

ldraw-parts-library

Upload of the LDraw parts library intended to be used for static file loading in github examples.
4
star
36

travel-photo-visualization

Processor and visualizer of EXIF data
HTML
4
star
37

three-transform-dirty-flag

Experimental extension for efficiently keeping matrices and bounds up to date.
JavaScript
3
star
38

ascension-game

2012 UCLA Final Unity Project
C#
3
star
39

react-polymer-component

A generic React.Component for wrapping Polymer Elements and binding events and property data between them
JavaScript
3
star
40

collada-archive-loader-js

THREE js loader for loading a zipped ZAE Collada file
JavaScript
3
star
41

subrip-video-layer-element

Element and player and for displaying and playing a video with SRT subtitles
JavaScript
3
star
42

client-side-zip-server

Intercepting fetch requests and serving zip file data from a ServiceWorker.
JavaScript
3
star
43

plateau-3d-tiles-data

3D Tiles from the Japanese PLATEAU open data set.
2
star
44

urdf-exporter-js

Utility for exporting THREE.js object trees as a URDF file
JavaScript
2
star
45

convert-three-examples-to-imports

Script for converting the javascript and html files in the examples folder of the THREE.js to use es6 imports
JavaScript
2
star
46

pint-unit-investigation

Basic scripts to investigate the available data that can be extracted from Pint
Python
2
star
47

sharedb-builds

Prebuilt versions of the ShareDB Client and OT Types
JavaScript
2
star
48

scriptable-three-renderer

Investigating new options for making the WebGLRenderer more customize-able.
JavaScript
2
star
49

animated-svg-path-element

Polymer element that animates the drawing of SVG paths
JavaScript
2
star
50

image-downloader-chrome-extension

Chrome Extension originally written in 2013 to download sets of images from online albums
JavaScript
1
star
51

scientific-javascript

A proof of concept project that adds a unit notation to Javascript using Sweet.js
JavaScript
1
star
52

source-engine-model-loader-models

Repo of demo models to demo source-engine-model-loader project.
1
star
53

triangle-net-debug

Unity set up for debugging triangulation issues within Triangle.Net
C#
1
star
54

react-reparenting-investigation

An investigation into the performance of reparenting dom elements, the impact of repainting and layout, and how to mitigate the problems in React.
JavaScript
1
star
55

curiosity_mars_rover-mirror

Python
1
star
56

js-async-utilities

Set of utility classes to enable easy Coroutines, Debouncing, and Animation
JavaScript
1
star
57

gkjohnson

1
star
58

gkjohnson.github.io

Personal Website
HTML
1
star
59

dynamic-import-test

JavaScript
1
star
60

index-html-webpack-example

Example config for building a full index.html client app with Webpack
HTML
1
star
61

time-logger-js

Utility library for tracking and tallying function calls in browsers, Node, or Arangodb's Foxx
JavaScript
1
star
62

rust-sandbox

Playground for learning more about Rust.
1
star