Tangram draws map features using its built-in draw styles: polygons, lines, points, text, and raster. Using the styles element, you can customize the behavior of these draw styles, either by using the many built-in customization features, or by making your own effects from scratch using shaders.

This tutorial will explore three things you can make with custom styles: dashed lines, transparent polygons, and shader effects.

Add a new style based on the polygons style – ours is named “_transparent”. Then, add a blend mode of overlay, and set the buildings draw style to match the name of the custom style.

There’s one more step which is easy to overlook: right now the building layer’s color value is a solid gray, [.7, .7, .7]. The three values in that array are the Red, Green, and Blue channels. But there’s another possible channel for Alpha, which controls transparency, and if you don’t specify it, it defaults to 1, which is opaque.

The blend modes respect alpha, so let’s add an alpha value of .5, which is 50% opacity, and we will achieve transparency at last:

Shader Effects

Custom shaders are also achieved through custom styles, using the shaders block. Starting with the buildings layer again, add a new entry to the styles block named “_custom”, and change the draw style of the buildings layer to match.

Then, add a shaders block to the style, with a blocks block and a color block inside that. This color block will hold the shader code, which is written in GLSL. To start off (and to tell it’s working) set the output color to something like vec3(1, 0, 1) which is GLSL’s way of specifying the RGB values for magenta:

(You’ll notice shading on the sides of buildings – this is because of the default light settings. Read more about these in our lighting documentation.)

Now you can write your own shader functions to control the color of the buildings directly. You can also use built-in variables if you wish to control the color with properties of the geometry or scene. Let’s get the worldPosition() of each vertex and reference that in the shader’s color block, so the buildings will be colored based on z-value (aka height):