This example is running in WebGL2 and should work in most browsers. You can check the WebGPU examples here.
custom_phase_item.rs:
//! Demonstrates how to enqueue custom draw commands in a render phase.
//!
//! This example shows how to use the built-in
//! [`bevy_render::render_phase::BinnedRenderPhase`] functionality with a
//! custom [`RenderCommand`] to allow inserting arbitrary GPU drawing logic
//! into Bevy's pipeline. This is not the only way to add custom rendering code
//! into Bevy—render nodes are another, lower-level method—but it does allow
//! for better reuse of parts of Bevy's built-in mesh rendering logic.
use mem;
use ;
use ;
/// A marker component that represents an entity that is to be rendered using
/// our custom phase item.
///
/// Note the [`ExtractComponent`] trait implementation. This is necessary to
/// tell Bevy that this object should be pulled into the render world.
;
/// Holds a reference to our shader.
///
/// This is loaded at app creation time.
/// A [`RenderCommand`] that binds the vertex and index buffers and issues the
/// draw command for our custom phase item.
;
/// The GPU vertex and index buffers for our custom phase item.
///
/// As the custom phase item is a single triangle, these are uploaded once and
/// then left alone.
/// The CPU-side structure that describes a single vertex of the triangle.
/// The custom draw commands that Bevy executes for each entity we enqueue into
/// the render phase.
type DrawCustomPhaseItemCommands = ;
/// A query filter that tells [`view::check_visibility`] about our custom
/// rendered entity.
type WithCustomRenderedEntity = ;
/// A single triangle's worth of vertices, for demonstration purposes.
static VERTICES: = ;
/// The entry point.
/// Spawns the objects in the scene.
/// Creates the [`CustomPhaseItemBuffers`] resource.
///
/// This must be done in a startup system because it needs the [`RenderDevice`]
/// and [`RenderQueue`] to exist, and they don't until [`App::run`] is called.
/// A render-world system that enqueues the entity with custom rendering into
/// the opaque render phases of each view.
shaders/custom_phase_item.wgsl:
// `custom_phase_item.wgsl`
//
// This shader goes with the `custom_phase_item` example. It demonstrates how to
// enqueue custom rendering logic in a `RenderPhase`.
// The GPU-side vertex structure.
;
// Information passed from the vertex shader to the fragment shader.
;
// The vertex shader entry point.
@vertex
// The fragment shader entry point.
@fragment
@location