[DRAFT] Tartan

[haydn]

Changes

Adds a new tartan shader.

The pattern adheres to the typical traditional tartan patterns where the "sett" is repeated in reverse and both the "warp" and the "weft" are the same. This is to say, the pattern is symmetrical both horizontally and vertically. See the Wikipedia article for details.

Work still to be done

• Fix issue with extra width controls not being added to the Leva controls.
• Add a weave texture. It'd be nicer if the fabric pattern was subtly applied to the whole image (even in areas of solid colour).
• Fix pixelation issues.
• Replace uniform mat3 u_stripeWidths with uniform float[9] u_stripeWidths? This appears to be a limitation of ShaderMount.
• Add preview image.
• Add more presets.
• Fix TypeScript type assertions for colors in docs/src/app/tartan/page.tsx. These have been added because the return type of Leva's useControls appears to be typed incorrectly.
• Rename to "Static Tartan" to match the naming convention already in use for other static shaders.

Pixelation issues

The current sizing prevents the pattern from being aligned with the pixel grid (see images below). Two options to explore:

1. Do the sizing in the fragment shader as is done in the dithering shader.
2. Use anti-aliasing. (This is probably preferable if a weave texture is going to be applied anyway.)

Shadertoy (using vec2 uv = (fragCoord.xy - iResolution.xy * 0.5)):

Paper shaders (using vec2 uv = v_patternUV * 100.0):

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
shaders-docs	✅ Ready (Inspect)	Visit Preview	Aug 4, 2025 8:27am

[StephenHaney]

This is cool! Thanks for submitting new shaders. We may adapt these or merge some as-is, but just wanted to let you know I don't know exactly when we will focus on that yet. It's great to see new ideas coming in though.

[haydn]

@StephenHaney No worries, I completely understand. I've been using this as an opportunity to learn shaders more than anything.

[haydn]

I've rebased this PR onto main, added a weave texture to the shader and changed how the Leva controls are configured in the docs app.

Some of the changes I've made to the Leva controls might be worth pulling out into their own PR and applying across the board:

1. I've drop usage of cleanUpLevaParams. That's only needed if the controls for the presets are mixed in with the controls for the regular parameters. (Looks like those have been separated everywhere already, so I don't think it's doing anything in any of the other pages either.)

2. I've removed the usePresetHighlight hook — it doesn't appear to be working as intended on any of the shaders right now.

3. I've replaced useResetLevaParams with this:

   // Clear the Leva store when the component unmounts.
   useEffect(() => {
     return () => {
       levaStore.dispose();
     };
   }, []);

   It could probably be moved to a component in the root layout that watches for changes to the pathname (using usePathname) that'd clear to Leva store whenever someone navigates back to the home page.

4. Instead of using useColors I've added a createNumberedObject helper. This can be used with any set of values (the stripe colors and widths in this case). The controls are shown/hidden using Leva's render config. I've also added a getValuesSortedByKey helper for converting the values into an array to pass to the shader component.

Let me know if there's interest in applying any of these changes to the other shaders in the docs app and I'll get a PR together.