Setting pixel ratio corners the viewport

[saif-ellafi]

Hello,

Thanks for this library, We've been doing quite some progress with my dice rolling.

However I am having extremely low framerate performance in laptops without dedicated GPUs and high resolution displays (i.e. 4k), so I was trying to cap the dpr like this:

          threeJs!.renderer!.setPixelRatio(1.0);
          threeJs!.renderer!.setSize(width, height, false);

but I can't seem to make the viewport extend to the full screen of the app, having this set the viewport to a small corner of the screen.

Any thoughts or ideas for sorting this out, and in general, improving framerate in potato devices?

[Knightro63]

Hi @saif-ellafi ,

Are the devices you are getting frame rate issues with Windows? I am currently removing glreadpixels which can hurt the frame rate. Otherwise give me a couple of days to do some examples and see if I can come up with an idea.

[saif-ellafi]

Hello @Knightro63
Thanks for coming back, some additional findings:

1. The device with the heavy framerate issue turned out to be a Windows laptop (Nvidia MX250 Graphics) that has a 15inch 4K display running on 200% DPI Windows Setting

Curiously enough. Connecting that laptop to an also 4k monitor but 27'' (100% DPI), works perfectly great at dice rolling

2. Moving the app with threeJS between these monitors usually makes the app crash (i.e. move between 100% DPI to 200% DPI)

3. For a "Low Quality" mode setting, I have set threeJs.renderer?.setPixelRatio(threeJs.renderer!.getPixelRatio() * 0.75); which does seem to help a tiny bit, the problem is I can't get by anymeans to set the viewport to expand to the resolution of the app (i.e. the ViewPort takes place in a small bottom-left-corner of the app).

Hope this helps!

But by the way @Knightro63 I have released my app to the marketplaces for the first time ever with 3D support, can't be happier! Thanks for your amazing work. Looking forward to hear how it works out for some of my tabletop RPG players

[Knightro63]

Hi @saif-ellafi ,

Thanks for letting me know of the issue. I will be updating flutter angle for windows soon. This will hopefully fix both of your issues you are having.

The app looks awesome by the way.

[saif-ellafi]

More than happy to send a copy if you're into storytelling :) It's an indie up slowly coming up. Let me know!

Will report any issues or problems from users if any pop up. So far only that one is the heaviest one, but did not yet land on all device platforms. So far all I have noticed is a warning on submitting the package to the Apple Store (both MacOS and iOS) that was not there before adding this dependency:

Upload Symbols Failed
The archive did not include a dSYM for the A with the UUIDs ... [...]
Ensure that the archive's dSYM folder includes a DWARF file for A with the expected UUIDS

[saif-ellafi]

Another finding @Knightro63 - if it helps at all.

AudioPlayers/threejs_audio showed terrible framerates when playing low-latency sounds. Also, since AudioPlayers does not support LowLatency mode with audio byte (i.e. from memory), the performance was abysmal in Android and iOS.

I had to switch to SoLoud for low latency sound cross-platform, but this also includes some low level libraries that could also be the one culprit of the above issue. However, it worked much better than AudioPlayers for low latency sounds.

[Knightro63]

Hi @saif-ellafi ,

Thanks for the update and the suggestion. I will change the audio player. The macos version still has a bug that is not fixed.

[Knightro63]

Hi @saif-ellafi ,

For the setViewport issue have you tried setting the ThreeJS postProcessor. This will prevent what I put and allow you to put any custom code.

threeJs.postProcessor = ((dt){
      threeJs.renderer!.clear();
     threeJs. renderer!.setViewport(0,0,width,height);
      threeJs.renderer!.render(scene, camera);
});

Let me know if this is what you were looking for? I am finishing up with the audio stuff to update the api.

Also plan on using media_kit for both audio and video was wondering if this will work for you?

[saif-ellafi]

Hey Knightro63!

Glad you're active! I've managed to improve memory and CPU/GPU quite significantly on my end, by totally disposing threeJs when inactive, but caching the 3D assets. Low-Quality mode has been less and less needed overtime, however I think it's very important.

In this low-q mode I am doing more or less this:

        if (performanceMode) {
          const scale = 0.9;
          final lowResWidth = constraints.maxWidth * scale;
          final lowResHeight = constraints.maxHeight * scale;

          diceView = Center(
            child: Transform.scale(
              scale: 1 / scale,
              child: SizedBox(
                width: lowResWidth,
                height: lowResHeight,
                child: Dice3DView(
                  renderWidth: lowResWidth.toInt(),
                  renderHeight: lowResHeight.toInt(),
                ),
              ),
            ),
          );
        } else {
          diceView = Dice3DView();
        }

      threeJs = three.ThreeJS(
        size: renderWidth != null && renderHeight != null ?
                Size(renderWidth!.toDouble(), renderHeight!.toDouble()) : null,
        onSetupComplete: () { 
          if (!completer.isCompleted) {
            completer.complete(); 
          }
          setStateSafe(() { isSetup = true; }); 
        },
        setup: setup,
        windowResizeUpdate: onResize,
        settings: three.Settings(
          useOpenGL: false,
          alpha: true,
          clearAlpha: 0.0,
          clearColor: 0x000000,
          animate: false,
          enableShadowMap: performanceMode ? false : true,
          renderOptions: performanceMode ? {
            'samples': 0,
            'antialias': false,
          } : null
        )
      );

but essentially yes, the problem with this approach is that my viewport is shrinking to the bottom-left corner of the screen, if I could get it to stretch to full screen then particularly in high-dpi devices I could gain some performance (if my theories are correct).

will try your suggestion and come back to you

[saif-ellafi]

Same result, I also tried without the Transform.scale(), the problem is still that the "dice rolling" happens only in a reduced area of the screen, it does not stretch to the full screen size of the app.

[Knightro63]

Hi @saif-ellafi,

Can you try adding this to the beginning of the render function before if(sourceTexture == null){ in three_viewer.dart.

texture?.rawOpenGl.glViewport(0, 0, (width*dpr).toInt(),( height*dpr).toInt());

This will let me know if the setViewport is not calling opengl properly.

[saif-ellafi]

Hi @Knightro63 I will try.
By the way about media_kit, I never used it before. What was the reason behind picking it up?

[Knightro63]

Hi @saif-ellafi,

The reason for using used media_kit so I don't have to have 2 separate packages for video and audio.

I added a new video texture package using media_kit.

[Knightro63]

Hi @saif-ellafi ,

I was able to replicate. For my screen is a 3k so going from 200-100 or 200-300 it wasn't noticeable. But when I went 100-300 scale I could see the issue. Adding the texture rawooengl viewport did fix the issue. I will update flutter_angle to address this issue.

This will probably fix the issue another user was having that I could not help.

[Knightro63]

Hi @saif-ellafi ,

I believe this is fixed in the latest update three_js: ^0.2.1. Also made a three_js_audio_latency package, so you can choose the type of audio package you want. Please use Audio latency class.

[saif-ellafi]

Oh wow, thank you! With so much effort into placing MediaKit I'll go on with it but if after release it gets hard I know this is an option! Many thanks