The Mission

Flux intends to revolutionize the way electrical engineers create printed circuit boards. With their 3D PCB collaboration technology, EEs can work directly with their designs in a more natural and intuitive manner. Their users can take their circuit design to the next level and experience enhanced precision, better accuracy, and improved workflow. Flux knew that the final rendering of the circuit boards couldn’t be presented with an outdated look. They wanted to create realistic 3D PCBs that would be accurate and visually attractive at the same time.

Dbl. Dose took the challenge head-on, using ThreeJS code and their knowledge of render-based 3D pipelines to create realistic 3D PCB designs that not only verified heights and orientations but also presented them in an aesthetically pleasing way that would draw attention in the world of hardware design.

The Starting Line

Flux had already implemented a basic version of their app for proof of concept. However, releasing it with its current look would be detrimental to the rest of the product.

Reference from the Client

Flux provided a variety of reference PCB renderings, giving us an easy benchmark to measure our solution's success against.

What did it take to achieve the look Flux desired? We studied the references given and identified several key elements in the most realistic renderings.

Elements of Success

Shadows

Reflections

Materials

Textures

Lighting

Scene

Northstar Renders

To ensure that we were on the same page with the look we wanted to achieve, we created some fast renders using Cinema 4D and Redshift. Although these renders weren't entirely accurate for the PCBs, they did give us a quick glimpse of what we wanted to accomplish. This also gave us a plan for how many initial materials would be needed to get the most out of the project. We would need to source and create a variety of textures using Substance Designer and Photoshop. With this information, we could start translating our ideas into real-time graphics.

Process

To promote transparency and smooth operations, we used Codepen as a way for Flux developers to view any necessary changes for the web app at any time. We also employed a graphical interface for Flux to adjust parameters and make the process more interactive.

We consulted with Flux developers on how to best use the parameters and assets. On occasion Flux had models that weren't properly UV mapped due to the variety of sources from which the models could come. Dbl. Dose provided resources on automatic UV mapping so that they could correct UVs and ensure the models looked their best.

The Results

We crafted a ThreeJS file to hand over to Flux developers. This included lighting, shadows, materials, textures, and scene elements. Built to achieve a photorealistic looking PCB model. When plugged into the Flux web app these settings provided a tool to verify heights and orientation of users designs while supplying them with a PCB that could grab attention on social or in meetings. It made the experience more interactive, engaging and fun for users.

Services

Consultation
Look Development
ThreeJS
Substance Designer
Photoshop

is

TORIN KOVACH

Copyright © 2024 Dbl. Dose