Takes the WebGPURenderer instance used to run compute kernels.
import { AmbientLight, Color, DirectionalLight, LineBasicMaterial, LineSegments } from 'three/webgpu';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
import { ProjectionGenerator } from 'three-edge-projection/webgpu';
// scene, camera and renderer are initialized here
const URL = 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/nasa-m2020/MER_static.glb';
scene.background = new Color( 0xeeeeee );
const light = new DirectionalLight( 0xffffff, 3.5 );
light.position.set( 1, 2, 3 );
scene.add( light, new AmbientLight( 0xb0bec5, 0.5 ) );
const { scene: model } = await new GLTFLoader()
.setDRACOLoader( new DRACOLoader() )
.loadAsync( URL );
model.position.y = 0.8;
model.updateMatrixWorld( true );
scene.add( model );
camera.position.set( 2.8, 2.8, 4.2 );
controls.target.set( 0, 1, 0 );
controls.update();
renderer.setAnimationLoop( () => renderer.render( scene, camera ) );
const result = await new ProjectionGenerator( renderer ).generate( model, { onProgress: () => {} } );
scene.add( new LineSegments( result.visibleEdges.getLineGeometry(), new LineBasicMaterial( { color: 0x030303 } ) ) );On this page
Properties
angleThreshold: number = 50
The threshold angle in degrees at which edges are generated.
batchSize: number = 100000
The number of edges to process in one compute kernel pass. Larger values can process faster but may cause internal buffers to overflow, resulting in extra kernel executions, taking more time.
includeIntersectionEdges: boolean = true
Whether to generate edges representing the intersections between triangles.
iterationTime: number = 300
How long to spend generating edges.
parallelJobs: number = 3
How many compute jobs to perform in parallel.
Methods
new ProjectionGenerator( renderer: WebGPURenderer )async generate(
scene: Object3D | BufferGeometry | Array<Object3D>,
options?: {
onProgress?: ( percent: number, message: string ) => void,
signal?: AbortSignal
}
): Promise<ProjectionResult>Asynchronously generate the edge geometry result.