# Problem with GPU computation on mobile devices

**URL:** <https://discourse.threejs.org/t/problem-with-gpu-computation-on-mobile-devices/4614>\
**Category:** Questions\
**Tags:** shaders\
**Created:** [October 23, 2018, 9:42am UTC](https://discourse.threejs.org/t/problem-with-gpu-computation-on-mobile-devices/4614 "2018-10-23T09:42:49Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![jagracar](https://avatars.discourse-cdn.com/v4/letter/j/f4b2a3/32.png) [@jagracar](https://discourse.threejs.org/u/jagracar)\
**Post date:** [October 23, 2018, 9:42am UTC](https://discourse.threejs.org/t/problem-with-gpu-computation-on-mobile-devices/4614/1 "2018-10-23T09:42:49Z")

</div>

Hi,

I have a galaxy simulation example that uses the GPU to update the particles positions and velocities:

[https://webgl-shaders.com/galaxies-example.html](https://webgl-shaders.com/galaxies-example.html)

Everything works fine on my desktop, but when I test it on mobiles I get very weird results.  
At first I thought it was a float precision issue, but looking at the effects I don’t think this is the reason.

Anyone know what could be the origin of the problem? My guess is that it’s produced on the texture access, but I’m really lost.

Cheers,  
javier

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 23, 2018, 1:26pm UTC](https://discourse.threejs.org/t/problem-with-gpu-computation-on-mobile-devices/4614/2 "2018-10-23T13:26:27Z")

</div>

First, you should check if the mobile browser logs any error messages or warnings when using the app. In context of Chrome, you can use remote debugging in order to see the content of the browser console on your computer:

> **[Get Started with Remote Debugging Android Devices  |  Tools for Web Developers
 ...](https://developers.google.com/web/tools/chrome-devtools/remote-debugging/)**
>
> Remote debug live content on an Android device from a Windows, Mac, or Linux computer.

Besides, can you try to unroll the for loop in `frag-galaxies-vel.glsl`?

---

<div class="post-metadata">

**Author:** ![jagracar](https://avatars.discourse-cdn.com/v4/letter/j/f4b2a3/32.png) [@jagracar](https://discourse.threejs.org/u/jagracar)\
**Post date:** [October 23, 2018, 1:46pm UTC](https://discourse.threejs.org/t/problem-with-gpu-computation-on-mobile-devices/4614/3 "2018-10-23T13:46:57Z")

</div>

Hi @Mugen87,

Yes, I did that before, and there is no console errors, just some warning but I get the same warnings with the birds example, so I assumed they were not related.

I will try to unroll the loop, but it’s not a satisfactory solution if instead of two iterations I have to make many of them:

I have similar problems with this sim and in this case I need to loop over all the sources:

[https://webgl-shaders.com/gravity-example.html](https://webgl-shaders.com/gravity-example.html)

It this case the mobile version works a bit better, but this is because I limiting the total number of sources for the mobile version. Still, some particles freeze and don’t move anymore after some seconds.

---

<div class="post-metadata">

**Author:** ![jagracar](https://avatars.discourse-cdn.com/v4/letter/j/f4b2a3/32.png) [@jagracar](https://discourse.threejs.org/u/jagracar)\
**Post date:** [October 23, 2018, 1:48pm UTC](https://discourse.threejs.org/t/problem-with-gpu-computation-on-mobile-devices/4614/4 "2018-10-23T13:48:46Z")

</div>

These are the two warnings that I get in my mobile:

three.min.js:35 THREE.WebGLRenderer: WEBGL\_depth\_texture extension not supported.  
three.min.js:35 THREE.WebGLRenderer: OES\_texture\_float\_linear extension not supported

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 23, 2018, 1:54pm UTC](https://discourse.threejs.org/t/problem-with-gpu-computation-on-mobile-devices/4614/5 "2018-10-23T13:54:45Z")

</div>

I don’t think these warnings are relevant to you. Especially if the [birds example](https://threejs.org/examples/#webgl_gpgpu_birds) is working on your devices.

I have tested your app on my Pixel phone. Indeed, the movement of the particles looks weird. The loop unroll is just a test in order to see if the loop itself is the problem. It’s basically possible to perform an automatic loop unroll via `three.js` if you place a certain pragma on top of your loop and if your for loop has a canocial form.

BTW: Is there a special reason for using a float as a loop variable? You normally use an integer.

---

<div class="post-metadata">

**Author:** ![jagracar](https://avatars.discourse-cdn.com/v4/letter/j/f4b2a3/32.png) [@jagracar](https://discourse.threejs.org/u/jagracar)\
**Post date:** [October 23, 2018, 2:19pm UTC](https://discourse.threejs.org/t/problem-with-gpu-computation-on-mobile-devices/4614/6 "2018-10-23T14:19:12Z")

</div>

I just uploaded the unrolled version and it is still showing the same problem.

Also tried to use only 16x16 particles and the same result.

I use float in the loop because i need to take the mod and floor and they complain if I use integers, but probably there is a way? I’m still quite new with shader programming. Anyway, the birds example is also using floats in the loop, so I guess that’s not the problem.

What it doesn’t make sense to me is that the weird effect seems to group particles according to their coordinates, but I put the particles in the texture randomly…

Thank you for your help!

---

<div class="post-metadata">

**Author:** ![jagracar](https://avatars.discourse-cdn.com/v4/letter/j/f4b2a3/32.png) [@jagracar](https://discourse.threejs.org/u/jagracar)\
**Post date:** [October 23, 2018, 8:26pm UTC](https://discourse.threejs.org/t/problem-with-gpu-computation-on-mobile-devices/4614/7 "2018-10-23T20:26:22Z")

</div>

Hi again,

I simplified the example to make it easier to find the bug, but still not success…

Here is the test that shows the problem on mobile devices:

[https://webgl-shaders.com/debug-example.html](https://webgl-shaders.com/debug-example.html)

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [October 23, 2018, 8:48pm UTC](https://discourse.threejs.org/t/problem-with-gpu-computation-on-mobile-devices/4614/8 "2018-10-23T20:48:59Z")

</div>

I see the problem you mention on my iPhone. What kind of [type constant](https://threejs.org/docs/index.html#api/en/textures/Texture.type) are you using on your textures when you generate them in `gpuSimulator.createTexture();`? I’ve ran into this issue before where desktops support `THREE.FloatType` but mobile devices only support `THREE.HalfFloatType`… should be why you’re seeing `OES_texture_float_linear extension not supported`

Here’s the solution I ended up using: [GPGPUComputationRenderer](https://discourse.threejs.org/t/gpgpucomputationrenderer/3233/2?u=marquizzo) in case that’s the cause of the clumping in positions you’re seeing.

---

<div class="post-metadata">

**Author:** ![jagracar](https://avatars.discourse-cdn.com/v4/letter/j/f4b2a3/32.png) [@jagracar](https://discourse.threejs.org/u/jagracar)\
**Post date:** [October 23, 2018, 9:35pm UTC](https://discourse.threejs.org/t/problem-with-gpu-computation-on-mobile-devices/4614/9 "2018-10-23T21:35:26Z")

</div>

Thank you for your input!

I’m using the methods inside the GPUComputationRenderer class, which is in the three.js examples/js directory:

```
this.createTexture = function() {

	var a = new Float32Array( sizeX * sizeY * 4 );
	var texture = new THREE.DataTexture( a, sizeX, sizeY, THREE.RGBAFormat, THREE.FloatType );
	texture.needsUpdate = true;

	return texture;

};

```

The problem is that if I change the type, it seems that I also need to change the array. Which array should I use instead? Note that I need floats for the particle positions and velocities.

Thank you for your help!

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [October 23, 2018, 9:55pm UTC](https://discourse.threejs.org/t/problem-with-gpu-computation-on-mobile-devices/4614/10 "2018-10-23T21:55:33Z")

</div>

Hmm… I don’t think you’d need to change the array. `FloatType` is a 32-bit component, and `HalfFloat` is 16-bit: [see here](https://developer.mozilla.org/en-US/docs/Web/API/OES_texture_half_float).

With that in mind, you could easily fit 16-bit data in a 32-bit array with a lot room to spare. It would be ideal if there were a Float16Array for efficiency, but [they don’t exist](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays#Typed_array_views).

---

<div class="post-metadata">

**Author:** ![jagracar](https://avatars.discourse-cdn.com/v4/letter/j/f4b2a3/32.png) [@jagracar](https://discourse.threejs.org/u/jagracar)\
**Post date:** [October 24, 2018, 7:06pm UTC](https://discourse.threejs.org/t/problem-with-gpu-computation-on-mobile-devices/4614/11 "2018-10-24T19:06:31Z")

</div>

Hi @marquizzo

I did several tests today, but I still didn’t manage to solve the problem.

I’m quite sure the problem is not directly related with the Float32 support, because GPUComputationRenderer is testing the support in the init method and it would have printed an error in that case:

> <https://github.com/mrdoob/three.js/blob/dev/examples/js/GPUComputationRenderer.js#L151>

Any other idea to explore?

---

<div class="post-metadata">

**Author:** ![jagracar](https://avatars.discourse-cdn.com/v4/letter/j/f4b2a3/32.png) [@jagracar](https://discourse.threejs.org/u/jagracar)\
**Post date:** [October 24, 2018, 7:14pm UTC](https://discourse.threejs.org/t/problem-with-gpu-computation-on-mobile-devices/4614/12 "2018-10-24T19:14:59Z")

</div>

This example seems to also have the problem on mobiles and it’s not using three.js:

[https://www.ibiblio.org/e-notes/webgl/gpu/n-toy.html](https://www.ibiblio.org/e-notes/webgl/gpu/n-toy.html)

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [October 24, 2018, 11:56pm UTC](https://discourse.threejs.org/t/problem-with-gpu-computation-on-mobile-devices/4614/13 "2018-10-24T23:56:28Z")

</div>

Darn, I think you’re right. I’m trying your example, creating the texture with HalfFloatType:

```
var a = new Float32Array( sizeX * sizeY * 4 );
var texture = new THREE.DataTexture( a, sizeX, sizeY, THREE.RGBAFormat, THREE.HalfFloatType );

```

And I get the error:

`WebGL: INVALID_OPERATION: texImage2D: type HALF_FLOAT_OES but ArrayBufferView is not NULL`

So I guess that approach won’t work. But it definitely looks like a precision issue on mobile devices. I even tried adding `precision highp float; precision highp int;` to all shaders, and it didn’t change anything. So I’m all out of ideas. Sorry!

---

<div class="post-metadata">

**Author:** ![jagracar](https://avatars.discourse-cdn.com/v4/letter/j/f4b2a3/32.png) [@jagracar](https://discourse.threejs.org/u/jagracar)\
**Post date:** [October 29, 2018, 12:53pm UTC](https://discourse.threejs.org/t/problem-with-gpu-computation-on-mobile-devices/4614/14 "2018-10-29T12:53:38Z")

</div>

Thank you for trying anyway.

I’m going to give up for the moment. I don’t really that the examples work on mobiles, so I guess I can live with that.

Thank you again for your replies, @marquizzo and @Mugen87!