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

June 27, 2018

(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...

na

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

na

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

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.navigation.toOrthographic();
viewer.setViewCube('top');
viewer.fitToView();
viewer.impl.setPostProcessParameter("style", "edging");
viewer.impl.setPostProcessParameter("brightness",1.0);

 

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

viewer.setViewCube('top-left-front');

which looks like this...

na

And that's it.

 

Tips

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...

Posts by author

Michael Beale
Autodesk

Michael Beale works for Autodesk Cloud Rendering team and focuses on client/server mashups that make the web-browser appear super-powered.