Facefilters not working on N5001 #163

oliverhausler · 2020-03-02T17:40:33Z

Okay, the N5001 is a junk phone, but I thought you may want to know Facefilters are not working despite WEBGL2 being reported as available on this phone!?

Sorry for the junk quality, but this is the original resolution from the phone, lol.

xavierjs · 2020-03-02T20:38:50Z

Hi @oliverhausler

Thanx for your bug report.
The demo should log the main error message reported by the library in the web console.

To do deep learning we need to be able to do render to texture with FLOAT (32 bits) or HALF_FLOAT (16 bits) precision.

If WebGL2 is fully implemented, this is guaranteed. Unfortunately some WebGL2 implementation do not allow to do this. In many cases WebGL2 is still here in the web browser, but in fact it is not fully implemented.

Sometimes the GPU is not able to do RTT with 16 or 32 bits precisions, sometimes it is because of the driver.
You can run WebGL2 conformance tests here: https://www.khronos.org/registry/webgl/sdk/tests/webgl-conformance-tests.html?version=2.0.1

In our lib, we do the test at init, if we can really do render to texture with 16 or 32 bits precision. If not, it returns a GL_INVALID or something like that error.

Are you sure that getUserMedia API is working to get the webcam video stream ?

However, even if there was no compatibility issue, the experience won't be very good.
I would say that the minimum device to have a good experience with this library is a Samsung A5, which have an Adreno 306 GPU. And the performance of this GPU are really better than the Mali 720 of the N5001 (cf https://www.notebookcheck.net/ )

oliverhausler · 2020-03-02T23:07:46Z

getUserMedia() is definitely working on the device and you see the cam icon in the upper left corner, so I assume it was running. I tried to run tests to post here but the phone crashed while running them, so I gave up. I'll post more info here once we looked into the GL_INVALID and if we're seeing it in your library.

oliverhausler · 2020-03-04T15:12:54Z

The library is minimized, hard to extract this piece of code for testing. But also in production it would be useful to have a small library or piece of code for testing if Facefilters would work at all, so we don't even need to load the library in case it's not supported. Could you extract the piece which tests for this?

oliverhausler · 2020-03-08T23:32:28Z

Lukas constructed the following logic for testing upfront if FaceFilters would run on a device. It works well for the N5001 and other devices we have here.

/**
* Checks if WebGL2 is supported in this browser
* @returns {Boolean}
*/
export const supportsWebGL2 = () => {
       const gl = document.createElement('canvas').getContext('webgl2')
       if (!gl) {
              return false
       } else {
              return true
       }
}

/**
* Check if render to texture is supported
* Required by jeeliz
*/
export const supportsRTT = () => {
       try {
              const canvas = document.createElement('canvas')
              const gl = canvas.getContext('webgl')
              const test1 =
                     gl.getExtension('EXT_color_buffer_float') ||
                     gl.getExtension('WEBGL_color_buffer_float') ||
                     gl.getExtension('OES_color_buffer_float')

              const test2 =
                     gl.getExtension('EXT_color_buffer_half_float') ||
                     gl.getExtension('WEBGL_color_buffer_half_float') ||
                     gl.getExtension('OES_color_buffer_half_float')

              const test3 =
                     gl.getExtension('OES_texture_float') ||
                     gl.getExtension('MOZ_OES_texture_float') ||
                     gl.getExtension('WEBKIT_OES_texture_float')

              const test4 =
                     gl.getExtension('OES_texture_float_linear') ||
                     gl.getExtension('MOZ_OES_texture_float_linear') ||
                     gl.getExtension('WEBKIT_OES_texture_float_linear')

              const test5 =
                     gl.getExtension('OES_texture_half_float') ||
                     gl.getExtension('MOZ_OES_texture_half_float') ||
                     gl.getExtension('WEBKIT_OES_texture_half_float')

              const test6 =
                     gl.getExtension('OES_texture_half_float_linear') ||
                     gl.getExtension('MOZ_OES_texture_half_float_linear') ||
                     gl.getExtension('WEBKIT_OES_texture_half_float_linear')

              return test1 && test2 && test3 && test4 && test5 && test6
       } catch (err) {
              return false
       }
}

Could you please state if the logic is good or can we make the result more tight by using OR between the 16bit and 32bit version of functions, like here:

result = (test1 || test2) && (test3 || test4) && (test5 || test6)

xavierjs · 2020-05-29T13:07:29Z

Hi @oliverhausler

I have commited some changes, and fixed an undefined behavior, there is a little chance that it would fix the bug on the N5001. Can you try again?

Thanx,
Xavier

oliverhausler · 2020-05-29T13:10:01Z

Hi Xavier, sure. You want me to run this here again?
https://www.khronos.org/registry/webgl/sdk/tests/webgl-conformance-tests.html?version=2.0.1

xavierjs · 2020-05-29T13:53:33Z

Hi @oliverhausler
I have updated the online demos. You can test: https://jeeliz.com/demos/faceFilter/demos/threejs/cube/

Please open it in a private tab to be sure that the browser cache does not keep an outdated version.

oliverhausler · 2020-05-29T14:10:36Z

It's not working. The camera asks for permissions and I see the camera icon in the status bar, but then nothing else comes up.

xavierjs · 2020-05-29T14:15:59Z

Thanx for the testing

oliverhausler · 2020-05-29T19:14:04Z

Yeah, no worries. Let me know if you want me to run anything else.

xavierjs · 2020-08-06T14:34:55Z

Hi,
Can you test the latest version? I fixed some stuffs.

oliverhausler · 2020-08-06T14:40:52Z

Sure, if you tell me what to do :)

Want me to run this on the N5001? https://jeeliz.com/demos/faceFilter/demos/threejs/cube/

xavierjs · 2020-08-06T16:03:59Z

Can you open https://jeeliz.com/demos/faceFilter/demos/threejs/cube/ in a private browser tab to avoid any cache problem. I have just updated it

oliverhausler · 2020-08-06T16:24:57Z

Doesn't seem to be working.

Camera permission is requested and when I confirm I see the white background with some drawings and the GitHub banner, nothing else. Oh, and I see the camera icon in the task bar, which I think means the cam is active.

xavierjs · 2020-08-07T17:44:18Z

Thank you for testing. I still don't see where the bug could come from :(

xavierjs · 2020-08-20T20:55:09Z

Hi,

I have changed many stuffs in the core.
Can you test again? Like the boilerplate here: https://jeeliz.com/demos/faceFilter/demos/threejs/cube/
Please open it in a private browser tab to avoid any cache problem.

Thank you very much

oliverhausler · 2020-08-21T12:28:34Z

Same, feeling sorry.

Camera permissions requested, and then nothing except the page background.

xavierjs · 2020-08-22T19:38:40Z

Hi @oliverhausler

Thank you very much for your test.
Can you go here: https://jeeliz.com/demos/WebGLCoreLogger/index.html
and:

accept the camera video stream
click on "Copy to clipboard*. It will copy all the verbose logs from the textarea to the clipboard
paste it here or in a separate GIST.

Thank you very much.

oliverhausler · 2020-08-22T22:52:05Z

Posting it here. Hope it helps!

INFO in lib_getUserMedia() - get(): constraints = {"video":{"facingMode":{"ideal":"user"},"width":{"min":480,"max":1280,"ideal":800},"height":{"min":480,"max":1280,"ideal":600}},"audio":false}
INFO in lib_getUserMedia - get_raw(): videoStream got
INFO in lib_getUserMedia - get_raw(): video.onloadedmetadata dispatched
INFO in lib_getUserMedia - get_raw(): playPromise accepted
INFO in lib_getUserMedia - get_raw(): callbackSuccess called with constraints=
{"facingMode":{"ideal":"user"},"width":{"min":480,"max":1280,"ideal":800},"height":{"min":480,"max":1280,"ideal":600}}
INFO in WebGLCoreLogger: VIDEO GOT! Start PlayerFF
INFO in ContextFF: webglOptions =  {"antialias":true,"alpha":true,"preserveDrawingBuffer":true,"premultipliedAlpha":true,"stencil":false,"depth":true}
============= BEGIN TextureFilteringTester init() ============
INFO in ShadersFF.js: compile s40
WARNING in TextureFilteringTester: level = RGBAFloat16 - case 0 - cannot RTT
WARNING in TextureFilteringTester: level = RGBAFloat32 - cannot RTT
WARNING in TextureFilteringTester: level = RGBAFloat16 - case 0 - cannot RTT
WARNING in TextureFilteringTester: level = RGBAFloat32 - cannot RTT
WARNING in TextureFilteringTester: level = RGBAFloat16 - case 0 - cannot RTT
WARNING in TextureFilteringTester: level = RGBAFloat32 - cannot RTT
WARNING in TextureFilteringTester: level = RGBAFloat16 - case 0 - cannot RTT
WARNING in TextureFilteringTester: level = RGBAFloat32 - cannot RTT
ERROR in TextureFilteringTester: level = RGBA8
============= END TextureFilteringTester init() ============
WARNING in ContextFF - is_validWebGL2(): WebGL2 is here bug we cannot filter float or half float textures
WARNING in ContextFF: Turn off antialiasing because WebGL2 sucks with it
============= BEGIN TextureFilteringTester init() ============
INFO in ShadersFF.js: compile s40
WARNING in TextureFilteringTester: level = RGBAFloat16 - case 0 - cannot RTT
WARNING in TextureFilteringTester: level = RGBAFloat32 - cannot RTT
WARNING in TextureFilteringTester: level = RGBAFloat16 - case 0 - cannot RTT
WARNING in TextureFilteringTester: level = RGBAFloat32 - cannot RTT
WARNING in TextureFilteringTester: level = RGBAFloat16 - case 0 - cannot RTT
WARNING in TextureFilteringTester: level = RGBAFloat32 - cannot RTT
WARNING in TextureFilteringTester: level = RGBAFloat16 - case 0 - cannot RTT
WARNING in TextureFilteringTester: level = RGBAFloat32 - cannot RTT
ERROR in TextureFilteringTester: level = RGBA8
============= END TextureFilteringTester init() ============
WARNING in ContextFF - is_validWebGL2(): WebGL2 is here bug we cannot filter float or half float textures
INFO in ContextFF - init: WebGL2 is not here, we try to create a WebGL1 context
INFO in SharedContext: enable_floatExtensions()
INFO in SharedContext: enable_halfFloatExtensions()
WARNING in SharedContext.enable_halfFloatExtensions(): OES_texture_half_float not found
WARNING in SharedContext.enable_halfFloatExtensions(): OES_texture_half_float_linear not found
INFO in SharedTexture: init()
INFO in SharedTexture: build random texture
============= BEGIN TextureFilteringTester init() ============
INFO in ShadersFF.js: compile s40
WARNING in TextureFilteringTester: level = RGBAFloat16 - case 0 - cannot RTT
WARNING in TextureFilteringTester: level = RGBAFloat32 - cannot RTT
WARNING in TextureFilteringTester: level = RGBAFloat16 - case 0 - cannot RTT
WARNING in TextureFilteringTester: level = RGBAFloat32 - cannot RTT
ERROR in TextureFilteringTester: level = RGBA8
============= END TextureFilteringTester init() ============
GLERR in SharedTexture: 1280
WARNING in SharedTexture - fill_textureFromArray(): invalid texImage2D params with array = 6408 6408 5126
WARNING in SharedTexture - fill_textureFromArray(): invalid texImage2D params with null = 6408 6408 5126
ERROR in SharedContext - determine_capabilities(): cannot do RTT on float and half float textures
ERROR in ContextFF:  Not enough GL capabilities
FATAL ERROR in WebGLCoreLogger: GL_INCOMPATIBLE

You are not doing this for me, right? I don't need it to run on this phone. I only thought you may want to know. I have that phone only to check compatibility for our app, nothing more.

xavierjs · 2020-08-26T17:32:11Z

Hi @oliverhausler

Thank you very much for your feedback.
Currently, I don't manage to do render to texture with float or half float precision on this device :(

I have added more tests (with different GL parameters). Can you test again (in a new private window in order to avoid any browser cache problem): https://jeeliz.com/demos/WebGLCoreLogger/index.html

Thank you very much,
Xavier

oliverhausler · 2020-08-26T20:26:02Z

@xavierjs Here you go:

INFO in lib_getUserMedia() - get(): constraints = {"video":{"facingMode":{"ideal":"user"},"width":{"min":480,"max":1280,"ideal":800},"height":{"min":480,"max":1280,"ideal":600}},"audio":false}
INFO in lib_getUserMedia - get_raw(): videoStream got
INFO in lib_getUserMedia - get_raw(): video.onloadedmetadata dispatched
INFO in lib_getUserMedia - get_raw(): playPromise accepted
INFO in lib_getUserMedia - get_raw(): callbackSuccess called with constraints=
{"facingMode":{"ideal":"user"},"width":{"min":480,"max":1280,"ideal":800},"height":{"min":480,"max":1280,"ideal":600}}
INFO in WebGLCoreLogger: VIDEO GOT! Start PlayerFF
============ INIT ContextFF ============
INFO in ContextFF: webglOptions =  {"antialias":true,"alpha":true,"preserveDrawingBuffer":true,"premultipliedAlpha":true,"stencil":false,"depth":true}
INFO in ContextFF: test if WebGL2 implementation is valid...
============ BEGIN SharedContext determine_floatRTTCapability() ============
INFO in SharedContext.test_RTT(): test RTT with glInternalPixelFormat = gl.RGBA32F, glPixelType = gl.FLOAT
WARNING in SharedContext.test_RTT(): cannot do RTT. glStatus = gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT
INFO in SharedContext.test_RTT(): test RTT with glInternalPixelFormat = gl.RGBA, glPixelType = gl.FLOAT
WARNING in SharedContext.test_RTT(): cannot do RTT. glStatus = gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT
INFO in SharedContext.test_RTT(): test RTT with glInternalPixelFormat = gl.RGBA16F, glPixelType = gl.HALF_FLOAT
WARNING in SharedContext.test_RTT(): cannot do RTT. glStatus = gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT
INFO in SharedContext.test_RTT(): test RTT with glInternalPixelFormat = gl.RGBA, glPixelType = gl.HALF_FLOAT
WARNING in SharedContext.test_RTT(): cannot do RTT. glStatus = gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT
DEBUG: begin Samsung J3 tests
INFO in SharedContext.test_RTT(): test RTT with glInternalPixelFormat = gl.RGBA, glPixelType = gl.FLOAT
WARNING in SharedContext.test_RTT(): cannot do RTT. glStatus = gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT
INFO in SharedContext.test_RTT(): test RTT with glInternalPixelFormat = gl.RGBA16F, glPixelType = gl.FLOAT
WARNING in SharedContext.test_RTT(): cannot do RTT. glStatus = gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT
END: begin Samsung J3 tests
============ END SharedContext determine_floatRTTCapability() ============
WARNING in ContextFF - is_validWebGL2(): WebGL2 is here but we cannot RTT on float or half float textures
INFO in ContextFF: isValidWebGL2 =  false
WARNING in ContextFF: Turn off antialiasing because WebGL2 sucks with it
INFO in ContextFF: test if WebGL2 implementation is valid...
============ BEGIN SharedContext determine_floatRTTCapability() ============
INFO in SharedContext.test_RTT(): test RTT with glInternalPixelFormat = gl.RGBA32F, glPixelType = gl.FLOAT
WARNING in SharedContext.test_RTT(): cannot do RTT. glStatus = gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT
INFO in SharedContext.test_RTT(): test RTT with glInternalPixelFormat = gl.RGBA, glPixelType = gl.FLOAT
WARNING in SharedContext.test_RTT(): cannot do RTT. glStatus = gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT
INFO in SharedContext.test_RTT(): test RTT with glInternalPixelFormat = gl.RGBA16F, glPixelType = gl.HALF_FLOAT
WARNING in SharedContext.test_RTT(): cannot do RTT. glStatus = gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT
INFO in SharedContext.test_RTT(): test RTT with glInternalPixelFormat = gl.RGBA, glPixelType = gl.HALF_FLOAT
WARNING in SharedContext.test_RTT(): cannot do RTT. glStatus = gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT
DEBUG: begin Samsung J3 tests
INFO in SharedContext.test_RTT(): test RTT with glInternalPixelFormat = gl.RGBA, glPixelType = gl.FLOAT
WARNING in SharedContext.test_RTT(): cannot do RTT. glStatus = gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT
INFO in SharedContext.test_RTT(): test RTT with glInternalPixelFormat = gl.RGBA16F, glPixelType = gl.FLOAT
WARNING in SharedContext.test_RTT(): cannot do RTT. glStatus = gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT
END: begin Samsung J3 tests
============ END SharedContext determine_floatRTTCapability() ============
WARNING in ContextFF - is_validWebGL2(): WebGL2 is here but we cannot RTT on float or half float textures
INFO in ContextFF: isValidWebGL2 =  false
WARNING in ContextFF - init: WebGL2 implementation is crappy. Use WebGL1
INFO in ContextFF - init: We try to create a WebGL1 context (WebGL2 is not implemented or its implementation sucks)
INFO in ContextFF - init: a WebGL1 context has been created successfully
INFO in SharedContext: enable_floatExtensions()
INFO in SharedContext: enable_halfFloatExtensions()
WARNING in SharedContext.enable_halfFloatExtensions(): OES_texture_half_float not found
WARNING in SharedContext.enable_halfFloatExtensions(): OES_texture_half_float_linear not found
INFO in SharedTexture: init()
============ BEGIN SharedContext determine_floatRTTCapability() ============
INFO in SharedContext.test_RTT(): test RTT with glInternalPixelFormat = gl.RGBA, glPixelType = gl.FLOAT
WARNING in SharedContext.test_RTT(): cannot do RTT. glStatus = gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT
INFO in SharedContext.test_RTT(): test RTT with glInternalPixelFormat = gl.RGBA, glPixelType = gl.FLOAT
WARNING in SharedContext.test_RTT(): cannot do RTT. glStatus = gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT
DEBUG: begin Samsung J3 tests
INFO in SharedContext.test_RTT(): test RTT with glInternalPixelFormat = gl.RGBA, glPixelType = gl.FLOAT
WARNING in SharedContext.test_RTT(): cannot do RTT. glStatus = gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT
END: begin Samsung J3 tests
============ END SharedContext determine_floatRTTCapability() ============
ERROR in SharedContext - determine_capabilities(): cannot do RTT on float and half float textures
ERROR in ContextFF:  Not enough GL capabilities
FATAL ERROR in WebGLCoreLogger: GL_INCOMPATIBLE

xavierjs · 2020-08-26T20:41:47Z

Thank you. It really does not want to render to texture with float / half-float precision =(

oliverhausler · 2020-08-26T20:44:22Z

Well, who can blame them on that device :)

xavierjs · 2020-08-26T21:35:52Z

I close this issue since it is the same as #186 (even if this one is older #186 has a more generic title).
Both are about low end devices not doing render to texture with float / half float precision.

oliverhausler · 2020-08-26T22:15:28Z

@xavierjs Feel free to send further testing jobs if you have. You also have my email address in case.

igor9silva mentioned this issue Aug 16, 2020

GL_INCOMPATIBLE even with WebGL2 support #186

Closed

xavierjs closed this as completed Aug 26, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Facefilters not working on N5001 #163

Facefilters not working on N5001 #163

oliverhausler commented Mar 2, 2020 •

edited

Loading

xavierjs commented Mar 2, 2020

oliverhausler commented Mar 2, 2020

oliverhausler commented Mar 4, 2020

oliverhausler commented Mar 8, 2020 •

edited

Loading

xavierjs commented May 29, 2020

oliverhausler commented May 29, 2020

xavierjs commented May 29, 2020

oliverhausler commented May 29, 2020

xavierjs commented May 29, 2020

oliverhausler commented May 29, 2020

xavierjs commented Aug 6, 2020

oliverhausler commented Aug 6, 2020

xavierjs commented Aug 6, 2020

oliverhausler commented Aug 6, 2020 •

edited

Loading

xavierjs commented Aug 7, 2020

xavierjs commented Aug 20, 2020

oliverhausler commented Aug 21, 2020

xavierjs commented Aug 22, 2020

oliverhausler commented Aug 22, 2020 •

edited

Loading

xavierjs commented Aug 26, 2020

oliverhausler commented Aug 26, 2020

xavierjs commented Aug 26, 2020

oliverhausler commented Aug 26, 2020

xavierjs commented Aug 26, 2020

oliverhausler commented Aug 26, 2020

Facefilters not working on N5001 #163

Facefilters not working on N5001 #163

Comments

oliverhausler commented Mar 2, 2020 • edited Loading

xavierjs commented Mar 2, 2020

oliverhausler commented Mar 2, 2020

oliverhausler commented Mar 4, 2020

oliverhausler commented Mar 8, 2020 • edited Loading

xavierjs commented May 29, 2020

oliverhausler commented May 29, 2020

xavierjs commented May 29, 2020

oliverhausler commented May 29, 2020

xavierjs commented May 29, 2020

oliverhausler commented May 29, 2020

xavierjs commented Aug 6, 2020

oliverhausler commented Aug 6, 2020

xavierjs commented Aug 6, 2020

oliverhausler commented Aug 6, 2020 • edited Loading

xavierjs commented Aug 7, 2020

xavierjs commented Aug 20, 2020

oliverhausler commented Aug 21, 2020

xavierjs commented Aug 22, 2020

oliverhausler commented Aug 22, 2020 • edited Loading

xavierjs commented Aug 26, 2020

oliverhausler commented Aug 26, 2020

xavierjs commented Aug 26, 2020

oliverhausler commented Aug 26, 2020

xavierjs commented Aug 26, 2020

oliverhausler commented Aug 26, 2020

oliverhausler commented Mar 2, 2020 •

edited

Loading

oliverhausler commented Mar 8, 2020 •

edited

Loading

oliverhausler commented Aug 6, 2020 •

edited

Loading

oliverhausler commented Aug 22, 2020 •

edited

Loading