正在加载视频...

视频加载失败

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 条评论

Rive 的头像
Rive1 个月前

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 的头像
Rive1 个月前

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

Rive 的头像
Rive1 个月前

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

Rive 的头像
Rive1 个月前

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 的头像
Rive1 个月前

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

Rive 的头像
Rive1 个月前

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 的头像
Rive1 个月前

@jeffamcavoy Shaders as screen transitions.

Rive 的头像
Rive1 个月前

@jeffamcavoy Another example from @radbar_1

Rive 的头像
Rive1 个月前

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

Rive 的头像
Rive1 个月前

@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 的头像
Rive1 个月前

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 的头像
Rive1 个月前

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

Rive 的头像
Rive1 个月前

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

Rive 的头像
Rive1 个月前

@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 的头像
Rive1 个月前

@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 的头像
Rive1 个月前

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

Rive 的头像
Rive1 个月前

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

Rive 的头像
Rive1 个月前

@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 的头像
Rive1 个月前

@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 的头像
Rive1 个月前

@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 的头像
Rive1 个月前

@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 的头像
Rive1 个月前

@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 的头像
Rive1 个月前

@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 的头像
A.W.E.S.O.M.-O 40001 个月前

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

Jamie Kendall 的头像
Jamie Kendall1 个月前

@drawsgood YESSSS

Vikas Raj Yadav ˎˊ˗ 的头像
Vikas Raj Yadav ˎˊ˗1 个月前

Yessss!!!

SVG Icons 的头像
SVG Icons1 个月前

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

Sirojiddin Makhammatov 的头像
Sirojiddin Makhammatov1 个月前

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

DrejT 的头像
DrejT1 个月前

can i make animations using claude code on rive?

aibor 的头像
aibor1 个月前

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.

相关视频