It came from the stars

It is said that long ago, the Greater Will sent a golden star bearing a beast into the Lands Between …”

“… And one day, we’ll return together, to our home, bathed in rays of gold.

* SPOILER WARNING : This article may include some spoilers for the game Elden Ring by FromSoftware. *

The project

All of my project so far have had something nerdy in them : “ProcGen Entomology” and “Visa to the Stars” are science-y, “Takashi’s Death” is a direct reference to a manga, “Neural Collapse” concept has its roots in japanese animation, and Breakers and “We’re not gonna take it” have tenuous links to video games. I love my nerdy hobbies, always have.

This one is love letter to FromSoftware and their talent.

Random assortement of objects found around the apartment

This project is a love letter to FromSoftware and their talent.

While I was developping “ProcGen Entomology”, a little game called Elden Ring was released by the team at FromSoftware. The studio is now renowned for games with demanding gameplay, satisfying action-rpg mechanics, and cryptic stories.

Their stories and world building in what is now known as their “soulsborne” series of games all have a very dreamlike quality to them and are very high fantasy, be it the more medieval world of Dark Souls or the gothic horror of Bloodborne : you always play a stranger in a very strange land. You don’t know where you come from, and the world you visit is usually isolated from everything by “fog”. Your own player character’s motivations are equally vague.

“You’re sure to be in a fine haze about now, but don’t think too hard about all of this. Just go out and kill a few beasts. – Gerhman / Bloodborne

In Elden Ring, a short intro cutscene tells you that you are being resurrected by “grace” ( yes, you died before the start of the game, in the outside world), and then you’re told that you’re probably here to become “the Elden Lord”, and that there are others just like you. And that’s about it.

Some might find the opacity of this kind of setup hard to swallow, but I find it evocative. A mystery box to unravel, or maybe a just a dream you try to remember. You can find some answers along the way, but most of it will stay hazy, even if you pay attention to every little detail.

The games also have IMO some of the best and most consistent artistic direction around. Especially in the environment and creature design. Sometimes awe inspiring, sometimes gross and disgusting, always interesting and fresh.

They also like to repeat patterns and motifs across their catalog, and they really like their trees, or at least their trunks.

I’ll stop gushing and get to the point : their games have been a source of inspiration for me for 15 years. ProGen entomology started as a Dark Souls inspired piece.

It might be a bit hard to see, but this is what the insects started as. You can learn more about the evolution in my previous article : https://www.ulucode.com/projects/entomology/

In Elden Ring, you encouter this creature, the Elden Beast. It is beautiful, moves gracefully and a soft harp and choir melody starts playing. Just awesome.

The game is also very much about order versus chaos, so it fits nicely with generative art.

Many of my creative ideas come as “What if that, but generative?”. Might seem not that creative to some, and that’s fair, but I consider it a interesting exercice, especially if there’s some technical aspect where I only have a vague idea of how I’ll achieve them. Here I was mostly interested in :

  • Transparency and blending : you can see inside the creature, but not behind
  • Full 3d vector math : always a challenge for me, the insects were more 2.5D
  • Organic looking meshing
  • Staying realtime as much as possible

Some other considerations came when deciding if this was a project worth releasing :

  • Spoilery : I already had some reservations when I did Takashi’s Death about the spoilery nature of the piece. Here though, we’re not talking about a 30 years old book, but a 6 month old game, still receiving regular patches. I rationalized it by deciding that most people interested in Elden Ring probably already played it.
  • Games and Fantasy : there’s friction between “gamers” and Web3 tech as far as I’ve heard, and I don’t know if this kind of fantasy will find its public on fxhash. I think this can stand on its own merits even without reliance on the game, even though it does kinda look like a video game screenshot.
  • Hardware limitations : I know I tend to overestimate the capabilities of the collectors hardware because there isn’t a component that’s more recent than 5 years old in my own computer, so I tend to think that i’m fine, but probably not. I should poll the Discord someday. Here I’ll try to include a disclaimer about it and some solutions in the token description, and do as much as I can in the code.

I decided to go with it after I managed to produce a decent prototype, and mostly because I wanted to share my love for this kind of weird imagery.

I also really wanted to do it because you don’t see much of this kind of projects on fxhash, and what you get is usually image composition projects starting with pre-rendered/drawn elements and not fully procedural, and one of my goal with this kind of work is simply to do just that, figurative and fully generated by code. Of course, as always, the fact that in runs realtime in-browser is also very important for me : I used to do a lot a Flash/ActionScript back in the days when me and my collegues had a lot of fun pushing the enveloppe on what we could do with the web, but then, with the death of Flash and the rise of the big social media platforms and mobile devices, the web got suddenly a bit more sad / formated.

Full 3D realtime world, multi-user, customizable avatars, remote controlable with mobile devices, agency website, made in 2012 for Creaktif

Now with WebGL technologies and the democratization of more powerful devices, I can start having a bit of fun once again ๐Ÿ™‚

Technical Breakdown

Branches / Skeleton

The whole creature is first defined as a serie of 3d curves. First a spine is defined, and is then used to spawn the arms and wings. Every value is normalized as ratio of the length of the curves, and nearly everything is randomized.

The various types of curve spawned

With those curves defined, 4 triangles strips at fixed angles around the curve’s tangent are generated along each of them. The width of the strips depends on the type of curve ( spine, arm, etc.) and some random factors.

An arm and hand. Notice the varying width

The shader for each strip draws some lightning-like pattern wich is then blended additively because, well, it came from the stars, it’s made of light and space. The intensity of the light varies with time, with the intensity and the pattern itself travelling along the length of the strips.

With ligthning

The shader also slightly animate the vertices positions and the colors.

Animation Close-up

Metaballs / Marching cubes

For the main body, I wanted a very organic look, and nice smooth junctions between the various curves. I went back to one of the oldest trick in the book, Metaballs.

Wikipedia says : “Metaballs are organic-looking n-dimensional isosurfaces, characterised by their ability to meld together when in close proximity to create single, contiguous objects.”

My curves being defined in a normalized space, it was easy to sample them to place my balls, and define their sizes in a similar manner. The main constraint being the level of detail that I had to balance with computation time. I needed fairly high resolution for the detail I wanted ( animating the balls would be fun, but not really realistic in this case ).

Second constraint is staying in my normalized space, while keeping the randomness high. On that front, it’s only a partial sucess : some output still go outside, but I decided I’d rather have that than constrain my randomness too much. A feature, not a bug if you will. Similarily, the arms ( or even the head ) sometimes go through the rest of the body, and I decided to keep it that way because it can produce fun stuff.

Generated mesh, pretty high density

The shading on the body is also tricky. As previously mentionned, the front has to be transparent, while the back is opaque. So there’s two passes : the back faces are black, with a colored noise defined along world space coordinates that slowly scrolls towards the bottom, while the front faces are transparent, have a similar noise on them but in a different color, plus some light and environmental reflections.

Aditionally, some horns, or maybe hair or beard can spawn near the head. They don’t follow the main skeleton. Sometimes they’re close to each other and create a weird protusion, sometimes they’re well defined and separated.

This one has only two horns.

Head

At the end of the spine, I put between 1 and 4 “eyes”. Each eye consist of a pure white sphere, a plane with some glow, but also some shadow to make the eye pop more, and some star shaped particles that pulse at semi-regular intervals. The whole object always rotates towards the camera to make it look like the creature is always looking at the camera. A bit cheeky but I always liked the effect.

Stars

Inside the creature, I add 8000 stars. The stars are simple small planes, the shape itself being drawn in the shader and alternating between a circle and a 4 pointed star. Each star is also indivudually colored from a gradient defined in the palette.

Sea

Another 2D plane, shaped like a circle, with it’s own camera to handle reflections. In the shader, I shift the normals in two ways to produces the illusion of ripples:

  • First along a noise covering the whole surface. The scale of the noise varies from seed to seed.
  • Then I create concentric circles waves vaguely centered around the base of the creature.
Notice the concentric circles. Subtle but effective

Rings and trunks

The trunks are once again, not cylinder, but just flat planes. You get between 8 and 32 per seed. Each has its own pattern, with the usual noise mix.

The rings are also flat. The shader is a bit more involved though, with the spacey script being generated from more noise, and little dots shooting out from the center. The script is slowly scrolling inside the ring, but also on itself. Each ring is slowly bobbing and rotating.

Candles

I wanted to put something in the composition to give a better sense of scale the creature. In the game, you have your player character for that (although the designers love to sometime mess you perception, like putting a boss in a completly flat black environment).

I thought about tombstones, but it’s a bit dark, swords, but that didn’t stick, and ended with little candles, that could provide some fake lights and play with the reflections.

You get 3000 of them, all animated, all of random sizes, more concentrated around the creature. I raycast its base to make sure they’re not spawned inside.

Each is composed of 2 cylinders, one for the candle itself and one for the wich, and then a quad for the flame itself.

Background

Inside a half-sphere, some more noise mixing at shader level.

Mixing it all

Adding it all together

Palettes

For this project, I designed 10 palettes, most of them being references to places or concepts from the game.

Afterthoughts

At the time of writing, I’m preparing publication and trying to optimize a bit more.

Contrary to previous projects I did for fxhash, I didn’t really set myself a precise time scope. Maybe because of the summer mood, maybe because the last 3 projects I did were developped in 1 month of furious coding, this one took probably a bit longer than I anticipated. It is more of a technical challenge, enough for me to want to do a simpler one next, maybe even go 2D.

Here’s the twitter history of the project :