[HN Gopher] Stylized Water Shader
___________________________________________________________________
Stylized Water Shader
Author : rinesh
Score : 167 points
Date : 2023-03-09 11:39 UTC (11 hours ago)
(HTM) web link (alexanderameye.github.io)
(TXT) w3m dump (alexanderameye.github.io)
| theandrewbailey wrote:
| > 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_ wrote:
| 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.
| toxik wrote:
| Animated PNGs don't work in Safari, and in Firefox they eat up
| literally all my CPU.
| fellowmartian wrote:
| APNGs do work in Safari, they're just huge so very slow to
| load.
| pdabbadabba wrote:
| 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 wrote:
| 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
| alexanderameye wrote:
| 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 wrote:
| 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.
| alexanderameye wrote:
| 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.
| neogodless wrote:
| Firefox 110.0.1, Windows 10, Ryzen 9 5900X (12 core, 4+ Ghz)
|
| Uses 2-3% of my CPU viewing the animations.
| jay_kyburz wrote:
| 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
| now__what wrote:
| I really love the design of this website: simple, clean,
| responsive and readable without sacrificing style.
| alexanderameye wrote:
| 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.
| nerdponx wrote:
| 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.
| bumblewax wrote:
| "Stylized" is the more recent term used for it.
| mortenjorck wrote:
| 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 wrote:
| See also "flat shading" or "toon shading/shader".
| Xelynega wrote:
| 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.
___________________________________________________________________
(page generated 2023-03-09 23:00 UTC)