Webgl_read_float_buffer example didn't work on Android

Questions
,
1

webgl_read_float_buffer example didn’t work on Android using Mozilla.

2

Can you copy any error messages you received here?

Also, have you checked whether your device supports the extension?

3

@shilin

This is probably because you do not have this line of code in your HTML5 Head:
<meta charset="UTF-8" />

This line of code is necessary for most android devices to do much with three.js.

If this is not the case, then @looeee is correct, and you need to give us some error messages.

4

There was a tag in the html file.

On the Android OS, this example only showed a black background and the stats showed correctly.

The example webgl_rtt ran correctly on Android while the example webgl_read_float_buffer didn’t.

5

By the way, there was no error message.

6

Apologies, I just had a chance to look at this properly.

Checking the console log on my Moto G3 I see the following messages:

three.js:19689 THREE.WebGLRenderer: WEBGL_depth_texture extension not supported.
get @ three.js:19689

three.js:19689 THREE.WebGLRenderer: OES_texture_float_linear extension not supported.
get @ three.js:19689

three.js:17356 THREE.WebGLProgram: gl.getProgramInfoLog() --From Vertex Shader:
--From Fragment Shader:
Link was successful.

[.Offscreen-For-WebGL-0xa0910800]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.
webgl_read_float_buffer.html:1

The issue is the lack of support for the OES_texture_float_linear - this means that textures with type: THREE.FloatType are not compatible with the device, so the example won’t work.

7

For anyone running into this problem, for my use case I was able to get around this issue by setting the textures/renderTargets I was using to use nearest neighbour filtering:

const renderTarget = new THREE.WebGLRenderTarget( 1, 1, { depthBuffer: false, type: THREE.FloatType, magFilter: THREE.NearestFilter, minFilter: THREE.NearestFilter } ),