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

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

Related Posts