Using Rhinoceros for creating interactive WebGL visualizations

From Verge3D Wiki
Jump to navigationJump to search
Rhino users are in good company

Rhinoceros (Rhino 3D) is a popular CAD software used for product/industrial design (automotive, jewelry etc.) and architecture. This article shows you how to use this program to create interactive 3D web visualizations that work in the browser.

Pipeline #1 — using glTF 2.0 format

Starting from version 8, Rhino does support exporting to glTF 2.0 format natively. Simply use File > Export Selected or Save As, then choose glTF Text File (*.gltf). After export is done, use the Verge3D toolkit to render glTF 2.0 in the browser (this will work with either of Verge3D flavors).

When creating a new project using Verge3D App Manager, select Blank Scene. This way your project folder won't be cluttered with assets you don't really need.

Good news is that the camera controls are setup automatically for you. However, lighting is a different story. Make sure you load an environment map and/or add a light source so that your model becomes visible. See the following Puzzles snippet as an example:

For advanced interactive scenarios please refer to the Puzzles docs.

Pipeline #2 — using intermediate modelling software

Verge3D offers an outstanding level of integration with Blender, 3ds Max, and Maya. It allows you to setup all the materials/lighting/cameras/animations using either of those tools and quickly preview in the web environment. This method is more robust even it requires transferring your 3dm asset into one of the said modelling software.

To transfer your models from Rhino to Blender you can use the OBJ format, while for 3ds Max / Maya the FBX format would be a more straightforward approach.

Once you have your Rhino-based asset in Blender, 3ds Max, or Maya, you can employ the standard Verge3D pipeline to bring your visuals to the web. Check out a respective article for additional info involving the 3D tool of your choice:

Verge3D for Blender — Beginner's Guide

Verge3D for 3ds Max — Beginner's Guide

Verge3D for Maya — Beginner's Guide

In case you are not familiar with these modelling software tools, it's worth spending some time to learn one of them. First, Verge3D does not require you to be a guru in polygonal 3D modelling and second, contrary to pure glTF-based approach, you will get really powerful tools at your disposal. For example, there are plenty of material libraries optimized for interactive browser-based visualization, including packs aimed at the typical Rhino user: machinery, construction, and jewelry.

Manual Meshing

Rhino uses NURBS modeling, while for the WebGL rendering you will need polygons. For practical workflows this means you should perform the tessellation (meshing) manually in Rhino before exporting to glTF or transferring the models to Blender/3ds Max/Maya.

This way you can preview the results in Rhino and balance the quality and the amount of polygons. There are 2 commands that can be used to perform the meshing: QuadRemesh for better control/quality and Mesh to obtain the results quicker.

Got questions?

In general, creating WebGL-based visuals from Rhino assets is not an overly complicated task. The most important thing you should care about is keeping the poly count on a reasonable level. As for materials/lighting etc., Verge3D got you covered.

If you have any issues, feel free to request help on the community forums.