# Draw Modes

## Overview

The HOOPS Web Viewer component supports several different ways to draw the scene called “Draw Modes”. Only one of them can be active at a given time. To activate a specific draw mode call the setDrawMode() function on the view object:

        hwv.view.setDrawMode(Communicator.DrawMode.Shaded);

The following draw modes are currently supported:

- Gooch
- HiddenLine
- Shaded
- Toon
- Wireframe
- WireframeOnShaded
- XRay

Visit the DrawMode entry in our API Reference Manual for more details.

Selecting one of those draw modes renders the scene with either faces and lines turned on, faces only or lines only. It is an easy way to turn off visibility of faces and lines for the whole model. Alternatively you can also use the functions view.setLineVisibility() and view.setFaceVisibility() to control this behavior. The code below turns on Wireframe mode meaning that only the lines in the model are displayed:

        hwv.view.setDrawMode(Communicator.DrawMode.Wireframe);

Wireframe draw mode on

## Hidden line

Hidden line removal (HLR) involves displaying only visible, unobscured lines. Faces of visible geometry will be used to obscure lines the lines in the model or draw them in a dimmed style but the faces themselves will not be drawn. Typically, HLR is used to provide a result suitable for hardcopy or screenshots since having shaded facets can clutter the scene. However, sometimes end-users are also interested in seeing a model rendered with hidden line mode on the screen.

        hwv.view.setDrawMode(Communicator.DrawMode.HiddenLine);

Hidden line mode on

There are various settings for hidden line mode that you can specify by retrieving and modifying the HiddenLineSettings object. For example, in order to make the obscured lines in the hidden line render invisible you would write the following code:

        var hiddenLineSettings = hwv.view.getHiddenLineSettings();
        hiddenLineSettings.setObscuredLineOpacity(0);
        hwv.view.setDrawMode(Communicator.DrawMode.HiddenLine);

Hidden line mode on w/ obscured lines

## Hard edge detection

A hard edge detection algorithm is enabled by default. This new algorithm will cause hidden line mode to look different than previous versions. A new set of functions have been added to the View class to control this new behavior.

- setHardEdgesEnabled(), getHardEdgesEnabled()
- setHardEdgeColor(), getHardEdgeColor()
- setHardEdgeOpacity(), getHardEdgeOpacity()
- setHardEdgeThreshold(), getHardEdgeThreshold()
- setHardEdgeThresholdRampWidth(), getHardEdgeThresholdRampWidth()

Default - hard edges on:

Hard edges off

## X-ray

The purpose of X-ray mode is to make it easy to identify selected elements in a complex scene by turning the whole model except for the selected elements transparent. In the below example the selected part is inside the model and would normally just be displayed as an outline. With X-ray mode however the selected part is fully displayed without completely hiding the rest of the model.

X-ray mode on

Below are the API functions to control various aspects of X-ray mode:

- view.setXRayColor()
- view.setXRayOpacity()
- view.setXRayTransparencyMode()

As an example, let’s change the opacity of the unselected lines to fully opaque:

        hwv.view.setXRayOpacity(1, Communicator.ElementType.Lines);

X-ray mode on with opaque unselected lines

## Per Node Draw Mode Overrides

The Per-Node Draw Mode Overrides feature allows you to assign custom draw modes to individual nodes within a model. Nodes with overridden draw modes render using their assigned setting, while all other nodes continue to use the view’s default draw mode.

This functionality introduces two API methods:

- `setNodesDrawModes` — set draw mode overrides for specific nodes
- `getNodesDrawMode` — retrieve existing node draw mode overrides

### Usage

Use `setNodesDrawModes` to define draw mode overrides for particular nodes, and `getNodesDrawMode` to query their current settings. Together, these methods provide precise control over the visual representation of individual model components.

setNodesDrawModes

The `setNodesDrawModes` function accepts a mapping of node IDs to draw modes. Each listed node will render using the specified mode. Only leaf nodes that are attached to a body can have an override; if a non-leaf node is specified, the override is automatically propagated to all descendant nodes attached to a body.

    const nodeId = 42;
    const drawMode = DrawMode.Wireframe;
    const updateDrawModes: Record<NodeId, NodeDrawMode> = {};
    updateDrawModes[nodeId] = drawMode;
    webViewer.model.setNodesDrawModes(updateDrawModes);

getNodesDrawMode

The `getNodesDrawMode` function accepts a list of node IDs and returns a record of node IDs mapped to their corresponding draw modes. Nodes without a body attachment are excluded from the returned results.

    const nodeIds = [42, 87];
    const drawModes = webViewer.model.getNodesDrawMode(nodeIds);
    // drawModes = {42: DrawMode.Wireframe, 87: NoOverrideDrawMode}

### Support and Constraints

When using these methods, the following constraints apply:

> - Only nodes attached to a body are eligible for draw mode overrides. If a node has no body, the override will not take effect.
> - Using unsupported draw modes results in undefined behavior
> - Supported view draw modes: `Wireframe`, `Shaded`, `WireframeOnShaded`
> - Supported node draw modes: `Wireframe`, `Shaded`, `WireframeOnShaded`, `NoOverrideDrawMode`

A single node rendered with an overridden wireframe mode while the rest of the model renders default

Conversation saved
HOOPSY BETA

### Hello! I'm HOOPSY

Your Docs generative AI assistant. Ask me anything about HOOPS Visualize Web or choose a sample question below to start a conversation:

What is HOOPS Visualize Web?
What are the latest release notes for HOOPS Visualize Web?
How do I start evaluating HOOPS Visualize Web?
How do I write my first sample application?
How can I get assistance?

HOOPSY may store conversations according to OpenAI's policy. Responses may not always be accurate.

HOOPSY is thinking...