Model placement on mobile devices - help needed

Questions
1

Hi guys,

We use a library for 3D face tracking called “Visage”. We use it for face painting.

This library has a sample that applies a tiger face painting to user’s face. The demo is provided here:
https://www.visagetechnologies.com/HTML5/latest/Samples/ShowcaseDemo/ShowcaseDemo.html
(Click “Tiger Model” checkmark).

Now, the most important part: the sample uses Three.js to apply the model with face paint.
It works perfectly on desktop, but on mobile device, the Tiger mask is misplaced, it doesn’t fit on the face but stays quite a bit off to the side.

It uses the following code to set up the mask position:

	var container = document.getElementById('inner-container');
	scene = new THREE.Scene();
	v_camera = new THREE.PerspectiveCamera( 36.869, mWidth/mHeight, 0.001, 30 );
	v_camera.lookAt(new THREE.Vector3(0, 0, -1));
	renderer = new THREE.WebGLRenderer({ alpha: true });
	renderer.setSize(mWidth, mHeight);
	container.appendChild( renderer.domElement );

Any help on aligning it on mobile device would be much appreciated!

2

There is a slight chance that could help adding:

renderer.setPixelRatio( window.devicePixelRatio );

3

Hi,
Thanks for the reply.
Unfortunately, doesn’t seem to help - the mask completely disappeared after setting that option.

4

/cc

5

the mask completely disappeared after setting that option.

Then it is relative, and might be key, as this is one of the main differences with desktop.
There might be some bug relative to setting the aspect and/or resolution.
Also does your app run in fullscreen on mobile? If not, there might be an offset-bug somewhere.