Android webview why sometimes empty canvas?

A

Alexey2021-09-25 20:16:35

Android

Alexey, 2021-09-25 20:16:35

Good evening,
I am studying android application development through webview + in parallel game development using js
I am testing the code on a physical device honor 9 lite - android 9 version
Development is carried out on android studio I

encountered a problem ... in 90% of cases canvas is rendered empty (white screen ), although other code works in 100% of cases. Well, at least at the moment)
I practically don’t know android studio and java, but there seem to be no errors in logcat

As I understand it, Three.js is sometimes not rendered, although the canvas is created. In the browser on the desktop, everything works great.

Tell me, what could be the reason? Where to dig? and Where to look for errors?

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
}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Alexey, 2021-09-29
@Evelate

For some reason, window.innerWidth in js was passed with a value of 0, although in the html import it set the defer attribute to js.
Apparently, occasionally the android had time to form a tree house, and therefore the application was launched occasionally