solved Touch: offset to the lower right.

JackFalcon · March 13, 2018

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:

Any tip on things to try? : )

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

RaananW · March 13, 2018

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

JackFalcon · March 13, 2018

Ah, yeah pixel density... thank you for reminding me. I'll deep-dive and post. Thanks @Raanan. : )

JackFalcon · March 13, 2018

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

JackFalcon · March 13, 2018

Perhaps a difference in how CSS defines the canvas position?

JackFalcon · March 13, 2018

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.

JackFalcon · March 13, 2018

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

JackFalcon · March 13, 2018

can you test with 3.2-beta1 ? (latest in dist/preview release)

JackFalcon · March 13, 2018

testing...

Chrome Version:

Google Chrome

64.0.3282.186 (Official Build) (64-bit)

(updated it)// no change.

UPDATE;

paths to cdn // no change.

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

JackFalcon · March 13, 2018

Can you publish this page somewhere with a link to babylon.max.js ?

JackFalcon · March 13, 2018

Yes, I'll push to git... thank you for your help.

JackFalcon · March 13, 2018

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.

JackFalcon · March 14, 2018

Sorry but either I did not understand the steps or it works for me

There is no offset and clicking on red display "Centertile0"

no offset

JackFalcon · March 14, 2018

Thanks @Deltakosh,

FIIIIIIXED IIIIIIIT!

Image result for gru shrink ray

JackFalcon · March 15, 2018

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>

JackFalcon · March 15, 2018

Oh wait. No. Ruuuuun!

JackFalcon · April 10, 2018

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

solved Touch: offset to the lower right.

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Guest

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Guest

Link to comment

Share on other sites

Link to comment

Share on other sites

Guest

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Guest

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members