Hoppity hop !

Creating a 3D model

Note : This is a training exercise on what seems to be a simple object, or so I thought !
Shown for documentation purposes only.

What to do : digital restoration choices

This piece shows oven related defects, maybe too much to having been sold as is. Without knowing more of its history, and as far as restoration is concerned, it is probably wiser to just make the decor slightly more readable by diminishing the effect of the identified alterations.
It’s a light and comprehensive work that would benefit from the collaboration with the curation scientific team.

The dents and the hole drilled on the rim need to be filled and coloured. The cracks on the glazing can be lessened.

There is an issue with what looks like a circular abrasion on the inside of the well, all around the rabbit. Chances are this happened during firing: maybe another piece was on top of it and the glazing attached to it. As such, being produced with the piece, it is not an alteration per se. It disrupts the view of the rabbit figure, though. Because this is digital, it is possible to lessen the visual impact of it without taking unethical restoration measures on the actual piece.

How to do it : a 3D reconstitution process

Model the shape

Most fortunately, the documentation of the piece has a top, a bottom and a (sort of) side view. That is precious because it will help extrapolate the overall shape.

In the heritage domain, one usually do not have the luxury to go with the “one can never have too many reference images” motto. Most of the time, you’ll have to make do with just a few elements, making the exercise a bit tricky. For the uncertain or missing parts, I need to make educated guesses, by cross-referencing and comparing with similar models or archival descriptions.

So far, here’s how the model goes.

Now, I have to see what can be done for the decor. Cuerda seca decors make small but characteristic reliefs on ceramics, each of the glazed sectors behaving more or less like encased water drops. The lustre adds another visual dimension, deepening the effect.

Which rendering method to choose ? To bump or not to bump.

There are two paths that can be followed here. One that could potentially modify the so far simple geometry of the base by creating displacements on it to render the cuerda seca effect. The other one that will trick the eye into thinking there are reliefs by using light to mimic them.

The goal is to display the restored model on a 3D Web Viewer, using mostly GPU computation. The more data heavy the piece is, the more computational time and resources will be needed. Therefore, in broader terms, the lighter, the better !
The idea would be the same for creating a VR scene or a game asset: the weight of the piece file have to be as limited as possible while maintaining the depth effect we’re looking for.

The effect we’re looking for is to have the enamel parts very subtly raised. Modelling them individually will more or less give the same result as playing with the light, albeit with more vertices to compute. Therefore, let’s choose the second method !

Texture the shape

Still renders workflow

Creating the first map : Image manipulation

Now that I have a method, I need to first clean up the reference images to obtain a colour map.

I’m going to modify them to restore the elements I’ve identified. Then, I can use them to create the other elements that will tell the render engine where to put shadows, lights, “metalness” elements and specular highlights to create the overall expected effect.

Note also that I’m probably going to have to create two sets of these “image-maps”. One that we can use in Blender to create still images and animated sequences. These maps can be of high resolutions: the only limit is the computation power and the allotted time one allows oneself to render. The other one, derived from the precedent, is to be used in a web browser, therefore the lowest weight possible maintaining the desired effect is mandatory. I’ll be using the Three.js library. The latter is powerful, but has specifications that I’ll have to mitigate to manage a similar output as in the 3D application.

NB: Because the images at hands are photographs, they also have lights and shadows inputs created by the shape of the object and its decor. So, I’m creating what is more a “diffuse map”. That is to say, an image with colours with a bit of shadows and highlights showing.

I could have reconstructed a “pure” colour map. But these are also information as to how the light interacts with the physical object -though emphasized by the choices the photographer made when lighting the scene-. Keeping as much of them as possible seems an interesting idea, but I will probably have to lower the effect of the too prominent specular flares. This will be a game of trials and errors.

Modifying the image we have and starting to restore the parts we identified.

First thing first, let’s add colours !
Let’s manipulate the reference images to have a base to build upon, using Gimp.

For the top, where the main decor is, that means:

• retouching color patches,
• attenuation of specular highlights from the photographer’s lighting set,
• color filling holes,
• removing thread cracks,
• attenuation of wear and discoloration and grimes / life accidents,
• removing previous restorations traces and digitally amend the alterations it creates.

For the bottom, I don’t need to be as invasive. A light pass to clean things up and visually diminish the most important alterations is enough:

• Attenuation of the most visible wear patterns while leaving the oven marks
• Removing the sticker and the mark : that is a tricky decision to make and one I would never do on any non-digital piece.

Removing conservation marks is not something that should be done, ever, unless dictated by conservation concerns. Then it should be immediately replaced by a more adequate solution. Once again, this is an exercise that will basically create a new digital piece, albeit based on the existing one. The museum preserving this piece and that allowed for the CC0 license is not in any way responsible for the scientific and visual choices I made in creating said piece. So, despite mentioning the original, linking this new piece to them via the inventory number makes no sense.

We have now established our base colour. This image is the first map: the “diffuse” one.

Extrapolate maps

Now for the magic part !

In order to create all the “maps” I need, I will extrapolate upon the previous colour map.

Normal map

In short, normal maps are a way to tell the renderer how the light should react with the surface of the object. This is not modifying the geometry, just how the light interacts with the surface.

This will hopefully start the slight depth effect i’m looking for the decor.

There are different ways to produce such maps, but here, I’m using the Gimp algorithm to create one from the diffuse map.

Can’t see much ? That’s to be expected.

Although these are stored as image files, the information they gather are per pixel ones. Each pixel has an RGB value that can also be interpreted as XYZ ones, so basically geographic coordinates. It is from such uses that the term “maps” referring to such images emanates.

This map will bend the light around the object to trick our eyes into seeing details when the object is manipulated in a 3d space.

Roughness map

Then, I need to find a way to render the roughness of the surface of the plate. Because of the cuerda seca technique, the pathways between the glazed shapes have a lighter glazing. These parts are rougher than the rest. The same goes for the foot and the oven related alterations that removed some of the glaze.

The digital renderer uses the data contained in the roughness map as values, not colors. The map only need to be in shades of gray on a black to white scale. The effect I’m looking for will be given by the lighter tones. Here, the darker the image/map, the smoother the surface.

In gimp, desaturating the image seems like a good idea.

But there’s a catch. The glazing has light and dark tones, creating a pleasing contrast to the eyes.

As such, prominent parts of the piece like the head and the parts of the ornaments around the rabbit as well as the background would be rendered rough. But they are not ! They’re smooth from the glaze.

Let’s try inverting the image, making dark tones light and light tones dark.

Better ! Yet the white and shiny background is now dark, therefore renders as a rough surface. I need to find a solution that mixes the two images to preserve a realistic effect.

After manually retracing some of the paths and balancing the values, there is now have a better representation of the cuerda seca pathways on the piece.

By inverting the values, that map can be used to create a clear coat layer. It will add an extra specular layer on top of the piece, strengthening the enamel effect.

Granted, the visibility of the effect is limited on a static view. It will gain importance once the object can be manipulated in 3D.

Sum-up: noodle soup !

For those of you wondering how the shader editor looks like in Blender, here’s the PBR node system:

Nothing fancy, almost straightforward.

Shine a little light: stills renders using Blender

There is a nice effect all over, allowing to render satisfactory still images. As in all renders of 3d objects, whether stills or animated, lightning will be paramount to the overall effect.

So far I’ve used a HDRI to make the renderings try-outs. It’s convenient and easy to put in place. Choosing the right one can be tricky for special effects. During the creation phase, homogenous, soft, constant and neutral light is easier to work with. Just as in any IRL workshop!
At the end of the day, no matter how scientifically one chooses to tackle that point, it’s always a personal preference thing among different possibilities.

I found that the very famous “Artist workshop” one by Oliksiy Yakovlyev from Polyhaven does the trick nicely.

For the renders, I will however put a little drama on things and try to get more control over the lighting with a classic 3 points lights system.

One key light on the left, one fill light on the right and one backlight to create the outline.
The background needs to both emphasizes the object and helps with the lighting. It must also be discrete to not take away from the main focus.
A little tweaking here and there and here’s the final setup base:

This setup is tweaked with every render views to accommodate a better lighting of the scene.

From there, Blender can render numerous images (and one can completely get lost in the process trying things out!).

Interactive rendering

All hands on code, now. Let’s try to make the model web available using Three.js.

Short version over here

Now there is sort of a functioning model, let’s try to make it web available in 3D.
I’m using three.js. Because of the way it works, we might not have to tweak the parameters and maps that much coming from Blender.

After running numerous tests and other time-consuming try-outs, I came to the result I wanted by using 5 different images serving as 6 different maps. It could be merged into fewer maps because we’re not going to be using the same RGB colour channel each time. So, theoretically, fewer files re-used differently each time could suffice. However, this is an exercise to try and understand how all this works ! So I’m sticking with the multiple maps idea for now until my brains cool down. Apologies to your GPUs…

Process

A diffuse map

This is the base colours of the piece, just like in the 3D application.

So far, no real surprises…

Normal map

Thankfully enough, we can use the same normal map for the web and the blender version. Lowering its size might be a good idea, though. Here the original map is 481 kB, the reduced working version is 63 KB. Some small details are lost, but the computation is faster.

Moving things around: height and ambient occlusion maps

The role of the Height map it to create the illusion of reliefs on the piece.
As before, the information about heights are extrapolated from a white and black image: the highest points are light, the lowest parts are dark.

Let’s use it on the <displacementMap> property. This should visually move the geometry around and allow nooks and crannies to show.

I used the normal map to have the light bend around pseudo reliefs, but I also want a real hint of these reliefs to allow for realistic silhouettes when the 3D object is moved in certain positions. It means the geometry needs to be moved around to create sensible reliefs. This is where the height map comes in handy.

This map is extrapolated and tweaked from the normal and the rough ones.

Alone, the effect is interesting. Adding to it with an ambient occlusion map reinforces it. It may seem redundant with the normal map usage, but when the piece is moved around, I think some angles lack depths without using all these maps.

Ambient occlusion maps are masks that occlude light. The darker the colour on the map, the less light will be seen. These two maps complement each other nicely. We can use the same maps for each, but with different settings.

To obtain this map, I will be using the normal map and desaturate it. AO maps are white and black (from highlights to shadows) so there’s no need to burden the file with colours information. Then, I can adjust the levels to make sure the lights points are where I want them to be.

The geometry is now slightly moved, following the pattern on the piece. The effect is emphasized by positioning the specular flares a little more precisely.
Or so I hope !

Roughness and Clear coat

Things here work slightly differently than before. The information pertaining to these properties are not read from a grey scale image, but from the RGB channels of a coloured image.

For reference, with the Three.js library: the .clearcoatMap property uses the red channel and the .roughnessMap one uses the green channel.

Using the maps that were produced before and colourizing them to have a red, green and blue channels gives interesting results. Playing around with the curves on the channels in gimp makes tweaking them easy. The greener parts are the roughest and the reddish ones the shiniest.

The resulting curves look strange, but with a little level adjustment (and trials), it works !
It’ll look very weird for a human eye, but the render engine doesn’t care…

The same goes for the backside:

This concludes the coding part! Things could be done in a million different ways, but I found this is what gave me the results I was hoping for in this particular exercise.

TL;DR

Here’s a recap poster :

And the code for the whole effect on both sides of the plate:

const RectoMaterial = new.THREE.MeshPhysicalMaterial({
	map: "./textures/plate_diff.jpg",
	aoMap:"./textures/plate_AO.jpg",
	aoMapIntensity : 0.5,
	displacementMap:"./textures/plate_AO.jpg",
	displacementScale: 0.1,
	roughnessMap:"./textures/plate_rough.jpg",
	roughness : 0.2,
    clearcoatMap:"./textures/plate_clearcoat.jpg",
    clearcoat: 0.8
})

const VersoMaterial = new.THREE.MeshPhysicalMaterial({
	map: "./textures/plate_verso_diff.jpg",
	aoMap:"./textures/plate_verso_AO.jpg",
	aoMapIntensity : 0.5,    
	displacementMap:"./textures/plate_verso_AO.jpg",
	displacementScale: 0.1,
	roughnessMap:"./textures/plate_verso_rough.jpg",
	roughness : 0.2,
    clearcoatMap:"./textures/plate_verso_clearcoat.jpg",
    clearcoat: 0.8
})