high-poly models looking very low-resolution/pixelated

[redesign3d]

Hey,

I've been playing with the package for a few days now, and managed to successfully load models, created a new Camera which allows for free transformation etc. - but one thing I cannot seem to understand is why models I load look pixelated, but only when exceeding a certain polycount.
The FlutterLogo from the example looks perfectly fine, yet any higher poly models end up being pixelated.

This is my CustomPainter:

class _ScenePainter extends CustomPainter {
  final Scene scene;
  final OrbitCamera orbitCamera;

  _ScenePainter(this.scene, this.orbitCamera);

  @override
  void paint(Canvas canvas, Size size) {
    // Render scene using updated camera
    scene.render(
      orbitCamera.camera, 
      canvas, 
      viewport: Offset.zero & size, 
      
    );
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

and setting antiAlias and filterQuality did not change anything, except now it looks more muddy than it did before:

class _ScenePainter extends CustomPainter {
  final Scene scene;
  final OrbitCamera orbitCamera;

  _ScenePainter(this.scene, this.orbitCamera);

  @override
  void paint(Canvas canvas, Size size) {
    // Create a Paint with anti-alias and high filter quality.
    final paint = Paint()
      ..isAntiAlias = true
      ..filterQuality = FilterQuality.high;

    // Draw the scene onto an offscreen layer with the custom paint.
    canvas.saveLayer(Offset.zero & size, paint);
    scene.render(
      orbitCamera.camera, 
      canvas, 
      viewport: Offset.zero & size,
    );
    canvas.restore();
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

[redesign3d]

small addition:
using a PictureRecorder and rendering 4x size, then downscaling again worked -

class _ScenePainter extends CustomPainter {
  final Scene scene;
  final OrbitCamera orbitCamera;

  _ScenePainter(this.scene, this.orbitCamera);

  @override
  void paint(Canvas canvas, Size size) {
    // define a high-res size (4x width and height)
    final highResSize = Size(size.width * 4, size.height * 4);

    // create an offscreen canvas using a PictureRecorder
    final recorder = PictureRecorder();
    final highResCanvas = Canvas(recorder, Offset.zero & highResSize);

    // render the scene at higher resolution
    scene.render(
      orbitCamera.camera,
      highResCanvas,
      viewport: Offset.zero & highResSize,
    );

    // complete recording and get the Picture
    final picture = recorder.endRecording();

    // draw the picture onto the original canvas scaled down to 25%
    canvas.save();
    canvas.scale(0.25, 0.25);
    canvas.drawPicture(picture);
    canvas.restore();
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

[bdero]

Hi, what platform are you using? Currently Scene only supports MSAA, which is only working properly on mac/iOS right now. We need to add a fallback for other antialiasing techniques.

[redesign3d]

Thanks for the quick reply!
I'm on iOS, the issue occurs both in Simulator and on a physical testing device - running 18.1 in the simulator and 18.3.1 devBeta on the phone.

[bdero]

Hmm interesting. When you say the models are pixelated, do you mean just the edges, or do the surfaces look pixelated?

Could you post a screenshot with a model that demonstrates the issue?

[redesign3d]

For a quick comparison, here are two screenshots:
(1) rendering default:

(2) rendering at 4x and scaling by .25:

(using this model from Sketchfab, converted to glb in Blender)

[bdero]

That looks to me like the texture size being used isn't scaling properly with the DPI. So either the viewport rect or canvas local clip bounds. I suspect it's a bug in Scene.
Could you share the code for your widget tree that shows how Scene is getting called?

[redesign3d]

here is a simple version of the code for the page I'm using scene in:

import 'dart:math' as math;
// import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter_scene/scene.dart';
import 'package:vector_math/vector_math.dart' as vm;
import '../camera.dart';

class ImpellerDemoPage extends StatefulWidget {
  const ImpellerDemoPage({super.key, this.elapsedSeconds = 0});
  final double elapsedSeconds;

  @override
  ImpellerDemoPageState createState() => ImpellerDemoPageState();
}

class ImpellerDemoPageState extends State<ImpellerDemoPage> with SingleTickerProviderStateMixin {

  Scene scene = Scene();
  bool loaded = false;
  Node? currentModel;

  // orbit camera instance.
  late OrbitCamera orbitCamera;

  // Animation controller used to drive the update loop
  late AnimationController _controller;

  // For delta time calculation.
  double _lastElapsedSeconds = 0.0;

  // Sensitivity for drag gestures
  final double horizontalSensitivity = 0.005;
  final double verticalSensitivity = 0.005;

  @override
  void initState() {

    super.initState();

    final loadModel =

      // wait for the scene's static resources to initialize.  
      Scene.initializeStaticResources().then((_) {
        // load model from the assets
        Node.fromAsset('build/models/GRSupra.model').then((value) {
          value.name = 'GR-Supra';
          scene.add(value);
          debugPrint('Model loaded: ${value.name}');
      });
    });

    Future.wait([loadModel]).then((_) {
      debugPrint('Scene loaded.');
      setState(() {
        loaded = true;
      });
    });

    // Create an orbit camera instance
    orbitCamera = OrbitCamera(
      radius: 20.0,
      height: 0.0,
      horizontalAngle: - 45 * math.pi / 180,
      verticalAngle: 2 * math.pi / 180,
      target: vm.Vector3(0,0.5,0),
    );

    // animation controller to drive updates.
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(days: 1), // Long duration; we only use the ticker.
    )..addListener(() {
       
        final double elapsedSeconds = _controller.lastElapsedDuration!.inMilliseconds / 1000.0;
        final double deltaTime = elapsedSeconds - _lastElapsedSeconds;
        _lastElapsedSeconds = elapsedSeconds;

        orbitCamera.update(deltaTime);
        // Trigger repaint.
        setState(() {});
      });

    _controller.forward();
  }

  @override
  void dispose() {
    // Technically this isn't necessary, since `Node.fromAsset` doesn't perform
    // a caching import.
    _controller.dispose();
    scene.removeAll();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (!loaded) {
      return const Center(child: CircularProgressIndicator());
    }

    return GestureDetector(
      // onPanUpdate gives both horizontal and vertical deltas
      onPanUpdate: (DragUpdateDetails details) {
        // Update target angles based on drag deltas
        double newHorizontal = orbitCamera.targetHorizontalAngle -
            details.delta.dx * horizontalSensitivity;
        double newVertical = orbitCamera.targetVerticalAngle +
            details.delta.dy * verticalSensitivity;
        orbitCamera.setTargetAngles(
            horizontal: newHorizontal, vertical: newVertical);
      },
      child: CustomPaint(
        painter: _ScenePainter(scene, orbitCamera),
      ),
    );
  }
}


// class _ScenePainter extends CustomPainter {
//   final Scene scene;
//   final OrbitCamera orbitCamera;

//   _ScenePainter(this.scene, this.orbitCamera);

//   @override
//   void paint(Canvas canvas, Size size) {
//     // define a high-res size (4x width and height)
//     final highResSize = Size(size.width * 4, size.height * 4);

//     // create an offscreen canvas using a PictureRecorder
//     final recorder = PictureRecorder();
//     final highResCanvas = Canvas(recorder, Offset.zero & highResSize);

//     // render the scene at higher resolution
//     scene.render(
//       orbitCamera.camera,
//       highResCanvas,
//       viewport: Offset.zero & highResSize,
//     );

//     // complete recording and get the Picture
//     final picture = recorder.endRecording();

//     // draw the picture onto the original canvas scaled down to 25%
//     canvas.save();
//     canvas.scale(0.25, 0.25);
//     canvas.drawPicture(picture);
//     canvas.restore();
//   }

//   @override
//   bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
// }



class _ScenePainter extends CustomPainter {
  final Scene scene;
  final OrbitCamera orbitCamera;

  _ScenePainter(this.scene, this.orbitCamera);

  @override
  void paint(Canvas canvas, Size size) {
    // Render scene using updated camera
    scene.render(
      orbitCamera.camera, 
      canvas, 
      viewport: Offset.zero & size, 
      
    );
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

---

ImpellerDemoPage (StatefulWidget)
└─ ImpellerDemoPageState (State)
   └─ build(BuildContext)
      ├─ if (!loaded)
      │   └─ Center
      │      └─ CircularProgressIndicator
      └─ else
         └─ GestureDetector
            ├─ onPanUpdate(...) // gesture handling
            └─ child: CustomPaint
               └─ painter: _ScenePainter(scene, orbitCamera)

edit - and here is the camera, in case you'd want to use it for 1:1 reproduction:

import 'dart:math' as math;
import 'package:flutter_scene/scene.dart';
// import 'math_utils.dart';
import 'package:vector_math/vector_math.dart';

class OrbitCamera {
  /// d from the target
  final double radius;

  /// vertical offset above target
  final double height;

  /// current angles (in rad) around the target
  double horizontalAngle;
  double verticalAngle;

  /// target angle
  double targetHorizontalAngle;
  double targetVerticalAngle;


  // clamping angles for vertical rotation
  static const double minVerticalAngle = 2 * math.pi / 180;
  static const double maxVerticalAngle = 89 * math.pi / 180;

  /// current camera pos as Vector3
  Vector3 position;

  /// target position around which the camera rotates
  Vector3 target;

  OrbitCamera({
    this.radius = 0.0,
    this.height = 5.0,
    this.horizontalAngle = 0.0,
    this.verticalAngle = 0.0,
    Vector3? target,
    Vector3? initialPosition,
    })  : target = target ?? Vector3.zero(),
        targetHorizontalAngle = horizontalAngle,
        targetVerticalAngle = verticalAngle,
        position = Vector3.zero() {
    _updatePosition();
  }

  /// returns PerspectiveCamera instance using current [position], [target].
  Camera get camera => PerspectiveCamera(position: position, target: target);

  /// recompute camera position with sperical coordinates
  void _updatePosition() {
    final double x = target.x + radius * math.cos(verticalAngle) * math.cos(horizontalAngle);
    final double y = target.y + radius * math.sin(verticalAngle);
    final double z = target.z + radius * math.cos(verticalAngle) * math.sin(horizontalAngle);
    position = Vector3(x, y, z);
  }

  /// linear interpolation between current and target angle
  double _lerpAngle(double current, double target, double factor) {
    // Compute the smallest angular difference.
    double diff = (target - current) % (2 * math.pi);
    if (diff.abs() > math.pi) {
      diff = diff - 2 * math.pi;
    }
    return current + diff * factor;
  }

  /// method called every frame with elapsed time (in seconds) since the
  /// last update. allows to smoothly interpolate the camera’s current angle toward
  /// its [targetAngle] and then update the camera’s position
  void update(double deltaSeconds) {
    // adjust as needed; using deltaSeconds gives time-based smoothing
    const smoothingFactorPerSecond = 5.0;
    final double factor = smoothingFactorPerSecond * deltaSeconds;

   // interpolate horizontal angle with wrapping.
    horizontalAngle = _lerpAngle(horizontalAngle, targetHorizontalAngle, factor);
    // for vertical angle -> linear interpolation (no wrapping),
    verticalAngle = verticalAngle + (targetVerticalAngle - verticalAngle) * factor;

    // update camera position
    _updatePosition();
  }


  /// sets new target horizontal angle
  void setTargetHorizontalAngle(double newAngle) {
    targetHorizontalAngle = newAngle % (2 * math.pi);
  }

  /// sets new target vertical angle, clamping it between limits
  void setTargetVerticalAngle(double newAngle) {
    targetVerticalAngle =
        newAngle.clamp(minVerticalAngle, maxVerticalAngle);
  }

  /// update both target angles
  void setTargetAngles({required double horizontal, required double vertical}) {
    setTargetHorizontalAngle(horizontal);
    setTargetVerticalAngle(vertical);
  }
}