Busting the nightmare of 3D model rendering in a web application

If you’re trying to recall what model rendering is, as said by Wikipedia — it is the automatic process of generating a photorealistic or non-photorealistic image from a 2D or 3D model by means of computer programs. Rendered objects would contain geometry, viewpoint, texture, lighting, and shading information as a description of the virtual scene. The data contained in the scene file is then passed to a rendering program to be processed and output to a digital image or raster graphics image file.

Back to where I started, rendering is a nightmare for frontend developers because rendering is a time-consuming process. Rendering is required in many types of business websites. For example, a custom apparel designing website, or a web-based automobile customization tool. One sure fact is that no visitor of any website is going to wait minutes to get a rendered view of an object. So, our challenge is to get the rendering completed in minimal time as possible.

In the recent past, I built a web application for Shimble. Shimble is a marketplace for tailors. It connects the global tailors with the customer and offer a range of high-quality custom clothing, sized to perfection, with huge savings.

Shimble offers a web-based apparel customization tool in which a user can design like shirts, jackets, vests, suits, pants, etc customized to their preferences, size, and shapes. The application shows a rendered view of how the apparel would look to the user. The rendering was done using WebGL (Web Graphics Library), which is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of any plugins. It is fully integrated with other web standards, allowing GPU-accelerated usage of image processing. Moreover, WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.

The challenge I faced here is — to render one model it took around 3–4 minutes on a normal laptop. It took even more time on computers with lower specifications. Obviously, the application was not qualified to launch on the production scale.

I had to burn a lot of fuel to find a solution, I tried a variety of options and each and every one of it came with a major setback. Mostly in the form of the visitor needing to install additional plugins.

WebGL provided the best results for the work, but being a client-side application, website visitors need to have a computer with good specifications to access the tool. Then this thought occurred to me — Would it work if we render the model in server-side using a client-side application.

I had to try it out. I did. And it worked.

By using a chromium browser installed on the server-side, I transferred the rendering requests to the high-end server side. With the new architecture, the rendering was completed under 30 seconds, which was a reasonable time for the visitor to wait to see the rendered view of the apparel they just customized.

If you’d like to discuss more on the architecture I designed, feel free to contact me at aj@accubits.com

Arun is the VP of Engineering at Accubits Technologies. He oversees Accubits’s development teams. He brings more than 6 years of experience in the tech industry as a developer, technologist, engineering, and business leader. He is a goal-oriented Product and Technology leader with a track record of defining vision & strategy, product architecture, roadmap, execution strategy, growing teams to deliver highly scalable products in a hyper-growth organization with a relentless focus on customer backward thinking.

Originally published at https://dev.accubits.com on October 7, 2019.