I started trying out ThreeJS, using this tutorial: /

Now I wanted to try out my result on my Android phone (Nexus 5), and it runs EXTREMELY slowly. I have no clue why that is the case.

Because other examples of threejs games on the / page run 100% fluid on the phone. For example "Hello Run".

Why is my Pong game so slow on mobile and how can I fix it?

I started trying out ThreeJS, using this tutorial: http://buildnewgames.com/webgl-threejs/

Now I wanted to try out my result on my Android phone (Nexus 5), and it runs EXTREMELY slowly. I have no clue why that is the case.

Because other examples of threejs games on the http://threejs.org/ page run 100% fluid on the phone. For example "Hello Run".

Why is my Pong game so slow on mobile and how can I fix it?

• javascript
• android
• performance
• three.js
• webgl

• you should use a good debugger and audit your functions timings. start here developer.android.com/guide/webapps/debugging.html – vincent Commented Jul 7, 2014 at 12:54
• Also about some of the demos running well, it can be because they are running canvas renderer instead of webgl. – J.Vassallo Commented Dec 14, 2015 at 23:24

2 Answers 2

Well I don't think it is android 's fault, because it is slow in my iPhone 6+, too

There is a few performing tips of three js as my experiences:

1. Larger files, such as vertices & triangles, textures, will consume network resources in loading phase

2. Try to use BufferGeometry to replace Geometry will result in an amazing performance turning

3. Apply Geometry.merge method as many as possible

4. Although geometry utilities such as ExtrudedGeometry can simplify your programming work, it will consume large percentage computational resources like CPU and memory. Instances of buffered geometry will always be my first choice.

5. Try mesh tools such as mesh lab to simplify the mesh vertices without changing much of the mesh appearance . Trust me, it works.

6. Try more hard work on shading program coding, they can maximize the GPU

the performance is running bad because of webgl support in the device. In order to run threejs and access the gpu I am excited to tell you that there is a way :)

But unfortunately not from the native browser of the device.

If interested in wrapping up all in a nice mobile app, my setup is like so..

Cordova + Crosswalk + ThreeJs

Mind you that Crosswalk is a cool new technology in which I believe Google and Intel are contributing like they do for Cordova. Cordova gives you native interaction with the device and crosswalk enables the power of webgl.

A demo of an HTML5 application running with Threejs can be downloaded from the google stores > (Note that the demo is from Ludei which is a similar technology to crosswalk but I chose crosswalk since its open source.

Demo Three JS

To setup a project is quite a breeze..

You start by creating a cordova project, add platforms you want, add crosswalk cordova plugin and you are good to go.