V3 Changelog

Non-Photorealistic (NPR) Rendering Styles

Several styles of non-photorealistic rendering (NPR) are now available.

NPR is often used for artistic expression or as a way to suggest that a view is to be interpreted as a work in progress.

This is done as a post process. For desktops and laptops the cost is negligible; for mobile devices the cost is some drop in frame rate, due to a lack of multiple-render target support on these devices.

API Reference

preloadPostProcessStyle();        //OPTIONAL: loads all textures needed, for all styles.
preloadPostProcessStyle(string);  //OPTIONAL: use style string to initialize textures for a single style

Optional:

The “graphite” and “pencil” styles require textures, so there may be a slight delay upon first launch while textures are cached. You can preload all textures or instead pass an individual style string to initialize only a single style. (If not called, the first call to setPostProcessParameter which sets a style will load the textures.)

setPostProcessParameter(string, value);  //string options and value ranges are described in the reference below

All NPR parameters are set with a combination of string and value. See additional descriptions below.

style

string options:

• “” (or “off”)
• “edging”
• “cel”
• “graphite”
• “pencil”

None (value = “” or “off”)	value = “edging”	value = “cel”	value = “graphite”	value = “pencil”

brightness

value range: -1.0 to 1.0 (default: 0.0)

Adjust the intensity of the effect.

contrast

value range: -1.0 to 1.0 (default: 0.0)

Adjust the variation between light and dark in the effect.

preserveColor

boolean: true|false (default: false)

Enable to scale (normalize) color values or disable to clamp colors.

Example:

When false, color (4.0,1.0,0.5) becomes (1.0,1.0,0.5)

When true, color (4.0,1.0,0.5) becomes (1.0,0.25,0.125) – each element is divided by the maximum of 4.0

grayscale

boolean: true|false (default: false)

Enable to desaturate the image after the operations above but before further processing.

Note that this will have no visible effect for the “graphite” style.

edges

boolean: true|false (default: true)

Enable to show (screen-based) edges. (Note that the reflected image does not show edges)

The edges parameter sets all edges on or off. There are also three individual toggles for specific edge types:

idEdges

boolean: true|false (default: true)

Enable to show edges where objects with separate IDs or the background meet. Internal edges to these objects are not displayed.

normalEdges

boolean: true|false (default: true)

Enable to show edges where the normals differ by “enough,” so that sharp edges are shown.

depthEdges

boolean: true|false (default: true)

Enable to show edges where the depths differ by “enough,” so that edges between distant objects are shown. This catches cases where the planes in a single object are parallel, so that the ID and normals are the same.

levels (style “cel” only)

value range: 2.0 to 256.0 (default: 6.0)

Sets the number of levels of posterization. Typical range: 2.0 - 8.0.

Note that fractional values are valid, giving a smooth transition from one to another level.

repeats (styles “graphite” and “pencil” only)

value range: 0.001 to 100.0 (default: 3.0)

Sets the number of times the texture patterns used in these styles is repeated in the view, top to bottom. Typical range: 1.0 - 5.0.

Increasing this number makes the pattern smaller and more likely to be detected as repeating.

rotation (styles “graphite” and “pencil” only)

value range: 0.0 to 1.0 (default: 0.0)

Sets the clockwise rotation of the texture patterns used in these styles. 0.0 is no rotation, 1.0 is 180 degrees.

The default patterns have a lower-left to upper-right orientation.

Example Code

// Optional call, do this some time before using a style so that the required textures are loaded before the style is used.
// Not doing so may give a bad render or two while the textures are being loaded. In particular, Graphite will look black.
// This loads all textures needed, for all styles. You can instead pass an individual style string to initialize only it.
// Currently only the graphite and pencil styles require textures. If not called, the first call to setPostProcessParameter
// which sets a style will load the textures.
viewer.impl.preloadPostProcessStyle();

// Turn on a style. Styles are passed in as strings, for the "value" parameter:
// "" - turn off the style; back to normal, no post-process is done.
// "edging" - turn on image-based edging system
// "cel" - cartoon ("posterized") style, with edges
// "graphite" - black pencil style
// "pencil" - colored pencil and paper
var value = "graphite";
viewer.impl.setPostProcessParameter( "style", value );

// make the image have no edges:
viewer.impl.setPostProcessParameter( "edges", false);

// turn up brightness a bit:
viewer.impl.setPostProcessParameter( "brightness", 0.4);

API Reference

disableHighlight(boolean); //true to disable highlight, false to show highlight (defaults to false)
disableSelection(boolean); //true to disable selection, false to allow selection (defaults to false)

Example Code

Toggle highlight and selection

// Disable highlight when cursor hovers over an object
disableHighlight(true);

// Enable highlight when cursor hovers over an object
disableHighlight(false);

// Disable selection when clicking an object in the view or Model Browser
disableSelection(true);

// Enable selection when clicking an object in the view or Model Browser
disableSelection(false);

Model Browser look and feel

The Model Browser has been improved for more consistent appearance and behavior. Object visibility is now explicitly indicated by the eye icon to the right of each element. Object selection behavior has changed.

• Toggle visibility by clicking the eye icon to the right of the element
• Left-click a listed name to select an element and automatically focus the view on it
• Right-click a selected object to bring up the full context menu (Isolate, Hide selected, Show all objects, Focus, Clear selection)

Before	Now

Measure Angle tool

Measurement of angles will now require selecting 3 points instead of choosing 2 lines.

Animated example:

Viewer version display

Viewer version is now displayed at the very top of viewer3D.min.js

URL	https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.min.js?v=3.2
Content

Camera transition event

// Hook the event
viewer.addEventListener(Autodesk.Viewing.CAMERA_TRANSITION_COMPLETED, function(){
    console.log('camera is no longer moving');
});

// Trigger an action that will move the camera and fire the event
viewer.fitToView();

Transition types

The event will fire at the end of these operations:

• Go Home transition
• Focus / Fit to View transition (example above)
• Restore State transition
• Named Views transition
• Any other camera transitions

New tool method: getPriority()

Tools that are registered into the ToolController will now be able to specify their own priority. The priority is used by the ToolController to sort the tools in it. By default all tools have a priority value of 0.

// Default implementation
this.getPriority = function() {
   return 0;
};

The higher the numeric value returned, the higher priority on the tool stack. Tools with a higher priority have the opportunity to handle events first.

// Tool with high priority
function MyAwesomeTool() {
  Autodesk.Viewing.ToolInterface.call(this);
  this.names = ['my-awesome-tool'];

    this.getPriority = function() {
       return 1000; // Default is 0, higher numerical value results in higher priority.
    };
};

// Tool with default priority
function MyRegularTool() {
    Autodesk.Viewing.ToolInterface.call(this);
    this.names = ['my-regular-tool'];
};

// Register them to the Viewer instance (no matter the order)
viewer.toolController.registerTool(new MyAwesomeTool());
viewer.toolController.registerTool(new MyRegularTool());

// Activate tools
viewer.toolController.activateTool('my-awesome-tool'); // MyAwesomeTool gets all events because it is being activated
viewer.toolController.activateTool('my-regular-tool'); // MyAwesomeTool STILL gets all events first because it has the highest priority.

Show More

Semantic Versioning

Starting now, current and future versions of the Viewer will be following the Semantic Versioning convention.

Breaking Changes

A few API methods have been relocated:

Model Browser

In our previous release, the Model Browser internals were changed to reduce the memory consumption, which was a big issue with BIM models.

In this occasion, the Model Browser is getting some behavior improvements.

Tree-Node Selection

Clicking to select a node in the Model Browser will now trigger a selection and a focus operation on the model canvas.

Additionally, the selection will display on top of occluding objects.

Viewer Selection

To keep the experience consistent, the selection on the viewer will get reflected on the Model Browser.

The Model Browser will automatically scroll to the selected item.

Context Menu

Right clicking to open the Context Menu will no longer perform a selection action as part of the operation.

Same rule applies when clicking away to close the Context Menu.

Upcoming changes

The Model Browser will receive UI changes in the upcoming release.

Measure Tool Redesign

Accessing the measure tool is still done through a button on the toolbar

After clicking on the button, the toolbar will expand to reveal additional measuring tools

Measure simple distance

Click 2 points and get their distance.

For 2D models:

For 3D models:

Measure angle

Click 2 lines and get the angle between them.

For 2D models:

For 3D models:

Measure area

Define a closed area composed of line segments to get the total area within. Available only in 2D models.

Calibration

Is the document’s default measurement inaccurate? Then use the calibration tool to specify a known distance, and have all the other measurements performed on the document adjusted accordingly.

Settings

Accessing measurement unit type and precision is now done through the measure’s Settings panel

Multiple measurements

It is now possible to have more than one measurement on the screen at once!

Modify measurement

After a measurement has been performed, users are able to adjust it by dragging the blue knobs.