We Keep Coding

Displaying a 3D model based on device rotation using web technologies

I'm looking for the best approach to achieve the following with today's web technologies:
A 3D model is rendered on screen and stays at a position. The position does not change and the model does not interact with the environment, therefore I'd call it "AR-light". If the user rotates his device, he will lose sight of the object, because it always stays at a position.
Later on, this position will be determined by a GPS signal, but that's something I don't focus right now.
Is there a good framework for this? AR.js seems to be too much for what I actually try to achieve.

Assuming you are using WebGL to display your model, then I believe three.js gives you some routines that can vary the camera angle and position based on device movements.
Threejs Rotating object with device orientation control
Alternatively, its usually best if you are learning something new, to try to access the device's accelerometer directly and try to convert movements into changes of camera position/orientation. see
How to detect movement of an android device?

How do I detect if a device has a gyroscope in a web browser?

I am using THREE.js and creating a web-app where the user can rotate the device and the scene will move accordingly. Something similar to this.
I am having a problem differentiating between devices that have a gyroscope and those that don't.
Detecting devices that don't have orientation sensors at all is easy. All the alpha, beta, gamma values of DeviceOrientationEvent are null. But, if a mobile device doesn't have a gyro, it still gives alpha, beta, gamma values in DeviceOrientationEvent. The problem is these values are very noisy, and cause a lot of shaking in the scene. So, I want to disable the device orientation for these devices. But, so far I haven't been able to find how to make out if the data is coming from a gyro or accelerometer (that's my guess on where the data is coming from).
I don't know if it helps, but a good example of how this is handled can be seen here. (Press the axis like icon at the bottom; you'll have to see it on a device that doesn't have a gyroscope and a gyroscope to see the difference). What they are doing for devices without a gyroscope is only updating the pitch and the roll. The yaw isn't updated when you rotate with the phone.
So, it is definitely possible, but I haven't yet found out how even after searching a lot. It would be great if anyone could help.
Thanks a lot.
EDIT:
On devices that just have an accelerometer, like MOTO E, all values are null - DeviceOrientationEvent and rotationRate - with the only exception of accelerationIncludingGravity. But, the device I was testing earlier, that didn't have a gyro but still gave alpha, beta, gamma values for DeviceOrientationEvent, seems to have 2 accelerometers according to the "sensors" details on GSM Arena. That is how I suspect it was able to give DeviceOrientationEvent data, albeit noisy. Looks like 2 accelerometers aren't enough to give rotation rate ;)

If you want to check if gyroscope is present or not, check the parameters that only gyroscope can measure. For example rotation rate is something only gyroscope measures.
Have a look at an example code which says whether gyroscope is present or not:
var gyroPresent = false;
window.addEventListener("devicemotion", function(event){
if(event.rotationRate.alpha || event.rotationRate.beta || event.rotationRate.gamma)
gyroPresent = true;
});
Hope this helps!
EDIT:
Just a small note: Here, the DeviceMotionEvent is used because the rotationRate (and acceleration etc.) can be accessed from this event only. The OP had tried only the DeviceOrientationEvent, so this is worth a mention.

Modern solution:
if (window.DeviceOrientationEvent) {
// gyro exist
}
source

Three.js Camera Orientation in Firefox for Android

Encountering an issue where the phone behaves as though the camera is crossing the environment zenith when it should simply be looking straight ahead. Everything flips upside down the way it would when the phone was oriented so that the camera is looking straight up, but this change happens when looking forward.
I'm on the latest version of Firefox (and the Firefox beta browser) on a Samsung Galaxy S6 running Android version 5.0.2. I can reproduce the issue on this video.
The issue appears to be that the rotation around the x-axis crosses from 0 to 180 (degrees) at that point. Is there a way to normalize this? I'm not encountering it in Chrome for Android on the same device.

The simplest solution is to use the experimental WebVR API features in Firefox to get the PositionSensorVRDevice and use its getState() method to derive orientation. The camera may still be slightly off from what you expect, but you can rotate it to be correct without the world flipping the way it does with the device orientation.

HTML5 Device Orientation - reliable compass implementation?

I am working on a mobile web project that needs to know the compass direction the user's device is pointing. It's incredibly simple right now, but here's what I have:
var updateDirection = function (evt) {
$("#direction").val(evt.alpha);
};
window.addEventListener("deviceorientation", updateDirection);
Based on what I've researched so far, the alpha channel of the event should be the compass position. However, I've observed (and read) that there are a wide variety of implementations based on OS and browser.
On my HTC smartphone, in Chrome or the default Android browser, I only get a reasonable reading (0 degrees = North, 90 = East, so on) when I hold the phone perfectly vertical in a "selfie" position. Any angle to the phone throws readings quite far off.
On my Surface Pro using Chrome, I can't get a reading greater than about 50.
On my Surface Pro using Edge, I get very reasonable readings, but only when I hold the device horizontal, as if it was laying on a table.
It seems likely that people have achieved getting the compass direction in a mobile browser regardless of device. Is there some library I can use to do this? Or is it necessary to simply code for many different specific scenarios, like this example, which also didn't work for all the devices listed:
Device Orientation Events

Is that really necessary for you to use javascript to find out orientation?
You could possibly achieve the same result with CSS media queries

Creating Water Ripples without Canvas?

I need create a water ripple effect (client side only) that responds to touch. I have looked at various options and found an interesting water ripple using canvas. I can replicate this without issue, however, it runs very slow. I have also looked at WebGL to create a similar water ripple effect but the effect I am going after must be able to run on an iPad and according to Caniuse WebGL is not supported by iOS.
My question is this: Is there a way to create water ripple effects that are quick and smooth without using canvas or WebGL (or flash). I am not against using canvas if there is a way to speed up the rendering. Again any code I use must run client side only and must work on an iPad.

The first question that may arise, if it's going to be used on a web platform or as a separate APP. Because at the moment iOS does not support WebGL natively. However there is a hack which permits to run on mobile browser. See this: http://vimeo.com/31553850. But i think this is out of scope if this will be a commercial product.
Secondly the canvas performance on mobile platform is not too good, but i found an experiment which i tested on iOS and it's quite satisfactory: http://media.chikuyonok.ru/ripple