Using WebGL with Native Android:
WebGL is a powerful and widely used JavaScript framework/API for 3D rendering and Android is the platform which has a large community and allows quick and handy access. The WebView API in Android acts as a bridge between these two. So we can put all our 3D rendering logic into HTML files along with a library (Three.js), and render it inside the Android’s WebView.

Here are the steps to set-up your application with WebGL Android:
Before we start, store your WebGL page (HTML and Javascript files) in the assets directory of the application.
Step 1:

Create an Android application, and in the resource layout file of your MainActivity class add the WebView :

activity_main.xml

Step 2:
Now, Initialize the WebView in your MainActivity.java:

public class MainActivity extends AppCompatActivity{
@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  App.getComponent().inject(this);
  setContentView(R.layout.activity_main);
  WebView webView = findViewById(R.id.modelWebView);
}
}

Step 3:
In order to use THREE.js or any other JavaScript library/code, we need to enable JavaScript on the WebView, this can be done by adding this simple line after the WebView is initialized:


webView.getSettings().setJavascriptEnabled(true);

Note: Whenever using JavaScript application, this is needed to be set explicitly.

Step 4:
Loading the URL of the base HTML file from the assets folder:
Regardless of the actual name, the assets folder is always accessed by the name “android_asset”


webView.loadUrl(“file:///android_asset/sample.html”);

Browser output:

 

 

Application output:

Step 5:
WebView also allows you to call any JavaScript method present within the page, through loadUrl() method:

Ex.:


webView.loadUrl("javascript: cube.material.color.setRGB(0,100,0);");

After execution:

 

What can you do with this app?
Anything you can do in HTML, CSS, JavaScript and WebGL, almost all those things are possible here too. So go ahead and create interactive eye-candy WebGL pages and use them in your Android apps to suffice the need of vast Android user base, make them happy & increase your sales too !!!

Author: Nayan D
Contact us:
info@prototechsolutions.com
ProtoTech Solutions Pvt Ltd.