Jump to content

Touch: offset to the lower right.


JackFalcon
 Share

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.

 

 

 

 

Link to comment
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

Link to comment
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...

Link to comment
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.

 

Link to comment
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...

 

 

Link to comment
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

 

 

Link to comment
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.

Link to comment
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>

 

Link to comment
Share on other sites

  • 4 weeks later...

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...

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...