Inconsistent div element placement across devices

[andrewdeutsch]

Hello again, I'm doing some tests with 2d masks for prototypes and am getting inconsistent eye placement across devices. I'm using the jeeFaceFilterCanvas to hold it. Here's my tweaks for the object. This image is closely cropped. var SETTINGS={ rotationOffsetX: 0, //negative -> look upper. in radians cameraFOV: 40, //in degrees, 3D camera FOV pivotOffsetYZ: [0,-0], //position the rotation pivot along Y and Z axis detectionThreshold: 0.9, //sensibility, between 0 and 1. Less -> more sensitive detectionHysteresis: 0.02, mouthOpeningThreshold: 0.5, //sensibility of mouth opening, between 0 and 1 mouthOpeningHysteresis: 0.05, scale: [4.5,4.5], //scale of the DIV along horizontal and vertical axis positionOffset: [-1.55, -.9,-0.2] //set a 3D position fofset to the div };

Any suggestions?

Thanks!

[xavierjs]

Hi,

What is the canvas resolution and CSS size ? Do you try the boilerplate DIV demo (https://jeeliz.com/demos/faceFilter/demos/CSS3D/div/) or have you tried to change some settings ? Do you have any screenshot ? Is is possible to reproduce the bug using Chrome mobile emulation of the web console ?

[xavierjs]

Hi,

I have added a canvas2D integration example, it can be found on https://jeeliz.com/demos/faceFilter/demos/canvas2D/faceDraw/

I think it is better to use it than the CSS3D one because :

• the browser does not have to do compositing so it is more efficient
• I think there may be less cross browser problems than with the CSS
• The CSS position may depends on the position of the canvas in the CSS page while there are no such problems with the canvas2d based demo

[andrewdeutsch]

fantastic! thanks, xavier!