worksheet.md

• Hardcoding colors in a shader: On a typical map you see fills of all kinds of different colors. What happens if you hardcode a single color in the fill fragment shader? Here, hardcode a single color. Colors are 4-channel (rgba) vectors where all channels are in the range [0, 1], so fully opaque red would be vec4(1.0, 0.0, 0.0, 1.0); semitransparent fuchsia would be vec4(1.0, 0.0, 0.5, 0.5), etc.

• Variable colors in a shader: Now can you calculate the fill-color based on a fragment’s position in a tile? (Recall that tile coordinates — the a_pos in the vertex shader — range from 0-8192.) You could also change just a single channel (r or g or b) while leaving the rest of the colors as they are intended in the style.

• Triangle indexing bugs: If we throw off the triangle composition (creating triangles out of indices) by one, you’ll see what’s known as a “triangle indexing bug.” Can you figure out some various ways in which we can throw off our triangle counting by one in different types? How does that affect rendering? (Try this in the fill-extrusion bucket on a map with 3D features.)

• Fullscreen texture manipulation: The extrusion_texture shaders are responsible for copying a layer of extrusions, already rendered offscreen, back to the map. How could you modify what a map with 3D buildings looks like by changing values in those shaders?

• Flipping/transforming text: The symbol type (text + icons) is by far the most complicated type, but try this: here we add symbol vertices to their vertex array. What happens if you flip the third and fourth lines? Can you find the relevant part of the shader that uses those attribute components, and could you achieve the same effect in the shader rather than in vertex creation? Given that those components are clamped to [0, 128], how might you manipulate text positions in other ways? Now try tweaking some other symbol attributes and see if you can figure out why and how they affect rendering. For example, where in the shader might you scale text to be very big or very small? Where are some other places in either the vertex or fragment shader could transform text?

• Randomizing shader components: There’s a “canonical one-liner random function” for GLSL that’s floating around the internet, which depends on a 2-component vector seed. You might try copying that function into, for example, the line fragment shader (just above the main function), and then generating random colors based on 2-vector components that would vary between features — v_normal, for example. What are some other interesting results you might produce by randomizing based on 2-component seeds in various shaders?

• Spiky 3D extrusions: The FillExtrusionBucket creates walls and rooftops to extrude polygons in 3D. How might you modify this to create, say, spiky pyramid-like shapes? (It might help to know that the second-to-last argument, t, in addVertex acts as a binary for top or bottom — 0 indicates a bottom vertex, 1 indicates a top one.) You could do this using an existing vertex, or using a polygon centroid — symbol layers find centroids using this utility function.

• Free-for-alls: here are some more open-ended things you can play with; your mileage may vary!

  • What are some other effects you could create by modifying values in the symbol_sdf fragment shader?
  • Try adding random triangles to tiles in various bucket types.
  • Tweak various attributes in various bucket types (either by swapping with other variables or hardcoding different values). Note that the attributes definition of any given interface defines the number types used in that attribute, so if it says Uint8, it can’t be negative and it’s an 8-bit integer — it has a range of [0, 255].
  • If you’re really interested in shaders, you might check out shadertoy.com, where people submit all kinds of shader effects. See if you can get one you like working in place of e.g. the fill shader.