June 27, 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 Posts

July 11, 2019

New Autodesk Forge Viewer 7.0 is Now Available

Autodesk Forge is our collection of Application Program Interfaces (APIs), documentation, sample code, and a community of cust

Read More

July 10, 2019

Look for exact property value and more

When using the search() function of the Viewer, you can only look for strings that at least partially match a given value.

Read More

July 9, 2019

Webpack and three.js in forge applications

In the newer versions of forge viewers( v6 and above) three.js is included in the forge viwer js file itself.

Read More