This example is running in WebGL2 and should work in most browsers. You can check the WebGPU examples here.
custom_gltf_vertex_attribute.rs:
//! Renders a glTF mesh in 2D with a custom vertex attribute.
use ;
/// This example uses a shader source file from the assets subdirectory
const SHADER_ASSET_PATH: &str = "shaders/custom_gltf_2d.wgsl";
/// This vertex attribute supplies barycentric coordinates for each triangle.
///
/// Each component of the vector corresponds to one corner of a triangle. It's
/// equal to 1.0 in that corner and 0.0 in the other two. Hence, its value in
/// the fragment shader indicates proximity to a corner or the opposite edge.
const ATTRIBUTE_BARYCENTRIC: MeshVertexAttribute =
;
new
/// This custom material uses barycentric coordinates from
/// `ATTRIBUTE_BARYCENTRIC` to shade a white border around each triangle. The
/// thickness of the border is animated using the global time shader uniform.
shaders/custom_gltf_2d.wgsl:
#import
;
;
@vertex
;
@fragment
@location