Loading video...

Video Failed to Load

Go Home

GPU Canvas is now live for everyone. Rive's low-level GPU layer for 3D, shaders, and custom effects is out of Early Access and in the production editor today. Write your shaders once in WGSL. Rive compiles them for Metal, Vulkan, Direct3D, WebGPU, and WebGL. It adds 25KB to the runtime.

30,267 views • 1 month ago •via X (Twitter)

30 Comments

Rive's profile picture
Rive1 month ago

New since Early Access: Deferred Rendering. Rive draws on its own thread, so heavy GPU scenes stay smooth while the rest of your app does its work. Live in the editor today, coming to the runtimes next. GPU Canvas runtime support today: Web, iOS, Android, React Native, Flutter, and C++. More on the way.

Rive's profile picture
Rive1 month ago

Write shaders. WGSL, rendered straight into your Rive file.

Rive's profile picture
Rive1 month ago

Import 3D models. Write a GLTF importer in a Script and animate it on the timeline like anything else.

Rive's profile picture
Rive1 month ago

imported each icon as a GLB file, exposed properties on the GPU Canvas, and animated them with timelines and State Machines. The calendar's number is an artboard used as a texture on the mesh:

Rive's profile picture
Rive1 month ago

Lighting and post effects on 2D artwork. Rim light, bloom, outlines, whatever you can write.

Rive's profile picture
Rive1 month ago

Or bring in a texture. @jeffamcavoy used the Rive MCP to write a felt shader that takes one artboard's artwork and alpha and applies an image texture through a Script node in another:

Rive's profile picture
Rive1 month ago

@jeffamcavoy Shaders as screen transitions.

Rive's profile picture
Rive1 month ago

@jeffamcavoy Another example from @radbar_1

Rive's profile picture
Rive1 month ago

@jeffamcavoy @radbar_1 A holo foil card from @drawsgood:

Rive's profile picture
Rive1 month ago

@jeffamcavoy @radbar_1 @drawsgood Build your own rendering pipeline. This one is a vehicle cluster with a live 3D car, and it runs smoothly on the underpowered chips vehicles actually ship with.

Rive's profile picture
Rive1 month ago

Embed 3D geometry inside a 2D artboard. Layouts, dynamic text, and Data Binding still apply, so the 3D piece resizes and updates with the rest of the UI. @rocklet_ pushed it into product visualization: material controls, depth of field, motion blur, HDRI lighting.

Rive's profile picture
Rive1 month ago

@jeffamcavoy @radbar_1 @drawsgood @rocklet_ Or go the other way and map interactive 2D artboards onto 3D models. @jeffamcavoy's example:

Rive's profile picture
Rive1 month ago

@jeffamcavoy @radbar_1 @drawsgood @rocklet_ @hansonerere2 did the same with a live artboard as the material texture, mapped to the model's UVs:

Rive's profile picture
Rive1 month ago

@jeffamcavoy @radbar_1 @drawsgood @rocklet_ @hansonerere2 Put the two together and you get one cohesive interactive scene. Models, cameras, lights, custom shaders, projected animated textures, and 2D components placed in 3D space. All from @rocklet_:

Rive's profile picture
Rive1 month ago

@jeffamcavoy @radbar_1 @drawsgood @rocklet_ @hansonerere2 Games. 3D worlds with 2D characters, built in the same editor as your UI. @HelloJcToon has been testing it with a controller in hand:

Rive's profile picture
Rive1 month ago

@jeffamcavoy @radbar_1 @drawsgood @rocklet_ @hansonerere2 Cohesive lighting and effects for 2D character rigs in a 3D environment:

Rive's profile picture
Rive1 month ago

@jeffamcavoy @radbar_1 @drawsgood @rocklet_ @hansonerere2 @luigirosso ported his Tetrisphere prototype to it:

Rive's profile picture
Rive1 month ago

@jeffamcavoy @radbar_1 @drawsgood @rocklet_ @hansonerere2 @luigirosso Not a graphics programmer? Describe the shader. The Agent writes and optimizes it, and the Rive MCP now does the same from any MCP-compatible tool: write, diagnose, recompile, test.

Rive's profile picture
Rive1 month ago

@jeffamcavoy @radbar_1 @drawsgood @rocklet_ @hansonerere2 @luigirosso Want to see the process? @LauKitton walked through building her 3D characters with the Agent, from first prompt to composed scene:

Rive's profile picture
Rive1 month ago

@jeffamcavoy @radbar_1 @drawsgood @rocklet_ @hansonerere2 @luigirosso @LauKitton And @rocklet_ put together a tutorial on the 3D workflow, with free scripts for model importing, camera controls, lighting, materials, and UV projection:

Rive's profile picture
Rive1 month ago

@jeffamcavoy @radbar_1 @drawsgood @rocklet_ @hansonerere2 @luigirosso @LauKitton All of it inside the design and animation tooling only Rive has: responsive Layouts, State Machines, dynamic text, Vector Feathering, 2D skeletal animation, Data Binding.

Rive's profile picture
Rive1 month ago

@jeffamcavoy @radbar_1 @drawsgood @rocklet_ @hansonerere2 @luigirosso @LauKitton One more thing. This isn't a web-only 3D solution. The same file runs natively on desktop apps, games, mobile apps, consoles, TVs, and vehicles, with the same shaders compiled for whatever GPU is underneath. One runtime, everywhere Rive goes.

Rive's profile picture
Rive1 month ago

@jeffamcavoy @radbar_1 @drawsgood @rocklet_ @hansonerere2 @luigirosso @LauKitton What's next? Public libraries for the common jobs (GLTF import, lighting, render styles), so nobody starts from a blank shader. Open the production editor, create a Script, pick Shader. Docs:

A.W.E.S.O.M.-O 4000's profile picture
A.W.E.S.O.M.-O 40001 month ago

25KB is an impressively small footprint for this kind of capability

Jamie Kendall's profile picture
Jamie Kendall1 month ago

@drawsgood YESSSS

Vikas Raj Yadav ˎˊ˗'s profile picture
Vikas Raj Yadav ˎˊ˗1 month ago

Yessss!!!

SVG Icons's profile picture
SVG Icons1 month ago

Interesting to see low-level graphics become agent-callable while staying inside real design tooling. That human/code loop matters.

Sirojiddin Makhammatov's profile picture
Sirojiddin Makhammatov1 month ago

I’ve been waiting for this update - definitely one of the best updates so far! And thanks for Premium too😄

DrejT's profile picture
DrejT1 month ago

can i make animations using claude code on rive?

aibor's profile picture
aibor1 month ago

This is so great! Tested out in flutter but are shaders not working in flutter web ? Can’t seem to get them working for web.

Related Videos