Creating 3D content for the web 101

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 made out of polygons, and for web purposes, the fewer polygons the better. So, if you create your own model or if you’re buying one, make sure to check the number of polygons. Indeed, there are millions of different ways to shape the same-looking mesh, and sometimes, going for sufficiently detailed but low-poly 3D shapes is a good choice (but might be more expensive, indeed!). It’s sometimes a better choice to “bake” a complex shape into a texture (make it 2D, embed into the 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!

‍

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

‍

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. You can use their viewer with their watermark and they also have business solutions. Same with Marmoset, more artist-focused but less plug-and-play. 

‍

If you’re looking for the simpler #nocode solution, Naker.studio is the simpler and the cheapest tool to display 3D models (widely used on our homepage), contact us! 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, Sketchfab can be an option: you can add “annotations” which will bring the camera to the highlight of your choice: the beautifully drawn face of your lego character for example. You can also use Naker animation features and create interactive shopping experiences!

‍

‍

• 3D eCommerce configurators

Maybe the trendiest use case at the moment, especially with the COVID-19, 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 some pretty cool tools exist!

Threekit is one of the greatest success stories in 3D at the moment, giving corporate-level configurators ready to handle a very high volume of products and options. Expensive, but perfect for corporates who need industrialized solutions. 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 now considering working on this solution: 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. We are also creating a network of 3D freelancers and agencies able to provide us and our community with optimized 3D models, contact us here!

‍