Amplify shader glass


  • Glass Shaders – Free Download
  • Blender 2.8: Introduction to Shader Editor
  • VR Conservatory Part 1: Rainy Glass Shader
  • Glass Shader using Shader Graph in Unity3D
  • Toon Glass Shader Breakdown
  • Glass Shaders – Free Download

    My goal is to build a conservatory the plants kind, not the music kind because I like green spaces and growing plants in 3D. This is also sure to create exciting technical nightmares for me because plants are hard to optimize and transparency cheats are a real performance killer. My background is in film and commercial visual effects, not video games.

    Feel free to yell at me in the comments. Making it rain Anyways, because I clearly like making things hard for myself, I decided that it definitely should be raining outside in this environment, and that means I needed to build a shader that looked like rain streaking down glass. Not so in real-time! In Unity, this is called a Render Texture. This image could be processed to act a little like a normal map and then used to distort the background.

    This Youtube tutorial describes this workflow a little better. The results are pretty great, though, and the tutorial is worth watching either way. Edit: Andreas Glad informed me that particles simply spawned on the surfaces would actually likely be cheaper than the shader method I ended up with, because there would only be overdraw where the particles actually existed rather than across the entire glass surface.

    The final effect uses just two static texture maps: one for the raindrops, and one for the rivulets. Raindrop textures breakdown The two texture maps that are used to create the effect are fairly simple. I put them together in Substance Designer. The first one is for the raindrops effect. I scattered a slightly distorted paraboloid shape using an FX Map, then ran it through a Normal operation to get the red and green channels suitable for distorting the final image in the shader.

    This part is pretty straightforward in Substance Designer… just scatter the shape and get normals from it. The alpha channel is simply the original image without the Normal operation. The gradient in that scattered shape is used later in the shader to create the erosion effect. The blue channel was the most involved bit, but still not too crazy. I used the exact same FX Map to scatter a tiny square in place of the droplets, then used a Pixel Processor to create a copy where all of these squares were white using ceil on the input.

    These two images were input to a Distance node, which resulted in the voronoi-looking noise going into the blue channel. This value is used in the shader as a time offset; essentially adding the value of the blue channel to the scene time in order to randomize the appearance of the raindrops. Raindrops shader network The raindrop material itself is just a Unity Standard Surface set to the Transparent Render Queue so that it you can see through it.

    Now things start to get a little hairy. First, the raindrop impact times have to be figured out. The blue channel value is added to the current time, and then the fractional component of the result is written to the buffer.

    This means that the resulting values for each pixel will count up from zero to one black to white and then loop back to black, offset in time by the random value from the blue channel that exists per-droplet.

    The shader network looks like this: The Amplify shader network for the time offset. And the resulting value applied to a sphere: The result of the above shader network. Next, this looping timer value that was just created needs to be subtracted from the alpha channel.

    Remember that the alpha channel is a gradient resembling a height field, where droplets are white in the middle and black on the outside.

    If the timer value is subtracted from these gradients, you can imagine that the darker values will dip below zero black first, and then the lighter values towards the centers will follow.

    This is the secret behind alpha erosion. The result of the operation looks like this: The resulting alpha erosion. Now this black and white mask can be multiplied against the red and green channels that will act a little like a normal map: Multiplying the mask above by the red and green channels of the texture.

    The final little bit of magic for the raindrops part of the shader involves something called a grabpass. The Grab Screen Position node first gets us the normalized coordinate space of our camera. The result is then added to the Grab Screen Position coordinates. Finally, the result is connected to the UV coordinates of the Grab Screen Color node, which fetches the grabpass. The result is that the image behind the glass is slightly distorted by the shape of the raindrops: The distortion effect applied to a sphere.

    The tiling has been increased a bit to make the droplets smaller. Flow maps allow you to distort an existing texture by using two channels of some other texture to offset U and V. By looking up the values of this distortion map and then adding them to the UV coordinates of the actual texture over time, you can create something like a scrolling effect that can actually warp in different directions, like a river flowing. The way to avoid this is by resetting your UV coordinates periodically.

    Instead, you smooth out this effect the same way you make a lot of different things loopable: you take the same effect twice, staggered at two different time offsets, and interpolate between them. The red wave is the weight between them: when red is 1, the output will be fully biased towards the green wave, and when red is 0, the output will be fully biased towards blue.

    The three weight channels. Red is the weight between them. You push two UV fields through your smoke or fluid velocity field, reprojecting them at a set interval out of phase with each other, and blend the weights between the two so you never see the reprojection happening.

    The red and green channels are more or less the same as what we were doing with the raindrops texture earlier in this post. The blue and alpha channels are the flow map texture, generated from some simple Perlin noise. Blue distorts the rivulets horizontally, causing them to zigzag, and Alpha distorts them vertically, which creates the impression of their speeds changing a bit over time as they fall.

    Rivulets shader network part 2 Now we actually have to use these color channels and fancy timing channels to distort our texture lookup for the red and green channels that describe the rivulets themselves. The process is the same for both: get the value of the timing channel the sawtooth wave and multiply the texture map by this value. Then, add the B and A channels to the existing UV coordinates, and use the result to look up the original texture again.

    Finishing up Now that we have our rivulets, we can just add our resulting R and G channels to our raindrops mask from before. This is a pretty simple thing: all we need to know is the world normal of our surface. Reverse this value using a Remap or similar function, and we can simply multiply our distorted red and green rivulet channels by the result, naturally masking out the rivulets as surfaces tilt towards horizontal.

    Then this result is just added to the raindrops channels, for use with the grabpass setup described earlier. And finally, the output on a sphere.

    Blender 2.8: Introduction to Shader Editor

    This is a part of our tutorial series on Shader Graph and if you have not seen our tutorials yet, you can click here to check them out.

    At the end of this tutorial, we will obtain the following shader. In this tutorial, we will see… how you can use Render Texture to get the image of what camera sees creating the illusion of refraction to achieve better photorealism using a normal map to create a deformed or brushed glass. Render Texture A Render Texture is a texture that is generated at runtime by a camera. This texture consists of what the camera sees. To use it you need to make some arrangements in your render pipeline. Click your pipeline asset and switch on the Opaque Texture in the General section of the pipeline asset.

    Scene Color Node will have the information that the camera is rendering. Before checking the current shader, set Albedo to a darker color. This is the result of this shader: In order to give some photorealism to this shader, we should implement refraction. Refraction The direction of the light changes when it passes from one medium to another medium. For example, in the image above, you see a glass of Turkish tea and the spoon in the glass as if it is broken.

    This is because of refraction. Refraction direction depends on the normal vector of the fragment, the direction of the incoming light and index of refraction. Index of refraction is an index that is described as the refraction ratio when the light passes one medium to another. And this also depends on the optical properties of two mediums.

    In the case of refraction, we may see its position at , In other words, there is a shift in the positions of the fragments. What we are going to do is to calculate the refraction direction and add it to the current position of the fragment in order to obtain the shift.

    To calculate the refraction direction, we need normal vector, view direction and index of refraction. The index of refraction is a value that is determined by the person who will use this shader. Therefore, we should create a property for the index of refraction in Vector1 form. Both of them have to be in world space. In shader graph, there is no node to calculate refraction.

    Therefore, at this point, we need to use a Custom Function Node to implement refraction. The output of the Custom Function Node gives us the reflection direction in world space. We need to transform it into the tangent space. We can do this by using a Transform Node. In the Transform Node, you should also select vector type as Direction, since refraction vector represents a direction.

    Therefore, we have obtained the refraction. This is the shift amount that will create the illusion of refraction. And we have to sum this shift amount with the screen position coordinates. And this is the result of this shader: Nonsmooth Glass Shader In this part, we are going to add a normal map to our glass shader to create glass that has not a smooth surface, i. To implement such a property, we can use a normal map.

    By using a normal map, we change the normal directions of fragments according to the normal map, and therefore new normals are used in refraction function. Since this vector is in tangent space we have to find the representation of this normal vector in world space. To do this, use a Transform Node. We will use these new normals instead of the previous Normal Vector Node.

    This last action is to increase photorealism by using this new normal for reflections. Our final shader should look like this. You can test your shader by using any normal map.

    This is the result which I see. I am an indie game developer. I have been developing digital games for five years.

    I have released several games. I have BS degrees in electrical engineering and physics. I love arts and science. The idea of creating worlds and experiences brought me to the game development which is also directly related to the arts and science.

    You may also like

    Therefore, at this point, we need to use a Custom Function Node to implement refraction. The output of the Custom Function Node gives us the reflection direction in world space.

    VR Conservatory Part 1: Rainy Glass Shader

    We need to transform it into the tangent space. We can do this by using a Transform Node. In the Transform Node, you should also select vector type as Direction, since refraction vector represents a direction. Therefore, we have obtained the refraction. This is the shift amount that will create the illusion of refraction. And we have to sum this shift amount with the screen position coordinates.

    And this is the result of this shader: Nonsmooth Glass Shader In this part, we are going to add a normal map to our glass shader to create glass that has not a smooth surface, i. To implement such a property, we can use a normal map.

    Glass Shader using Shader Graph in Unity3D

    By using a normal map, we change the normal directions of fragments according to the normal map, and therefore new normals are used in refraction function. Since this vector is in tangent space we have to find the representation of this normal vector in world space.

    To do this, use a Transform Node. We will use these new normals instead of the previous Normal Vector Node. This last action is to increase photorealism by using this new normal for reflections. Our final shader should look like this. You can test your shader by using any normal map.

    This is the result which I see. I am an indie game developer. I have been developing digital games for five years. I have released several games. I have BS degrees in electrical engineering and physics. I love arts and science. The idea of creating worlds and experiences brought me to the game development which is also directly related to the arts and science. We can Split to obtain these components, and Add them together to make a diagonal gradient.

    An Absolute function will then convert any negative values to positive. Any changes made will now be mirrored across the diagonal line as both sides share the same values.

    Toon Glass Shader Breakdown

    This remaps the values so the value at the center of the preview has a value of 0. When we connect this to the Split we can visualise the previews properly which will help a lot when creating the rest of the graph, then at the end we can reconnect the other position instead. We now have two gradients going outwards diagonally in each direction.

    There are values of 0 in the center shown by the black areas on the preview. If we Subtract a value from this it will shift the values inwards, and output negative values in the center which we can remove later via a Saturate. This results in creating a spacing between the two gradients.

    Here we use the Offset property, which will allow us to change the spacing later in the inspector. We can then also apply some scaling by using a Multiply with the Scale Multiplier property, as shown on the left below.

    This affects the width of each line based on the distance from the diagonal, as shown in the Fraction node preview. Looking at the plot on the left, When A is higher, the plot results in a more curved line.

    More importantly though, the Fraction node a. This results in values only between 0 and 1 which is shown by the plot on the right.


    thoughts on “Amplify shader glass

    Leave a Reply

    Your email address will not be published. Required fields are marked *