Is there a name for this graphics style? I've seen it in several games over the years, and have enjoyed it significantly in e.g. The Witness.
"Stylized" is the more recent term used for it.
Stylized Water Shader
11–20 of 22 posts
Re: Stylized Water Shader
#12Animated PNGs don't work in Safari, and in Firefox they eat up literally all my CPU.
Wow I thought you were hallucinating but my Ryzen 7 5800X is SUFFERING to render that APNG. What the actual hell, why is that? Interestingly enough that stat doesn't seem to reflect in HTOP nor in my (really loud) fans so I wonder if this is a Firefox bug. edit: I checked it now and I don't actually see any APNGs in the website? Only auto-playing mp4s which Firefox allows because there is now sound, and also some web…
Interesting! Indeed no APNGS, only MP4, png and WebM. Will try to see if I can do some more profiling but I am very new to making websites. Using eleventy as a static site generator and then doing some image compression also.
Re: Stylized Water Shader
#13Earlier quoted context omitted.
Wow I thought you were hallucinating but my Ryzen 7 5800X is SUFFERING to render that APNG. What the actual hell, why is that? Interestingly enough that stat doesn't seem to reflect in HTOP nor in my (really loud) fans so I wonder if this is a Firefox bug. edit: I checked it now and I don't actually see any APNGs in the website? Only auto-playing mp4s which Firefox allows because there is now sound, and also some web…
Interesting! Indeed no APNGS, only MP4, png and WebM. Will try to see if I can do some more profiling but I am very new to making websites. Using eleventy as a static site generator and then doing some image compression also.
LOL why was your comment dead? Anyways, two tests I'd recommend is to disable autoplay in the videos and profile, and the other test would be to try different file formats. My test personally was in Firefox Linux, however it seems the problem also happens on macOS. Anyways, the website is great and I thoroughly enjoyed this article, so even though you're new to making websites I still think you're better than 99% of web developers.
Re: Stylized Water Shader
#14> Going the extra mile: Fixing refraction artifacts > As you might have seen in the previous clip, the refraction we have right now is flawed. When an object sticks out of the water you'll see that the refraction effect is present in places where it should not be. > One way to solve this is to perform a depth check to see if we should use the distorted or the undistorted UVS. I've seen these artifacts in new games fo…
Using the undistorted UVs has its own artifacts as well, namely, you can still see a "ghostly outline" where stuff isn't distorted through the water. But it clearly looks better than seeing something in front refracted in something behind.
Re: Stylized Water Shader
#15Is there a name for this graphics style? I've seen it in several games over the years, and have enjoyed it significantly in e.g. The Witness.
The overriding stylistic discipline is often referred to as “NPR”, or non–photorealistic rendering. NPR isn’t limited to a specific style, but rather a goal which is to look more like an illustration than real life. As with illustration, there are many approaches, and your example of The Witness is an interesting one as it combines abstract, flat textures with a hyper-real lighting model that exaggerates the effects…
See also "flat shading" or "toon shading/shader".
Re: Stylized Water Shader
#16I really love the design of this website: simple, clean, responsive and readable without sacrificing style.
Re: Stylized Water Shader
#17This is a really great tutorial, but there is one important problem with this technique. The foam edge disappears when there is no geometry just under the water surface. It looks terrible when you have a pole in the water for example.
Re: Stylized Water Shader
#18I really love the design of this website: simple, clean, responsive and readable without sacrificing style.
Glad you like it! Built with eleventy and pure css/html. I'm always trying to improve the performance and I want to make sure the focus is on the content.
Re: Stylized Water Shader
#19Earlier quoted context omitted.
Interesting! Indeed no APNGS, only MP4, png and WebM. Will try to see if I can do some more profiling but I am very new to making websites. Using eleventy as a static site generator and then doing some image compression also.
LOL why was your comment dead? Anyways, two tests I'd recommend is to disable autoplay in the videos and profile, and the other test would be to try different file formats. My test personally was in Firefox Linux, however it seems the problem also happens on macOS. Anyways, the website is great and I thoroughly enjoyed this article, so even though you're new to making websites I still think you're better than 99% of…
Thanks! I'll try to play around with it a bit. This post is by far the longest of mine so far so it's a good stress test page.
Re: Stylized Water Shader
#20Is there a name for this graphics style? I've seen it in several games over the years, and have enjoyed it significantly in e.g. The Witness.
I feel like the most common name is "low-poly".