Interactive Map Shader: Vertex Displacement

This online course is dedicated to interactive maps, and how to create them using Shaders in Unity.

This is a tutorial in three parts:

This effect will serve as the base for more advanced techniques, such as holographic projections and even Black Panther’s sand table.

A link to download the Unity package for this tutorial can be found at the end of this article.

Continue reading

Sprite Doodle Shader Effect

This online course will teach you how to recreate a popular sprite doodle effect using Shaders in Unity. If this is an aesthetic that you want in your game, this tutorial will show you how to achieve it without the need to draw dozens of different images.

Such a style has become increasingly popular over the past few years, with many games such as GoNNER and Baba is You heavily relying on it.

This tutorial covers everything you need to know, from teaching the basics of shader coding to the maths used. At the end, you will also find a link to download the complete Unity package.

This series is also strongly inspired by the success of Doodle Studio 95!.

Continue reading

Parallax Shaders & Depth Maps

In the previous part of this series, Inside Facebook 3D Photos, we have explained how modern mobile phones are able to infer depth from pictures. Such a piece of information is stored in a depth map, which is used for a variety of effects. From blurring the background to three-dimensional reconstruction, this type of technology will become more and more present in our daily lives.

This is a two-part series. You can read all the posts here:

A link to the complete Unity package is available at the end of the tutorial.

Continue reading

Inside Facebook 3D Photos: Parallax Shaders

In the past few months, Facebook has been plagued filled with 3D photos. If you have not had the chance to see one, 3D photos are images inside a post which gently change perspective as you scroll the page, or as you move your mouse over them.

A few months prior to their introduction, Facebook had been testing a similar feature with 3D models. While it is easy to understand how Facebook can render 3D models and rotates them according to the mouse position, the same might not be as intuitive for 3D photos.

The techniques that Facebook is using to create the illusion of three-dimensionality on two-dimensional pictures is sometimes known as height map displacement, and it relies on an optical phenomenon called parallax.

This is a two-part series. You can read all the posts here:

A link to the complete Unity package is available at the end of the tutorial.

Continue reading

Shader Showcase Saturday #11: Return of the Obra Dinn

Most indie developers might know Lucas Pope as the developers of the critically acclaimed Papers, Please. Thanks to its simple, yet thoughtful mechanics, Papers, Please helped to shape an entirely new genre of video games. And it even inspired a short film with the same name.

Despite its success, one of the most recurring criticisms the game has faced is related to the apparent simplicity of its execution. With Return of the Obra Dinn, Lucas Pope clears any doubt with a game that, by itself, is nothing less than an achievement in technical excellence.

Continue reading

Shader Showcase Saturday #10: Fortnite Procedural Animations

It is no mystery that Fortnite has now become one of the most successful computer games of all time. While many see it as a case study for excellence in marketing and game design, the game itself features some very interesting shader effects.

From a Technical Artist perspective, the most striking effect featured in Fortnite is the self-building effect. When an object is being constructed, its individual pieces appear one by one out of thin air, and fly into position. The same effect is somehow played, in reverse, when an object is damaged, by showing those very pieces flying away and disappearing (above).

Continue reading

Shader Showcase Saturday #9: Interior Mapping

If you have been on Twitter this past week, you might have seen videos of the new Spider-Man, developed by Insomniac Games. The game has been praised for its stunning visuals and exceptional attention to detail. One effect, in particular, has captured the players’ attention. It appears that you can see inside every single window of every building. But at a closer look, something does not look right. What’s going on?

Continue reading

Shader Showcase Saturday #8: Subsurface Scattering

If you ever placed a strong light source behind your hand, you might have noticed how light is able to filter through the skin. Even more interesting is the fact that light “travels” inside the skin, and can sometimes make the entire hand glow. This optical phenomenon is called subsurface scattering (or SSS) and is caused by individual photons penetrating the skin, bouncing (scattering) inside it, and finally exiting from a different point. For this reason, subsurface scattering is also called subsurface light transport.

Most semi-transparent materials exhibit a certain degree of SSS, which gives them a “smoother” look. Milk, for instance, owe its uniform colouration to the presence of fat molecules which diffuse and scatter visible light very well. Even solid materials can be subjected to SSS. Marble is a typical example, and this is the reason why most subsurface scattering demos feature marble statues. Skin, milk, marble and wax are the materials which most commonly owe their look to SSS, although this is an optical phenomenon that is present in virtually all non-metallic materials.

Continue reading

Shader Showcase Saturday #6: Dynamic Snow

After two previous instalments of Shader Showcase Saturday focused on wind and rain, talking about snow was simply unavoidable.

Creating realistic snow is a serious challenge, which will be further explored in the following months. This week, we focus on how shaders can be used to add snow to an existing scene. Most of the references shown in this post will not be photorealistic. We will show on how to simulate photorealistic snow and frost in a few weeks. If you cannot wait, I would strongly advise having a look at Winter Suite. It contains some of the most realistic shaders for snowy and frosty surfaces.

As you can see from the image above, it supports translucency, subsurface scattering and the shimmering effect that is typically seen in snow.

I have also dedicated a proper tutorial on snow shading, which you can find in the article titled Surface Shading in Unity. Continue reading

Shader Showcase Saturday #5: Dripping Rain

The first time I played Diablo 2 I remember how impressed I was to see rain causing ripples on the river just behind the Rogue Encampment. But only when I looked closer I realised that those ripples were not actually caused by any raindrop. Both ripples and raindrops were simply unrelated. As it often happens, improving graphics in modern computer games is not a quest for realism: it’s all about believability.

When it comes to 2D games, creating ripples in water is relatively easy, as that is often done with particles. But for 3D objects, things are a little bit more complicated. Since meshes can be curved, is hard to have particles following those shapes correctly. Technically speaking, such an effect could be perfectly simulated with physics, but as we have seen already, fluid simulations are expensive and hard to control.

This is why most games in which you see water slowly dripping on a 3D surface often rely on shaders.

If this is your first time approaching shaders, I highly encourage you to read A Gentle Introduction to Shaders, which will get you started.

Continue reading