Three.js textures not rendering on mobile and weird brightness issue - javascript

So I made a project using Three.js and everything works how I want it to on desktop browsers, tested using chrome, and firefox. When I try to open the project on any mobile browser, safari, chrome, or IE, some objects are not rendered these objects have normal maps and textures which appear fine on desktop but are not rendered at all on mobile. In addition objects appear to be overly bright on mobile and sometimes flicker going from behind one another to in front of one another.
One user suggested adding this.image = image; to the three.js file at line 18420 but this did not solve the issue. Here is a link to the project here http://pixelpusher.ninja/Ocean%20World/OceanWorld.html. You can inspect the page to view the source code. Has anyone ran into problems like this on mobile before? Any help is appreciated. Thanks!

Related

Website loading times out, images are missing, load half-way, and sometimes appear in wrong places

I've ran into this very peculiar issue where the wordpress website I am working on (Click to see) , looks and works great on all browsers except Safari on iPhone.
The site seems to be loading and times out half way. Sometimes images appear in wrong places, sometimes they're cut off mid-image. We've tested the site on OSX, Windows, in Chrome, Safari, Firefox, and iOS Chrome and it appears to be working great. The interesting thing is that this problem seems to be exclusive to Mobile Safari, consistently across multiple devices from different networks.
Here's are a few examples of what we're seeing:
In this photo should be a background image and a menu icon in the nav.
And in this photo what is that image doing in there? There should be another logo and these should be scrolling right to left instead of being displayed vertically.
And in this one Some images don't load at all and some don't load all the way.
And also in this one same portion of the website as above, except nice and crisp, how it should look. This was using iOS Chrome.
We tried isolating the issue by switching over to the default Twenty Fifteen wordpress theme, where we created an image heavy blog post (without any widgets), and the issue persisted.
We've been clearing browser caches and using W3 Total Cache to clear WP cache, but no luck.
Also had the website host, Namecheap, reset the server configs, just in case that would solve the issue, but, alas, no luck either.
Has anyone run into this bizarre issue in the past? Any ideas what else we could try?
Thank you so much in advance!

Large images on Android with Titanium

I need to display a huge image (at least 2000x2000) on Android with Titanium and let the user scroll around, just like they were using a scroll view on iOS. However, I know Android doesn't support the same kind of scroll view, so I opted to use an ImageView.
I'm unable to display this image properly or at least the way I'd like (without it being blurry when you zoom in) because of memory issues. Has anyone found a way to make large scrollable images work in Titanium on Android without potential memory crashes?
I tried WebView also, but it seemed to resize my image and when you zoomed it was blurry as well. I was hoping Android webview supported SVG, but it looks like they don't on a majority of devices.
This is by far the best answer I've found:
http://www.tenxperts.com/2011/07/13/working-with-large-images-in-android/
I tried it and it works well with Titanium web views.

PhoneGap: different behavior Simulator vs. Device

Very strange problem:
I've created a small HTML5 canvas game with box2dweb.js.
So far, all my work has been on desktop and today I've decided to move it to the iPhone (which usually consists of wrapping the app in a PhoneGap/Cordova application, change a few settings, and that's it.
The problem is, when I run the app on my desktop browsers (Chrome, Safari) as well as the iPhone and iPad simulators - everything works correctly - but when I actually deploy to my device (iPhone 4S) only some of the pictures show up. In fact, only the player sprite animation plays, and everything else (while still there physically) does not get drawn unless it doesn't have a specific animation (whether it's a sequence of images or just one image).
What seems even more strange, is that only the player entity is being drawn (with animation, too!) but all other entities that have animations are simply not drawn.
I've attached images to show the differences:
My question is - where do I even start debugging this? I tried running the index.html page without the cordova app on the iOS simulator so I could access the debug console, but there were no issues. How is this even possible? I was under the impression that if it worked as a web page, it should work as a PhoneGap app.
Alright, I've solved the problem. It was incredibly simple but hard to find. It's not even a PhoneGap problem:
The game has a level editor, and so it also has a saving/loading mechanism. While I specify all the images as './graphics/image.png', when a level gets deserialized it saves the loaded image's source, and not the original './graphics...' path. So the problem was that I was trying to load local files from my computer to my iPhone. I guess it was a path problem after all...

Pixastic doesn't work properly in Safari

I'm using the Pixastic javascript library to make several images on a webpage grayscale. It works in Chrome and Firefox, but not in Safari. Sometimes it makes a few random images grayscale, and sometimes it doesn't do anything at all.
Here's a test page to demonstrate the problem: http://www.edwards.nl/new/test.html
I'm using Safari 5.1.1 on Mac OSX Lion.
Does anyone know what the problem is? I couldn't find a solution anywhere yet.
Edit: It appears that the canvas elements are created, but the grayscaling part doesn't work.

Google Chrome background jittering when moving pictures

I was working on an image gallery and it involved some heavy image moving\resizing using javascript. Everything worked like a charm on all the broswers except for IE6\7 (no wonder) and ... Google Chrome.
Basically under certain zooming each movement made Chrome redraw the background, making it jitter, change its position and then move back. I can't post link to the actual script at the moment, but I used a jquery plugin to immitate the problem:
http://danilsk.narod.ru/wtf.html (try zooming in and out and clicking images)
Does anyone know how to fight this?
I am using google chrome and I see no issue here.
Everything is running very smoothly. Try updating your browser.
FYI:
Ubuntu 10.04 LTS - the Lucid Lynx
Google Chrome 8.0.552.215

Categories

Resources