Black Screen while testing example

[HuyNguyen1590]

Description

When i use the example code, the result only black screen with firebase crashlity catch a bug below

Environment

• Flutter Version: 3.41.9
• Dart Version: 3.11.5
• Platform: Android (Xiaomi K70 Ultra)
• Packages used: three_js: ^0.3.0
  three_js_controls: ^0.3.0
  three_js_helpers: ^0.3.0
  i did try
  flutter_angle:
  git:
  url: https://github.com/Knightro63/flutter_angle.git
  path: flutter_angle
  but nothing change

Log / Stack Trace

I/FlutterAnglePlugin( 4389): Created ANGLE texture using SurfaceProducer API
I/FlutterAnglePlugin( 4389): Created ANGLE texture 1218x2710
I/flutter ( 4389): setState
E/libEGL  ( 4389): eglSwapBuffersWithDamageKHRImpl:1353 error 300d (EGL_BAD_SURFACE)
I/flutter ( 4389): Failed to swap buffers using display [Pointer: address=0xb400007838a65750], surface [Pointer: address=0x8]. EGL error EglError.badSurface (12301)
I/flutter ( 4389): #0      EGL.eglSwapBuffers (package:flutter_angle/desktop/lib_egl.dart:470:5)
I/flutter ( 4389): #1      FlutterAngle.updateTexture (package:flutter_angle/desktop/angle.dart:639:16)
I/flutter ( 4389): #2      ThreeJS.render (package:three_js_angle_renderer/three_viewer.dart:268:18)
I/flutter ( 4389): #3      ThreeJS.animate (package:three_js_angle_renderer/three_viewer.dart:237:64)
I/flutter ( 4389): #4      Ticker._tick (package:flutter/src/scheduler/ticker.dart:277:12)
I/flutter ( 4389): #5      SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1430:15)
I/flutter ( 4389): #6      SchedulerBinding.handleBeginFrame.<anonymous closure> (package:flutter/src/scheduler/binding.dart:1263:11)
I/flutter ( 4389): #7      _LinkedHashMapMixin.forEach (dart:_compact_hash:765:13)
I/flutter ( 4389): #8      SchedulerBinding.handleBeginFrame (package:flutter/src/scheduler/binding.dart:1261:17)
I/flutter ( 4389): #9      SchedulerBinding._handleBeginFrame (package:flutter/src/scheduler/binding.dart:1177:5)
I/flutter ( 4389): #10     _invoke1 (dart:ui/hooks.dart:372:13)
I/flutter ( 4389): #11     PlatformDispatcher._beginFrame (dart:ui/platform_dispatcher.dart:426:5)
I/flutter ( 4389): #12     _beginFrame (dart:ui/

[HuyNguyen1590]

sorry, after download full code, it running fine, i will go to check the error myself

[HuyNguyen1590]

I found that this error only occurs on my physical device, while it works completely fine on the emulator. It seems like Chinese brands (such as Xiaomi) sometimes introduce these kinds of unexpected bugs

[HuyNguyen1590]

The latest version may not work on older phones that do not support ANGLE yet. Since Google now forces the use of ANGLE without providing a fallback to other engines (like OpenGL), this rendering issue occurs.

Workaround: Downgrade to an older version (I switched to 0.2.0). It still includes the fallback mechanism, so it doesn't break on older devices.

[Knightro63]

Hi,

@HuyNguyen1590 I will go in and see if I can add it back.

[saif-ellafi]

My 3D Dice roller also stopped working on Android after I updated, did not deeply investigate yet :( works fine in all platforms, no error messages for what I can tell, they just don't render anymore.

Edit: Confirmemd rolling back to 0.2.0 works just fine. The changes I had to make for 0.3.0 were the following:

Data Types

// 0.2.0
var a2 = three.Float32Array(a1.length);
...
final attributes = <(String, three.BufferAttribute<NativeArray<num>>?)>[];

// 0.3.0
var a2 = Float32List(a1.length);
...
final attributes = <(String, three.BufferAttribute?)>[];

disposal deprecations

// 0.3.0 did not like this anymore and had to remove this code
void disposeThreeJsWebGLRenderer(three.WebGLRenderer? r) {
if (r == null) return;

var a = r.attributes;
final len = a.buffers.keys.toList();
for(int i = 0; i < len.length;i++){
  if(len[i] is three.BufferAttribute){
    a.remove(len[i]);
  }
  else if(len[i] is NativeArray){
    a.remove(len[i]);
  }
}
a.buffers.clear();

r.dispose();

}

      three_math.allNativeData.dispose();
      
      if (threeJs.texture != null) {
        disposeThreeJsAngle(threeJs, [threeJs.texture!]);
      }

Not sure it helps, but all in all, only Android seems to fail in 0.3.0.
Could be also totally unrelated and for example something to do with the dependency changes, I've noticed audioplayers changed

[Knightro63]

Hi @saif-ellafi ,

Another user also put a bug in for this same thing. I will take a look and see what I can fix. I am currently working on the impeller renderer and GPU renderer to hopefully fix the Linux and Windows issues.

[saif-ellafi]

@Knightro63 - one user on Windows reporting artifacts since the update to 0.3.0, I'll try rolling back but it can also be something else

Processor AMD Ryzen 5 5600X 6-Core Processor, 3701 Mhz, 6 Core(s), 12 Logical Processor(s)
Installed Physical Memory (RAM) 32.0 GB
Name NVIDIA GeForce RTX 3090
OS Name Microsoft Windows 11 Pro
Version 10.0.26100 Build 26100

[Knightro63]

Hi @saif-ellafi,

Thanks for reporting. Might be the surface handler. Flutter has made some massive updates to there backend renderer since 3.35 and I am trying to catch up. Sorry for the issue.

[saif-ellafi]

No worries, just trying to help. I'll confirm soon whenever I roll back to 0.2.0 to confirm the update was the culprit.

[saif-ellafi]

User confirms that with the rollback to 0.2.0 - it works fine

[Knightro63]

Hi @saif-ellafi,

For version 0.3.0 is only for real devices this is having the issue? I checked the examples for mac, ios, ios simulator, web, wasm, android emulator, windows, and linux. In debug, profile and release modes.

• mac works as intended for all, breaks with SPM, needs to be moved to SPM
• ios works as intended for all, needs to be moved to SPM but works for now
• ios simulator as intended for all, breaks with SPM, needs to be moved to SPM
• web works as intended for all
• wasm works as intended for all
• Android emulator works as intended for all
• Android Device have not tested, device is currently not turning on hope to test soon
• Windows works but some jank issues and release has a stretching screen issue. Now x64 and arm64 has to be seperated, still working on that part. Some updates coming soon.
• Linux still black screen nothing is working. Hoping to have a fix by July.

I have some parts of the gpu renderer working but gpux seems to be very slow. I am getting 10% of the fps I am currently getting with ANGLE and Windows and Linux still does not support impeller.

[saif-ellafi]

Yes, as you described, Windows work with some jank/artifacts issues, but only on some devices (only one user complained, and issue was gone after the rollback). For Android, it was full show-stopper for all users. For the rest of the platforms, no issues or non-reported so far, in my experience.

[Knightro63]

Hi @saif-ellafi,

I have discovered the issue. Because of the move allocated explicit fixed native heap memory slots via ffi are no longer available due to the move from NativeArray to TypedData ANGLE is receiving the wrong location of the memory. A temp workaround is to change line 366 in three_js_angle_renderer/lib/three_viewer.dart to await angle?.init(false,false); . This will force it to use OpenGL, which does not have the same issue. I will try to look for a permeant fix soon.