Knightro63 / three_js

A dart conversion of three.js.
MIT License
21 stars 13 forks source link

Black screen on some device (Android) #17

Open MapleNoise opened 1 month ago

MapleNoise commented 1 month ago

Hi,

I've a black screen on Pixel 7 Android 14, sometimes one frame appear and black screen, or sometimes the frame freezed. threeJs.addAnimationEvent seems not to be called.

No problem with my Samsung S10 Android 10.

• I'm testing with your example sample and use Android Studio Iguana 2023.2.1

My flutter version angle is flutter_angle 0.0.6

On log I've :


D/OpenGLManager( 1365): Successfully initialized GL in plugin
I/flutter ( 1365): EGL version: 1.5
I/flutter ( 1365): DONE
I/FlutterAngle( 1365): Created a new texture 1078x2336
D/ProfileInstaller( 1365): Installing profile for fr.lmstudio.threebox
##NOTHING HAPPEN AFTER THAT

Flutter doctor : 
[✓] Flutter (Channel stable, 3.22.2, on macOS 14.3 23D56 darwin-arm64, locale fr-FR)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.2)
[✓] Connected device (3 available)
[✓] Network resources
• No issues found!
Knightro63 commented 1 month ago

Hi @MapleNoise,

Are you running this on a real device or simulator?

Also do you know which examples are giving you this issue, so I can try to narrow the issue down.

Thank you

MapleNoise commented 1 month ago

Thanks you for your reply @Knightro63,

I test on real device and my sample is very simple : With my Pixel 7 addAnimationEvent is only called 1 times or 2 times, after that it stops


import 'dart:math';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:three_js/three_js.dart' as three;
import 'package:threebox/models/Coin.dart';
import 'package:threebox/models/Player.dart';

class MyHomePage extends StatefulWidget {

  MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late three.ThreeJS threeJs;
  late three.OrbitControls controls;
  late three.AnimationMixer mixer;

  @override
  void initState() {
    threeJs = three.ThreeJS(
      onSetupComplete: (){setState(() {});},
      setup: setup,
      settings: three.Settings(
          clearAlpha: 0,
          clearColor: 0xffffff,

      ),
    );
    super.initState();
  }
  @override
  void dispose() {
    threeJs.dispose();
    three.loading.clear();
    joystick?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return threeJs.build();
  }

  Map<LogicalKeyboardKey,bool> keyStates = {
    LogicalKeyboardKey.space: false,
    LogicalKeyboardKey.arrowUp: false,
    LogicalKeyboardKey.arrowLeft: false,
    LogicalKeyboardKey.arrowDown: false,
    LogicalKeyboardKey.arrowRight: false,
  };

  double gravity = 30;
  int stepsPerFrame = 5;

  Future<void> setup() async {
    threeJs.camera = three.PerspectiveCamera(45, threeJs.width / threeJs.height, 1, 2200);
    threeJs.camera.position.setValues(3, 6, 10);
    controls = three.OrbitControls(threeJs.camera, threeJs.globalKey);
    threeJs.scene = three.Scene();
    threeJs.scene.background = three.Color.fromHex32(0xffffff);

    final ambientLight = three.AmbientLight(0xffffff, 0.9);
    threeJs.scene.add(ambientLight);

    final pointLight = three.PointLight(0xffffff, 0.8);

    pointLight.position.setValues(0, 0, 0);

    threeJs.camera.add(pointLight);
    threeJs.scene.add(threeJs.camera);

    threeJs.camera.lookAt(threeJs.scene.position);

    three.GLTFLoader loader = three.GLTFLoader().setPath('assets/');
    three.GLTFData? result = await loader.fromAsset( 'dash.glb' );

    final object = result!.scene;
    threeJs.scene.add(object);
    mixer = three.AnimationMixer(object);
    mixer.clipAction(result.animations![4], null, null)!.play();

    threeJs.addAnimationEvent((dt){
      print("here");
      mixer.update(dt);
      controls.update();
      print("here2");
    });
  }
}