I've selected babylon js to integrate a 3D human model to one of my mobile application developments. I'm using Ionic framework to write hybrid applications for iPad and android tablets. But when I integrated the 3D model in iPad, the animation was not working as expected.
In order to find the issue, I tested the Bones example in babylon js example list on browser and experienced that even that example doesn't work on the safari browser of the iPad and iPhone.
Here are some visual outputs of what I tested.
Example on Mac, Chrome : Successfully working
Example on iPad, Safari : Issues in human 3D model
Example on iPad, Chome : Issues in human 3D model
Example on Android, Chrome : Successfully working
In summary, the 3D human model has few issues in iPad. I've experienced same issues in iPhone too.
Can someone help me to understand what would be the problem and any fixes if this is an already known problem?
Thanks.
Hello this is because the number of uniform we can send to iOS WebGL implementation is pretty limited.
You can set mesh.computeBonesUsingShaders = false on iOS to fix the issue
Related
I noticed the 360 Image Gallery example on the Aframe.io website is broken so I have been trying to fix it.
I've got it to work on Desktop and 2D mobile browser, but when I switch to VR mode in my mobile (iPhone) browser, there is no cursor and I can't change scenes anymore.
What am I missing?
https://glitch.com/edit/#!/bubble-glitter-specialist
Thank you!
Something change in Safari iOS 13.4.1 that broke VR mode. More info at https://github.com/aframevr/aframe/issues/4554
Since we upgraded from aframe 0.8 to 0.9 we have a weird rendering behaviour when we enter vr mode on mobile device (i.e Samsung Galaxy S8)
You can see this white space in the middle on both eyes which is simply "not rendered" I guess. The hall is a .obj model with a .mtl provided (yes, I know glTF would be better but unfortunately it is not in our hands).
We tested on all mobile browsers with the same result. On Desktop Version everything works fine. Can someone verify / explain this?
It's quite embarrassing, but we found the solution.
Our external model designer designed every floor tile as a single object... Now we use a floor where all the tiles are one single object and that seems to work well.
This example displays the model in Chrome on a computer. However, this example does not show anything when it is loaded from either Chrome or Safari on an iPhone 5 (iOS 9.3.1). Does this happen to you too? Why is this happening?
Edit: It works in Safari on an iPhone 6 (iOS 10.2.1), but I still wonder why.
Edit 2: It works in Safari, Firefox and Chrome on an iPhone 5 now; the iOS has been updated to iOS 10.3.2.
Please provide any console logs as the information is so vague I can only speculate.
According to this thread, loading a glTF model in threeJS on iOS is highly limited by the number of the model bones. If You manage to get the logs working, and You get the WebGLRenderer: too many bones issue, it means You will need to change the model.
Also note, that according to the documentation, the support of iOS browsers is highly limited, so results may vary from what You get on Your desktop browser.
.
I've been experiencing a strange phenomenon with the webfonts I use on my website. There seems to be a problem with the font-smoothing properties. Here you have an example:
The first example is how my posts usually display on my 1920x1080 desktop monitor. The second example is how they should actually display, achieved through opening the Chrome DevTools and closing them immediately, (why does that work, I have no idea).
I've tried a diverse range of methods from the Internet(s), but none seem to work. No -webkit-font-smoothing, no text-shadow, nothing.
Aditionally, the website seems to only have trouble with that display: widescreen 1920x1080. I have tested it in a diversity of displays with diverse amounts of success, but I haven't been able to isolate the cause.
EDIT - MORE INFO:
Smoothing works just fine on my Mac Pro 13' with Retina and my iPhone 5, as well as my Android tablet.
Smoothing doesn't work in any browser used on my Windows Laptop at 1920x1080.
Again, the problem seems to appear at widescreen displays only.
I haven't done much debugging on ios safari and I am having a strange issue. I need to play HTML5 video from vimeo. The embed code works as expected. If flash player is not detected then HTML5 video is presented to the user.
On desktop all browsers I turn of flash and works fine. On ios using ipad simulator portrait mode in safari the video plays but once I turn it to landscape and load the page and try to click the video to play nothing happens.
If you go to http://tennlife.com:82/drupal/projects/millcitymuseum and navigate to the 3rd slide on the page you can see what I mean.
What is the best way to debug this type of thing in the simulator if any.
Has anyone run into this type of issue and do you have any suggestions on a solution?
You can turn on the Debugging console in iPad and iPhone - http://maisonbisson.com/blog/post/14447/step-by-step-turn-on-the-iphone-ipads-web-debugging-console/
Also you can use Firebug Lite to inspect the DOM http://getfirebug.com/firebuglite