Improve your WebGL models on Sketchfab with the new material editor

Sketchfab Material Editor 1

As I mentioned before on this site, Sketchfab is a great way to share your 3D models – for example using my SketchUp uploader plugin. One thing that was happening with SketchUp models in particular, however, was that they usually looked very “flat” on the Sketchfab website. Materials typically have a rather dull appearance and transparent materials have no reflections. That prompted me in the past to hack the COLLADA files before upload to change material properties. Well… that is no longer necessary. As of yesterday, the Sketchfab website sports a shiny new material editor. Right after uploading a model, you can get to work adjusting all of its’ material properties. The image above shows the basic interface on a simple cube model.

But that’s not all: While this material editor is great for adjusting material properties in Sketchfab, it also works extremely well for interactively learning and exploring material components such as “diffuse color/texture”, “lightmap”, “specular color/texture” etc. Understanding these parameters is crucial if you want to learn about rendering software (for example if you make your way through the rendering chapter in my book). You will, for example, find many of these terms used in the material editors of rendering packages like Twilight or VRay (and many others).

Please Note: I posted a handy how-to guide for uploading from SketchUp on the Sketchfab blog.

Let’s see how we can modify this default cube to add some effects:

Sketchfab Material Editor 2

The image above shows how you can turn the cube’s material into a perfect mirror. This is done by reducing the “diffuse color” to zero and increasing the “reflection” to one.

Sketchfab Material Editor 3

If you want the material to be a translucent and partially reflective glass, then the settings in the image above might be appropriate. Feel free to play with the sliders a bit to understand how they work and to get things just right.

Sketchfab Material Editor 6

If you want to have a colored, partially reflective surface, then the settings above might be most appropriate.

A great additional feature is that you can click on any of the image swatches and not only adjust the color but also upload custom textures. This makes it easy to adjust and switch textures. I just wish the Sketchfab folks had added a scaling slider for textures. It is impossible to control texture scaling beyond what was imported in the original file.

To try this out on one of my older SketchUp models (have you seen this house anywhere before?), I opened my “Solar House”:

Sketchfab Material Editor 4

After I went through all of the materials in the file, added reflections here and there and the occasional normal map, the model looks like this:

Sketchfab Material Editor 5

Here is the interactive model on Sketchfab:

[sketchfab id=”3OxdJ9GLoMecXHbYSotW2JJQ2p7″ start=”0″ spin=”” controls=”1″]

As you can see, having an environment map brings out reflections quite nicely. All I need now is the ability to turn shadows on and off in the Sketchfab WebGL model. For now, that goes right on my pile of feature requests. But other than that: Well done on the material editor!

Comments and Reactions