three-svg-renderer
An experimental three.js SVG renderer written in Typescript to render 3D scenes as Vector Graphics. The renderer analyzes the geometry in the scene, builds a viewmap of the mesh edges and computes the visible and hidden contours to draw.
Demo
Install
npm i three-svg-renderer
Documentation
Documentation is still in progress.
How to use
const scene = new Scene();
const camera = new PerspectiveCamera();
// Gather meshes from the scene and setup SVGMesh
const meshes = new Array<SVGMesh>();
scene.traverse(obj => {
(obj as Mesh).isMesh && meshes.push(new SVGMesh(obj as Mesh));
});
// Setup the svg renderer and add pass to it
const renderer = new SVGRenderer();
// This pass will draw fills for meshes using the three.js material color
const fillPass = new FillPass();
// This pass will draw visible contours of meshes on top of fills
// using black color and solid line of width 1
const visibleContourPass = new VisibleContourPass({
color: "#000000",
width: 1
});
// This pass will draw hidden contours on top of visible and fills
// using red color, dash line of width 1
const hiddenContourPass = new HiddenContourPass({
color: "#FF0000",
width: 1,
dasharray: "2,2"
});
renderer.addPass(fillPass);
renderer.addPass(visibleContourPass);
renderer.addPass(hiddenContourPass);
// Get the SVG
renderer.generateSVG(meshes, camera, {w: 1000, h:1000})
.then((svg) => {
console.log(svg);
});
References
Papers
- Pierre Bénard, Aaron Hertzmann. Line drawings from 3D models: a tutorial. Foundations and Trends in Computer Graphics and Vision, Now Publishers, 2019, 11 (1-2), pp.159. https://hal.inria.fr/hal-02189483
- Elmar Eisemann, Holger Winnenmöller, John C. Hart, David Salesin. Stylized Vector Art from 3D Models with Region Support. Computer Graphics Forum, Wiley, 2008, Special Issue: Proceedings of the 19th Eurographics Symposium on Rendering 2008, 27 (4), pp.1199–1207. https://hal.inria.fr/inria-00345295
- Stéphane Grabli, Emmanuel Turquin, Frédo Durand, François X. Sillion. Programmable Style for NPR Line Drawing. Rendering Techniques 2004 (Eurographics Symposium on Rendering), 2004, Norrköping, Sweden. https://hal.inria.fr/inria-00510169
Objects
- Thanks to Blender for the character model Vincent [link]