This repository contains sample code for using the WebGi rendering engine with ShapeDiver. It serves as an example for creating 3D configurators based on the ShapeDiver geometry backend and the WebGi rendering engine.

You can see a deployed version of this example here: https://shapediver.github.io/ShapeDiverIJewel3DIntegration/.

It's possible to test another ShapeDiver model by adding the following query parameters:

https://shapediver.github.io/ShapeDiverIJewel3DIntegration/?ticket=YOUR_TICKET&modelViewUrl=YOUR_MODEL_VIEW_URL

Are you looking for support? Please check out your options for getting in touch with us here.

ShapeDiver turns your Grasshopper files into online applications. Safely share your design tools with others without exposing the original code. Easily embed them on any website via an iframe or integrate them with your favorite eCommerce platform or ERP system via our APIs and SDKs. ShapeDiver allows you to manage and enable easy access to your entire library of Grasshopper files from a web browser.

WebGi is a JavaScript library that allows developers to embed high-fidelity, interactive 3D graphics into web applications. It simplifies the integration of 3D models into websites, enhancing user experience with photorealistic visuals and smooth interactivity. Built on top of three.js, WebGi ensures efficient and cross-platform rendering of 3D content across different devices and browsers.

WebGi is developed by iJewel3d (formerly known as Pixotronics).

ShapeDiver provides a multi-purpose 3D Viewer that offers extensive features for building interactive 3D configurators and web apps. For a complete overview of the ShapeDiver 3D Viewer, please refer to its documentation. Since the ShapeDiver 3D Viewer does not explicitly focus on rendering jewelry, and WebGi provides excellent results, we decided to provide this integration. Note that using WebGi with ShapeDiver requires a separate license. Please contact us for details.

This example uses the ShapeDiver 3D Viewer in headless mode: It only uses those parts that communicate with ShapeDiver geometry backend systems and manage parameters and outputs. This reuse of functionality allows for a simple transition between the ShapeDiver Viewer and WebGi because the implementation of the UI stays the same.

Extensions to WebGi are typically implemented as plugins. Therefore, this integration example provides a plugin called ShapeDiverSessionPlugin for WebGi that opens a session with a ShapeDiver model and hands over the geometry to be displayed to WebGi. The plugin also updates the scene after parameter changes.

The material definitions used by ShapeDiver and WebGi are similar but different. Material properties assigned to geometry using ShapeDiver's material components in Grasshopper can not be used to define WebGi materials directly. Therefore this integration uses the following approach to assign materials to objects by material name:

• Use the glTF 2.0 Material component to assign named materials to your geometric objects. Only the Name property of the material is important; all other properties are ignored.
• Use the glTF 2.0 Display component to output geometry.

The display component saves the geometry, including its material assignments, to a glTF file, which is exposed on the Geometry Backend API and loaded by the headless ShapeDiver 3D Viewer.

The ShapeDiverSessionPlugin assigns WebGi materials to geometric objects based on the names of the materials you assigned to the objects in Grasshopper. For each object, it does the following:

• Check if the object is assigned to a material. If not, WebGi renders the objects using a default material.
• Check if the object's material name is contained in the dynamic material database. If so, assign the material.
• Check if the object's material name is contained in the static material database. If so, assign the material.

You can create WebGi material definitions by using the iJewel3d playground. Use drag & drop to load a test model in format glTF or 3dm and edit the materials or assign new ones. Once you are done, export the material as a JSON by clicking on Download pmat (or Download dmat for gem stones) on the right-hand side of the UI while the object is selected. Copy your material definitions into one of the material databases and assign names to them.

The static material database allows to define materials statically, as part of the web application. You can find an example in staticMaterialDatabase.ts. The static material database is a dictionary mapping material names to WebGi material definitions.

Optionally you can define a dynamic material database using your Grasshopper model. An example can be found in this Grasshopper model: webgitextureexample.ghx. The dynamic material database is a JSON dictionary mapping material names to WebGi material definitions.

WebGi offers caching and optimization possibilities that support rendering models using many gemstones. The caching happens by diamond material name. You can read more about this here. These are the most important takeaways:

• Use the same diamond material name for stones sharing the same geometry, even if they are placed in different locations of the scene.
• Use different material names for stones that are different from each other.

ShapeDiver's 3D Viewer offers features that are not yet available when using this integration. This includes the following features:

• Augmented reality
• Interactions (Selection, hovering, dragging)
• Attribute visualisation
• HTML anchor elements

First, install the dependencies:

pnpm install

To run the project in development mode use:

pnpm start

Then navigate to http://localhost:3000/index.html in a web browser to see the default scene in the viewer.

To build the project for production:

pnpm build

Here are some hints on how to integrate this code into existing projects:

• The code in index.ts file is the entry point and can be used as a guide on how to initialize the WebGi viewer.
• Replace the ticket and modelViewUrl with the correct values for your model. You can find your model's ticket and modelViewUrl on the view and edit pages of your model on the ShapeDiver Platform.
• The ShapeDiverSessionPlugin can be copied as is. Depending on your needs, you can do the same for staticMaterialDatabase.ts or just replace the example materials.