WebGL is the new 3D viewer for all users as of 4/2/2024 and will now be the default viewer accessible by the “3D” tab. The “old” 3D viewer is no longer in use.

TABLE OF CONTENTS

WebGL Basics

The 3D viewer (sometimes called WebGL) is accessed from the main 3D tab.

The 3D shows the space in perspective. A user can move around within the 3D model to view any wall or angle at different distances, and it adds shadows and texture to the design.

Perspective views are not used for install. They are presentational drawings, a sales tool to help better communicate with a customer as they are generally easier for customers to see and understand. The 3D views automatically update as changes are made to the design in Plan or Elevation views.

When first using 3D view in a design, it may seem a little slow, but after the initial load it will reload and render with design changes fairly quickly.

WebGL Navigation

Click and hold the various mouse buttons to navigate the view through a variety of functions. The user can the keyboard pad to achieve similar navigation, although a mouse is highly recommended as it is much more efficient and user-friendly.

To Zoom, scroll the mouse wheel in and out. The zoom can be targeted depending where the cursor is located.

To Pan, right click and hold, moving the mouse to the left and right. Or hold CTRL key and a left click.

To Orbit, single left click and hold, moving the mouse to the left and right.

To Center a section of the design in the viewer, use a double left click.

When getting familiar with WebGL, slow or intentional movements are best as the tool can be sensitive! A mouse is highly recommended.

Use the buttons at the bottom middle of the screen to cycle through a variety of pre-determined viewpoints.

	Press the Back Button to see the previous viewpoint.
	Press the Play Button to start a moving tour which shows the default viewpoints of the room. Once started, the Play button becomes a Pause button. Use the Pause button to stop the tour.
	Press the Forward Button to see the next viewpoint.

	Press the Reset Button to have the room shift back to the default view back to the center of the screen.
	The Straighten Up Button will straighten the room up to be level again.

Parts such as wall beds, pull outs, par accessories, doors and drawers can be opened/closed or animated with a single left click.

Settings

There are various settings for the WebGL viewer that can be accessed from the gear icon in the lower right corner of the screen. The Settings will open on the left.

Click the X or Settings button again to turn the side bar off.

The sliders (Ambient, Direct, Room, Wall Lights) help control the overall lighting in the design (not purchased LED lighting). If making adjustments, it is recommended to focus on Ambient, which is the overall room brightness. The others may cause unwanted highlights or dark spots.

If wanting to reset the lights to the defaults, click the “Reset Light” button.

Below the sliders, there is the option to turn on Outline or Xray modes:

OUTLINE	XRAY

OUTLINE

XRAY

Outline will put a literal outline on all parts to make them defined. This is great for showing seams in finishes that are more difficult to see.

Once turned on, the Thickness slider changes thickness of outline.

Xray will make the entire design semi-transparent. This means you can more clearly see drilling patterns, drawer boxes, hinges, VBs, etc.

There are also advanced settings, although it is not recommended to adjust these as changes made here may no longer accurately represent the textures or finishes in the designs.

Shadows includes or excludes shadows made by components, parts.
Reflections includes or excludes reflections on reflective surfaces (if off, can negatively impact rendering quality)
Room/Wall Lights will change the warmth or tone of the room (will change appearance of different finishes) - Can reset after making changes to go back to the default

In the Options section of the Main Menu, users can edit the Print Quality. This impacts the quality of the visuals when printing the 3D view to a PDF (can take longer to generate if set to high).

Ribbon Toolbar

As with all other tabs, the 3D tab has a ribbon toolbar with settings and functionality specific to the viewer. Find an explanation of each option or function below.

Walls	Adjust the wall color to better match the customer’s space. Autohide dictates whether the walls will “hide” depending on the angle. Having this disabled will likely obstruct the view of the design. Opacity will change the visibility of the walls - All the way to the right will make the walls disappear.
Parts	Show certain parts or features by enabling (checked) or disabling (uncheck) the boxes shown. Hide Sliding Doors will hide any CC-provided sliding doors in a design so that it’s easier to view behind them. Hide Hinged Doors will turn any component doors on or off. While this does make it easier to see what is behind the doors, it is recommended to keep this turned off (unchecked) most of the time. Always leave Show Holes checked! Turning this off can be misleading to the client. Show Drilling Zones are a function of engineer keys. Drilling zones appear as a green box on the side of partition, and this function will turn that on/off. High Quality will render the scene smoother than if turned off. Uses more memory to load scene, can turn off. Will remember setting between designs/projects. Note: If unchecked, that is how it will print or email.
Floor	This is where you can adjust the floor finish to better match the customer’s flooring.
3D	Reload 3D Viewer is helpful if opening WebGL and something just looks “off” (if not, check settings).
Snap Shot	Selecting an existing option from the drop down menu will jump to one of the pre-existing views (same as the 3D views found in “Images” tab). These are listed clockwise around the room. Users can create custom snap shots by zoom or centering the desired view and selecting “Save Viewpoint”. This will also add an image in the “Images” tab that can be emailed to the client.
Export	Can export the viewer to a GLB file, which is a standardized file format used to share 3D data, AKA can share into a more sophisticated 3D rendering program.

Sharing WebGL

The Web GL 3D view does not require a 3D viewer to be downloaded when sharing with customers as it allows customers with PCs computers, Mac computers, cell phones or tablets to view the design in 3D without having to download a separate program. This makes WebGL a desirable method of sharing plans using the Share function.

WebGL Video Series [External Links]

There is a series of videos related to using and navigating the 3D user. These are located in CC360, so users must be logged in to view:

RELATED PAGES:

ClosetCADPro User Manual

3D Viewer (WebGL)