How to make a power shield?



We can often see this effect: when an object through a force shield, the edge of this object that is intersected with the force shield is highlighted (like the below-left image). The other example is the water. Shoreside and the edge of the objects in the water are highlighted. How to make this effect?

If the scene is static, we can make the model's vertexes' position that the part is intersected with another object are lower than the surrounded vertexes' position, in the fragment shader, you can compare the vertex position to change color. However, this method has many limits if you change the model's position, you have to modify the vertex. But this method is the easiest to implement.

Here, I want to talk about the second method: depth buffer. The premise is that the intersected object is transparent (the transparent object intersects with the opaque object), in other words, this object should be rendered in the transparent queue, like the force shield and the water.

Philosophy:

The camera will render a depth texture, the color range is 0 ~ 1 (If you don't know the depth buffer please read relevant articles). The key point is that only the opaque objects' depth data are in this depth texture, the depth information of the transparent object is not in this texture, so we can compare the depth information of the transparent object and the depth information of the depth texture. If the transparent object's depth is in the range, then the objects are intersected.

In the following, I'm going to show how to implement this by shader graph.

In the "Screen Depth" node, we use the "Eye" space. And the "Screen Position" node stands for the transparent object's depth.

We can use the transparent object's depth to subtract a value to fix the size of the highlighted area.

Get Hoag's End

Leave a comment

Log in with itch.io to leave a comment.