Sign in to follow this  
JackFalcon

Touch: offset to the lower right.

Recommended Posts

Hello and <ping>

Q: about Touch....

Getting an Offset of the Pointer on the lower right:

image.png.5c47ac9092a79c69f577850be5aef223.png

The grey dot draws the blue line at offset upper left.

 

Reproduced using Chrome in the Chrome Emulator.

But first experienced it in a site using BJS 3.0 with both Hand and then PEP - on a Google Pixel.

Replicated in a local sandbox, I'll build a playground...

 

It uses this code:

                scene.onPointerObservable.add(function(){
                    console.log('movin')
                },BABYLON.PointerEventTypes.POINTERMOVE);

                //TODO - initPickEvents = function
                // ----------------------------------------------------Register Pointer Events.
                var meshes = centerTiles; //TODO rename tiles and move up with other code.
                for(var i = 0; i < meshes.length; i++){
                    mesh = meshes[i];
                    mesh.actionManager = new BABYLON.ActionManager(scene);
                    // trigger actions
                    mesh.actionManager.registerAction(
                        new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickDownTrigger, function(){
                            // debugger;
                            console.log('DOWN')
                        })
                    );
                    mesh.actionManager.registerAction(
                        new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickUpTrigger, function(){
                            console.log('UP')
                            // debugger;
                        })
                    );

                }

with this:

    <canvas id="renderCanvas" touch-action:"none"></canvas>

 

Any tip on things to try? : )

 

 

SOLUTION: gotta use meta tag to set device-width. Zing.

 

 

 

 

Share this post


Link to post
Share on other sites

this is usually happening due to the hardware scaling factor. It can be this - https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio, but you should first try using the hardware scaling level babylon is setting (engine.getHardwareScalingLevel() )

if you want to reproduce this on the playground we will be able to help a bit more

Share this post


Link to post
Share on other sites

@RaananW - good news. Made a playground (https://www.babylonjs-playground.com/#XAZE2U) and it is working there.

But it is not working locally, so looking into differences...

UPDATE: 

- updated babylon.js   //no change

- updated pep.js //nochange

- updated <canvas touch-action:"none">  //no change.

What else could be different between local and playground...?]

UPDATE: meta tags apparently...

Share this post


Link to post
Share on other sites

Hi!

Thanks for your help... looking.

 

Here is the local CSS:

    <style>
        html, body {
            overflow: hidden;
            width   : 100%;
            height  : 100%;
            margin  : 0;
            padding : 0;
        }

        #renderCanvas {
            width   : 100%;
            height  : 100%;
            /*touch-action: none;*/
        }
    </style>
</head>
<body>

    <!-- TEST: adding in touch-action none as an attribute -->
    <canvas id="renderCanvas" touch-action:"none"></canvas>

Lol -> missing meta tag...not pictured.

 

Share this post


Link to post
Share on other sites

STATUS: touch offset locally, works fine in playground.

Maybe I could test CDN locations?

Here is the full local index.html test code (with steps to reproduce):

<!DOCTYPE html>
<html>
<head>
    <!-- <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/> -->
    <title>touch1</title>
    <!-- TEST: PEP or HAND -->
    <script src="../../../lib/babylon/pep.min.js"></script>
    <!-- <script src="../../../lib/babylon/hand.min-1.2.js"></script> -->
    <script src="../../../lib/babylon/babylon_v3.1.js"></script>
    <!-- <script src="../../../lib/babylon/babylon_v3.2.0_alpha1.js"></script>  -->


    <style>
        html, body {
            overflow: hidden;
            width   : 100%;
            height  : 100%;
            margin  : 0;
            padding : 0;
        }

        #renderCanvas {
            width   : 100%;
            height  : 100%;
            touch-action: none;
        }
    </style>
</head>
<body>

    <!-- TEST: adding in touch-action none as an attribute -->
    <canvas id="renderCanvas" touch-action:"none"></canvas>
    <!-- <canvas id="renderCanvas"></canvas> -->
    <script>

        window.addEventListener('DOMContentLoaded', function(){

            var canvas = document.getElementById('renderCanvas');
            var engine = new BABYLON.Engine(canvas, true);


            var createScene = function() {
                var scene = new BABYLON.Scene(engine);
                var camera = new BABYLON.ArcRotateCamera("Camera", 0, Math.PI / 3, 12, BABYLON.Vector3.Zero(), scene);
                camera.attachControl(canvas, true);

                    //STEPS to reproduce TOUCH-OFFSET-BEHAVIOR:
                    //1. Open in chrome emulator (any) OR PIXEL PHONE (as is my case).
                    //2. touch tile, RESULT: no console.log message.
                    //3. touch OFF of the tiles, to the LOWER-RIGHT. RESULT console.log fires. Pointer is detecting tile (at offset) from up and left or lower right touch.
                    //CONCLUSION: touch works fine on laptop, when using chrome emulator... touch is offset.

                    //TEST: resetting PIXEL-RATIO-. //RESULT - no change-.
                    console.log('SCALING: '+ engine.getHardwareScalingLevel())
                    console.log('WIN-SCALING: '+ window.devicePixelRatio)
                    engine.setHardwareScalingLevel(window.devicePixelRatio)
                    console.log('NEW-SCALING: '+ engine.getHardwareScalingLevel())

                    /***********************************CREATE_TILES************************************/
                    var centerTiles = [];
                    function createCenterTiles(){
                        var centerTilePositions = [{x:5,z:5},{x:-5,z:5},{x:5,z:-5},{x:-5,z:-5} ];
                        for (var i=0;i<centerTilePositions.length;i++) {
                            var centerTile = BABYLON.MeshBuilder.CreateBox("centerTile"+i, {width:10,height:1,depth:10}, scene);
                            var centerTileMat = new BABYLON.StandardMaterial("ground", scene);
                            if(i===0){
                                centerTileMat.diffuseColor = new BABYLON.Color3(0.85, 0.75, 0.75);
                                centerTileMat.specularColor = new BABYLON.Color3(0.8, 0.4, 0.4);

                            } else if (i===1){
                                centerTileMat.diffuseColor = new BABYLON.Color3(0.75, 0.85, 0.75);
                                centerTileMat.specularColor = new BABYLON.Color3(0.4, 0.7, 0.4);
                                
                            } else if (i===2){
                                centerTileMat.diffuseColor = new BABYLON.Color3(0.75, 0.75, 0.85);
                                centerTileMat.specularColor = new BABYLON.Color3(0.4, 0.4, 1);
                                
                            } else if (i===3){
                                centerTileMat.diffuseColor = new BABYLON.Color3(0.85, 0.75, 0.85);
                                centerTileMat.specularColor = new BABYLON.Color3(0.6, 0.4, 0.6);
                            }

                            centerTile.material = centerTileMat;
                            centerTile.position.y = 1;
                            centerTile.position.x = centerTilePositions[i].x;
                            centerTile.position.z = centerTilePositions[i].z;
                            centerTiles.push(centerTile)

                        }

                        /*********************EVENTS************************************************/
                        scene.onPointerObservable.add(function(e){
                            console.log('movin')
                        },BABYLON.PointerEventTypes.POINTERMOVE);
                        // ----------------------------------------------------Register Pointer Events.
                        var meshes = centerTiles; //TODO rename tiles and move up with other code.
                        for(var i = 0; i < meshes.length; i++){
                            mesh = meshes[i];
                            mesh.actionManager = new BABYLON.ActionManager(scene);
                            // trigger actions
                            mesh.actionManager.registerAction(
                                new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickDownTrigger, function(e){
                                    console.log('DOWN'+ e.source.id)
                                })
                            );
                            mesh.actionManager.registerAction(
                                new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickUpTrigger, function(e){
                                    console.log('UP'+ e.source.id)
                                })
                            );
                        }
                        
                    } //END-create-tiles-.


                    /*********************************CREATE-LIGHTS******************************/
                    var spot1, light1, light2;
                    var createLights = function() {
                        var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,10,0), scene);
                        light.intensity = 0.4;

                        light1 = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-1, -2, -1), scene);
                        light1.position = new BABYLON.Vector3(20, 39, 20);
                        light1.intensity = 0.5;

                        // light2
                        light2 = new BABYLON.SpotLight("spot02", new BABYLON.Vector3(0, 40, 20), new BABYLON.Vector3(-1, -2, -1), 1.1, 16, scene);
                        light2.intensity = 0.5;
                    }


                    createLights();
                    createCenterTiles();


                return scene;
            };

            /******************************Initialization******************************/
            scene = createScene();
            // scene.clearColor = new BABYLON.Color3(.33,.44,.55);

            engine.runRenderLoop(function(){
                scene.render();
            });

            window.addEventListener('resize', function(){
                engine.resize();
            });
        });
    </script>
</body>
</html>

UPDATE: Sure enough - missing meta tag.

So weird. Any tips?

I'll look for CDN...

 

 

Share this post


Link to post
Share on other sites

testing... 

 

Chrome Version: 

Google Chrome 64.0.3282.186 (Official Build) (64-bit)

  (updated it)// no change.

 

 

UPDATE; 

paths to cdn   // no change.

    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>

 

 

UPDATE:

  added in this beauty // no change.


<style>[touch-action="none"]{ -ms-touch-action: none; touch-action: none; }
body /shadow-deep/ [touch-action="none"]{ -ms-touch-action: none; touch-action: none; }
[touch-action="auto"]{ -ms-touch-action: auto; touch-action: auto; }
body /shadow-deep/ [touch-action="auto"]{ -ms-touch-action: auto; touch-action: auto; }
[touch-action="pan-x"]{ -ms-touch-action: pan-x; touch-action: pan-x; }
body /shadow-deep/ [touch-action="pan-x"]{ -ms-touch-action: pan-x; touch-action: pan-x; }
[touch-action="pan-y"]{ -ms-touch-action: pan-y; touch-action: pan-y; }
body /shadow-deep/ [touch-action="pan-y"]{ -ms-touch-action: pan-y; touch-action: pan-y; }
[touch-action="pan-x pan-y"],[touch-action="pan-y pan-x"]{ -ms-touch-action: pan-x pan-y; touch-action: pan-x pan-y; }
body /shadow-deep/ [touch-action="pan-x pan-y"],body /shadow-deep/ [touch-action="pan-y pan-x"]{ -ms-touch-action: pan-x pan-y; touch-action: pan-x pan-y; }
</style>

 

 

UPDATE:

tested preview (from this location: https://github.com/BabylonJS/Babylon.js/blob/master/dist/preview release/babylon.js )  // no change

 

 

Share this post


Link to post
Share on other sites

STEPS to reproduce:

Open in Chrome.

Open DevTools

PASSING-TEST: Touch on colored boxes! Screen shows item ID (r=0, g=1, b=2, p=3)

OFFSET-TEST: Click the DevTools Device Emulation Button.

Open Console. Tiles are not selected correctly.

There is NO offset in the playground (https://www.babylonjs-playground.com/#XAZE2U) [with the same tests].

Other info:

    - Offset appears in 1 Pixel phone, but not in a Surface tablet, and also not in an iPhone.

   - Offset does not exist in IE, F12 emulation tools.

   - Behavior confirmed on a second laptop (2 laptops and a Pixel).

link to git available.

Share this post


Link to post
Share on other sites

SOLVED: you need this meta tag if you use Touch on a PIXEL.

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

CONFIRMED: also fixes DevTools emulation errors.

And don't zoom in emulator... same error...

<music-playing>"Welcome to the Jungle..."</music-playing>

 

Share this post


Link to post
Share on other sites

For anyone that may find this. A separate way to reproduce the offset was in DevTools emulator (specifically).

If this Zoom drop down is not 100%... there is a touch offset in the emulator (to lower left).

image.png.9dda6d87b24a62f983c0ed85857e42ed.png

By default it often isn't 100%. And it can change between every device (giving confusing touch results).

So, always need to set to 100% before testing touch. It seems...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.