INTRO.md

Tangram Blocks

Gallery of reusable building blocks for Tangram to make beautiful maps simpler.

Writing custom styles for Tangram can be tricky because you need to know some GL Shading Language, but using this library for recipes, you can mix and reuse some of the snippets of shader code blocks that flavor our maps.

How to use them?

---

So first you need to import the block to the YAML scene file you are working on. That will look something like this:

import:
    - https://tangrams.github.io/blocks/filter/grain.yaml

Then you need to mix it with the custom styles of your choise. For example:

styles:
    buildings:
        base: polygons
        mix: [filter-grain]

Some of the blocks like points, lines, polygons, fx and filter automatically will add the necessary lines to the normals, color and filter blocks to make it work. So you don't have to do anything else other than add it to the mix:. Then you can tweak the values from the defines to your own prefernces. For example in the above example we can increase the detail and amount of the grain by modifying these two defines:

styles:
    buildings:
        base: polygons
        mix: [filter-grain]
        shaders:
            defines:
                GRAIN_AMOUNT: .4
                NUM_OCTAVES: 3

The rest of the building blocks just provide reusable GLSL functions into the global shader block.

To learn basic principles about shaders we recomend reading The Book of shaders, if you are interested to learn about shaders inside Tangram read tangram documentation about that subject.

Want to contribute?

If you have made a nice shader style you are proud of and want to share it, send me an email to [email protected] or a DM to @patriciogv and I will be happy to help you make a block out of it.