Problems running example projects

[iKozlinskyi]

Hello! Your project looks very promising, our team is considering using it in our following app. I had some problems running the examples, and I'd appreciate your help.

The ExampleTriangle01 demo doesn't show any triangles, rather I only see the canvas. The image I see is the same for every platform.

Logs per platform:

• Android emulator

  
  Launching lib\main.dart on Android SDK built for x86 in debug mode...
  Running Gradle task 'assembleDebug'...
  √  Built build\app\outputs\flutter-apk\app-debug.apk.
  Installing build\app\outputs\flutter-apk\app.apk...
  W/FlutterActivityAndFragmentDelegate( 3536): A splash screen was provided to Flutter, but this is deprecated. See flutter.dev/go/android-splash-migration for migration steps.
  Debug service listening on ws://127.0.0.1:61591/5a9boQmKzkA=/ws
  Syncing files to device Android SDK built for x86...
  I/flutter ( 3536):  init state..... 
  I/flutter ( 3536):  screenSize: Size(392.7, 781.1) dpr: 2.75 

======== Exception caught by widgets library ======================================================= The following LateError was thrown building Builder(dirty, dependencies: [MediaQuery]): LateInitializationError: Field 'width' has not been initialized.

The relevant error-causing widget was: Builder Builder:file:///D:/Prog/Github_examples/flutter_gl/flutter_gl/example/lib/ExampleTriangle01.dart:110:15 When the exception was thrown, this was the stack:

0 _MyAppState.width (package:flutter_gl_example/ExampleTriangle01.dart)

1 _MyAppState._build (package:flutter_gl_example/ExampleTriangle01.dart:130:20)

2 _MyAppState.build. (package:flutter_gl_example/ExampleTriangle01.dart:113:49)

3 Builder.build (package:flutter/src/widgets/basic.dart:7398:48)

4 StatelessElement.build (package:flutter/src/widgets/framework.dart:4827:28)

5 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4754:15)

6 Element.rebuild (package:flutter/src/widgets/framework.dart:4477:5)

7 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4735:5)

8 ComponentElement.mount (package:flutter/src/widgets/framework.dart:4729:5)

... Normal element mounting (19 frames)

27 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3790:14)

28 MultiChildRenderObjectElement.inflateWidget (package:flutter/src/widgets/framework.dart:6422:36)

29 MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6433:32)

... Normal element mounting (255 frames)

284 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3790:14)

285 MultiChildRenderObjectElement.inflateWidget (package:flutter/src/widgets/framework.dart:6422:36)

286 MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6433:32)

... Normal element mounting (387 frames)

673 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3790:14)

674 Element.updateChild (package:flutter/src/widgets/framework.dart:3540:18)

675 RenderObjectToWidgetElement._rebuild (package:flutter/src/widgets/binding.dart:1198:16)

676 RenderObjectToWidgetElement.mount (package:flutter/src/widgets/binding.dart:1167:5)

677 RenderObjectToWidgetAdapter.attachToRenderTree. (package:flutter/src/widgets/binding.dart:1112:18)

678 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2600:19)

679 RenderObjectToWidgetAdapter.attachToRenderTree (package:flutter/src/widgets/binding.dart:1111:13)

680 WidgetsBinding.attachRootWidget (package:flutter/src/widgets/binding.dart:944:7)

681 WidgetsBinding.scheduleAttachRootWidget. (package:flutter/src/widgets/binding.dart:924:7)

(elided 11 frames from class _RawReceivePortImpl, class _Timer, dart:async, and dart:async-patch)

D/HostConnection( 3536): HostConnection::get() New Host Connection established 0xef188dd0, tid 3590 D/HostConnection( 3536): HostComposition ext ANDROID_EMU_CHECKSUM_HELPER_v1 ANDROID_EMU_native_sync_v2 ANDROID_EMU_native_sync_v3 ANDROID_EMU_native_sync_v4 ANDROID_EMU_dma_v1 ANDROID_EMU_direct_mem ANDROID_EMU_host_composition_v1 ANDROID_EMU_host_composition_v2 ANDROID_EMU_vulkan ANDROID_EMU_deferred_vulkan_commands ANDROID_EMU_vulkan_null_optional_strings ANDROID_EMU_vulkan_create_resources_with_requirements ANDROID_EMU_YUV_Cache ANDROID_EMU_vulkan_ignored_handles ANDROID_EMU_has_shared_slots_host_memory_allocator ANDROID_EMU_vulkan_free_memory_sync ANDROID_EMU_vulkan_shader_float16_int8 ANDROID_EMU_vulkan_async_queue_submit ANDROID_EMU_sync_buffer_data ANDROID_EMU_read_color_buffer_dma GL_OES_EGL_image_external_essl3 GL_OES_vertex_array_object GL_KHR_texture_compression_astc_ldr ANDROID_EMU_host_side_tracing ANDROID_EMU_gles_max_version_3_0 D/EGL_emulation( 3536): eglCreateContext: 0xef1891c0: maj 3 min 0 rcv 3 D/EGL_emulation( 3536): eglCreateContext: 0xef188f20: maj 3 min 0 rcv 3 D/EGL_emulation( 3536): eglCreateContext: 0xef189000: maj 3 min 0 rcv 3 W/Gralloc4( 3536): allocator 3.x is not supported D/com.futouapp.flutter_gl.flutter_gl.EglEnv( 3536): egl make current D/EGL_emulation( 3536): eglMakeCurrent: 0xef188f20: ver 3 0 (tinfo 0xbc055410) (first time) I/flutter ( 3536): flutterGlPlugin: textureid: 0 D/HostConnection( 3536): HostConnection::get() New Host Connection established 0xef1a2210, tid 3574 D/HostConnection( 3536): HostComposition ext ANDROID_EMU_CHECKSUM_HELPER_v1 ANDROID_EMU_native_sync_v2 ANDROID_EMU_native_sync_v3 ANDROID_EMU_native_sync_v4 ANDROID_EMU_dma_v1 ANDROID_EMU_direct_mem ANDROID_EMU_host_composition_v1 ANDROID_EMU_host_composition_v2 ANDROID_EMU_vulkan ANDROID_EMU_deferred_vulkan_commands ANDROID_EMU_vulkan_null_optional_strings ANDROID_EMU_vulkan_create_resources_with_requirements ANDROID_EMU_YUV_Cache ANDROID_EMU_vulkan_ignored_handles ANDROID_EMU_has_shared_slots_host_memory_allocator ANDROID_EMU_vulkan_free_memory_sync ANDROID_EMU_vulkan_shader_float16_int8 ANDROID_EMU_vulkan_async_queue_submit ANDROID_EMU_sync_buffer_data ANDROID_EMU_read_color_buffer_dma GL_OES_EGL_image_external_essl3 GL_OES_vertex_array_object GL_KHR_texture_compression_astc_ldr ANDROID_EMU_host_side_tracing ANDROID_EMU_gles_max_version_3_0 D/EGL_emulation( 3536): eglMakeCurrent: 0xef189000: ver 3 0 (tinfo 0xbc055af0) (first time) I/flutter ( 3536): Error compiling shader: I/flutter ( 3536): Error compiling shader: I/flutter ( 3536): ERROR: 0:5: 'attribute' : Illegal use of reserved word I/flutter ( 3536): ERROR: 0:5: 'attribute' : syntax error I/flutter ( 3536): Error compiling shader: I/flutter ( 3536): Error compiling shader: I/flutter ( 3536): ERROR: 0:5: 'gl_FragColor' : undeclared identifier I/flutter ( 3536): ERROR: 0:5: 'assign' : l-value required (can't modify a const) I/flutter ( 3536): ERROR: 0:5: '=' : dimension mismatch I/flutter ( 3536): ERROR: 0:5: 'assign' : cannot convert from 'const 4-component vector of float' to 'const highp float' E/flutter ( 3536): [ERROR:flutter/lib/ui/ui_dart_state.cc(209)] Unhandled Exception: type 'Null' is not a subtype of type 'int' of 'shader' E/flutter ( 3536): #0 OpenGLContextES.attachShader (package:flutter_gl/openGL/opengl/OpenGLContextES.dart:488:15) E/flutter ( 3536): #1 _MyAppState.initShaders (package:flutter_gl_example/ExampleTriangle01.dart:298:8) E/flutter ( 3536): #2 _MyAppState.prepare (package:flutter_gl_example/ExampleTriangle01.dart:239:10) E/flutter ( 3536): #3 _MyAppState.setup (package:flutter_gl_example/ExampleTriangle01.dart:81:5) E/flutter ( 3536): E/flutter ( 3536): I/flutter ( 3536): click render ... I/flutter ( 3536): render n: 0 I/System.out( 3536): Results of compiling source: I/System.out( 3536): Results of compiling source: I/flutter ( 3536): click render ... I/flutter ( 3536): render n: 0

- Web Chrome

Launching lib\main.dart on Chrome in debug mode... Waiting for connection from debug service on Chrome... This app is linked to the debug service: ws://127.0.0.1:51155/9GmCwH8CdUc=/ws Debug service listening on ws://127.0.0.1:51155/9GmCwH8CdUc=/ws

Running with sound null safety Debug service listening on ws://127.0.0.1:51155/9GmCwH8CdUc=/ws init state..... screenSize: Size(1036.0, 718.4) dpr: 1.25 flutterGlPlugin: textureid: 1650533741854000 Height of Platform View type: [1650533741854000] may not be set. Defaulting to height: 100%. Set style.height to any appropriate value to stop this message. Width of Platform View type: [1650533741854000] may not be set. Defaulting to width: 100%. Set style.width to any appropriate value to stop this message. OpenGLContextWeb {gl: [object WebGL2RenderingContext]} Error: Unsupported operation: Platform.operatingSystem at Object.throw [as throw] (http://localhost:51102/dart_sdk.js:5067:11) at Function._operatingSystem (http://localhost:51102/dart_sdk.js:57544:17) at Function.get operatingSystem [as operatingSystem] (http://localhost:51102/dart_sdk.js:57590:27) at get _operatingSystem (http://localhost:51102/dart_sdk.js:57503:27) at Function.desc.get [as _operatingSystem] (http://localhost:51102/dart_sdk.js:5560:17) at get isMacOS (http://localhost:51102/dart_sdk.js:57518:26) at Function.desc.get [as isMacOS] (http://localhost:51102/dart_sdk.js:5560:17) at ExampleTriangle01._MyAppState.new.prepare (http://localhost:51102/packages/flutter_gl_example/ExampleTriangle01.dart.lib.js:383:23) at ExampleTriangle01._MyAppState.new.setup (http://localhost:51102/packages/flutter_gl_example/ExampleTriangle01.dart.lib.js:311:14) at setup.next () at runBody (http://localhost:51102/dart_sdk.js:40590:34) at Object._async [as async] (http://localhost:51102/dart_sdk.js:40621:7) at ExampleTriangle01._MyAppState.new.setup (http://localhost:51102/packages/flutter_gl_example/ExampleTriangle01.dart.lib.js:305:20) at http://localhost:51102/packages/flutter_gl_example/ExampleTriangle01.dart.lib.js:300:16 at http://localhost:51102/dart_sdk.js:34918:33 at internalCallback (http://localhost:51102/dart_sdk.js:26619:11)

======== Exception caught by widgets library ======================================================= The following LateError was thrown building Builder(dirty, dependencies: [MediaQuery]): LateInitializationError: Field 'width' has not been initialized.

The relevant error-causing widget was: Builder Builder:file:///D:/Prog/Github_examples/flutter_gl/flutter_gl/example/lib/ExampleTriangle01.dart:110:15 When the exception was thrown, this was the stack: C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddcruntime/errors.dart 251:49 throw packages/flutter_gl_example/ExampleTriangle01.dart 22:15 get width packages/flutter_gl_example/ExampleTriangle01.dart 130:20 [_build] packages/flutter_gl_example/ExampleTriangle01.dart 113:49 packages/flutter/src/widgets/basic.dart 7398:48 build packages/flutter/src/widgets/framework.dart 4827:28 build

C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/isolate_helper.dart 48:19 internalCallback ==================================================================================================== click render ... render n: 0 click render ... render n: 0 ``` - Windows desktop ``` Launching lib\main.dart on Windows in debug mode... Building Windows application... Debug service listening on ws://127.0.0.1:50588/1OBRUsWQ464=/ws Syncing files to device Windows... flutter: init state..... flutter: screenSize: Size(1265.6, 682.4) dpr: 1.25 ======== Exception caught by widgets library ======================================================= The following LateError was thrown building Builder(dirty, dependencies: [MediaQuery]): LateInitializationError: Field 'width' has not been initialized. The relevant error-causing widget was: Builder Builder:file:///D:/Prog/Github_examples/flutter_gl/flutter_gl/example/lib/ExampleTriangle01.dart:110:15 When the exception was thrown, this was the stack: #0 _MyAppState.width (package:flutter_gl_example/ExampleTriangle01.dart) #1 _MyAppState._build (package:flutter_gl_example/ExampleTriangle01.dart:130:20) #2 _MyAppState.build. (package:flutter_gl_example/ExampleTriangle01.dart:113:49) #3 Builder.build (package:flutter/src/widgets/basic.dart:7398:48) #4 StatelessElement.build (package:flutter/src/widgets/framework.dart:4827:28) #5 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4754:15) #6 Element.rebuild (package:flutter/src/widgets/framework.dart:4477:5) #7 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4735:5) #8 ComponentElement.mount (package:flutter/src/widgets/framework.dart:4729:5) ... Normal element mounting (19 frames) #27 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3790:14) #28 MultiChildRenderObjectElement.inflateWidget (package:flutter/src/widgets/framework.dart:6422:36) #29 MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6433:32) ... Normal element mounting (255 frames) #284 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3790:14) #285 MultiChildRenderObjectElement.inflateWidget (package:flutter/src/widgets/framework.dart:6422:36) #286 MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6433:32) ... Normal element mounting (387 frames) #673 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3790:14) #674 Element.updateChild (package:flutter/src/widgets/framework.dart:3540:18) #675 RenderObjectToWidgetElement._rebuild (package:flutter/src/widgets/binding.dart:1198:16) #676 RenderObjectToWidgetElement.mount (package:flutter/src/widgets/binding.dart:1167:5) #677 RenderObjectToWidgetAdapter.attachToRenderTree. (package:flutter/src/widgets/binding.dart:1112:18) #678 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2600:19) #679 RenderObjectToWidgetAdapter.attachToRenderTree (package:flutter/src/widgets/binding.dart:1111:13) #680 WidgetsBinding.attachRootWidget (package:flutter/src/widgets/binding.dart:944:7) #681 WidgetsBinding.scheduleAttachRootWidget. (package:flutter/src/widgets/binding.dart:924:7) (elided 11 frames from class _RawReceivePortImpl, class _Timer, dart:async, and dart:async-patch) ==================================================================================================== flutter: flutterGlPlugin: textureid: 2755101658608 flutter: initShaders LINK_STATUS _res: 1 flutter: render n: 3 flutter: click render ... flutter: render n: 3 ```

[wasabia]

Hi @iKozlinskyi Triangle demo is broken. try ExampleDemoTest.dart

[iKozlinskyi]

Thanks for the quick response. Yes, the other demo works. Another question - do you plan to promote the project, write the docs and make it publically accessible?

I see great potential here, high-performance graphics in Flutter open possibilities for efficient visualization tools and game engines. For now, I feel like it is mostly used internally by your projects, but when it will have accessible docs/demos - I am sure it is going to become popular.

[wasabia]

Yes, this project need more Contributor. if you have interested, Feel free to contribute!

[wasabia]

https://github.com/wasabia/three_dart use flutter_gl, you can find more example in three_dart

[Kiruel]

Hi, I'm looking to use this example allowing flutter to display a OpenGL rendering because we are using shaders. On web it works but on mobile the example doesn't work, the shader is blank but the clearColor display change the buffer color. Can you tell me a workaround to be able to show the shaders as simple as the triangle on mobile ? I don't want to use three_dart because we want only raw shaders displaying.

Or maybe you have the same example in three_dart working with shaders without the webGL implementation?

Thanks, ps: we will probably help you to create more documentation, PR etc...

[wasabia]

Hi, I'm looking to use this example allowing flutter to display a OpenGL rendering because we are using shaders. On web it works but on mobile the example doesn't work, the shader is blank but the clearColor display change the buffer color. Can you tell me a workaround to be able to show the shaders as simple as the triangle on mobile ? I don't want to use three_dart because we want only raw shaders displaying.

Or maybe you have the same example in three_dart working with shaders without the webGL implementation?

Thanks, ps: we will probably help you to create more documentation, PR etc...

finally i found it, bufferData second parameter, for web it is array count, for opengl or es it should bytes length, so it should multiply Float32List.bytesPerElement for opengl or opengl es, maybe should fix it in flutter_gl 😞

https://github.com/wasabia/flutter_gl/blob/774231f68d69be49cd0899be825b89ce56fd8ce8/flutter_gl/example/lib/ExampleTriangle01.dart#L269

[wasabia]

Hi @Kiruel @iKozlinskyi finally fix ExampleTriangle01.dart for all platform for iOS & macOS do not forget setViewport 😄