Visualization Guide: How to Make Your Models Look Right Online

intro

Geometry Preparation

Before working on materials or lighting, start with the foundation: geometry. Clean geometry results in predictable shading and more believable materials in the ShapeDiver viewer. Issues such as dense meshes, unwelded vertices, or small intersecting faces often become visible once the model is rendered online.

Meshes with Intention

Everything displayed in ShapeDiver is rendered as a mesh.

This means that, sooner or later, your geometry will be converted to meshes—either explicitly by you, or automatically by the system. There are two main ways to approach this, depending on your workflow and goals.

Option 1: Design freely, then convert to meshes

You can model using Breps or meshes and convert everything at the end using components such as MeshBrep. This approach is fast and flexible, but automatic conversions can produce uneven meshes, inconsistent shading, or unpredictable vertex normals—problems that usually appear only after materials and lighting are applied.

Option 2: Design meshes with intention

For visualisation-focused workflows, it is usually better to design with meshes in mind from the start rather than treating them as a final conversion step.

ShapeDiver provides dedicated tools to help you generate meshes directly, rather than converting them later. Those include:

• LoftMesh – creates meshes that follow polylines with clean topology

• MeshPatch – generates controlled mesh surfaces from boundary curves, including hole boundaries, inner curves.

Enabling Display → Preview Mesh Edges in Grasshopper allows you to quickly assess mesh density, triangulation patterns, and potential problem areas.

Welding and Vertex Normals

Once your mesh topology is under control, the next crucial step is to check the vertex normals. Vertex normals determine how light flows across a surface and directly affect how smooth or faceted a model appears to the viewer.

When vertices are welded, neighbouring faces share vertex normals. This creates smooth shading and continuous light transitions across the surface.

When vertices are unwelded, each face has its own normal. This results in sharp edges and visible faceting, which can look harsh or unintentional once lighting and materials are applied.

You can use Weld and Unweld Grasshopper components to control this difference.

Visual Artefacts

Very small geometry and overlapping faces can cause visible rendering artefacts, experienced as flickering or “glitching” surfaces. These issues are usually not material-related but are a result of geometric precision. To avoid this, ensure that your geometry is created with a sensible tolerance and that faces do not overlap or sit extremely close to one another. Cleaning up intersections and avoiding unnecessarily small details helps the renderer interpret surfaces correctly.

After uploading your model to ShapeDiver, enabling anti-aliasing in the viewer can further reduce edge flickering.

Finally, perfectly sharp corners often look unnatural in real-time rendering. Adding small fillets or softened edges can improve realism.

External Display

External display component allows you to add additional models to the ShapeDiver viewer without passing them through the Grasshopper definition, which can improve performance and simplify workflows.

Texture Mapping

Goal: Textures don’t stick automatically — mapping tells them where to go.

Even with clean geometry and good materials, a model will not look right unless textures are mapped correctly. Texture mapping defines how a 2D image is placed onto a 3D surface, controlling scale, orientation, and continuity. Without proper mapping, textures may appear stretched, misaligned, or inconsistent across surfaces.

What UV Mapping Is

Texture mapping relies on UV coordinates, which describe how a flat image is wrapped onto a three-dimensional object.

A useful way to think about UV mapping is like wrapping paper around an object. The object needs to be “unwrapped” into a flat layout so that the image knows exactly where to appear on the surface. If the unwrap is distorted or inconsistent, the texture will be distorted as well.

The Checker Ritual

Before applying any real materials, it is strongly recommended to start with a checker texture (example). It acts as a diagnostic tool and immediately reveals common mapping issues, such as: texture stretching, visible seams or incorrect texture scale.

If the checker pattern looks uniform and consistent across the geometry, the texture mapping is likely correct. If not, mapping should be adjusted before moving on to materials.

Native Texture Mapping

Some Grasshopper components generate texture coordinates during the geometry creation process. For example, Loft, Sweep, Ruled Surface, and some primitive object components generate texture coordinates that follow the shape of the geometry.

When working with mesh-based tools such as ShapeDiver LoftMesh and MeshPatch, UV coordinates are typically generated in a way that already suits visualisation workflows, and often require little or no adjustment.

Fixing Broken UVs

Automatic UV generation does not always produce usable results. Complex geometry, transformations, or conversions between Breps and meshes can lead to distorted or missing UVs.

In these cases, UVs need to be explicitly reassigned. The Human plugin provides texture-mapping components that can be used to define or override existing texture coordinates.

When defining or correcting UVs, different mapping patterns can be used depending on the geometry: Planar, Box, Surface, Cylindrical or Spherical. For greater control, the Human Plugin CustomMapping component lets you define custom mapping patterns tailored to specific geometries.

Transforming Textures Separately from Geometry

Textures can be adjusted without changing the geometry. Common texture transformations include: Move, Rotate, Scale. These can be combined with a Compound Transform component and applied using the Transform Texture UV component.

This component also supports randomising textures along the X and Y axes, which helps reduce visible repetition in patterned materials.

Materials

Even with clean geometry and correct texture mapping, a model will still look flat without properly defined materials.

It is important to remember that ShapeDiver materials are not fully visible in the Rhino viewport. The final appearance depends on the ShapeDiver renderer. After assigning materials, upload your model and review it directly in the ShapeDiver viewer.

Material Presets

The simplest way to improve your model’s appearance is to start with ShapeDiver Preset Material component. The material will be visible once you upload your model to ShapeDiver.

Custom Materials

ShapeDiver uses Physically Based Rendering (PBR) materials. A complete overview of this approach is out of the scope of our documentation, but you can find more information in our Viewer Help Center or here.

To apply a custom material, use the ShapeDiver glTF 2.0 Material component.

Materials are instructions for light, not just colours.

High-quality textures are widely available online. Common sources include:

• Polyhaven

• Poliigon

• textures.com

The quality of your materials depends heavily on the quality of your texture maps. Please keep in mind:

• Textures should be tileable (seamless), meaning they can be repeated without visible seams.
  You can test textures using tools such as: https://www.patterned.ai/seamless-checker
• Perfect surfaces often look artificial. Good textures include subtle imperfections such as colour variation, minor scratches, and uneven roughness. These details make materials feel more believable in real-time rendering.
• Textures should be optimised for web performance. Large images increase loading time and reduce responsiveness. Usually, 512x512 or 1024x1024 pixel sizes are more than enough. For best compatibility and efficiency, texture sizes should follow the “power of two” pixel rule: 8, 16, 32, 64, 128, 256, 512, 1024...

Viewer Setup

Even with correct geometry, mapping, and materials, the final look of your model depends heavily on the viewer configuration. Lighting and environment define mood, depth, and realism.

Environment (HDRI)

The most influential viewer setting is the environment. It controls:

• overall lighting mood

• reflections on materials

• ambient brightness and colour tone

Changing the HDRI alone can dramatically alter how a model looks. ShapeDiver provides several preset environments, which are often sufficient for most use cases. Users can also upload custom HDRI files to create a specific atmosphere or brand-aligned scene.

Lighting

In addition to the HDRI, dedicated light sources can be used to refine the scene. Light scenes are typically used to fine-tune highlights or emphasise specific parts of the model.

Ground Plane and Shadows

Shadows are essential for grounding an object in space. Without them, models often appear to float.

Enabling the ground plane anchors the object visually, improving depth perception and realism. A ground plane texture can also be applied to integrate the model into the scene better.

Ambient Occlusion

Ambient Occlusion adds subtle shadowing in areas where surfaces meet or where light is naturally blocked. This helps create contact depth and makes objects feel more grounded and realistic, especially around edges, joints, and intersections.

Ambient occlusion should be used gently — too much can make the model look dirty or overly dark.

Post-processing

ShapeDiver includes post-processing options that allow you to fine-tune the final visual appearance.

Common settings include Bloom, which adds a soft glow to bright reflections and highlights. This is especially effective for metallic materials, but should be applied subtly.

Cameras

A well-configured camera improves the user experience of your model. Cameras allow you to define good default viewpoints and guide presentations. Setting intentional camera views ensures models look good right away when opened in the viewer. Read more about cameras here.

Final Checklist

Once your model is uploaded and reviewed in the ShapeDiver viewer, it helps to run through a final checklist to ensure everything is set up for a high-quality visual result:

• Geometry
• Geometry is clean and free of overlapping or intersecting faces
• Mesh topology is appropriate for real-time rendering
• Vertex normals are correct, and welding is applied intentionally
• Texture Mapping
• Mapping is consistent and distortion-free
• A checker texture has been used to verify scale, seams, and stretching
• Texture transforms are applied where needed
• Materials
• Materials are assigned correctly to all display geometry
• Custom textures are hosted via publicly accessible URLs
• Key PBR parameters (colour, roughness, metalness, normals, opacity) are configured as intended
• Viewer Setup
• The environment is chosen to support lighting and reflections
• Ground plane and shadows anchor the model
• Ambient occlusion and post-processing are applied subtly for final polish
• Default camera views are set for a strong first impression

With these steps in place, your ShapeDiver models will look more convincing, professional, and visually consistent across web environments.