Skip to content

[Impeller] application with lots of gradients spends too much time on texture upload #115208

@bvoq

Description

@bvoq

I've modified the example https://github.com/flutter/flutter/blob/master/examples/layers/raw/spinning_square.dart to include 10'000 spinning squares each with a random color shader, redrawn each frame.

I was surprised at the incredible performance, but noticed that when I enabled --enable-impeller the performance drops significantly (10x roughly). Is this intended?

Here is my code for comparison:

import 'dart:math' as math;
import 'dart:typed_data';
import 'dart:ui' as ui;

void beginFrame(Duration timeStamp) {
  // The timeStamp argument to beginFrame indicates the timing information we
  // should use to clock our animations. It's important to use timeStamp rather
  // than reading the system time because we want all the parts of the system to
  // coordinate the timings of their animations. If each component read the
  // system clock independently, the animations that we processed later would be
  // slightly ahead of the animations we processed earlier.

  // PAINT

  const double R=3;
  final ui.Rect paintBounds = ui.Offset.zero & (ui.window.physicalSize / ui.window.devicePixelRatio);
  final ui.PictureRecorder recorder = ui.PictureRecorder();
  final ui.Canvas canvas = ui.Canvas(recorder, paintBounds);
  var rng = math.Random(213);
  for(int i=0;i<100;++i) {
    for(int j=0;j<100;++j) {
        canvas.save();
        canvas.translate(i*7.0, j*7.0);// paintBounds.width / 2.0, paintBounds.height / 2.0);

        // Here we determine the rotation according to the timeStamp given to us by
        // the engine.
        final double t = timeStamp.inMicroseconds / Duration.microsecondsPerMillisecond / 1800.0;
        canvas.rotate(2.0 * math.pi * (t % 1.0));

        canvas.drawRect(
          const ui.Rect.fromLTRB(-R, -R, R, R),
          ui.Paint()..shader = ui.Gradient.linear(
            const ui.Offset(-R,-R),
            const ui.Offset(R,R),
            const [
                ui.Color.fromARGB(255, rng.nextInt(255),rng.nextInt(255), rng.nextInt(255)),
                ui.Color.fromARGB(255, rng.nextInt(255),rng.nextInt(255), rng.nextInt(255))
            ]
          ),
          //ui.Paint()..color =  ui.Color.fromARGB(255, rng.nextInt(255),rng.nextInt(255), rng.nextInt(255)),
        );
        canvas.restore();
    }
  }
  final ui.Picture picture = recorder.endRecording();

  // COMPOSITE

  final double devicePixelRatio = ui.window.devicePixelRatio;
  final Float64List deviceTransform = Float64List(16)
    ..[0] = devicePixelRatio
    ..[5] = devicePixelRatio
    ..[10] = 1.0
    ..[15] = 1.0;
  final ui.SceneBuilder sceneBuilder = ui.SceneBuilder()
    ..pushTransform(deviceTransform)
    ..addPicture(ui.Offset.zero, picture)
    ..pop();
  ui.window.render(sceneBuilder.build());

  // After rendering the current frame of the animation, we ask the engine to
  // schedule another frame. The engine will call beginFrame again when its time
  // to produce the next frame.
  ui.PlatformDispatcher.instance.scheduleFrame();
}

void main() {
  ui.PlatformDispatcher.instance
    ..onBeginFrame = beginFrame
    ..scheduleFrame();
}

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work liste: impellerImpeller rendering backend issues and features requests

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions