Загрузка видео...
Не удалось загрузить видео
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 просмотров • 1 месяц назад •via X (Twitter)
Комментарии: 30

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.

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

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

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:

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

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:

@jeffamcavoy Shaders as screen transitions.

@jeffamcavoy Another example from @radbar_1

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

@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.

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.

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

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

@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_:

@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:

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

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

@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.

@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:

@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:

@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.

@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.

@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:

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

@drawsgood YESSSS

Yessss!!!

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

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

can i make animations using claude code on rive?

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.


