Jittery Objects about awe.js HOT 17 CLOSED

Hi @derricksharp can you provide a link or screencast for us to look at?

Depending upon the device you're using - iOS may be throttled as it was creating memory issues. Also, there's more updates coming in this area soon that will make better use of the higher resolution gyro data from the WebVR API.

If this is some other issue then we'd definitely like to help isolate this as we're not aware of any jitter.

from awe.js.

Here's a link to one of the samples that I pushed to our server.

https://maps.horrocks.com/awe/examples/basic/ar.html

After some more testing, it appears that the jittering is device based.

The jittering doesn't appear on these devices,
Samsung Galaxy 8, Motorola Droid Razr

It does jitter on the following devices,
Google Pixel, Samsung Galaxy 4 Tablet - Wifi only

Thanks!

from awe.js.

I've also noticed this on every device I've tested on:

• HTC One (5.0.2)
• iPhone 4s (9.3.5)
• iPhone 5s (10.2.1)

from awe.js.

I just tested it on a Samsung Galaxy S3 Phone and it jitters as well.

from awe.js.

Hey @derricksharp and @shaneparsons - thanks for reporting the issue.

Looks like there was some old throttle code left over from debugging a production issue with iOS devices. See this commit here 2d20bd5

This will now run as fast as your rAF will run (e.g. usually aiming for 60fps). If you need to add back in throttling then see the comment in this commit.

from awe.js.

I'm still noticing the problem on both android and ios. There doesn't seem to be any difference.

from awe.js.

I've updated the above URL with the new commit. I'm still noticing the same problem on Android devices. Now the jittering is much faster and the objects move a shorter distance.

from awe.js.

Hey @derricksharp and @shaneparsons - can you please define what you mean by "jittery"?

Ideally provide a screencast so we can clearly see what you're seeing.

We've tested this on a range of Android and iOS devices and this update definitely improves the overall frame rate. As mentioned, iOS may need additional throttling (e.g. in prod we limit it to 20fps) because when it's running too fast then it struggles and the scene then starts to stutter. But we just want to confirm this is really what you're talking about when you say "jittery".

Thanks.

from awe.js.

The closer objects (orange in this video) are noticeably worse.

from awe.js.

Mine looks the same as @shaneparsons . I'll upload a video when I get a moment later today.

from awe.js.

Hrm thanks @shaneparsons - we definitely don't see that on the examples/vr.html.

If you're using the multiply approach to turn lat/lon into x/z coordinates please make sure you use less than 1 Million (e.g. 1000000) as the multiplier factor. We've found WebGL gets jittery if you pass this threshold.

If this is something else we'd definitely like to track it down and resolve the issue.

Shane, can you please confirm if you see this using the standard examples/vr.html?

The only other option we can think of is perhaps the IMU on these devices are generating noisy data. If you guys can show this is really common then we're happy to implement this. But we haven't had anyone else complain so we'd like to validate this clearly first.

from awe.js.

My multiplier is only 10,000 so it's definitely well under the limit.

Here's the relevant code for the orange poi:

var scale = 10000;
var radius = 1;

window.addEventListener('load', function () {
  window.awe.init({
    settings: {
      container_id: 'container',
      fps: 60, // note: changing this doesnt make a difference
      near: 1,
      far: 250,
      fov: 65,
    },
    ready: function () {
      awe.util.require([{
        capabilities: ['webgl'],
        files: [
          ['../../js/awe-standard-dependencies.js', '../../js/awe-standard.js'],
          '../../js/plugins/awe.gyro.js',
        ],

        success: function () {
          awe.setup_scene();
          var gyro_plugin = awe.plugins.view('gyro');
          if (gyro_plugin) {
            gyro_plugin.enable();
          }

          // add some points of interest (poi) for each of the compass points
          awe.pois.add([
            { id: 'beer_store', position: { x: 45.348647 * scale, y: 0, z: -80.031382 * scale } },
          ]);

          // set pov to current location
          awe.povs.update({ data: { position: { x: 45.349094 * scale, y: 0, z: -80.031466 * scale } }, where: { id: 'default' } });
          
          // add projections
          awe.projections.add({
            id: 'beer_store',
            geometry: { shape: 'sphere', radius: radius },
            material: { type: 'phong', color: 0xf39c12 }, // orange
          }, { poi_id: 'beer_store' });
     
        },
      },

      { // else create a fallback
        capabilities: [],
        files: [],
        success: function () {
          document.body.innerHTML = '<p>This demo currently requires a standards compliant mobile browser.';
          return;
        },
      }]);
    }

  });
});

from awe.js.

Here's a gif of ar.html – I set the radius of the projections to 60, otherwise, it's identical to the original. It's not as bad as my example, but there's still noticeable movement with the projections.

P.S. My phone is sitting still on my desk in this example.

from awe.js.

We were using coordinates in the 10 millions. We corrected that and the jittering stopped. It still jitters on one of our devices, but we narrowed the problem down to the device hardware.

Thanks for all your help!

from awe.js.

Great news @derricksharp - glad we could help.

@shaneparsons sorry to hear you're still having issues with this jitter. We've been discussing your first screencast and there's a few things that stick out. Your code looks good and correct so there must be something happening either in the gyro plugin or in the device/browser.

The interesting point in your first screencast is the blue ball in front of the red ball. Here you can clearly see a parallax effect that suggests this jitter is not caused by orientation of the pov. To get this effect either the pov position is moving or the objects positions must be moving - or both.

We're all a bit confused as we haven't seen this happening or heard of any other cases of this and it appears rock solid in our testing. As you can see above @derricksharp 's issue was an oversize scale multiplier.

The only thing we can suggest is to look through your gyro plugin for any position updates - as the source file from our repos definitely doesn't have any. See https://github.com/awe-media/awe.js/blob/master/examples/basic/awe.gyro.js

If you can't find anything there then I'd extend your sitting still on the desk test to dump the position values for the pov and one or more key pois to the console. Then you can watch them and see if they are stable or if they are in fact moving.

If you still can't find anything there then we hate to blame the hardware, but the only other option is the hardware. Note that iPhone 4s and 5s are older generation devices.

See this:

On June 13, 2016, following the release of iOS 10, Apple dropped support on the iPhone 4S, 
making iOS 9 the last version supported on the device.

https://en.wikipedia.org/wiki/IPhone_4S

The iPhone 5S was discontinued on March 21, 2016.

https://en.wikipedia.org/wiki/IPhone_5S

Hope that helps.

from awe.js.

The only thing we can suggest is to look through your gyro plugin for any position updates - as the source file from our repos definitely doesn't have any. See https://github.com/awe-media/awe.js/blob/master/examples/basic/awe.gyro.js

I just checked again, but the code is the exact same.

If you can't find anything there then I'd extend your sitting still on the desk test to dump the position values for the pov and one or more key pois to the console. Then you can watch them and see if they are stable or if they are in fact moving.

I'll give this a shot in the near future and report back any findings.

If you still can't find anything there then we hate to blame the hardware, but the only other option is the hardware. Note that iPhone 4s and 5s are older generation devices.

I just tried it on an iPad Air 2 (newest version) and the result was the exact same as all the other devices.

The only other thing I can think of, that others might not be doing, is putting the longitude on the z coordinate. Is there a way to set the altitude to always be in the center of the screen (rather than 0), so that the longitude can be placed on the y coordinate where it belongs? Can you see this having anything to do with it?

from awe.js.

Hey @shaneparsons - if the pov's position.y is 0 and the poi's position.y is 0 and the poi is in front of where the pov is facing then all position.x and position.z changes should appear along the vertical midline (assume the projections are symmetrical to the poi's 0,0,0).

Hope that helps.

from awe.js.