Android webview почему иногда пустой canvas?

Добрый вечер,
Изучаю разработку приложений на андройд через webview + параллельно разработка игр с помощью js
Тестирую код на физическом устройстве honor 9 lite - android 9 версии
Разработка ведется на android studio

Столкнулся с проблемой... в 90% случаях canvas рендерится пустой (белый экран), хотя другой код отрабатывает в 100% случаях. Ну по крайней мере на данный момент)
Я практически не знаю android studio и яп java, но вроде ошибок нет в logcat

Как я понял Three.js иногда не рендерится, хотя canvas создается. В браузере на десктопе всё работает шикарно

Подскажите в чем может быть причина? Куда копать? и Где смотреть ошибки?


code

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="ru.ziroyax.w4">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:isGame="true"
        android:theme="@style/Theme.AppCompat.NoActionBar"



        android:hardwareAccelerated="true"
        >
        <activity
            android:name=".MainActivity"
            android:exported="true"
        >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>


import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {
    protected WebView game;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //init
        game = (WebView) findViewById(R.id.game);

        //setting
        game.setInitialScale(1);
        game.getSettings().setUseWideViewPort(true);
        game.getSettings().setJavaScriptEnabled(true);
        game.getSettings().setLoadWithOverviewMode(true);
        game.getSettings().setAllowContentAccess(true);
        game.getSettings().setDomStorageEnabled(true);
        game.getSettings().setAllowFileAccessFromFileURLs(true);
        game.getSettings().setAllowUniversalAccessFromFileURLs(true);

//        String useragent = game.getSettings().getUserAgentString();

        //load
        game.loadUrl("file:///android_asset/Game/index.html");
//        game.clearCache(true);

    }
}


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>game_1</title>
  <script defer src="./scripts/three.js"></script>
  <script defer src="./scripts/game_1.js"></script>
  <link rel="stylesheet" href="./style/index.css">
</head>
<body>
<h1 id="messegeError">render</h1>
<P id="messegeInAnimateRender">render run</p>
</body>
</html>


const text = document.getElementById("messegeError");
const text_2 = document.getElementById("messegeInAnimateRender");

console.log(document.querySelector('body').children);

try {
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
  
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
  
  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  const cube_1 = new THREE.Mesh( geometry, material );
  const cube_2 = new THREE.Mesh( geometry, material );
  scene.add( cube_1 );
  scene.add( cube_2 );
  
  cube_1.position.x = 1;
  cube_1.position.y = -2;
  
  camera.position.z = 5;
  
  function animate() {
    text.innerText = new Date().getTime();

    requestAnimationFrame( animate );
    try {
      renderer.render( scene, camera );
    } catch (e) {
      text_2.innerText = e;
    }
  
    cube_1.rotation.z += 0.02;
  
    cube_2.rotation.x += 0.03;
    cube_2.rotation.y += 0.03;
    cube_2.rotation.z -= 0.1;
  }
  animate();
  text_2.innerText = Array.from(document.querySelector('body').children).map((i) => {
    return i.nodeName
  });  
} catch (error) {
  text.innerText = error
}

  • Вопрос задан
  • 82 просмотра
Пригласить эксперта
Ответы на вопрос 1
@Evelate Автор вопроса
Почему-то window.innerWidth в js передавался со значением 0, хотя в импорте html ставил атрибут defer к js.

Видимо изредка андроид успевал формировать дом дерево, поэтому и изредка приложение запускалось
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы