Creating 3D content for the web 101

You want to add some 3D content to your website ? Wether it's a 3D configurator, for 360° videos, of for a global 3D interactive page, it's important to better understand what is 3D and what is at stake... let's go !

Sometimes defined as the Messy Middle, the process/pipeline to create 3D content for the web can be simplified with some best practices. Because it’s going to be an introduction into the 3D creation pipeline, I will use legos as an analogy:

1. We’ll focus on the modeling, the shapes of your lego blocks,
2. We’ll then discuss the texturing, the look of your lego blocks
3. Finally, we’ll list the different publishing tools, depending on how you want to assemble your lego blocks and where!

‍

Everything starts fresh with a mesh 🧩 (a what?)

‍

Do you remember playing Lego?

Each block you used has a shape, more or less complex, with different colors and textures. You used several lego blocks to build your final content. 3D web content works a bit the same!

In 3D, the mesh is the shape of a single block and is made of geometric 2D faces (could be any polygons, but usually triangles or squares). The mesh is actually a combination of a lot of these polygons. It’s called mesh because we usually show the edges giving the global thing a mesh-like aspect.

The shapes are built/sculpt on traditional softwares like:

• Blender: Free, Open-Source, Complete and complex interface and biggest community
• Cinema 4D: One of the best paying option for everyone
• The Autodesk suite: Expensive, but powerful professional suite
• Houdini: The VFX master

But other non-traditional actors emerged and are super cool alternatives:

• SketchUp: Made for 3D architecture and real estate
• Vectary: From the web and for the web
• Shapr3D: 3D professional-level modeling on iPad

Alright, what else should I know about meshes?

• Meshes are shapes composed of polygons, and for the web, the fewer polygons, the better. Therefore, when creating your model or if you’re buying one, check the number of polygons.
• Sometimes it's better to “bake” a complex shape into a texture (make it 2D and incorporate it into textures - see more in the next chapter!).
• The best practice is to always have a mesh less than 5 Mo maximum! Otherwise, some devices will simply not display the model. For example, Safari mobile (and thus the majority of iPhones) refuse to display high-poly models!
• Some applications allow you to optimize the size of 3D models:
  - Unity Pixyz Studio is software that transforms technical 3D files such as CAD data into optimized 3D models for real-time and visualization. It's an ideal way to reuse existing data and create an efficient 3D workflow.
  - Then, RapidCompact optimizes 3D models specifically designed for web and AR applications. With its intuitive interface and robust features, RapidCompact ensures that your models are web-ready without compromising on quality or performance.

• These tools not only simplify the complex process of creating 3D content but also enhance the end-user experience, making them essential assets for any digital creator venturing into the world of web 3D content.

‍

Then put a bit of texture on it 🎨

‍

Now that you have your neutral grey lego block, you could start to assemble them right now. But first, you’d want to give some color and textures to your material, to make it as photorealistic as possible.

The good news is that textures are 2D images, nothing simpler than that. The bad news is that you will need to assemble those different textures (we called them also map) to give your 3D block a photorealistic aspect. What are the global colors? How shiny are those parts? How transparent? Depending on the workflow, many different maps exist, and the more you’ll add, the more detailed will be the final aspect.

The textures can be created/applied on the traditional 3D softwares, but some more specialized software exists:

• Substance: The game-changing software for the best materials
• Zbrush: Powerful brush system allows for lots of creativity
• Mari: Easily handling very high-resolution texture
• 3D Coat: For hand-painting-style textures
• Photoshop: Everything can be drawn in Photoshop

Also, these different textures can be used to create a 3D configurator and let your customers customize your product, and thus enhancing your sales. 

Last but not least, here again, the balance between photorealism and optimization is tricky. What are the best practices? Of course, when we talk about images, it’s all about resolution, but we recommend to not going over 2K textures for web usage. But there are some tricks! All the textures/maps will not be as visible as the others, we’d recommend having a great resolution on the base texture (albedo/diffuse) and going for lower resolution for other maps. Also, some complex details can be easily sacrificed and “baked” aka transform into a 2D detail in the texture: for example, a screw can be removed from the mesh but included in the texture!

If you want to deep dive further into 3D modeling and texturing for the web, we recommend this article from Unboring.net: How to make a PBR 3D model for the web

‍

Become the king of 3D content publishing! 🤴

‍

Now that you have your different lego blocks, with the shapes and the look you want, you need two last steps: assemble those blocks and put in on a place where people can watch and play with it, usually a website!

You’ll need a 3D viewer to display your content on your website and you’ll choose it according to your use case, your need for customization and your coding skills (from master to none!). So first, be clear on what you’d like to do:

‍

• Customized coding

The first possibility allows you to do every use case you ever wanted, on a very optimized way, it’s to code directly in WebGL (the base code of all 3D interactive content on the web) or using libraries such as BabylonJS or ThreeJS. It’s for sure the most complex solution, but if you still want to go to that option, and if you have the time to learn from scratch, we would recommend going for BabylonJS, with the best documentation and a very active community. Plus, it’s open-source and backed by Microsoft. You can also, if you have the budget, go for freelancers (like Bruno Simon, check out his awesome portfolio! ) or agencies (such as Wanadev, Makemepulse or Dogstudio).

‍

• 3D models display

To simply display 3D models on a website, you have a large range of options. The most known is Sketchfab, which is originally the biggest 3D model library.

However, if you’re looking for a seamless and easy-to-integrate #nocode solution, Naker offers a plug-and-play 3D viewer that simplifies the process of embedding 3D models into your website.With Naker, you can effortlessly showcase your 3D creations without the hassle of complex integration processes.

Finally, for Shopify users, did you know that the platform natively supports 3D models now?

‍

• Interactive 3D mini-games!

3D has been broadly used in videogames for decades now, and is still, with motion design and VFX, one of the biggest usage. 3D brings interactivity to the web, and it’s somehow logical to see mini-video games for promotional and marketing purposes.

The kings of videogames are the AAA 3D engines: Unity and Unreal engine. They both have WebGL exportation possibilities and are the most powerful options, but could be difficult to handle. Playcanvas, a web-based webGL game engine, acquired by Snap inc. is a rising, simpler yet powerful option as well.

‍

• Product presentation

When it comes to your product or your company, we all know that storytelling is crucial. That’s why videos, a great storytelling media, is used now by almost every company in the world. But you can go one step forward, by adding interactivity to your storytelling!

To do that, Naker can take your product presentations to the next level by seamlessly integrating interactivity into your narratives. Gone are the days of static presentations; Naker offers dynamic animation features that enable you to create immersive and interactive experiences for your audience.

‍

‍

• 3D eCommerce configurators

Maybe the trendiest use case at the moment, eCommerce is always looking for more personalization options for their customers. There are many different ways to create your own product configurator, depending on the level of customization, the number of options you need and your budget.

Of course, you can always go for a turnkey project, with agencies specialized in e-commerce or even in configurators from scratch, but there are some pretty cool and simple tools for creating 3D configurators!

The Naker app also offers a solution for creating 3D configurators ready to handle a high volume of products and options. Sketchfab, also has an open API to create configurators from its viewer. You still need to develop, but you’re not starting from scratch!

We believe there is whitespace now for a simple solution, that does not require any coding skill and with a storytelling approach. Naker is thesolution: 3D product configuration made it easy for simple use cases! If you’re a brand or an agency, contact us if you can be of any help in this adventure.

Cheers!

‍