{"id":778,"date":"2011-02-28T13:11:18","date_gmt":"2011-02-28T12:11:18","guid":{"rendered":"http:\/\/viscomp.alexandra.dk\/?p=778"},"modified":"2011-02-28T13:11:18","modified_gmt":"2011-02-28T12:11:18","slug":"steam-shader-effect","status":"publish","type":"post","link":"https:\/\/viscomp.alexandra.dk\/?p=778","title":{"rendered":"Steam shader effect"},"content":{"rendered":"

About a month ago we wrote about our shader-based heat shimmer effect<\/a>. Another effect we developed for the Danfoss-experience project is illustrated in the video below. It tries to reproduce the effect of a window or mirror steaming up entirely as a shader.<\/p>\n

Our method uses a gradient image $$G$$ which dictates the overall “growth” of the steam. A variable $$t$$ is animated over time from 0 to 2 and the amount of steam $$s$$ for a given position $$mathbf{x}$$ is then defined by a clamped linear interpolation over some range $$r$$:<\/p>\n

$$!s = mathrm{clamp}left(frac{t – G(mathbf{x})}{r}, 0, 1right)$$<\/p>\n

To make the growth more interesting, we modify $$G$$ with a noise texture<\/em>. The color of the steam $$c_s$$ is determined from a lookup into a texture-rendered version of the scene which has been blurred by a Gaussian filter. To this value, we add some white noise to give the steam some texture. Finally, we add a value which can be tweaked to give the steam the desired amount of lightness.
\nThe pixel color is then given by the unmodified color $$c$$ interpolated with the steam color:<\/p>\n

$$!mathrm{lerp}(c, c_s, s)$$<\/p>\n

The final touch to our effect, is the ability to interact with the steam by dragging the mouse around like a finger on the steamed up window. This is implemented by adding a mask texture<\/em> and modifying the amount of steam by taking the minimum value of the mask and $$s$$. The mask texture is updated by blending black lines into it where the mouse has been when it is being dragged around. Furthermore, a dark grey color is constantly blended into the entire mask in order to make the older strokes steam up again.<\/p>\n","protected":false},"excerpt":{"rendered":"

About a month ago we wrote about our shader-based heat shimmer effect. Another effect we developed for the Danfoss-experience project is illustrated in the video below. It tries to reproduce the effect of a window or mirror steaming up entirely as a shader. Our method uses a gradient image $$G$$ which dictates the overall “growth” of the steam. A variable $$t$$ is animated over time from 0 to 2 and the amount of steam $$s$$ for a given position $$mathbf{x}$$ is then defined by a clamped linear interpolation over some range $$r$$: $$!s = mathrm{clamp}left(frac{t – G(mathbf{x})}{r}, 0, 1right)$$ To make the growth more interesting, we modify $$G$$ with a noise texture. The color of the steam $$c_s$$ is determined from a lookup into a texture-rendered version of the scene which has been blurred by a Gaussian filter. To this value, we add some white noise to give the steam some texture. Finally, we add a value which can be tweaked to give the steam the desired amount of lightness. The pixel color is then given by the unmodified color $$c$$ interpolated with the steam color: $$!mathrm{lerp}(c, c_s, s)$$ The final touch to our effect, is the ability to interact with the steam by dragging the mouse around like a finger on the steamed up window. This is implemented by adding a mask texture and modifying the amount of steam by taking the minimum value of the mask and $$s$$. The mask texture is updated by blending black lines into it where the mouse has been when it is being dragged around. Furthermore, a dark grey color is constantly blended into the entire mask in order to make the older strokes steam up again.<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[35],"_links":{"self":[{"href":"https:\/\/viscomp.alexandra.dk\/index.php?rest_route=\/wp\/v2\/posts\/778"}],"collection":[{"href":"https:\/\/viscomp.alexandra.dk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/viscomp.alexandra.dk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/viscomp.alexandra.dk\/index.php?rest_route=\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/viscomp.alexandra.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=778"}],"version-history":[{"count":0,"href":"https:\/\/viscomp.alexandra.dk\/index.php?rest_route=\/wp\/v2\/posts\/778\/revisions"}],"wp:attachment":[{"href":"https:\/\/viscomp.alexandra.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=778"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/viscomp.alexandra.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=778"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/viscomp.alexandra.dk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}