Why you should start to create 3D content for the web

Why bet on it now

• Web is making a jump on performance and it needs better 3D graphics

  WebGL based graphics tools and engines are taking a performance capability leap. Multiview (here a quick view) or compressed textures (like this new project named Basis) will allow us to have better models and interactions on webGL based sites.

• WebVR and WebAR will be solid in 2020

  We've been walking a few long months through the desert since the WebVR specification wasn't continued, but the WebXR API spec will be ready soon. This new API will give us to create VR and AR content. This is a good short talk of Brandon Jones (Google) about the state of the WebXR API

• glTF is a new and very efficient format

  It supports PBR materials, and with extensions you will be able to hace compressed textures, LODs, unlit materials… And Khronos Group is making a great effort to have great documentation and multiple converters, importers and exporters available on their repo.

• Because is a open-wided alternative

  All the tools I recommend to use here are free and open-sourced, and can be developed with any computer. This may seem irrelevant but it is makes the web different, an open alternative to EVERYBODY.

What's the problem now?

We have a big gap between artists and engineers.

• Artists think they have many technical limitations to make their works shine.
• Engineers find it difficult to find 3D models that fit their needs.

For this, the main goal of this post is to bring together positions between artists and engineers and encourage the widest spectrum of developers to bet on 3D on the web.

And How I’m going to try it:

• Analyzing the pipeline of the whole process
• Sharing my personal workflow working with these parts
• Suggesting you where you could best fit into the pipeline
• Encouraging you to change to the web depending on your current job
• Listing how to monetize this effort

The Pipeline of the 3D Web Content Creation Process

Creativity

As the scheme below shows I think is a cross-cutting skill that we should all encourage.

Aesthetic style

This skill is always presupposed that the artists should have it, but it is amazing when someone with technical knowledge has it, because their vision or priorities are different from that of a pure artist.

Computer Graphics

Is the basis of all you'll do. Is like to understand how was the evolution of painting over the centuries for an artist, is to understand the canvas where you'll have your creations. Just as for a technician to have aesthetic style is marvelous, for an artist to have knowledge of computer graphics is enriching.

2D Art

Includes from the creation of sketches and concept art, and is an important skill when you need to texturing a 3d model.

3D Art

Although 3D software has tons of features and render options, you need to be focused on:

• Modelling
• Texturing
• Bones/Morph animation
• How to export correctly to the web

Web programming

Here is important to use JavaScript best practices, to use node / npm / webpack / git on your projects and to know how to contribute JS Open source projects. Other important skills are, mastering OpenGL Shading Language (GLSL) and to know how WebGL works.

Software engineering

Another step closer to the more technical part is to understand how the browsers engines works and how are made. The differences between Gecko, WebKit or how is possible with experimental browser engines like Servo developed with Rust programming language by Mozilla could be great to make the things works well on a wider range of platforms.

My workflow creating 3D content for the web

In this section I will try to explain what are my preferred options and some tricks on how to work to make 3D content for the web.

Sketching with paper / iPad

Modelling / Unwrapping / Baking with Blender 2.80

Now the 3D art part starts, I have started to use the new version of Blender and the new UI is great and there are a great intro playlist of Blender Guru about the 2.8 new features if you come from 2.79 like this.

If I want to create a PBR 3D model fully complatible with glTF, I follow the next steps:

• Model low poly
• Model high poly (using Subdivision Surface modifier and sculpting details if is needed)
• UV Unwrap low poly
• Bake sampled normals (using 'Selected to active' to bake HP details over the LP UV)
• Bake Ambient Occlusion
• Export UV Layout

Texturing with Photoshop

Here we come back to a 2D work based on the 3D maps exported from blender. In some cases, you can combine Photoshop with Texture Paint with Blender for some precisely details. But in this case, the steps were:

• Diffuse map
• Roughness map
• Metallic map
• Emmisive map

Exporting to glTF

Once you have all this, you need to finish to setup the Principled BSDF material of your asset (here another MUST to see video of Blender Guru talking about Principled BSDF).

As you can see below you need to use 6 textures to have all the properties covered. But one of the great things of the glTF exporter is that you obtain only 4 materials when you export your model, because it merge AO, Roughnedd and Metallic maps into a unique ORM using red, green and blue channel for each original map.

Previewing my 3D model

During the procress of creation I use the new 'Eevee' real time render engine of Blender to view how maps affect the model. And from time to time, I export to .glb and drag it to this glTF viewer created by Don McCurdy where you can see model details and stats. Another alternative if you are coding with VS Code is to use this extension that show you the model previewed with three.js, babylon.js or Cesium.

Another good alternative when you model is finished is to use this model-viewer previewer where you can change the background image to see how it affects your material. Or is a good practice to upload to Sketchfab and play with their multiple options of visualization.

Beyond this way, there are a lot of options to work with, for example a lot of people prefer to use Maya on 3D modelling, or Substance Designer and Substance Painter 3D when texturing their models. And on the technical side there are alternatives to three.js like Babylon.js or PlayCanvas which are improving new features to work better over the web.

Which position fits you best

Reviewing your skills and what you would most like to learn in the future you can discover which is the best position to help to the web to have better 3D content:

• Pure Artist

  The most important thing is to let yourself be guided by your creativity, but if you understand how the 3D models are made and which materials works better on real time renders, I’m sure you could create awesome concepts arts that adapt to the needs of the project.

• Technical artist

  In this position if you know more about glTF format or how Blender works, and better practices on JS coding I’m sure your creations will adapt better to what the technical part needs.

• Creative technologist

  Here, everything that you can open to the artistic part will allow you to link with the technical part. Think that this position can be the bridge between the most artistic and technical part of the project.

• Pure engineer

  Here I am not the best to advise you because it takes me away from my comfort zone, but if you are open-minded about what the user will demand and how it is best to give it to them, it will surely make your work more effective.

Join the web if you come from…

I believe that there are a lot of great professionals who can contribute to the web and because this post tries to encourage as many people as possible to enroll them in this assignment, here is a list of roles depending on where they come from:

• Illustration / concept artist

  This is a very side position but if you open your confort zone to learn something about 3D modelling and texturing I am sure you will be able to contribute your art to the web content.

• The video game industry (Art)

  Here you have a big part of the road crossed, a lot of the tricks you know to improve performance here you can apply, but it's important that you understand them from the ground up, reinforcing how computer graphics works will help you a lot. You fit in better as an technical artist.

• The video game industry (Technical)

  As the previous item, you have many things to contribute on this medium. Everything you know about how OpenGL and WebGL works will be a big help to you. You fit in better as an creative technologist or engineer.

• Front-ender

  If you are here, surely, you have experience with JavaScript but is important to have good practices using it, being careful with how you write your code to make it efficient. And you'll need to learn as much as possible about computer graphics.

The CGI/VFX industry

This is the farthest role from my comfort zone, so few tips I could give, but I'm sure many of them could work as great engineers and creative technologist.

But… show me the money (or how to monetize this effort)

One of the most commented weakness of the web vs. native is that monetization is smaller and more complicated. But I think is simply different and there are a lot of options (I'm sure I'll forget a lot of them next) and some of them are these:

• Creating optimised content for web / games

  Platforms like Sketchfab are great enablers on it. Believe it or not, there is now a lot of demand for good 3D content from engineers willing to pay for it to make their projects more attractive.

• Browser based games

  Is a hard field to monetize, but is fun and I’m sure you learn a lot from failures here.

• Marketing campaigns / B2B

  Is a huge in budgets but hard in times/requirements market. But if you have clear what is possible or not to do, or (most important) how to use your creativity to ‘fake’ the think that the client wants, this will make you a key part of the creative process.

• As part of a engineering team

  If you know more about webGL and glTF format, you'll be able to work side by side with the engineers to give them the perfect assets to make the things possible to work over the web.

• Find your own way

  I'm sure I've forgotten or don't know how to turn your talent into money. But I am sure that if there is talent, it will make its way, especially when the path is open and free.