jeeliz / jeelizFaceFilter

Javascript/WebGL lightweight face tracking library designed for augmented reality webcam filters. Features : multiple faces detection, rotation, mouth opening. Various integration examples are provided (Three.js, Babylon.js, FaceSwap, Canvas2D, CSS3D...).

Home Page:https://jeeliz.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

iPod Touch - Safari 12 - WebGL: INVALID_OPERATION: texImage2D: type HALF_FLOAT_OES but ArrayBufferView is not NULL - iPod Toch Safari

GlenHughes opened this issue · comments

Describe the bug
When running the face detector on an iPod touch in Safari 12 the following error is logged in the console.

WebGL: INVALID_OPERATION: texImage2D: type HALF_FLOAT_OES but ArrayBufferView is not NULL
texImage2D
b — jeelizFaceFilterES6.js:85:430
p — jeelizFaceFilterES6.js:86:406
l — jeelizFaceFilterES6.js:87:404
l — jeelizFaceFilterES6.js:42:214
zc — jeelizFaceFilterES6.js:50
sa — jeelizFaceFilterES6.js:131:453
(anonymous function) — jeelizFaceFilterES6.js:140:144
(anonymous function) — jeelizFaceFilterES6.js:131:316
onreadystatechange — jeelizFaceFilterES6.js:19:153
f — jeelizFaceFilterES6.js:64:487```

The face detector still works though. I am also passing in the canvas as an object rather than the id as a string.

**To Reproduce**
Run the detector on an iPod touch in Safari 12

**Expected behavior**
No errors to be shown in the console

**Smartphone (please complete the following information):**
 - Device: iPod Touch
 - OS: iOS 12
 - Browser Safari
 - Version 12

Thanks :)

Hi,

Thank you for this report.
This error is normal, and it is catch.
I don't trust the values returned by GL.getParameter() or the specifications. I always do quick real tests on the device to evaluate the WebGL capabilities and to choose the best way to do GPGPU with WebGL (with WebGL1 or WebGL2 ? With 16bits precisions or 32 bits ? Can we fill half float texture with Uint16Arrays ?). By experience it is worth it :). But it almost always generate some warning and errors in the console.

best,
Xavier

I have this issue as well. Both on Safari 12.0.1 and I think on Chrome mobile version 72.0.3226.101
Any ideas on how to fix this issue @xavierjs ?

On IOS Chrome mobile is based on a Safari webview.
The access to the camera using WebRTC is blocked. It should work on Safari.
Apple is currently the Microsoft of the 2000's, they just slow down the standardization process over the Internet technologies.

Alright, it does work on safari mobile. But it crashes on desktop Safari 12 due to the same WebGL: INVALID_OPERATION: texImage2D: type HALF_FLOAT_OES error :(

This is strange, I will test it tomorrow on a deskop safari computer... But since it uses WebRTC/WebGL it can also depend on MacOSX/driver of the webcam/graphic drivers.
The INVALID_OPERATION: texImage2D: type HALF_FLOAT_OES is not a blocking error, it is just because we force some tests at the initialization.
Can you give me 2 screenshots or copy/pastes of:

http://webglreport.com/?v=1 (for webgl1)
http://webglreport.com/?v=2 (for webgl2)

(the bottom of the page with the supported extensions is very helpful, so please send the content of the whole page)

Thx

Thank you very much! Here you go:
gl1
gl2
version

Hi,

I have tested with an imac with the same configuration (Safari 12).
(this demo, the three.js boilerplace: https://jeeliz.com/demos/faceFilter/demos/threejs/cube/ )
I have the same error but this error is handled by Jeeliz FaceFilter.

It occurs at the initialization tests, when we test the real WebGL capabilities (especially to do render to texture to float or half float precision textures).

Did the browser ask to access the webcam?
I think it may come from webcam access.
Maybe the camera is used by another process (Skype, google hangout, another Safari session or whatever).

Best,
Xaver

Safari does ask for webcam permissions, and the webcam is transmitted to the canvas. There are just not occurring any 3D objects. The camera is not used by any other process. And works with no problem on Chrome.

Hey @xavierjs, I hope all is well!
We are still having this problem. Only on Safari 12.
Did you have any solutions? Or any way for me to quick-fix or work around the problem?

Hi @neheren
I tested both on Iphone6 and Ipad, but I cannot reproduce the problem.
As long as I can reproduce it, I cannot fix it. Does it work with Chrome/Firefox with the same computer ?
I will try again this afternoon (I don't have a mac so I have to borrow another computer).
I guess other webrtc demo work ? Like this one: https://webrtc.github.io/samples/src/content/getusermedia/gum/

Your library won’t work in Chrome on iPhone? Is that correct?

Maybe i should create a new ticket, since I am not talking about mobile support (I know iOS chrome is not working). But I get the same INVALID_OPERATION: texImage2D error, just on Safari Desktop version 12.0.1.
I don't know if you can reproduce?
Sincerely Nikolaj

@mschiano yes since Chrome for IOS is a Safari webview and Apple does not allow camera access in webview.

@neheren I cannot reproduce, even on Safari desktop. As I said INVALID_OPERATION: texImage2D is not the problem, it is only when we test the app capabilities at the initialization (because some WebGL implementation like Apple's one are so crappy that we have to check the real capabilities even when the extensions are here). This error is handled. Unfortunately it can also depends on the mac and especially on the GPU and Apple uses several kinds of GPUs...

Hey @xavierjs,
Okay so I guess you're right - the problem is GPU based, I think we are experiencing the same problem - Some mac's cannot run the program on Safari while some can. We have tested it on a lot of macs using Safari, and especially the older models are not able to initialize.
Is there anything to be done about this problem?
Sincerely Nikolaj

Hi @neheren

I don't personnally have a mac, I can access to 3 different mac configurations (5 yo high end macbook pro, 2 yo highend macbook pro and imac). Do you have the configuration of some of these old macs?
Especially for the graphic card and the IOS version?
Unfortunately I am not very optimistic, WebGL2 is currently not implemented properly on macs (no way to do render to texture with HALF_FLOAT precision as specified in the standard) so I have to fallback on WebGL1, but with WebGL1 some WebGL extensions need to be here...

Best,
Xavier

This is my mac configuration:

image

My Safari configuration:

image

And the error:

image

I think i can get more info on other macs that does not support the program if you want?
I really hope that there is a solution.

Sincerely Nikolaj

This computer seems too old.
The problem comes from the graphic card, it badly supports HALF FLOAT and FLOAT textures.
Even if the OS and the browser are updated the graphic card capacities remain the same...

Aha, but why does it work on Chrome and Firefox then?

Hugh this is really strange

I may have an idea. I think Safari triggers an error where it should only trigger a warning... I will come back with a potential fix in 10 minutes

That would make my day!

@neheren Can you try with the latest commit? I hope it will work. Thank you very much!

(I don't have updated the online live demos hosted on jeeliz.com yet)

Unfortunately it didn't work...
But now It's failing on line 419 where before it was 357:
image
I don't know if that helps.

I have checked and this error is catched (by a try{} catch).
It is when FaceFilter test the real render to texture capabilities.
Do you get an error from callbackReady function? Among these ones: https://github.com/jeeliz/jeelizFaceFilter#error-codes

No I don't get any errorcode:
image

I get the error right after webcam access has been requested, I don't know if that helps:
image
And the webcam works.

Hi @neheren

Thank you for your detailed bug report.
I had taken a few days off. I really want to discover why this bug happens because it is not normal.
Can you give me your email or send me an email to xavier__at__jeeliz.com
I will give you the URL of a debug version with a very detailed log level

Best,
Xavier

Perfect, I have sent you a mail!

Seems related to mrdoob/three.js#16041
(Intel Iris 1536 bug).
It is a problem with specific neural network version.
For sure it comes from the graphic driver.

The bug has been reported on Chromium support here: https://bugs.chromium.org/p/chromium/issues/detail?id=886970 and seems pretty active.
I guess a fix will be proposed soon.
Otherwise it is possible to use an old version of the neural network instead of the current NNC.json.

I close the issue since it is not directly a bug from Jeeliz Facefilter, but a graphic driver bug.
Futhermore a workaround was proposed.
Feel free to re-open it if a similar problem happens.

Best,
Xavier