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.



Accubits Technologies is an enterprise solutions development company focusing on AI and Blockchain technologies, based in Virginia, USA. https://accubits.com/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Accubits Technologies Inc

Accubits Technologies is an enterprise solutions development company focusing on AI and Blockchain technologies, based in Virginia, USA. https://accubits.com/