Shaders

There are 69 posts filed in Shaders (this is page 1 of 7).

Slippy Maps with Unity

A slippy map (sometimes also referred to as tiled web map, tile map, or simply interactive map) is a web-based map that can be zoomed in and out seamlessly. The most popular slippy map you might be familiar with is Google Maps, alongside many others like that.

This tutorial will show you how to create your own web-based slippy map with Unity. Such a technique can be used to create interactive maps for your own games, or to better explore complex phenomena such as fractals or even Mathematical functions. For clarity, the actual map will be created with Unity, but it will be served using a JavaScript library called LeafletJS. A link to download the full Unity package is also available at the end of the article.

The image used in the cover has been generated using Stamen.

Continue reading →

Seam Carving

Seam carving is a technique that can be used to resize images, which is also known as liquid rescaling. Compared to the traditional resizing tool, it does not “stretch” the image, but it selectively removes the pixels which contain the least amount of information. As a result, it allows to shrink images preserving most of the details.

Seam carving is an example of a context-aware resizing algorithm, as it does not treat images as mere collections of pixels. By all means, it can be considered an AI-powered algorithm. The “AI part” resides in the fact that it is able to identify which pixels to remove on its own. However, it does so without any neural network and—most importantly—without the need to be trained on external data. Hence, it belongs to the field of what I call Classical AI, conversely to the more recent field of Deep Learning. With AI-powered tools becoming more and more popular, I find it helpful to show how a lot can be achieved with some clever algorithms, without the need to train expensive neural network models.

If you are interested in learning more about tools like DALL·E 2 and Midjourney, I would suggest checking one of my most detailed articles titled The Rise of AI Art.

Continue reading →

Car Paint Shader: Thin-Film Interference

This post completes the journey started in The Mathematics of Thin-Film Interference, by explaining how to turn the equations previously presented into actual shader code.

You can find the complete series here:

A link to download the Unity project used in this series is also provided at the end of the page.

Continue reading →

Topographical Maps in Unity: Edge Detection

This tutorial will teach you how to recreate a very popular effect in games: topographical maps.

This is a two-part series, which will cover all the necessary aspects—from the Maths to the shader code—to make this possible:

In this second part, we will focus on the edge detection algorithm that will be used to draw the contours of the terrain.

A link to download the full Unity package is also available at the end of the tutorial.

Continue reading →

Topographical Maps in Unity: Terrain Shading

This tutorial will teach you how to recreate a very popular effect in games: topographical maps.

This is a two-part series, which will cover all the necessary aspects—from the Maths to the shader code—to make this possible:

A link to download the full Unity package is also available at the end of the tutorial.

Continue reading →

How to Create a 360° Video in Unity

This is the second part of the online series dedicated to the creation of 360° videos in Unity. With this course, you will be able to produce 360° videos trailers for your VR games that can be played with YouTube, and even produce effective educational content like the one below.

This online course is split into two modules. The first one will focus on how to create the videos in Unity, and is already available:

The second module will focus on editing the videos, and will be released at a later time:

A link to download a working Unity scene can be found at the end of this page.

Continue reading →

Journey Sand Shader: Ripples

This is the sixth part of the online series dedicated to Journey Sand Shader.

In this final post, we will recreate the typical sand ripples that appear due to the dune-wind interaction.

Continue reading →

Journey Sand Shader: Glitter Reflection

This is the fifth part of the online series dedicated to Journey Sand Shader.

In this fifth post, we will recreate the shimmering reflections that are typically seen on sand dunes.

Shortly after the publication of this series, Julian Oberbeck and Paul Nadalack made their own attempt at recreating a Journey-inspired scene in Unity. You can see in the thread below how they have improved the glitter reflection to have more temporal coherence. You can read more about their implementation on IndieBurg’s article Mip Map Folding.

Continue reading →

Journey Sand Shader: Specular Reflection

This is the fourth part of the online series dedicated to Journey Sand Shader.

In this fourth post, we will focus on the specular reflections that make the dunes look like an ocean of sand.

Continue reading →

Journey Sand Shader: Sand Normal

This is the third part of the online series dedicated to Journey Sand Shader.

In this third post, we will focus on the normal mapping that will turn smooth 3D models into sandy dunes.

Continue reading →