Real-time 2D shadows | HUGE improvements!
ฝัง
- เผยแพร่เมื่อ 12 พ.ค. 2024
- 40% off CodeCrafters membership: app.codecrafters.io/join?via=...
Become a member: / @barneycodes
Join the discord: / discord
Code from the video: editor.p5js.org/BarneyCodes/s...
Wishlist Star Mining Co. on Steam and join the play test: s.team/a/2584800/
Original reddit post:
/ comparison_with_and_wi...
Basic lighting calculations: learnopengl.com/Lighting/Basi...
Voronoi Noise: openprocessing.org/sketch/564686
Chapters:
0:00 What is this project?
0:28 Fixing the speckles (for real this time)
2:30 Colour banding
2:50 Softer shadows
3:49 CodeCrafters.io
4:50 New lighting model
6:18 Specular highlights
6:50 Waves
7:31 Water improvements
8:08 Star Mining Co.
8:22 Next steps
Thanks again to your great suggestions, I've made some massive improvements to my real-time height map shadow shader.
This video focusses on the visuals, fixing up some artefacts, changing the lighting model, and improving the water rendering.
Follow me:
Twitter: / barney_codes
Reddit: / barneycodes
#shaders #glsl #gamedev - วิทยาศาสตร์และเทคโนโลยี
Help support the channel AND get 40% off CodeCrafters membership: app.codecrafters.io/join?via=BarneyCodes
Check out the original reddit post that inspired this project:
www.reddit.com/r/generative/comments/xz7tlf/comparison_with_and_without_raytracing_for_my_2d/
Become a member: www.youtube.com/@BarneyCodes/join
Join the discord: discord.gg/Qnc3jWTeEW
Thanks everyone for the support on this project, I'm still amazed by how much traction it's gotten! As always, if you've got any suggestions, please let me know in the comments so we can make this as cool as possible!
The ambient light should be the same color as the sky! :D If you try shifting it towards sky blue, the shadows get a more natural look. Really cool project!
Oh that makes a lot of sense haha! Thanks for the comment!
There is no ambient light in real life, but what we usually refer to as ambient light is the sun light that scatters through atmosphere and makes it's way to the object from directions that are very different than the direction of the sun.
It is an ok approximation to have it the same color as the sun but really, if we look at the sky, which gets its color the exact same way, it is not all white/sun colored, but blue. This happens because our atmosphere scatters different bands of light differently and blue gets scattered a lot more so even if a light ray originally misses us, if it its blue (and the sun shoots off all kinds of colors which eventually add up to white) it gets a lot more chance to turn around inside an air particle (or multiple) than the red that is most likely to just continue forward into the vast nothingness of space.
The most accurate approximation of "ambient light" without raytraing the entire atmosphere is therefore image-based lighting where the image is your skybox. So sun-colored in the front, and mostly blue on other sides, a bit darker in the back maybe. And because we simulate sun light separately it should also be somehow taken out of (subtracted from) that skybox. Just making your ambient light blue is usually a perfectly reasonable approximation.
TLDR: Ambient light should definitely be sky-blue if it has to be a plain color
Ultimately, I think you could combine this with the sun-position model to get better sunsets.
The color of a surface should be dependent on the average color of the sky in the direction of its normal.
The sun would have a huge weight advantage due to its high brightness.
I’d implement this by rendering a skybox (in my head it’s a unit-sphere, but a cube or plane is probably easier) of moon and stars (rotate it if you like), then use a Rayleigh scattering model to tint the skybox based on the sun’s position. After that, before each frame you can pre-bake sky-averages for each normal with by blurring the skybox (this blur would have to account for projections if you aren’t using a sphere and want maximum accuracy, but doesn’t have to if you don’t care) and taking the skybox value at the normal, and finally when rendering the scene, you’d combine the skybox value at the normal with the sun based on whether the sun is visible using your existing methods to color each pixel.
For better night-time rendering you might want to remove the moon from the sky color model and make it work like the sun.
Holy smokes, BarneyCodes, Acerola AND Sebastian Lague videos, all in a week!? You guys spoil me!
I love these kind of technical videos relating to graphics. I used to learn gamedev (went to school for it and all that), but after learning that working for 80 hours can be "normal" in gamedev I noped out of that field. I now do "boring" data engineering, but still love to learn about graphics, etc.
Glad you found it interesting! I've always loved these sorts of videos too, it's a bit surreal to me to be able to contribute to them as well!
Yea the crunch in the game industry definitely turns me off it, so I don't think I'd ever do it as my main job, but doing it as hobby is a lot of fun! (I'm just a regular software engineer day to day)
Thanks for the comment and the support!
Exactly. You have a very good taste of video list. Just like mine. XD
Don't forget CodeParade :)
if you expand it in the future, sailing around through a big map on a little wooden ship would be what I would want. Getting into little scuffles with pirates, maybe trading with villages on islands, maybe even being a pirate! I can imagine it as a really cute title.
That sounds like a lot of fun! Another person suggested an ocean exploration game, I was thinking it could be a lot of fun sailing around as a pirate trying to find treasure islands!
Thanks for the suggestion!
@@BarneyCodes hell yeah. Good luck with your other game btw. Looks like a lot of fun.
I don't know if anyone else has said it before but I think it would be cool to have some sort of cloud simulation going on over the island where the clouds float around and change shape over time, maybe even casting a soft shadow as well.
That would be awesome! I wonder if I could even do a full weather sim - evaporate water from the ocean, the altitude of the mountain would help form the clouds, and then it could rain back down into the ocean again? Could be fun!
@@BarneyCodes Yeah I totally agree! I was thinking along those lines you could turn it into a game where, like you said in the video manage an island, but you could tie in the weather sim and make more around natural disasters. I'm a hobbyist game dev so I can see how it looks like a simple idea but would end up probably being crazy hard...
It's always the way isn't it haha a nice simple idea turns into 3+ years lol
@@Godot-Game-Devat first i thought that you were talking about the shadows the clouds cast (like the camera is floating below them)
Btw it'll be cool if the clouds will cast semi transparent shadows!
In processing which p5 is based off, you can use different texture modes like R32F, which gives each pixel a single 32 bit float instead of 4 8bit ints. Perhaps this works in p5
I think you're right actually! P5 just introduced a new FrameBuffer renderer and I think it supports floating point textures! I haven't played around with it yet, but I think since I'll be porting this it Godot, I might just leave this as it is.
Definitely a good call if I was going to stick with P5js though! Thanks for the suggestion!
Congratulations on the progress!
The way you're currently packing/unpacking the heights is not very efficient: you're only increasing the number of possible values that can be represented by a factor of 4, instead of the way higher factor of 256*256*256 you showed in the calculator.
Assuming you want/have to keep using floats, a more efficient way would be to use your own binary representation, where height = 8*r+4*g+2*b+a. That gets you a factor of 16x more possible values, already a big improvement.
Finally you can cast the rgba components to integers (after multiplying by 256), bitshift them together and then cast the result back to float. That should allow you to use the full number of possible values.
I knew my method wasn't the best but I didn't realise how garbage it was hahaha!
Thanks so much for the info, I'll have to fix it up in the next version :)
@@BarneyCodesAnother option would be to treat each channel as a quadrant of the pixel, since horizontal resolution is in more demand than vertical. Red could be midpoint of the top left quadrant of the pixel, green the top right etc. This would give you an effective resolution 4x higher than the original image
@@BarneyCodesMaybe my memory betrays me, but isn't there a texture format that's R16G16? Even just an R16 or R32 would do you well if it exists in your API. If it doesn't you can reproduce it from the individual color channels:
value = u32(sample.r)
@@BarneyCodes I forgot the *255 inside the cast, but you get the idea.
Trying to wrap my head around this, but I'm assuming in this instance, you wouldn't use any of the values between 0 and 1, right? So it's just binary with 0.0 and 1.0 instead of ints?
its really cool seeing progress on this!
i have a suggestion, but of course feel free to ignore it. compared to the kind of cell shaded look of the island, the ocean is really visually busy (lots of detail and contrast just within the waves) which takes away focus from the island. you could make it less detailed and have the island stand out more by having less points in the voronoi texture (making each section of it bigger).
also, this could be a fun setting for an ocean exploration game if you want a more lighthearted game :D
Great suggestion, I see what you mean! I've actually scaled the voronoi texture down, so I could even just scale it up a bit, and maybe I could turn down how much influence the waves have as well. Definitely something to play around with!
Maybe you could play as a pirate looking for the island with that has the hidden treasure?
@@BarneyCodes Looking at drone footage of actual islands, I think all your water is really missing are waves! I know I watched a youtube video from a different indie game dev, but I can't seem to find her video. I do know DevDuck has made something for it as well.
Good suggestion. Something like Zelda Windwaker's use of white voronoi might be quite fitting for the sun baked vibe this demo is giving off.
@@roskelld oooh good idea!
Cool to see more advancements on this! Was a great starting point for my pixel art shader!
What about some game about triggering underwater volcanos to make islands. I realize thats harder than modifying the water level, but playing with the texture map could be an interesting exercise.
Say you control the elements - fire builds up to trigger eruptions and clear grass/trees, water adjusts water level and causes rain for errosion, wind also does a different kind of errosion and blows seeds into new areas. Goal is to terraform certain characteristics of into the island to attract different kinds of wild life or create different resources
That sounds amazing! Could be a good challenge, thanks for the suggestion!
I can slowly see this evolving into a game/simulation after you realize that you put good effort into what started as a test
The game this makes me think of would be something like this: The player triggers a volcano to raise a new island, then plays a very simple ecological sim game, maybe just tile placment or something, to establish plants on the island. After some time animals arrive, migrating birds or turtles looking for nesting sites or maybe even humans in canoes, and if the player has set up the island well enough to be inhabitable they get points and can move on to raise a new island in the archipelago and set it up in turn.
That sounds cool! It might even be possible to simulate the lava flowing down the height map!
Thanks for the suggestion!
@@BarneyCodes That seems very cool too. What if the players could almost spam the placements etc. - but it's all about balance and slowly letting the island develop it's own ecosystem? I don't know how you would do that though.
Simple game idea here: When I saw you change the water level, the first thing I thought of was volcanic activity forming islands. I don't have a solid idea about how this could be gamified, but I think a game about stoking volcanos in order to grow an island into a continent has potential. Perhaps you could have other factors influencing the water level, such as pollution caused by the ash from eruptions, or you could simulate tectonic plates shifting and changing the world. Regardless, I think this is an idea worth looking into!
Very interesting idea! It might even be possible to simulate the lava flowing down the mountain collecting in pools and then solidifying into stone! Thanks for the suggestion :)
since height is a core element to this game-to-be I was thinking of a Worms style shooter. You bomb each other which rips craters into the landscapes and transforms what the island looks like and where shadows land. You could have an additional 2D view, a vertical plane that you rotate around your currently active unit and align it with your target unit.
That could be a lot of fun and probably not too difficult to get working! Cheers for the comment :)
Happy i could Help . Great work !
Thank you!
2:50
It might be possible to create a blur by creating multiple, more transparent shadows then offsetting the angle of each shadow slightly. That way, the shadows would be more solid near the origin of the shadow (since the shadows would overlap more), and more blurred near the end of it.
I should really try this out, I just assumed that this would be too slow and would no longer run in real time, but I won't actually know that til I give it a go! Thanks for the suggestion!
An old game idea that I had (I will never make this myself) was a city/town builder type thing taking place on an island where the water level is slowly lowering as part of the progression, giving you gradually more island to work with as well as revealing more resources to use, maybe that could work for this.
That sounds fun! Thanks for the suggestion :)
If you want a cozier game, one way to use the water level mechanic is for digging up treasure when the tide goes out! You of course can't focus on individual scavengers too much, but you can manage the economy of treasure finders on the island, and prepare for full moons and stuff like that. Just a thought. Easy to pair with a fishing economy too, maybe for when the tide comes *in*!
I like that a lot! Something tidal could work very well!
I think making this into a physics sandbox game like Sandboxels would be really cool. Maybe give it an ecology theme with the player's actions having a direct impact on flora, fauna, geography, and weather. Personally, I would love to be able to add or substract from the existing terrain and see it interact with the surrounding water in a satisfying way.
Would almost be like a zen garden, that sounds lovely! I think it should be relatively straightforward to add/subtract to the terrain since it's just a heightmap. Thanks for the suggestion!
I would make distance blur detection with taking 2 additional shadows (+ and - angles, gives additional parameter of blur) and getting inverse intersections and blur those. Good video!
I definitely think this is the way to do it but, unfortunately, I don't think my current implementation is fast enough to handle multiple rays per pixel. I think the mip-map optimisation I covered in my last video would probably allow me to do that though so I'll look into it again when I make the move over to Godot
Thanks for the comment!
Maybe a game about ocean trade logistics ? At the beginning you have two outposts and a wooden ship to ship things to and from, you can choose what to ship based on the market, then as you make more money you can unlock bigger/more ships, make new outposts to plan more complex routes, maybe unlock new trading routes with canals etc... Maybe once you go from sail ships to fueled ships, you have to manage speed/fuel cost economies. The game could also have events like Plague Inc. does where there is more demand for a specific ressource somewhere or there are lots of passenger to move.
Weather/winds could impact travel times and maybe you can lose some ships if you don't avoid storms
I really love the sound of this, but I think it may be outside my ability to create (at least in a reasonable time frame). Maybe a slightly stripped back version could work though? It sounds like a lot of fun, thanks for the suggestion!
A lot of people have suggested a pirate based game, so maybe some of these ideas would work well with that?
@@BarneyCodes Yeah I just threw everything that came to mind on the wall, if any of it could be of inspiration i'd be very honored.
Interactive prototype idea, using ML5 with Facemesh package (or Posenet?) - have the head position of the user control the sketch!
Project it on something and hide the webcam for extra effect. Change the island layout based on the context where you're demoing the prototype. A gimmick for a party, perhaps? The final step, of course, being to place the users face within a teletubby-like sun with low opacity, and a yellow filter.
That actually sounds completely amazing! I should get a kinect webcam thingo (distance sensor) so that the room can become the heightmap!
Really love this idea, teletubby sun is the icing on top haha!
Idea for the game.
The water level is really high to begin with. The goal is to reach balance with water and force it to recede to an acceptable level you get it to recede by building carbon capture devices. The carbon capture device is dependent on electricity. The last solar generator on earth powers the first carbon capture device that keeps the water from taking over the top of the mountain. As the water recedes the biomes change. The mountain top becomes frigid and has more cloud cover making the electricity generation drop which then makes the carbon capture output drop.
Interesting idea, I like it! I really like the idea of using solar power because it would work nicely with the sun/shadow system and I could somewhat accurately simulate the efficiency of the panels changing throughout the day, taking into account shadows and what not.
Thanks for the comment!
add a shoreline effekt / make the waves less pronounced in shallow water.
remember subsurface scattering in the water, so the shadows should be more blurry (or increasingly transparent) if they fall on water (here the blur would be quite a bit better)
For the heightmap data, there should be a color format available called something along the lines of r32, which is just all 32 bits allocated to one channel. That is way easier than bit shifts.
As for the water, I recommend turning the exponent up a bit on the specular highlights to make the surface look more smooth.
I could see this being perhaps a pirate/trading game where you develop your maritime trading empire on some Caribbean island
I'll definitely change the heightmap texture format when I port this over to Godot, P5js makes things like this very tricky, so I wasn't even aware that was an option! Thanks for the info :)
I'll have a play around with the specular settings too
I think more and more I'm leaning towards this as well, a few people have now mentioned pirates and I think that could be a lot of fun! Thanks for all the suggestions
Artillery game! One where you have to place your own infrastructure on an island, an enemy does the same, and you fire shells, sinking their ships, destroying the terrain, settimg forests on fire, poisoning the water. Could easily add deckbuilder roguelite mechanics or other forms of progression for variety and replayability.
Oh that's a good one! And the terrain is super easily modified too since it's just a height map, could be like a top-down tanks game!
@@BarneyCodes Yep! Could model stuff like corrosive liquids flowing downhill from the point of impact, shadow/light being important for e.g. solar panels or as fog of war that hides stealthier buildings, bonuses for placing them on the right type of terrain or proximity. I think it could be pretty cool.
@@BarneyCodes Or, you know what? Artillery game concepts could honestly be combined with an ocean exploration game like others suggested too, playing role as siege and base defense mechanics in addition to ship-ship combat. I'm not sure this sounds convincing to me, but it'd definitely be something of an unique take :-P
The world is bleak enough. A cozy fishing village sounds beautiful, relaxing and enjoyable! :) Perhaps try various biomes implementation.
I think you might be right!
It'd be cool if it was a management sim where your islands become flooded periodically, sinking your structures under the waves. Once the flooding ends and the structures re-emerge, you'd need to fix them. To prevent frustration, the first island could be larger than the rest and more resistant to flooding. This island could be used as a base to launch repair operations to other islands which hold precious resources needed to progress. With the procedural generation, you could theoretically find the exact type of island you're looking for to advance your resource network.
This is a cool idea, I like it a lot! Thanks for the suggestion :)
The first game Idea I had would be some kind of "city" building with the special difficulty of extreme tides.
Amazing work
Thanks!
Random terrain generation and the ability to move around would be a good addition. A very interesting project.
One other interesting feature would be the addition of biomes by partially simulating temperature, as demonstrated by Artifixian in the Worldbuilder's Log series.
The terrain actually is randomly generated at the moment, I just didn't show that in the video! This project started out as just trying to see if I could get the shadows to work so the terrain generation was just the most basic implementation, but I think this would be a great project to try out some different techniques.
I've been meaning to try doing the whole temperature and humidity based biomes for a while, so I think that's a great suggestion, thank you!
Another nice approximation of smooth shadows is (if you're using raymarching) to also store the smallest distance of ray (on its way) to the terrain and add it kinda like that:
default_shadows += mix(1, 0, smallest distance * constant); //(1 is shadow; 0 is noting)
This will make the shadows a little bit bigger and is physically absolutely incorrect but it's a nice cheat :).
Really great suggestion, thank you! Keen to try this one out!
@@BarneyCodes glad to be of help
the one thing I would change is the intensity of the sunset effect. I feel like the island becomes way too dark too soon. In your example everything is red when the shadows hardly leave the island. In reality you need a really shallow sun to get into deep reds.
You're definitely right! At the moment it's just a linear interpolation based on the angle of the sun so not very accurate at all! Thanks for the suggestion!
I'm very happy to see the more seamingly realistic shadows. I have to admit that I found the jagget version from the previous itteration a bit more appealing
I think the previous version had a nice cartoony vibe to it which was kinda nice. I also think the current soft shadows could use a bit of work, so hopefully they'll improve too :)
This effect would look really nice combined with a voxel space engine (a 2.5d 3D engine that uses a heightmap to generate 3D voxel terrain)
I haven't heard of voxel space engines before but they sound cool, I'll have to check them out. Thanks for the comment :)
the version of softened shadows you implemented have some nice implied bounce light to them
They certainly aren't the most accurate but I think they look alright! The perfect version probably keeps a little bit of this while also getting the penumbra shadows to work properly
Fwiw, the more physically correct way of doing soft shadows would be to shoot multiple shadow rays with random direction offsets based in the sun's radius, then averaging the coverage. Assuming you're tracing the heightmap's mip chain, I'd think you could reuse a lot of the work between rays so that it is only more expensive in practice for pixels that actually need more samples.
Alternatively, you may be able to do a form of cone tracing by doing an occluder search along the radius of the cone and getting partial coverage that way. I could see that being faster than actually tracing multiple rays.
There's maybe an optimisation there as well to start with the ray that's most horizontal, since if that doesn't hit the terrain, none of the more vertical rays will (since height map terrain can't have overhangs). Definitely think this would produce the best visuals, would be interesting to see if I could get it to run in real time!
Thanks for the suggestion!
@@BarneyCodes considering this, maybe you could even do a sort of binary search to find the coverage
this is actually a brilliant idea
start with a full-sized cone, then chop it every time the terrain interferes with it, until some percentage of that cone is still reaching the sun
knowing that it can be only chopped by terrain this seems really straightforward
also, cone in 2d is just a triangle, and in each step, we only need to keep track of the line segment on that triangle, and see which part of it gets clipped by terrain
I can see the technology being used in anything top-down, mainly RTS and strategy
That's the plan! I feel like it's a pretty straightforward way to add shadows to any height-map based game (I might need to clean it up a bit for it to be properly usable for that, but that's part of the idea behind it!)
When I move it over to Godot, I might try and make it a plugin/asset type thing so other people can use it as well, and make it so you just plug in the colour data and heightmap data and you've got shadows!
I'd love to see the wave noise function mixed with a little sine wave amplitude modulated by the closest distance to the shoreline!
Great idea, thanks!
For the bit packing of the colour channels, multiply the float by 255 while rounding to int. then you can store the entire int4 as your colour 0-1 values.
bear with me, I dont use GLSL anywhere close to as much as I do HLSL:
vec4 color = texture(tex, uv); //Your texture RGBA
uvec4 parts = uvec4( color * 255.0 ); //RGBA [0 | 1] -> [0 -> 255]
parts
Oh that makes a lot of sense! For some reason it didn't occur to me to just make the floats into the 255 range and make them ints, thanks for the comment!
Great video! You can also add ambient occlusion with blurred/mipmapped heightmaps it is very cheap and simple
Thanks! I'll take a look at adding that into the next version :)
To get smoother shadows, a different approach is to sample from multiple closely aligned directions, and average their results out. That's of course rather expensive, but given that your current implementation seems fast enough it might still be feasible.
I'm not going to lie, I sort of just assumed that it'd be too slow, but I should just try it out and see what happens!
A combination of bleak and cozy is like crack to the gaming world
Hahaha love it
@@BarneyCodes
That's so cool and inspiring!
Thanks so much :)
if you store the heightmap as BC4 or BC6 you can get more than 8 bits of precision out of the textures, a LOT more in the case of BC6
Would be cool if you added fresnel/PBR shading and texture maps to your terrain shading model which would significantly boost realism and allow you to better define different materials and represent them realistically!
Thanks for the suggestion, seems like I've got some more reading to do!
Yay new video!
Textures don't have to be RGBA 8-bit/channel. For a height map you should use a single-channel texture (e.g. depth map). It can be a single float even, or a 32-bit integer if you want.
Thanks for the comment, very helpful! When I move this over to Godot I'll be sure to look into it :)
i think adding clouds and letting them cast shadows based on their hight and the sun possition would be intesting
Clouds would be great!
You could also simulate water using FFT. Also, the shoreline is rather harsh. Maybe you could blend (final color) between the terrain beneath the water and the water by distance
Acerola did a video about this somewhat recently didn't he? Could be fun to try and implement!
I do blend the terrain and water colour based on the water depth, but I've also got some little wave things around the shoreline, maybe I need to tone them down a bit?
Your game iddea is great. And since you have the code for sun and shadows and other stuff, the way you place the solar panels or the way panels recieves sunlight may matter. And maybe you can add wind mechanics and wind turbines may have a role also.
I was thinking along the same lines, it would be great to actually use the sunlight/shadow system as part of the gameplay and I think solar panels would be a great way to do that!
I'll have to see about simulating wind as well, might be a bit more complex to figure out how wind would flow around the island!
Thanks for the comment!
This could be a game about building a little island fort and defending against pirates every now and then, and maybe you could have a weapon that lowers the water level nearby, making their ships stranded and forcing them to attack on foot. And you could use terrain physics to make water-powered contraptions, to power your defenses, or dig deep inside the island to find safety in the caverns. Or it could be a little island exploration game, where you travel in increasingly complex boats from island to island, finding crew and ship upgrades, and maybe having some story-driven content (maybe with AI wink wink).
Oh I like that idea a lot! Maybe you could play as the sun and moon so you can change the tides. Depending on the enemy that's attacking it could be beneficial to do high or low tide.
A few people have mentioned an exploration game too, so I'm wondering if that might be the direction to head in!
Thanks for all the suggestions!
Another weird hacky thing to try: Invert the depth texture, multiply it with the ambient when in shadow. Then use contrast & overall effect strength to dial it in to taste, and you got the world‘s quickest, dirtiest ambient obscurance.
This looks very impressive!
I wonder if it would be hard to make water translucent, i.e. render the bottom of the sea first and then overlay the water using water depth as the alpha channel (the deeper the water is, the less of the bottom can be seen).
Thanks so much! This actually happens already, but the alpha drops off non-linearly (as in it very quickly becomes less transparent) I could probably tweak it so that it lets more of the bottom of the ocean bleed through though!
Thanks for the comment!
Thank you for another amazing video!
As for the game idea - why not both your options? Think about some sort of idle game, where you start with some villages of fishermen, buying more fishermen to get more fish, etc. And in time you buy upgrades and face new challenges - such as keeping CO2 low enough while still trying to power your fish-catching industry. Also, if the water rises - there's more fish to catch (the base rate of catching is higher), but you're closer to losing. And vice versa.
That's a great idea! I like how it is sort of self balancing too, it gets easier when you're not doing so well and harder when you are, it's like a built in difficulty system!
Packing HDR/float values into 8-bpc LDR RGBA textures can be done efficiently with Logluv. It's fairly simple and should be suitable for realtime rendering.
Thanks for the info, I'll have a look into it!
@@BarneyCodes I should include a disclaimer though: Logluv is meant for HDR color rather than arbitrary numeric values. I think the general idea behind it is useful though: put the precision where it matters and compress the hell out of everything else.
You can try a similar method to sebastian lague's terrain where instead of just utilizing elevation, you also get the normal data of the terrain and use that to determine the steepness. Steeper = less grass.
I think I added this in the last video (I might have forgotten to mention it!), but this is in there, I might need to tweak the values a bit though to make it more obvious. It's a really great tip though, so thanks for that!
I like the idea of raising sea levels and balancing electricity as a gameplay idea. Good luck with Godot. Haven't used it myself but keep hearing great things. Thanks for making this video :)
Thanks so much! I've only heard good things about Godot as well, it's been on my list to learn for far too long now, so just gotta do it!
If you did want to go the energy / environment angle I think it would be cooler and more relaxed to maybe do it in reverse from what you were thinking. Ie: you start with a small number of people, and as you grow vegetation, or offset atmospheric Co2 via (power hungry) Co2 sequestration the water level goes down and gives you more room to work with, but water gets exponentially more difficult to remove with each layer or something. I think you could take some inspiration from god games with really relaxed passive interactions with the islanders (ie: maybe every now and then they make an orb of "energy" that you click on to gather it), and it'd probably feel really cozy to have villagers boating around and fishing on their own.
That's quite a fun idea, I like it! I got an image of the Plants vs Zombies sun system when you said energy orbs haha thanks for the suggestion!
I would suggest to try using the number of steps taken, rather than the ray distance when adding shadows. This might be a better approximation for 'closeness' to the surface.
Would also love to see if using mip-maps could improve tracing performance. I don't think opengl exposes filtering operation, so generation has to be done on startup or even offline.
Oh that's a very interesting idea, I'll give that a try, cheers!
Part of the reason I didn't try too hard with the mip-map approach is because when I eventually turn this into a game, the terrain will be changing/moving a lot so I'd have to continually re-calculate the mip maps which might loose any benefit I would gain from having them in the first place. (I don't know for sure that that would be the case, but that's my hunch, maybe I'll just have to try it out and see!)
The ambient light should be blue since it's coming from the sky. Blue ambient + yellow sun are also complementary colors, making for a nice contrast. Sampling the water at multiple octaves can make it look less artificial (not sure if you're already doing that tho). You might also want to think about adding back just a bit of specular highlight for the water in shadow since the sky isn't as bright at all angles
These are all really great points! Thanks for all the suggestions, they'll have to go into the next version :)
Since you want to use water level for your game, and you're already thinking along the lines of a fishing village, you should design your gameplay around tides.
Oh I really like the sound of that. There's something kinda magical about tides, could be fun to explore them in a game. We just need to come up with a mechanic that can utilise them!
THese look realy nice! You should get perfect soft shadows if you cast multiple rays and average the result.. You can also make these much faster with mip maps. Take the first few steps at mip level 0, then the next few at level 1 etc.. Because the resolution drops by 2 at every level, you travel ~2^k units in only k iterations.
cute lil island game
Thanks!
I had assumed that casting multiple shadows would be too slow to be real-time, but I haven't actually tried it out yet (I know I shouldn't assume haha).
I looked into the mip map approach in the last video, and it seems like a really great one! I hadn't realised then that I had to generate the mip maps myself (I am very new to this if you couldn't tell! lol), maybe when I port it over to Godot I'll use the mip map approach instead!
Thanks for the comment!
@@BarneyCodes O I hadn't seen that sry.. The technique is a bit different though. What I was saying is relevant for soft shadows. Because long distance shadows get blurry, you can get away with using a blurry map representation. ie. a higher mip level. And you can use glGeneratemipmap for those. The screen-space min-max hierarchy thing is super useful too. Not just for screen-space effects but for culling, particles/screen-space physics, etc. Pretty much every modern engine has them somewhere. UE5 has them everywhere.
Sorry for info dumping lol. Have fun learning graphics and godot!
No need to apologise at all! Thanks for all the information, very helpful stuff! Once I'm set up in Godot I'll have to try out a bunch of new things, the comments have been very helpful in creating a to-do list haha
Thanks again :)
The way you split the heightmap into the four color channels is actually still very wasteful, because you only ever use 8 bits of the available 32. You increase the precision by 4 because there are 4 different possible positions for the 8 bytes, so you end up with 1024 possible values. You could however get 2^32 values as you calculated if you changed the pixel format of the texture to greyscale float32.
That makes a lot of sense, thanks for the comment! I think when I port over to Godot it should hopefully be a lot easier to chose the texture format (P5js doesn't seem to expose any of this to the user!)
The first time i saw the project, in my mind, it was a neat pirate/ trader/explorer game.
I think that's the way I'm leaning now too! Quite a few people have mentioned something similar, I can imagine it would be pretty relaxing to sail these seas. Thanks for the suggestion!
I think because you are working with partial shadows already anyways, don't just mask the specular highlights with the shadow, instead make the specular intensity inversely proportional to the shadow intensity. As even in shadow we would see small highlights from diffuse lighting.
Great point! That makes a lot of sense, thanks for the suggestion!
@@BarneyCodes good luck with the next iteration, and your game! Looks quite promising 😊
Feels like the waves might look better with a perlin noise or maybe a mix between voronoi and perlin? Either that or scaling up the voronoi texture. It looks super good but it feels like the waves get too elevated from the harsh edges of the voronoi
I think you're right, they seem a bit busy at the moment but I think they add a lot to the scene. Will need to tweak them to get them just right :)
9:20 if you need any help with this, let me know. I already converted the previous version to Godot to adjust and make a new shader from.
While I didn’t hit any with it, there are some limitations to GodotShader language such as certain functions being gone.
Thank you! Should be an interesting experiment to try, fingers crossed I don't come across any of the limitations haha
Is it possible to add something like mode 7?
Also wave reflections can still be visible in a shadow so idk why did you delete it
And it looks cool! (Also i didn't expect that you're planning to port it to godot)
I had to look up what mode 7 was, very interesting! I'll have to read up on how it works, maybe it's possible with this? It would look pretty cool if it was!
I got another comment about the shadowed reflections as well, and they suggested that they should just be dimmed based on how in-shadow they are, which makes a lot of sense! To me the full-strength reflections in a shadow didn't seem right, but like you say, deleting them entirely wasn't right either!
You can just use a 16-bit grayscale png (it has 1 channel with a 16 bit depth). This will be enough even if you would use such a heightnap in a full scale Earth generation (I did it in my space simulator and it looked fantastic).
I'll have to look into this, thank you!
This is super cool, I have some ideas I'm going to try, if I can replicate this
The code is linked in the description so you can use that as a starting point if you like! I'd love to see what you come up with, probably easiest to share on the discord server :)
@@BarneyCodes Yeah, I've already taken to trying to replicate this in godot, I'll be sure to share some stuff in the coming weeks :)
How about a survivor strategy game where water will eventually rise but they need to work on a way out of the island (boat + supplies)? so essentially a strategy game where one fights against time? Might involve multiple different approaches such as investing in building things faster or praising the gods to buy more time...
That sounds like a lot of fun to be honest! Thanks for the suggestion!
@@BarneyCodes glad to help! Keep up the great work!
I like your game idea, especially in godot! Would love to start with it myself when i find the time
Thanks! I've heard great things about Godot, so I'm excited to get started
I needed a hightmap for a project but could not use the same method. The method i used was store value 0-255 in one channel. -255-0 in a other. 256-767 in the 3 rd channel and 768-1791 in one channel.
Of cause this is pretty inefficent as well. but at least i could store the full range from -255 to 1791 in one pixel. The reason i did it that way was because i needed pixel to pixel conversions that could not becaluate din the other colors.
no way nice, but it worked.
Interesting, thanks for sharing! I might end up doing something similar here
could you get a slow sine curve that triggers tides and moves the water level up and down?
I don't know if p5js or whatever you're using can do it but most GPUs natively support single channel high bit depth images.
Right now it's probably using something like GL_SRGB8_ALPHA8
Instead you could be using GL_R32F to just have a single channel of floats
This is a great shout! I didn't even know that was an option, but that sounds perfect! I'll have to check if Godot supports this, since I'm going to move the project over to that instead of using P5js
Thanks for the suggestion!
The softened shadows look nice, but don't make sense since you can see a ghosting where the shadows overlap. This doesn't make sense since you wouldn't have a secondary shadow that overlaps because it would have been occluded by the first shadow caster.
Perhaps instead of calculating a single pixel for the shadow, consider using a circle that grows the further ray marches. The circle can then have a radial linear falloff so that it's soft on the edges. You can then multiply each circle onto the shadow buffer.
I think that would be a much more accurate way of doing it for sure, the struggle is that shaders can only operate on a single pixel. The only way to get this to work really would be to have multiple rays being cast for each pixel from slightly different positions/angles and I think my current implementation would struggle to do that in real time.
Definitely something worth investigating though, thanks for the suggestion!
I would really love to see a sculptable terrain. Maby you could also add some mechanics simmilar to townscaper and make it an cozy isalnd builder Game
I think with a heightmap that shouldn't be too hard, can just add/subtract from the height value. I'll give it a go, thanks for the suggestion!
Pirates! Clone, definitely.
If your shadows are ray-based, couldn‘t you do soft shadows/penumbra by jittering ray direction, and accumulating samples or doing a bilateral filter?
I think you definitely could! I think I might struggle to get that to run in real time though. Would certainly be fun to try though!
Why not use GL_RED/GL_FLOAT/GL_R32F texture - i.e. one 32 bit float per pixel in a single channel texture?
Why not indeed, I think your profile pic is relevant here haha! My only defence is that P5js doesn't make it super easy to change these things, but hopefully porting over the Godot will make it a lot more accessible
Would it possible to make another texture for roads, and then based on height draw tunnels, bridges or just road?
Hmm, that's a really interesting idea! I think that would look super cool, could be a fun programming challenge too!
that game idea sounds amazing
How about two more buffers to water. Fst for atmospheric pressure to create real life like wawes 2 bytes for xz and 2 bytes for value. Snd really small for dynamic directions?
This sounds very intriguing! I'll have to try it out, thanks for the comment!
A game with resource gathering and transportation for trade between islands and other players.
When you're doing low-level stuff, rather than Godot, something like Mach engine would give you way more power, although the trade-off is that there's less handholding and tooling, somewhat closer to p5.js in minimalism.
The opinionated game engines limit your freedom of action and the directions in which you can discover things, though, which is why you'd turn to p5 in the first place.
I haven't heard of Mach before, I'll definitely check it out! I think I'm drawn to using a game engine since I'm currently working on a game without an engine at the moment and there's a lot of things I'm having to re-invent for no reason in particular (which is very fun and educational, but not very conducive to actually release the game!)
I think my goal with this project is to turn it into something playable and I think in order to do that somewhat quickly an engine will be my best bet. The great thing about Godot is it's open sauce so I can tinker with the engine code if I'm really butting heads with it!
I would suggest looking at graphics rendering whitepapers when you get the chance. You can learn about a lot of novel techniques this way.
Also, regarding environmental stuff for that game concept... Nuclear is the way to go. It may not seem like it depending on the particular propaganda of certain countries, but... The science is in favor of it.
For reference: a properly designed and properly functioning nuclear plant puts *no* radiation into the surrounding environment.
Meanwhile, coal dust has radiological contaminants in it naturally.
And nuclear waste? It's stored in cement casks. And unlike chemical waste, *it stops being dangerous* after enough time has passed.
I've had a look at some papers in the past but they always seem to be written in extremely inaccessible language. Maybe I'd have a better chance now that I know a bit more about this stuff? Are there any papers you'd recommend in particular?
Re nuclear, I am the furthest thing from an expert, but from what I've read it seems like a great solution but I understand it takes a while to get a plant up and running and no one seems to want to invest that time and money.
@@BarneyCodes Hmm... Try "Line Integral Textures", just as a random example off the top of my head
@@BarneyCodes honestly, I've read so many papers that I kind of just got a feel for it over time.
I'll check it out, thank you!
When shadows from a single light source overlap you shouldn't multiply them, you should take the darker value only. You would only multiply if there's multiple light sources.
Oh good to know, thank you!
Would multiplying by 0.25, instead of dividing by 4, lead to a performance increase? Or does the compiler do that anyway.
I honestly couldn't tell you, but my guess would be that the compiler would take care of that?
Make it a Wallpaper Engine background!!!
That would be sick, great idea!
Huh, first of all, those faded out shadows look great, and second, it seems like you've approximated an actual physical phenomenon, and one that is pretty much never approximated anywhere, but it's ironically not the phenomenon you were trying to emulate.
You were trying to emulate the penumbra effect which occurs when the light source has a physical size (imagine a sphere for simplicity) and it is only partially obstructed (e.g half the sphere is obstructed by a cliff so ground is lit half-way), this is what usually blurs shows in real life, also what causes them to blur more the further away they are from the caster because same amount of movement on the ground reveals the light source a lot more gradually.
However what you ended up emulating seems to be light scattering in the atmosphere. Of course, most of the time people associate this phenomenon with light rays cutting through clouds or between mountains (god rays) but light scatters in all directions, not just towards the camera so the ground should also "see"/be illuminated by scattered light, and the farther the ground is from the shadow caster the more light got the chance to scatter into the shaded region. You have a very limited approximation because it doesn't doesn't account for objects that might obscure the scattered light but you pretty much have the perfect setting for it to make minimum effect anyway and, seemingly, already artistically approximated the obstruction behavior by fading shows a little less.
Sorry for over-explaining if you are already aware of this but you've done a great job listening to your intuition here
This is great! Thanks for the explanation! I can't claim this was intentional but I'll take whatever win I can get hahaha
Maybe the optimal version will have a bit of both? Keep some of the fall off based on distance as well as do proper penumbra shadows?
wallpaper engine implementation ?
Oh that would be sick! Could make the sun position match wherever you are in the world (like in Acerola's newest video)
I really love the fossil fuel idea, that would be a very fun game! Kind of reverse Satisfactory!
I'll have to flesh out the idea a bit more, but I think it could be interesting, thanks for the comment!
A shadow depth map is enough. No need for a binary shadow map. You can calculate a falloff from it, includinga falloff of 0 giving you the binary shadowmap.
Oh that makes sense! I might try it when I port it over to Godot!
@@BarneyCodes You totally should. Doing shader stuff without a game framework limits you. I bet a lot of stuff will start to make a lot more sense seeing it in a real-time rendering framework set up for stuff like this!
Would be cool if you added white highlights to the water. If you want to implement waves on the shore, check out this breakdown of the effect by Path of Exile engine guy. He also has a short 2d ray tracing demo. th-cam.com/video/TrHHTQqmAaM/w-d-xo.html
Wow, that video seems like an utter gold mine of information, thanks for sharing! I think some white-capped waves would look great, cheers for the suggestion :)
I hate the new water.
Haha fair enough! What about it don't you like/how could it be improved?
@@BarneyCodes the new waves look messy, I liked the cleaner aqua water in the old one because of this, you could try to add water caustics or make a wave deformation on the water going towards the land with white foam in which case I think the mess would feel more natural.
Yet at the same time water isn't a big deal so you can just leave it how it is, I'd like to see less noise affect with white foam nearing land masses though.
Can definitely see where you're coming from, maybe there's a happy middle ground with a little bit of detail in the water. I'll have a play around with it for sure, thanks for the feedback!
First and also great video
😎
I like the climate change idea
Maybe I'm crazy but... If you want 3D shadows why don't you just render it in 3D
Very valid question, the answer to which is just that I wanted to see if I could add 3d looking shadows to 2d based terrain!
Depending on the type of game I turn this into, I think having it be in 2d could be an advantage but that remains to be seen
I like the fossil fuel idea