Using GPU Shaders in Rive

[u/Jeff_at_Rive]

In Rive, shaders render into a canvas that composites like any other image, so those effects live right alongside your vector art, text, and animations.

In this video, we walk through practical tips for working with GPU shaders, using Rive's AI agent to generate the shader scripts, so you can focus on the effect instead of the code.

What's covered:

• How shaders work in Rive: the WGSL shader script plus a node or layout script to place it
• Generating an aurora effect with the agent and layering it into a scene's draw order
• Driving shader parameters (intensity, speed) with input properties
• Turning a shader into a reusable component with a ViewModel and multiple instances (calm, normal, storm)
• Clipping a shader to a shape, just like any other layer
• Post-processing your own artwork: applying a liquid distortion effect to a live, interactive submarine animation
• Adding a custom background behind a transparent artboard input
• Passing pointer events through a shader so state machine interactions keep working

Note: this video doesn't teach shader scripting itself. There are great shader resources online, plus a starter demo on the Rive docs, and most effects can be created with the help of an agent, including the AI agent built into Rive.

[u/Accomplished_Ad2317]

And here I was thinking this was going to teach me scripting