An article

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

Analyzing the pipeline and sharing my personal workflow working with Blender 2.80

17 June 2019

Why bet on it now

What's the problem now?

We have a big gap between artists and engineers.

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 Process

A scheme with the different skills of the pipeline A 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.

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:

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.

Here you can download the source files and to discover the complete workflow on How to make a PBR 3D model for the web.

Sketching with paper / iPad

I 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 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:

Steps to create a PBR 3D model Steps to create a PBR 3D model

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:

The four textures created with Photoshop The four textures created with Photoshop

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 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 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 Best position depending on your skills

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 Professionals who can contribute to the web

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 A screenshot of a @mrdoob WebVR demo on Quest ( )


Arturo Paracuellos
Creative Coder / Artist
Email | GitHub | Twitter | LinkedIn

"Looking On The Bright Side Of Life."

Another Unboring posts