Seshat3D Web Viewer

Who is Seshat ?

Seshat is the ancient Egyptian goddess of knowledge and wisdom. Among other roles, she is “Mistress of the House of Books”, meaning archives, libraries and treasures inventory. She is, in a way, both a curator and a conservator alike.

The 3D artefact above is inspired by the most common descriptions of the Seshat figure, as found on royal temples and tombs in Ancient Egypt.

About the 3D viewer

Key concepts


The Seshat 3D viewer was created around the idea of being able to learn to work and communicate with developers about a 3D environment and take control of the more artistic part of the workflow with simple and manageable lines of code.

Beside the training exercise, it’s meant as a reproducible, simple and straightforward viewer for the pieces I work on. There are online solutions offering that, but I feel there’s always something missing. There are also wonderful viewers already made, like Mr. McCurdy’s or the Smithsonian museum Voyager viewer that also includes a full open source ecosystem for heritage 3D curation. You can read more about this project following this link.

My needs are smaller right now: just a lighter solution, somehow easier for me to integrate into the website. My coding skills are limited, though regularly growing.

Last but not least, modelling and texturing for the web and for stills or animations in a 3D software are two different things. So far, I noticed going from one to the other calls for modifications of the models whether size or UVs or almost anything, to be fair.

No drastic changes really but small, tedious and time-consuming details, enough to justify sharpening my skills on that part too!

Building the app

All hands on code

I created the static parts using three.js and Mr. Simon’s course. Then (wonderful and veeeeery patient) developers helped me to abstract it (as in, they did most of it and I avidly watched).

I can now control the model textures and some of the lighting and render tweaks via a simple JSON file. I can upload elements directly to the site’s server and tweak elements to my heart contents without risks of breaking things.

Using git to version things allows for upgrades and modifications while developing a model and eventually updating the production version of the viewer.

Light it up, up, up

In order to actually see something, just like regular photography, the renderer has to light the scene. Otherwise, it’s pitch black all around.

Seshat3D is not a “cinematic” viewer. The lighting possibilities are reduced to be adaptable yet unobtrusive. I imagined this tool as the equivalent of a lab light box, allowing to thoroughly examine an artifact. No fancy ray of lights, no dramatic chiaroscuro, just a visually -hopefully- comfortable light.

The lighting solution I choose is the equivalent of an HDRI image, allowing for tweaks in the renderer only for tone mapping style and exposure. I’m trying to the best of my abilities to keep things relatively light for the systems the viewer can be seen in. It will probably be upgraded along the way with my knowledge on the subject.

Gray matters

To display things with as less visual disturbances as possible, my first idea was to go for a flat, neutral gray background. Black and white are straining for the eyes; any flat colour or picture background will modify the models’.

Neutral grays or middle grays have been in use for a while now because they tend to eliminate parasitic colour contrasts, as akin to Colour theory. It is a fascinating and mesmerizing subject, both scientifically and historically, and I fully encourage you, dear reader, to investigate it!

Yet, all this is theoretical. In practice, there is no fully satisfactory way to choose one definite gray colour, particularly when screens are concerned. To mitigate risks while still looking good, I first settled for the #7f7f7f (R 127, G 127, B 127; if hexadecimal notation isn’t your thing) flat colour.

The outlook of the viewer was nice, but I quickly noticed two things. First, as these are light grays, working with the viewer for a while creates a visual fatigue. I caught myself darkening the gray gradually to an almost anthracite colour. Then, I also noticed that it has a dulled down effect on colours, probably due to the limitation I imposed on lighting. This was expected in a way, but I also felt this impacted the 3D aspect of the try-out pieces too much.

After more research and an examination of the practices in the conservation field for object photography, I settled for a gradient solution. It’s a trick, I know. It kind of stray from the neutral path I initially chose.

Color check and scale

If you are used to scientific photography of artefacts, you probably noticed the colour checkers and scale ruler on them.

Colour checker 24 colours
Colour checker card example
scale ruler
Scale ruler example

I decided not to include it for now because I’m not quite sure how to implement it in a way that will provide useful information. The same goes for the scale ruler.

I know it is something I personally find very useful on scientific pictures. So far, I’m still pondering how the information can be fed into the viewer and adapt to the model on the screen in a dynamic way.

This could be something like this (first, closed and second deployed):

When in doubt, test it out !

From now on, I’ll try to add the viewer to most of the articles about specific models or explain why I can’t (I’m looking at you, glass material with alphas). This will serve two purposes: showing models and update both my workflows and knowledge as well as the viewer itself.

Disclaimer : technical limitation to material render in web app can (and will!) let noise and aliases show, particularly in zoomed views.

Stay tuned and let me know if you have ideas or thoughts on how to do things better !

Tags: , , , , , , ,