WebVR Vive Viewport flickering Firefox 55 - firefox

atm I am trying to create a webVR experience for the HTC Vive on Firefox 55.0.3. It seems there are some performance issues with that. I can not show you code or screenshots from my application, but i also noticed the strange effects of the viewport 'flickering' in the following example from the A-Frame website.
https://aframe.io/examples/showcase/museum/
whenever I look at the center of the room, the viewport starts shaking like crazy. In other examples limke A-Blast this doesn't happen.
Now I am wondering hwhy this happens, as the HMD'S orientation obtained from vrDisplay.pose has to be correct. Then why does the camera, which gets rotated via this pose shakes?
There is also another performance issue with webvr on firefox. at some point, OpenVR/SteamVR just claims firefox is unresponsive, alternating between displaying VIVE Home and the webvr scene in quivk succession.
Did anyone of you also noticed this behavior and has any idea how to fix it?

Related

Webgl on Safari web on Macbook gives pink screen

When visiting (the first time of the day) our webgl application it gives an pink screen. We expect because its missing textures but we're not sure. This is at the moment only on Safari Mac but customers experience this now to so it's a problem
Do you know why or how to sove this?
Please ignore the black blocks. we blured it out.

Is there a way to implement pinch-zoom and panning on an Image without relying on animations?

I’m working with an Image control and I’m trying to implement pinch-zoom and panning.
None of the ready-to-go samples on the web, which handles the zoom and pan, worked as smoothly as the native Photos app on Windows Phone or like when viewing an image in Internet Explorer.
This led me to implement my own way of handling them which included me trying the following ways: (Scaling works as of now and I’m trying to get the panning to work too)
Putting the Image inside a ViewportControl; resulted in incredibly jerky scaling, but panning works smoothly. Setting UseOptimizedManipulationRouting="False" on the image didn't make a difference.
Putting the Image inside a ScrollViewer; scaling doesn't even work and panning is glitchy (jerky sometimes).
Using only the Image control and making use of animations to handle the smooth panning.
I haven't implemented step 3 yet, because I can't shake the feeling I've missed something. How can something so widely used be this hard to implement? :|
So my question is
What do I need to do to implement pinch-zoom and panning as smooth as in the Photos app?
If animations are the way to go can they be used to smooth scaling and translations to match that of the native experience?

Using Threejs Canvas Renderer in JavaFX Webview Issue with transparency

I was messing around with Threejs inside of JavaFX webview and I sort of ran into a problem i was wondering if anyone had any idea.
I basically just dropped the canvas_interactive_cubes demo into a javaFX webview component and it works for the most part except for the fact that the ThreeJs scene always just seems to want to render solid black behind itself and not let the underlying web page show through. It works perfectly fine if I run the same demo out of firefox and mess with the page under the scene canvas.
I understand that threejs was never really meant to support FX Webview but I was just wondering if anyone had any idea what could be going on to cause this?
Thanks,
Josh

AS3 OSX's quirky scroll effect ruins mousewheel controls

I'm building a web app to design and animate simple 3d scenes using the Away3D library, but the design of the interface itself is built around a scrolling menu which takes up the whole height of the screen.
The problem is, on OSX browsers have a silly quirk where if the page is scrolled when it has already gone as far as it can, the page can be dragged slightly further, revealing a brushed metal background. This looks nice and whatnot, but it pretty much ruins scrolling in a swf object. I use flash builder and export to safari, which is just about useable, if pretty annoying (especially with a mac touchpad, which can give a much higher scroll delta than a mousewheel can), but when I open my app in firefox/chrome the same effect happens, and causes the app and browser to slow down drastically.
I've found code which uses ExternalInterface to stop the swf sending mouse events to the page, but they all seem to disable detection in the swf as well, and I can't find anything else which help. If anyone knows of a solution you'll be saving me from throwing a few months' work away for what seems like a suspiciously unnecessary drawback to Flash on OSX!
Thanks in advance if anyone can help
Figured it out, in case anyone else gets stuck with this:
The feature's called elastic scrolling, if you're running a flash/flex app which takes up all the browser space you can simply set body{overflow: hidden;} in page CSS and it'll work just fine. Obviously, this disables any kind of page-scrolling - I believe you can turn it back on inside nested elements though.
Hope this helps someone anyway!

CSS3 Bugs - Issues when using transform:rotate rules (Safari + Firefox)

I've got a Wordpress site with some CSS3 rules applied to some images that rotate the images and have a hover effect on rollover too. Problems are showing up in Safari & Firefox when you hover on and then off these images and I can't seem to locate any similar issues by people on the Interwebs.
See http://tinyurl.com/3n2eude and hover on and then off the images (the slightly rotated ones):
Member name goes blurry and then back to normal (Firefox)
Member image border becomes jagged (Firefox)
A big black line displays to the side of the member images sometimes when you hover back and forth between two member images (Safari)
If I disable the transform:rotate rules, it's all fine. So seems to be an issue with that rule. Just can't work out how to get around it.
Anybody got some ideas on how I could get around these or what might be causing it?
Thanks for any ideas you might have!
Bit old of a question but that problem is related with rendering on browser (from what I understood). It cannot be fixed on CSS/HTML side. It must be fixed on user side.
Fix: http://www.askvg.com/how-to-enable-direct2d-directwrite-hardware-acceleration-in-mozilla-firefox/
More information about problem: CSS3 rotate - rendering problems in Firefox and Safari

Resources