10 ms·

Stylized Water Shader

213 points by rinesh 4y ago

toxik 4y ago
Animated PNGs don't work in Safari, and in Firefox they eat up literally all my CPU.
- fellowmartian 4y ago
  APNGs do work in Safari, they’re just huge so very slow to load.
- neogodless 4y ago
  Firefox 110.0.1, Windows 10, Ryzen 9 5900X (12 core, 4+ Ghz) Uses 2-3% of my CPU viewing the animations.
- pdabbadabba 4y ago
  Another data point: I had no trouble at all reading the article and viewing the animations in Safari. If there is an issue, it was completely unnoticeable for me. Maybe I just don't know what I'm missing?
- doodlesdev 4y ago
  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 webm. Didn't really notice a pattern on why each one was a different file format and displaying one or the other didn't show noticeable performance impact. JavaScript disabled by the way. Also, while trying to reproduce I reopnened Firefox process manager but it only listed the website as using 20% CPU which is still a lot but somewhat to be expected with the amount of auto playing videos. Previously the flame graph for the page performance had a huge bar dedicated to "Image Decoding" however I couldn't really find the culprits unfortunately. What I found is that the issue intermittent, it's possible when the videos in the page restart Firefox for some reason had to decode them again and thus a spike in CPU usage. https://i.imgur.com/R1cyqhw.png https://i.imgur.com/R1cyqhw.png
  - coinfused 4y ago
    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.
    - doodlesdev 4y ago
      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.
      - coinfused 4y ago
        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.
        tiberriver256 4y ago
        Couple of other things to try. Hold off on loading and playing the videos until they are visible: https://web.dev/lazy-loading-video/#video-gif-replacement https://web.dev/lazy-loading-video/#video-gif-replacement Automatically pause the video when they are scrolled off the screen and no longer visible: https://benfrain.com/automatically-play-and-pause-video-as-it-enters-and-leaves-the-viewport-screen/ https://benfrain.com/automatically-play-and-pause-video-as-i...
nerdponx 4y ago
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.
- Xelynega 4y ago
  Maybe cel shaded is what you're looking for. Basically rounding colours to the nearest pallete color so that lighting looks cartoonish instead of uncanny.
- mortenjorck 4y ago
  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 of bounces and translucency. It’s very much its own style, while being an excellent example of NPR art direction.
  - nerpderp82 4y ago
    See also "flat shading" or "toon shading/shader".
- bumblewax 4y ago
  "Stylized" is the more recent term used for it.
- wilg 4y ago
  I feel like the most common name is "low-poly".
theandrewbailey 4y ago
> 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 for almost 20 years, and the whole time, I wondered if there was any way to fix them without redoing it all using ray tracing or something.
- Jasper_ 4y ago
  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.
now__what 4y ago
I really love the design of this website: simple, clean, responsive and readable without sacrificing style.
- coinfused 4y ago
  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.
jay_kyburz 4y ago
This 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. https://i.imgur.com/ECzIw4b.png https://i.imgur.com/ECzIw4b.png
hijp 4y ago
Is there a way to take the output from the node graph for use in something like three.js?

213 points by rinesh 4y ago

toxik 4y ago

Animated PNGs don't work in Safari, and in Firefox they eat up literally all my CPU.

fellowmartian 4y ago
APNGs do work in Safari, they’re just huge so very slow to load.
neogodless 4y ago
Firefox 110.0.1, Windows 10, Ryzen 9 5900X (12 core, 4+ Ghz) Uses 2-3% of my CPU viewing the animations.
pdabbadabba 4y ago
Another data point: I had no trouble at all reading the article and viewing the animations in Safari. If there is an issue, it was completely unnoticeable for me. Maybe I just don't know what I'm missing?
doodlesdev 4y ago
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 webm. Didn't really notice a pattern on why each one was a different file format and displaying one or the other didn't show noticeable performance impact. JavaScript disabled by the way. Also, while trying to reproduce I reopnened Firefox process manager but it only listed the website as using 20% CPU which is still a lot but somewhat to be expected with the amount of auto playing videos. Previously the flame graph for the page performance had a huge bar dedicated to "Image Decoding" however I couldn't really find the culprits unfortunately. What I found is that the issue intermittent, it's possible when the videos in the page restart Firefox for some reason had to decode them again and thus a spike in CPU usage. https://i.imgur.com/R1cyqhw.png https://i.imgur.com/R1cyqhw.png
- coinfused 4y ago
  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.
  - doodlesdev 4y ago
    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.
    - coinfused 4y ago
      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.
      - tiberriver256 4y ago
        Couple of other things to try. Hold off on loading and playing the videos until they are visible: https://web.dev/lazy-loading-video/#video-gif-replacement https://web.dev/lazy-loading-video/#video-gif-replacement Automatically pause the video when they are scrolled off the screen and no longer visible: https://benfrain.com/automatically-play-and-pause-video-as-it-enters-and-leaves-the-viewport-screen/ https://benfrain.com/automatically-play-and-pause-video-as-i...

nerdponx 4y ago

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.

Xelynega 4y ago
Maybe cel shaded is what you're looking for. Basically rounding colours to the nearest pallete color so that lighting looks cartoonish instead of uncanny.
mortenjorck 4y ago
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 of bounces and translucency. It’s very much its own style, while being an excellent example of NPR art direction.
- nerpderp82 4y ago
  See also "flat shading" or "toon shading/shader".
bumblewax 4y ago
"Stylized" is the more recent term used for it.
wilg 4y ago
I feel like the most common name is "low-poly".

theandrewbailey 4y ago

> 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 for almost 20 years, and the whole time, I wondered if there was any way to fix them without redoing it all using ray tracing or something.

Jasper_ 4y ago
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.

now__what 4y ago

I really love the design of this website: simple, clean, responsive and readable without sacrificing style.

coinfused 4y ago
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.

jay_kyburz 4y ago

This 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. https://i.imgur.com/ECzIw4b.png https://i.imgur.com/ECzIw4b.png

hijp 4y ago

Is there a way to take the output from the node graph for use in something like three.js?