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:
The Pipeline of the 3D Web Content Creation ProcessA scheme with the different skills of the pipeline
As the scheme below shows I think is a cross-cutting skill that we should all encourage.
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.
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.
Includes from the creation of sketches and concept art, and is an important skill when you need to texturing a 3d model.
Although 3D software has tons of features and render options, you need to be focused on:
- Bones/Morph animation
- How to export correctly to the web
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 / iPadI usually start drawing a sketch on a piece of paper and clean up and color it with Procreate using and iPad with an Apple Pencil. With this I try to find the best combination of colours and approximate shapes. If is a simply shape like this I only draw a view, other times I try to do a front and side view for use as a reference in Blender. From pencil to sketch made with Procreate + iPad / Apple Pencil
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).All the nodes needed to configure the Principled BSDF material
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.Auto-generated OMR Texture
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:Best position depending on your skills
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.
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.
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.
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:Professionals who can contribute to the web
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.
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:A screenshot of a @mrdoob WebVR demo on Quest (webvr-makeitrain.glitch.me/ )
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.