This example is running in WebGL2 and should work in most browsers. You can check the WebGPU examples here.
//! 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.
#import bevy_sprite::{
mesh2d_view_bindings::globals,
mesh2d_functions::{get_world_from_local, mesh2d_position_local_to_clip},
}
struct Vertex {
(instance_index) instance_index: u32,
(0) position: vec3<f32>,
(1) color: vec4<f32>,
(2) barycentric: vec3<f32>,
};
struct VertexOutput {
(position) clip_position: vec4<f32>,
(0) color: vec4<f32>,
(1) barycentric: vec3<f32>,
};
fn -> VertexOutput {
var out: VertexOutput;
let world_from_local = ;
out.clip_position = );
out.color = vertex.color;
out.barycentric = vertex.barycentric;
return out;
}
struct FragmentInput {
(0) color: vec4<f32>,
(1) barycentric: vec3<f32>,
};
fn -> (0) vec4<f32> {
let d = ;
let t = 0.05 * (0.85 + );
return ;
}