Making a Custom Vertex Shader Extension Material in Bevy

After spending many hours trying to build good extension materials in bevy, I finally figured out best practices. These are very sparsely documented.

Hair is being cloth-simmed with a custom vertex shader

This example shows a custom character_material which implements separate wgsl files for the frag and vert shaders.

The character_cel shader is just the frag shader so it only affects pixel color. It uses a cel shader mask (just a white-to-black gradient image) to quantize shadows using some trickery with the bevy lighting function.

The cloth shader is the vert shader and accepts a uniform with acceleration values which warp the vertices based on linear and angular acceleration! To do a simple cloth sim inside of bevy.

impl MaterialExtension for CharacterCelMaterialBase {
    fn fragment_shader() -> ShaderRef { 
        "shaders/character_cel.wgsl".into()
    }

    fn vertex_shader() -> ShaderRef {
        "shaders/cloth.wgsl".into()
    } 
}

Here are some lessons learned:

1. If you are building a custom Vertex shader for your extension material, reference the default vertex shader used by bevy here. You MUST handle the ifdef segments properly, like the SKINNED section, or any rigged meshes will not work properly.
2. The default frag shader can be referenced here for the same effect. If stuck, use the exact code of the default frag shader for your frag shader and then modify it from there to what you need.

See the full code for my custom vertex+fragment extension material here:

https://gist.github.com/ethereumdegen/8892d71ae07c822531e16dad61146476