Creating Custom 3D Salesforce components using RenderDraw's SimpleRenderer

If you would prefer to not read background info, the source for this is available here and the video example of the code is available below.

The reason we took the time to create RenderDraw was due to a lack of options when it comes to rendering 3D within the Salesforce Platform. After speaking with dozens of  manufacturing companies with a desire for a better 3D experience within Salesforce, each had a different spin on what was needed. Manufacturing companies vary greatly when it comes to sales and service processes, so any solution had to be flexible enough to serve any manufacturing scenario. 

What was needed was a flexible component set that handled the complex WebGL rendering libraries, and made them simple to approach. This would then be utilized by Salesforce development partners or internal resources to further enhance the experience of running a 21st century manufacturing company on the Salesforce platform.

Enter RenderDraw and the SimpleRenderer component. SimpleRenderer allows for our customers to add a component onto any Salesforce Detail Record page or any custom Lightning or LWC component and pass the rendering details (e.g. file + asset location) to output a fully interactive 3D component on Desktop or Salesforce Mobile.

This component set allows for totally flexible rendering, as part of any Custom Development scenario that cannot be bound by a software creator's vision of how your company runs. 

To walk through this topic, and to prove the flexibility, concrete examples should be discussed. While the conversation of 3D certainly should not be limited to  Configuration is a topic that is highly unique per each manufacturer we've talked to. Two highly customizable examples of this would be:

• What if I want to use a Salesforce Cloud like CPQ for configuration, but still have 3D models that our customers and users should see?
• What if we created a custom solution for configuring possibly relying on external ERP data, but still need to render our 3D models?  

Configuring with Salesforce CPQ

Salesforce CPQ is a powerful product that is nearly infinitely extensible. For scenarios where the CPQ configuration / bundling matches your configuration needs, Salesforce CPQ can be enhanced (very simply) using the SimpleRenderer to provide a cutting-edge experience. 

As broken down here, RenderDraw can be setup to use a conventional approach to determine the URL for a given object Id, or (like in the custom examples below) URL overrides to construct the URL that we will be fetching and rendering from. 

An example where RenderDraw's Convention based metadata relationships have been used after records were updated in Salesforce CPQ have been depicted. The Quote Line record type is used for our relationship purposes, but drawings could be displayed on any object based on this dynamic relationship model. 

Once a user saves the configuration, the QuoteLine is updated. With this record update, we can trigger a process builder workflow. Based on the configured option, your custom APEX class can update the URL field that is setup for the Quote Line object accordingly. Build configurations can be as complex as your organization needs, because you are creating or integrating with that configuration engine.  

Now that a rendering can be retrieved for our configured good, a custom action can be added, in a similar fashion to the wrench for reconfiguration or other QuoteLine item detail buttons. This custom action would allow our users to view and interact with our (Existing) rendering based configuration within a pop-up inside of CPQ. 

After the interaction, the user can close out of the modal displayed from the Quick Action. As a quick note, this can also be utilized within Salesforce Communities, so deal portals and customer quoting and ordering scenarios using CPQ can be enhanced with 3D using this same method.   

Custom Solutions

Depending on complexity or reliance on 3rd party systems for configuration, your solution might be out of the reach of what Salesforce CPQ allows for your configuration. For this reason,  Salesforce provides the ability to have an external configurator- you can host this within Salesforce utilize RenderDraw that way, or choose to have a separate configuration app altogether. 

If this is the proper response to the complexity of your configurations, you will utilize a custom Lightning or Lightning Web Component to call the SImpleRenderer component directly. After you complete your configuration, your component will pass the needed parameters for the SimpleRenderer component to fetch and display your 3D models for interaction. Until that point, the component can be hidden by a Lightning Spinner or another component as a placeholder.

Any number of inputs can change, and we don't want to limit your imagination as to what could be displayed. For this (possibly over-simplistic) example, we will have three toggle buttons on a Component that could be added to nearly any Salesforce interaction (custom or native). 

Get to the code

The toggles call their corresponding handlers within our Lightning Component Controller, which update our selectedOverrideURL attribute. By Passing the new value to the SimpleRenderer Component, the fetching and re-rendering is handled (elegantly 😉) and the user gets the updated Rendering and new experience.

 Here is a deployed example added to a Lightning Application to view the toggling between different drawings based on button selection.  

By embedding this single line: <RDraw:SimpleRenderer overrideURL="{!v.selectedOverrideURL}" /> in our application, we were able to provide the entire 3D rendering experience that brought this app to life. 

Source code for the application is available here.