Remaking ELDEN RING's Eternal City Stars

In this shader case study we go over Elden Ring's eternal city star particles from theory to implementation. Discussed topics include random transformations, emission, optimized blurring, and bloom.
Support me on Patreon!
/ acerola_t
Twitter: / acerola_t
Twitch: / acerola_t
Code: github.com/GarrettGunnell/Eld...
Join My Discord Server! / discord
Music:
Joy - Persona 3 OST
Iwatodai Dorm - Persona 3 OST
During The Test - Persona 3 OST
Afternoon Break - Persona 3 OST
Guts Theme - Berserk
Police Station - Persona 1 OST
Thanks for watching!
This video is dedicated to my friend, Alotryx.
#acerola #gamedev #graphics #unity #unity3d #madewithunity #indiedev #unity2d #eldenring #shader

[@AbhilekhPandey]

At some point he's gonna make enough tutorials to make that grass scene into an actual game.

[@qscherry9638]

Fr I hope he does Tbh guyz a legend 🙏

[@keineahnung1919]

Kinda reminds me of sekiro

[@av3stube480]

One thing you missed is the fact that the Elden Ring stars disappear when they're too close to the player. As such, I didn't like that one star really close to the camera when you were explaining the effect, but at the grass scene, it's perfect.

[@ElegantWaster]

I appreciated the tangent joke. Well done. Very entertaining and engaging presentation.

[@Acerola_t]

Thank you!

[@Straxedix]

Please do not stop the peformance tips, we need those

[@revellious1270]

Sebastian Lague but make it chaotic. Love your explanations and editing!

[@Acerola_t]

Sebastian is my #1 inspiration, thanks for the kind words

[@hellomistershifty]

I think in this case (GPU downsampling vs gaussian blur) it would make more sense to compare the frametimes instead of the percent change in frames per second. The gaussian example at 7:12 takes 2ms per frame, which is only a 64% loss if you're already getting 800 frames per second. If it was added to a complete game that was getting 60fps, an additional 2ms per frame would only drop it to 54fps or a 10% loss. (Still not great, but not quite as drastic)

[@vadiks20032]

i wonder if gpu downsampling has a name. i mean what he showed is definitely a way to blur an image i dont know its name

[@hellomistershifty]

@@vadiks20032 Probably bilinear filtering? I imagine it does a simple integer downscaling on the GPU, then scales it back to output resolution with bilinear filtering

[@vadiks20032]

@@hellomistershifty oh right the photoshop had that thing where it rescales, bilinearly, trilinearly, and based on pixels around it or smth like that

[@vincent.caruso]

What you are doing with you channel is SO useful. Please continue.

[@rando5673]

Good art that doesn't kill performance makes my brain happy. That blur trick is genius

[@ViRiXDreamcore]

Watched these out of order. So THAT’s where the stars came from!

[@equivocator7727]

A bloom technique I worked on years ago was a combination of a separated gaussian blur with the downscaling technique you mentioned here. Just downscaling is prone to bringing out the ugliness of the bilinear sampling, and just gaussian requires a large kernel size to get acceptable results, but a small gaussian kernel mixed with downscaling gives you the best of both worlds!

[@micahwithabeard]

it's beautiful. slightly terrifying out in the open sky looks like the moon exploded. probably why Elden Ring used this effect in the first place. may give this a try myself.

[@luna010]

Pro tip: rotation matrices with trig functions sucks ass I have sworn off rotation matrices with trig functions and my new best friend is calculating rotation using reflections. Any rotation can be expressed by two reflections, and for cases like this, where a flipped model won't be an issue, just 1 reflection will work. The equation for reflecting vector(vertex) 𝑣 across unit vector 𝑎 is just: 𝑣 - 2(𝑣⋅𝑎)𝑎 And if 𝑎 is not a unit vector, just divide by 𝑎²: 𝑣 - 2(𝑣⋅𝑎)𝑎/𝑎² I got this revelation from Marc ten Bosch's video on rotors from geometric algebra, which I would highly reccomend.

[@gdclemo]

You could also generate a random unit quaternion to get a random rotation, and unit quaternion to matrix is just a bunch of + - *, but this reflection trick sounds even faster, thanks!

[@DonChups]

I work on video and vfx, so coding shaders is only adjacent to my field, but still your youtubes are really interesting, and helped me understand how some of my most used effects work. Thanks for sharing.

[@fubbernuckin]

criminally underrated channel. been binging your videos for days now

[@Nayckron]

Loving your stuff please keep pumping these videos.

[@libberator5891]

Got both questions wrong in Will it Scale but jokes on you I was already subbed

[@web_dev_cz]

The Yard (Slimecide) reference was perfect 🪦

[@Hifuutorian]

Just discovered your videos. This is so fascinating and in-depth!

[@aleksandratraczyk8440]

I have no idea how to code but I love watching your videos + you used Guts theme so I gotta sub

[@jordonwaters9778]

I like the style and pacing of your videos. Keep up the good work

[@trishajchen]

would give anything to be lying in that field of grass rn

[@6884]

I would be lying if I said I didn't want to be there too

[@erthboy47]

acerola with the beard skin applied to his beard looks really good.

[@Dream-pc5is]

Are you ever going to go over how to make your grass interactable? that can be a big issue when you have so much grass, and is very important for immersion

[@Acerola_t]

Yeah! Once I get around to modeling the protagonist of my personal game project I'll go over tons of player interaction stuff like footprints and grass interaction. It's going to be awhile though unfortunately, since I'm really busy with work and school at the same time right now.

[@charactername263]

Split your world into chunks, only the 4 chunks nearest to the player need to be actively updated w.r.t player interaction, each chunk has a low resolution texture, per frame transform player pos into UV coords of the chunk, then just draw a white pixel onto the texture, you can then pass the chunk's texture into the vertex shader for the grass, and sample it for (white = flatten the grass i.e scale Y by ~.01 or so, black = leave the grass as normal) then u have grass deformation after the player has walked on it. This need a slightly modified approach if you use a quad tree for variable chunk sizes (a kind of hack to do fast culling + LOD grass density) so you'll need to change the texture res down as the chunk size goes down. I've been working to add this as a feature to the Terrain class in my game engine.

[@NoTengoIdeaGuey]

Yeah that ish is lookimg good. Pan a lil bit of perlin noise across the emissive shader to give the stars a teeny but of twinkle? 🤌 Great video, dawgie. Keep it up.

[@n00dles4]

your videos are so good, I hope more devs find you

[@devrolo]

i was watching hasanabi right before this video lmao tripped me out

[@AlexBoscan]

Your videos are great!

[@pixeldevlog]

love this channel

[@CausticCatastrophe]

it looks nice, i love how chili the vibe is getting with the grass scene.

[@TopchetoEU]

7:55 this gpu is working harder than a single mother on new year's eve

[@squiddler7731]

I think if the stars were just a bit smaller in that preview with the grass, it'd look incredible

[@martin.m.kloeckener]

Nice one! Although the stars in Elden Ring aren't distributed evenly but form clusters. That looks much more credible.

[@solitudesf8111]

another acerola banger

[@Tarodev]

174 triggy boys

[@peacefulexistence_]

5:09 that berserk music

[@EgorChebotarev]

Nice video

[@fraluna92]

best remake ever, thanks :)

[@LFPAnimations]

it might be worth adding another gamma correction over the stars after the bloom to lighten the bloom effect. Right now it is so strong it is lifting the black level and appearing washed out.

[@cainanlove8432]

Beautiful.

[@Blaxpoon]

Does the blur trick have a name ? Is there a way to use it in after effects or photoshop without doing it manually ?

[@Acerola_t]

The blur trick is called something like blurring by gpu convolution and is only applicable in real time since if you're using photoshop or after effects you can use a real blur like gaussian.

[@tinocaer]

How do you apply the bloom effect to only the stars and not the grass and cube in the final scene?

[@Acerola_t]

Since the stars are emissive it's very easy to get the stars into the bloom threshold range while keeping the grass out of it

[@whidzee]

How would you go about adjusting the positioning of the stars to give you a milky way type of stripe in the sky rather than just having a fairly even distribution of stars everywhere?

[@Acerola_t]

Probably using 3d perlin noise during the position generation rather than white noise

[@uncoherentramblings2826]

Are your title cards and name inspired by the Monogatari Series?

[@Acerola_t]

Yeah it's my favorite show

[@uncoherentramblings2826]

Great videos btw! I feel very proud to have gotten the references :)))

[@wareya]

you can also do a gaussian blur to the most-downscaled image to make it cheaper, and in two passes, once just horizontally and once just vertically. gaussian blurs are "separable" in this way and it changes the expense from n^2 per pixel to just 2n, and doing it on the most-downscaled image makes it even cheaper on top of that gaussian blurs are the same as an infinite number of infinitely small random blurs applied on top of each other, so gaussian blurring the downscaled image doesn't hurt anything also to be physically accurate bloom should happen at a step in the post-processing/presentation chain where colors are represented in linear/physical light (or you could convert back and forth as needed)

[@Acerola_t]

The result would be basically the same but I assume the gaussian blur would still be much slower and yeah I put bloom after lighting post processing effects (ssao) and before color grading, I put it at the end of the post processing pipeline here for simplicity but I go over a more concrete effect pipeline in the HDR post processing vid

[@wareya]

@@Acerola_t very nice, I approve

[@qscherry9638]

This guy gives me the Vibes as of "the Next Toby Fox" or the Acerola himself

[@nikz000]

KING

[@6884]

One question and one observation: If you already scattered your points at random in polar coordinates as first step, what's the point of adding positional noise after the rotations? (I might be making up words but I can't go back and check the real ones) And, looking at the sample images from ER you're showing, I think it would make a big difference to not assume that stars are distributed randomly but use some density map. After all it's galaxies and all that shiz that give the extra wow factor... But seriously, your channel is a jewel

[@Acerola_t]

The positional noise is added to each vertex to give random distortions to the mesh so that the stars arent perfectly uniform. This is different from the world position of the star since adding more noise to that would not deform the mesh as it is added equally to each vertex. A density map would def improve it but I kept it random for simplicity. Thanks for watching!!

[@crediblesalamander8056]

Surprisingly enough, only about 4500 stars can be visible at once to the human eye. So stars are some of the easiest things to not fake in a video game. It's one of the few times where you can choose to render more of something for stylistic reasons, rather than be forced to render less things than reality to not summon the performance police.

[@jonathansandusky7446]

I have the same camper trailer. I think, haven't touched it for years but it looks identical. Thing probably has a dead battery.

[@Acerola_t]

It's pretty nice

[@velvetgrit6249]

I gained IQ points from that breakdown of why box blur and gaussian blur aren't practical + an alternative methods that is. Optimization makes me go a big rubbery one. Thank you for being so detail oriented and actually explaining why and how all this worked.

[@Acerola_t]

The fast blur is really great but only works when you want to blur the whole render, so that's the trade off. Gotta make a video on different blurs for stuff like depth of field lol also thanks!

[@CreepyHandedMan]

Quick question: wouldn't it be better to make the rotations using quaternions?

[@Acerola_t]

No because in this case the position translation, scaling, and rotation, are all done with a single matrix multiply.

[@CreepyHandedMan]

@@Acerola_t You're right. I guess quaternions would be more meaningful if you wanted the stars to rotate constantly and smoothly, but it's not the case so it's a bit overkill.

[@TeamDman]

Holy guacamole

[@oryxconceptual]

you use jakey song... you are now best dev-log style youtuber. thank you have good day

[@TM39Games]

Is there a way to get this to work in URP?

[@Acerola_t]

Not my code no since it's made for the built in pipeline, but if you are proficient with URP then the same theory behind all the decisions I made still applies.

[@lucas-lis]

9:06 - Answer: Hollywood

[@juttboy7213]

I have no idea what any of this means, but they're like shit post tutorials. I love it, more pls

[@JanbluTheDerg]

One day I'll have to actually learn how to make shaders (my uni professors just went, okay here's shader graphs because actual shader code is too complicated for y'all right now, have fun) and this channel will be my bible... at first before I then am forced to pack up and go read studies.

[@nguyenhoangminhtrung2779]

holy algorithms please help me help this man move out of his trailer.

[@Carlos-ux7gv]

Now you have to just simulate light pollution and reduce stars to 3 or 4 stars only, with an orange tint for the sky :-)

[@grochlin7106]

#AcerolaLiedPeopleDied

[@oivinf]

I've watched practically all your videos but now learning that you voluntarily use Maya I'm gonna have to show myself out

[@Acerola_t]

bad news but everyone in the industry does too!

[@oivinf]

@@Acerola_t I know because I had to learn it in college for that exact reason 😭 but considering it had a habit of crashing about 50 times per day I switched to Blender and never looked back, industry be damned

[@lorenfulghum2393]

I like doing things in shaders and all, but for this, with the amount of actual parallax any player can see from the ground, you might as well do it the way the earliest humans did it... with a skybox, or a textured dome. Or at the very least, instead of generating all the star data like the point cloud, the transforms, etc, at runtime, at least read them from some kind of noise texture. I'm 99% certain most of the skies in elden ring are matte paintings with a high res flow map running the cloud movements. I guarantee you they aren't doing anything volumetric up there.

[@lorenfulghum2393]

Also, honestly i didnt see if you did this, but with the point cloud method, be sure to offset all the positions spherically around the center so the character isnt walking thru stars.

[@Acerola_t]

If it's a skybox then you don't get the feeling of the stars actually existing in the space which is pretty important.

[@Acerola_t]

and I can assure you the stars genuinely exist as meshes in the space, pretty sure I demonstrated that in the video

[@lorenfulghum2393]

Right, I understand why you would do it, I'm saying, the amount of parallax detectible on objects that size from that distance is miniscule. At the least, it's something you would look at in an optimization pass... a candidate for something to streamline.

[@lorenfulghum2393]

​@@Acerola_t oh, sorry, yeah, in Elden Ring they are using a mesh BECAUSE of the Siofra Well descent which DOES allow you to see the parallax. My bad., I forgot about that factor. I was thinking in terms of something you would only ever be seeing from the ground.

[@Amipotsophspond]

if you use a Tetrahedron(en.wikipedia.org/wiki/Tetrahedron ) or Triangular Bipyramid (en.wikipedia.org/wiki/Triangular_bipyramid ), it would take 2 or 1 less verts. that is 1/3 or 1/6 less verts. that could be 2,000,000 or 1,750,000 stars.

[@Acerola_t]

This is true, but the exercise is to recreate elden ring's star particles specifically.

[@johnd5149]

the elevator in east ligma

[@Thk10188965]

Acerola did you know you were speaking Vietnamese this video (according to auto caption)

[@loudnoises8197]

a beard suits you

no timestamps :(((((

[@kdhlkjhdlk]

I think I'm going to have a sandwich.

[@RugnirSvenstarr]

Why no star move

[@Acerola_t]

cause they dont move in the game idk seems self explanatory

[@RugnirSvenstarr]

@@Acerola_t i meant like see how it looks with camera movement

[@polyfoxgames9006]

Why not just use a cube map?

[@Acerola_t]

because the purpose of the video is to recreate the asset from the game and the game does not use a cube map

[@polyfoxgames9006]

@@Acerola_t fair enough! Thank you for responding so fast haha. When I first saw the effect.I just figured it was a skybox

[@alexnoman1498]

These are highly symmetrical objects. Why not instance ~8 different rotated stars and eliminate all trig?

[@Acerola_t]

There is no trig beyond the initial position generation on game start. The transformation matrices are precomputed so it boils down to a single matrix multiply in the vertex shader.

[@charactername263]

@@Acerola_t There's some hidden cost, you're sampling the buffer you stored all of those transformation matrices in. They're all stored contiguously though so it isn't very expensive and you'll have a near perfect hit rate, it's just that once you start going to millions of instanced entities you might find some tex interface gets saturated and bottlenecks the pipeline. It'd be interesting to see how the current approach performs avg FPS wise, compared to the rotation via reflection method as suggested by @Luna which may eke out a lead at high instance counts - or not, who knows?

[@Acerola_t]

@@charactername263 You arent sampling anything it's an array not a texture.

[@charactername263]

@@Acerola_t To pass so much data to the GPU it's necessary / strongly recommended to instead write the data into a buffer and then bind and read the buffer contents since you'll be limited by the GPU's max vertex array uniform components. Maybe Unity automatically deals with this under the hood. When the GPU reads from a buffer it uses the same / similar interfaces as sampling a texture (cos really it's all just reading from GPU memory) so the SoL shows on the TEX SoL, at least in theory.

[@Acerola_t]

@@charactername263 That's literally what I am doing is passing the transformation matrices in through a buffer

[@sharpfang]

One question: why solids, not particles?

[@Acerola_t]

There's no real difference unless you mean why didn't I use a point mesh and that's because Elden Ring does not use a point mesh

[@sharpfang]

@@Acerola_t 6 times as many vertices, 8x triangles. Probably a bunch more calculations too, culling, shading and whatnot. Particle being just a small bitmap splashed flat (no 3D orientation) always facing the camera feel to me like they should be vastly lighter computationally. I haven't been up to date with 3D tech since Quake, so I might be totally wrong about how modern GPUs handle them, but "back in the day" they were universally cheaper than faces.

[@Acerola_t]

@@sharpfang I'm saying that the word "particle" is kind of just a blanket term and doesn't refer to any specific kind of mesh lol Yeah you could do billboarded quads but from my observations in Elden Ring that was not the case and it is in fact real geometry.

[@sharpfang]

@@Acerola_t Yeah, but don't take Elden Ring as a paragon of optimal game design. Elden Ring does *lots* of completely unnecessary work no-one's ever gonna see, models that are still loaded but marked as 'don't display', complex layers of clothing/armor on characters where the under-armor layers are never shown, hundreds of megabytes of unused voice track you download and install, entire complex quests that were 90% complete and are there but impossible to begin... and the engine lacking some really trivial features most other open-world games take for granted - like NPCs being able to walk while out of combat, and flying enemies not falling to death when flying over the edge of a cliff. It really feels like From hires an army of artists, writers, designers, animators etc, and a small handful of interns to write the engine code.

[@jadonut249]

@@sharpfang His video is about making the Elden Ring stars, so he did just that. You miss the whole point of the video if you ask why he made the stars similar to Elden Ring stars.

[@elliejohnson2786]

Tried replicating in blender, crashed because emissives give off real light in blender and my pc can't handle 10,000 light sources.

[@Acerola_t]

surely there's a way to do emissive surfaces in blender without it being a real light source

[@UsernameGeri]

@@Acerola_t Yes, Eevee.

[@lucbloom]

Engagement comment

[@RobertMilesAI]

The subtitles for this video are just staggeringly bad, it's bizarre

[@Acerola_t]

ai generated subtitles moment

[@RyanEglitis]

Hasan catching strays 💀

[@Eugensson]

Love the result! Unsubscribed.