Shaders not working on web

Submission checklist

I have confirmed the issue is present in the latest version of the rive Flutter package
I have searched the documentation and forums and could not find an answer
I have searched existing issues and this is not a duplicate

Description

I flagged this on discord but doing so again here with all repro files. trying the basic shader example from the site this works in flutter (3.41.8) on macos but on web I get the following runtime error:

:: context:gpuCanvas() requires a RenderContext — call setRenderContext() first

There does not appear to be an exposed way to call this manually in the flutter API or luau scripting

Reproduction steps / code

import 'dart:math' as math;
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:rive/rive.dart' as rive;

void main() async {

  WidgetsFlutterBinding.ensureInitialized();
  await rive.RiveNative.init();

  runApp(const MyApp());
}


class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Rive Painter Template',
      home: Scaffold(
        body: Stack(
          children: [
            GamePainterWidget(),
          ],
        ),
      ),
    );
  }
}

///-----------------------------------------------------------------------------
///-----------------------------------------------------------------------------

class GamePainterWidget extends StatefulWidget {

  const GamePainterWidget({super.key});

  @override
  GamePainterWidgetState createState() => GamePainterWidgetState();

}


class GamePainterWidgetState extends State<GamePainterWidget> {

  rive.RenderTexture renderTexture = rive.RiveNative.instance.makeRenderTexture();

  GamePainter? _gamePainter;

  @override
  void initState() {
    loadFile();
    super.initState();
  }

  Future<void> loadFile() async {

    final bytes = await rootBundle.load("assets/basic_shader.riv");
    var riveFile = await rive.File.decode(bytes.buffer.asUint8List(),
        riveFactory: rive.Factory.rive);

    if (riveFile != null) {
      setState(() {
        _gamePainter = GamePainter(riveFile);
      });
    }

  }

  @override
  Widget build(BuildContext context) {

    if (_gamePainter == null) return Container();

    return renderTexture.widget(painter: _gamePainter!);
  }

}

///-----------------------------------------------------------------------------
///-----------------------------------------------------------------------------


final class GamePainter extends rive.RenderTexturePainter {

  late rive.Artboard ab;
  late rive.StateMachine sm;

  bool hasMade = false;

  GamePainter(rive.File file) {
    ab = file.defaultArtboard()!;
    sm = ab.stateMachine('State Machine 1')!;
  }



  @override
  bool paint(rive.RenderTexture texture, double devicePixelRatio, Size size, double elapsedSeconds) {

    final renderer = texture.renderer;

    renderer.save();
    renderer.scale(devicePixelRatio);

    //scale to fill:
    double scaleX = (size.width / devicePixelRatio) / ab.width;
    double scaleY = (size.height / devicePixelRatio) / ab.height;
    double scale = math.min(scaleX, scaleY);//maintain aspect
    renderer.scale(scale);

    sm.advanceAndApply(elapsedSeconds);
    ab.draw(renderer);

    renderer.restore();

    return true;
  }


  @override
  Color get background => Colors.transparent;

}

Upload your reproduction files / stack trace

No response

Source `.riv` / `.rev` file

basic_shader.riv.zip

Screenshots / video

No response

Rive Flutter package version

0.15.0-dev.1

Flutter version

Flutter 3.41.8 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 02085feb3f (5 months ago) • 2026-04-24 13:54:45 -0700
Engine • hash 7a53c052bc4b472cf780b199087e1368e4a9aa8c (revision 59aa584fdf) (4
months ago) • 2026-04-16 02:32:16.000Z
Tools • Dart 3.11.5 • DevTools 2.54.2

Device

m1 macbook pro

OS version

mac tahoe 26.5, latest macos chrome 151.0.7922.174 with draft gl flags enabled

Additional context

No response

still broken w the latest 0.15.0-dev.2 release although the error has changed to:

:: beginRenderPass: color[1].view omitted but the receiving canvas has no backing texture (zero-sized). Call canvas:resize(w, h) before drawing, or pass an explicit view.

the size is set in the luau script calling the shader and making size more explicit in flutter (e.g. wrapping in a fixed sized box) or delaying the creation of the render texture does not help. macos still working fine.

any advice? I did not see anything that seemed relevant in the migration guide linked from todays announcement

RiveWidget instead custom painter gets me a bit further in that the rest of the file will render, but the basic shader output is not shown and the same runtime error appears in console

We are also waiting for a fix on this issue, which is preventing us using our shaders in a hubspot hosted website with a Rive Embed link.

To work around this issue, we had to implement our own hosting of the .riv asset, and load the rive runtime ourselves and initialise it with our own script.

With our CDN (Hubspot), we are able to host https://www.your-domain-here.com/assets/your-rive-file-here.riv in the hubspot tenant, then paste this as an Embed Code block into a content piece (on a landing page) and it works:

<div id="rive-frame" style="  
  width: 100%;  
  max-width: 800px;  
  aspect-ratio: 1584 / 1726;  
    overflow: hidden;  
  ">  
  <canvas id="rive-canvas" style="  
      width: 100%;  
      height: 100%;  
      display: block;  
    "></canvas>  
</div>  
  
<script src="https://unpkg.com/@rive-app/webgl2@2.43.0"></script>  
  
<script>  
(() => {  
  if (window.__riveTestInstance) {  
    window.__riveTestInstance.cleanup();  
    window.__riveTestInstance = null;  
  }  
  
  const riveCanvas = document.getElementById("rive-canvas");  
  
  const riveInstance = new rive.Rive({  
    src: "https://www.your-domain-here.com/assets/your-rive-file-here.riv",  
    canvas: riveCanvas,  
    stateMachine: "State Machine 1",  
    autoplay: true,  
    enableGPUCanvas: true,  
    useOffscreenRenderer: false,  
  
    layout: new rive.Layout({  
      fit: rive.Fit.Contain,  
      alignment: rive.Alignment.Center,  
    }),  
  
    onLoad: () => {  
      riveInstance.resizeDrawingSurfaceToCanvas();  
    },  
  
    onLoadError: (error) => {  
      console.error("Rive load error:", error);  
    }  
  });  
  
  window.__riveTestInstance = riveInstance;  
  
  const resizeObserver = new ResizeObserver(() => {  
    riveInstance.resizeDrawingSurfaceToCanvas();  
  });  
  
  resizeObserver.observe(document.getElementById("rive-frame"));  
})();  
</script>

The above example is essentially self-hosting the rive asset, and using Rives Web runtime to show it. We have to use the web runtime to access the property enableGPUCanvas: true, - which is false by default in Rive's embed links.

The original issue here is for FlutterWeb builds having the same runtime error as the rive webgl2 builds when enableGPUCanvas is false and a shader is in the asset.

I investigated further and Rive's Embed URL feature has the following experience when the asset has a webgl shader in it:

Hosted link ✅ works and renders the shader using enableGPUCanvas: true(I assume)
Embed Link ❌ Shows the rive asset but any webgl canvases will not render and the console shows the error " context:canvas() requires a RenderContext — call setRenderContext() first"
Embed code ❌ Shows the rive asset but any webgl canvases will not render and the console shows the error " context:canvas() requires a RenderContext — call setRenderContext() first"

This is when the 'Rive Renderer' options is enabled for these links. If 'Rive Renderer' is disabled then the experience is the same but the browser console error is: "context:canvas() requires a RIVE_CANVAS build"

Explained here

GPU Canvas is experimental. The API may change in a minor release without a major version bump.

The Flutter docs are not explicit about webgl support and shader support.
The webgl2 runtime is explicit about how to use and enable shader usage.

I believe the Rive Editor supporting shaders with their Hosted Link but being broken in Embed links is a bug with the hosted runtime defaults, and this also is a bug with Flutters web builds not exposing the enableGPUCanvas setting to use shaders.

FWIW if you update the pubspec to the developer preview 0.15.0-dev.2 then this major version has gpu canvas support (which is shader support) in Flutter directly.

The migration guide is here
https://rive.app/docs/runtimes/flutter/migration-guide#version-0-15-0

I was using the dev release in the original post. Sorry if unclear but the issue is still that this works on desktop but not web

Navigation Menu

Repository navigation

Shaders not working on web #657

Submission checklist

Description

Reproduction steps / code

Upload your reproduction files / stack trace

Source `.riv` / `.rev` file

Screenshots / video

Rive Flutter package version

Flutter version

Device

OS version

Additional context

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Shaders not working on web #657

Description

Submission checklist

Description

Reproduction steps / code

Upload your reproduction files / stack trace

Source .riv / .rev file

Screenshots / video

Rive Flutter package version

Flutter version

Device

OS version

Additional context

Activity

naychrist commented on Sep 15, 2026

naychrist commented on Sep 15, 2026

jessekit commented on Sep 23, 2026

jessekit commented on Sep 24, 2026

jessekit commented on Sep 29, 2026

naychrist commented on Oct 2, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Source `.riv` / `.rev` file