27 Jun 2018

How to get '2D Line Style View' from 3D models

(UPDATE: added references and speedup tips)

I was working with a customer who was using a 3D model for layouts in Forge Viewer, but wanting the 'look-and-feel' of a 2D drawing.

Here is what the 3D file normally looks like...


And here is the 2D line style result...


Let's take quick look at how I got there.  I took the following steps:


  1. change background color to white
  2. change to Orthographic mode
  3. change to top view
  4. fit to view
  5. line-style effect (see Reference: edging, cel, graphite, pencil )
  6. image brightness = 1


viewer.setBackgroundColor(255, 255, 255, 255, 255, 255);
viewer.impl.setPostProcessParameter("style", "edging");


For bonus points, I can also create that 'isometric look' too, with a single line, like this...


which looks like this...


And that's it.



For tips on speeding up the rendering performance of post-processing:

  • Turn off Ambient Shadows
  • Turn off FXAA (Anti Aliasing)
  • Turn off ghosting

Oddly enough, these each make quite a noticeable difference in performance. Turning off anti-aliasing reduces the line-thickness and the dithering artifacts on the edges.

To overcome the aliasing artifacts, use the getscreenshot() method and take a very high resolution canvas snapshot.

Source Code

You can find a complete example on GitHub here: https://github.com/wallabyway/forge-pdf-report

Feel free to add any issues you find to the Github issues repo.

Don't forget to follow me on twitter...

Related Article

Posted By

Michael Beale

Michael Beale

Michael Beale is a senior software engineer at Autodesk, where he has been a globe-trotting technical advocate for Forge. Michael focuses on connecting Autodesk cloud data and Autodesk Forge APIs to the browser. He’s also contributed to Autodesk Homestyler, the Forge Large Model Viewer (LMV), Autodesk Prooflab, Stereo-Panorama service with webVR and recently 3D formats, such as glTF and 3D-Tiles-Next. Twitter:...