three-edge-projection

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/Perseverance.glb';

// a drawing on light paper
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 );

// lift the model above the ground, where the drawing goes
model.position.set( 0, 1, - 0.3 );
model.updateMatrixWorld( true );
scene.add( model );

camera.position.set( 4, 4, 5.6 );
controls.target.set( 0, 1.2, 0 );
controls.update();

renderer.setAnimationLoop( () => renderer.render( scene, camera ) );

// the model's edges seen from above, flattened onto the ground
const result = await new ProjectionGenerator( renderer ).generate( model, { onProgress: () => {} } );
scene.add( new LineSegments( result.visibleEdges.getLineGeometry(), new LineBasicMaterial( { color: 0x030303 } ) ) );