" />

ProtoTech's Blog

CAD Customization, CAD Plugin development, QA, 3D development and Services, Augmented and Virtual Reality applications

Create WebGL based native Android App in 5 simple steps


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:
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:

Android-Web Apps-ProtoTech

Application output:

Android-Web Apps-ProtoTech

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:
Android-Web Apps-ProtoTech

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.

Tags:

About

ProtoTech Solutions is a custom software development company with skills in engineering graphics, specifically focused in the areas of CAD/CAM/CAE and Graphics. My role in the company is to look after everything, and specially the work which is most important or critical for that day.

View all posts by

POST A COMMENT

You must be logged in to post a comment.