jeelizFaceFilter: GL_INCOMPATIBLE even with WebGL2 support

Hi,

I’m facing a problem very similar to #163 on a Samsung’s Galaxy J3 (older model), a Motorola’s Moto G4 Play and a Samsung’s Galaxy J6+. All of them return GL_INCOMPATIBLE on callbackReady().

As per the compatibility description in the README, all of those 3 models should support Jeeliz properly. I understand the difficulties of relying on different hardware and OpenGL implementations though.

Context

We’re running a proof of concept for a skin tone research, where we color-correct the image using a grey card. This lib has been extremely helpful on properly positioning the user face on the image (position, distance and angle).

Right now we’re asking close people to try it out in order to gather feedback regarding UX and reliability.

What we have now

I’ll focus on the Galaxy J3 which I can contact the phone owner easily.

Error happens on both Firefox 80.0.0-beta.6 (Build #2015757457) and Chrome 84.0.4147.125. It’s running on Android 7.0 (kernel 3.18.14-14795764). It says Galaxy J3 Prime on the about menu (phone name) and model number SM-J327T1.

WebGL Report says that WebGL 2 (88 of 88 functions) and WebGL 1 (including FLOAT and HALF_FLOAT) are compatible. Screenshots attached at the bottom.

This demo won’t run as well (blank page). I unfortunately can’t access the device’s console log. I can request tests on other demos as well if you find helpful.

Read Pixels Test is ok as well (“everything is fine bro”), from #41.

Our implementation

Our client code is pretty simple (single < 300 lines JS file) and relies on Jeeliz and Babel only.

Main code:

JEEFACEFILTERAPI.init({
	canvasId: CANVAS_ID,
	NNCpath: 'dist/',
	callbackReady: function(errCode, spec) {

		document.getElementById('loading').style.visibility = 'hidden';

		if (errCode) {
			console.log('Error: ', errCode);
			document.getElementById('text').innerHTML = `Failed to load câemra. Error code: ${errCode}.`;
			return;
		}

		document.getElementById('buttonWrapper').style.visibility = 'visible';
		document.getElementById(HEAD_ID).style.visibility = 'visible';

		CVD = JEEFACEFILTERAPI.Canvas2DDisplay(spec);

		docResized(); // perform an initial resize
	},

	// called at each render iteration (drawing loop):
	callbackTrack: (detectState) => {
		// * hidden for simplicity sake *
		// we only render a black rectangle on the canvas and update some DOM elements here
	},
});

Maybe not relevant, but we do call docResized on window`s resize event to fix the canvas aspect ratio. This isn’t very performant but works pretty well:

const docResized = () => {

	const vWidth = window.innerWidth;
	const vHeight = window.innerHeight;
	const aspectRatio = vWidth / vHeight;
	const isAspectRatioWider = (aspectRatio > PREFERRED_ASPECT_RATIO);

	const canvas = document.getElementById(CANVAS_ID);

	const setRelativeHeigth = () => {
		setElementWidth(canvas, vWidth);
		setElementHeigth(canvas, vWidth / PREFERRED_ASPECT_RATIO);
	}

	const setRelativeWidth = () => {
		setElementHeigth(canvas, vHeight);
		setElementWidth(canvas, vHeight * PREFERRED_ASPECT_RATIO);
	}

	isAspectRatioWider ? setRelativeWidth() : setRelativeHeigth();

	const canvasRect = canvas.getBoundingClientRect();

	updateCardSize(canvasRect);
	updateHeadSize(canvasRect);

	CVD.resize();
	JEEFACEFILTERAPI.resize();
}

Screenshots

Note: many texts are in portuguese, please let me know if you need any translation.