Jump to content

Flickering textures on iOS


ozRocker
 Share

Recommended Posts

I'm putting decals on top of video textures and it works fine on a desktop browser.  In iOS 10 I get some bad flickering on the decal.  Its as if they have the exact same z-position.  I have decalMaterial.zOffset = -2.5 so it should be different.  If I change the video to a normal image texture there is no flickering.  Its only happening in iOS and when there's a video playing.  Funny thing is I get a flicker using an image texture if decalMaterial.zOffset = -2

Does anyone know how to prevent this?

Link to comment
Share on other sites

What's a POT2?  Its just a standard mp4 video

I just noticed that all my other babylon.js pages are broken in iOS 10 :/

I'm getting an infinite amount of these errors:

[Error] IndexSizeError (DOM Exception 1): The index is not in the allowed range.
	drawImage (babylon.2.3.core.js:4:16784)
	(anonymous function) (babylon.2.3.core.js:4:16784)
	o (babylon.2.3.core.js:3:23232)
	y (babylon.2.3.core.js:4:16330)
	onerror (babylon.2.3.core.js:3:8265)
[Error] BJS - [19:23:18]: Error while trying to load texture: 3D/diffuse_sml.jpg
	_ErrorEnabled (babylon.2.3.core.js:3:14459)
	onerror (babylon.2.3.core.js:3:4384)
[Error] Cross-origin image load denied by Cross-Origin Resource Sharing policy.
	onerror (babylon.2.3.core.js:3:4450)

Its happening with babylon.2.3, babylon.2.4 and the preview one.

Link to comment
Share on other sites

1 hour ago, RaananW said:

iOS....

I will stay politically correct on this one. If you want to share a demo I can play around with it, as I have SOME experience fighting this wonderful operating system.

Thanks @RaananW for helping out.  This is the video texture that I'm playing with.  Its a 360 video which I overlay text and a cat image on top http://www.punkoffice.com/360/

All the other babylon.js sites that use a .babylon file has broken in iOS.  This one for instance is completed busted http://www.punkoffice.com/ngv/

 

Link to comment
Share on other sites

  • 2 weeks later...

I am having the same issues with ios10. @RaananW knows the site ^_^

Site is great in everything but ios10. It has the flicker from hell. http://www.wildsavagekingdom.com/episode/mother-of-lions

 

EDIT: was a z offset issue after all. I am still blaming ios10 because I can though. 

Edited by ragingclaw
correction
Link to comment
Share on other sites

The current resolution is 4096x4096.  I've tried reducing the resolution but there's too much degradation in quality.  Its actually a submission for a competition (Queertech.io) so I didn't want it to look bad.

@RaananW is that because iOS still only works with decompressed textures?

Link to comment
Share on other sites

give it a try. just to see if the bug is in the texture size. colorcoreced the x2048 just a bit ftw
2048x2048

diffuse_sml_ccx2048.jpg

x2048 this is actually the right white balance for an image, (i push the red channel just a bit) im not sure if it fits with your project

diffuse_sml_x2048.jpg

1024x1024

diffuse_sml_x1024.jpg

x1024 resampel mitchell filter

 

Link to comment
Share on other sites

I've done some more experiments using a new scan.

With babylon.js if I just have a diffuse map (no normal map) at 2048x2048 then if I'm lucky it'll work.  iOS browser will crash 95% of the time while loading the texture.  If I reduce to 1024x1024, iOS browser will crash 50% of the time.  I cannot get it to work with a 4096 x 4096 texture.

However, I did the same tests with Sketchfab and that doesn't have the same problems.  With LD settings it will reduce diffuse map to 1024 x 1024 and normal map to 1024 x 1024.  With HD settings it won't reduce the maps so I can get BOTH diffuse map at 4096 x 4096 and normal map at 2048 x 2048.  It will work 90% of the time so it can still crash, just not very often.

I've attached an image.  The 1st one is on my server using babylon.js with only diffuse map of 1024 x 1024 (ignore bad lighting, its 'cos its expecting a normal map which I removed).  2nd one is Sketchfab at LD setting (both maps at 1024 x 1024), 3rd one is Sketchfab at HD settings (diffuse at 4096 x 4096 and normal at 2048 x 2048)

The Sketchfab scan is here https://sketchfab.com/models/818277492a3346728958d7de33b9f9b1

So it looks like there are some things that could be improved with babylon.js to prevent iOS browsers from crashing so much

 

 

comparison.jpg

Link to comment
Share on other sites

Hello @ozRocker

can you setup a project like the following and run on Ios and report if it works. will take you 5min. would be interessting to know.
 


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
  html, body {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  #renderCanvas {
    width: 100%;
    height: 100%;
    touch-action: none;
  }
</style>

  <script src="https://cdn.rawgit.com/BabylonJS/Babylon.js/master/dist/preview%20release/babylon.js"></script>
  <script src="js/hand.js"></script>
  <link rel="stylesheet" type="text/css" href="css/index.css"/>
 </head>
<body>
 <canvas id="renderCanvas"></canvas>
    <script>
	document.addEventListener("DOMContentLoaded", run, false);
function run() {
    if (BABYLON.Engine.isSupported()) {
        
    var canvas = document.getElementById("renderCanvas");
    var engine = new BABYLON.Engine(canvas, true);
    window.addEventListener("resize", function () { engine.resize(); });
    
    var scene = new BABYLON.Scene(engine);
	var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 1, -8), scene);
	var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, -1), scene);
	
    var assetsManager = new BABYLON.AssetsManager(scene);
	var binaryTask = assetsManager.addBinaryFileTask("binary task", 'https://dg5bepmjyhz9h.cloudfront.net/urls/818277492a3346728958d7de33b9f9b1/dist/textures/d5631941a2ac44c39ea02fbdcea9f9e2/ef62935a65974f00b2b3aaf3100ff729.jpg');
		
        binaryTask.onSuccess = function (task) {

    var texture = new BABYLON.Texture('data:my_image_name', scene, false,   true,BABYLON.Texture.NEAREST_SAMPLINGMODE, null, null,task.data, true);
        texture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE;
        texture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE;
        //texture.noMipmap = true;
    var stdmat = new BABYLON.StandardMaterial("stdmat", scene);stdmat.diffuseTexture = texture;
    BABYLON.Tools.LoadFile('http://www.punkoffice.com/queertech/3D/didy.babylon', function a (data){BABYLON.SceneLoader.ImportMesh("", "", 'data:' +data , scene,function (newMeshes) {newMeshes[0].material =stdmat;})})}
        
        assetsManager.onFinish = function (tasks) {
            engine.runRenderLoop(function () {scene.render();
            });
        };
        assetsManager.load();
    }
}   </script> 
</body>
</html>

 

Link to comment
Share on other sites

5 hours ago, Nabroski said:

Hello @ozRocker

can you setup a project like the following and run on Ios and report if it works. will take you 5min. would be interessting to know.
 



<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
  html, body {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  #renderCanvas {
    width: 100%;
    height: 100%;
    touch-action: none;
  }
</style>

  <script src="https://cdn.rawgit.com/BabylonJS/Babylon.js/master/dist/preview%20release/babylon.js"></script>
  <script src="js/hand.js"></script>
  <link rel="stylesheet" type="text/css" href="css/index.css"/>
 </head>
<body>
 <canvas id="renderCanvas"></canvas>
    <script>
	document.addEventListener("DOMContentLoaded", run, false);
function run() {
    if (BABYLON.Engine.isSupported()) {
        
    var canvas = document.getElementById("renderCanvas");
    var engine = new BABYLON.Engine(canvas, true);
    window.addEventListener("resize", function () { engine.resize(); });
    
    var scene = new BABYLON.Scene(engine);
	var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 1, -8), scene);
	var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, -1), scene);
	
    var assetsManager = new BABYLON.AssetsManager(scene);
	var binaryTask = assetsManager.addBinaryFileTask("binary task", 'https://dg5bepmjyhz9h.cloudfront.net/urls/818277492a3346728958d7de33b9f9b1/dist/textures/d5631941a2ac44c39ea02fbdcea9f9e2/ef62935a65974f00b2b3aaf3100ff729.jpg');
		
        binaryTask.onSuccess = function (task) {

    var texture = new BABYLON.Texture('data:my_image_name', scene, false,   true,BABYLON.Texture.NEAREST_SAMPLINGMODE, null, null,task.data, true);
        texture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE;
        texture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE;
        //texture.noMipmap = true;
    var stdmat = new BABYLON.StandardMaterial("stdmat", scene);stdmat.diffuseTexture = texture;
    BABYLON.Tools.LoadFile('http://www.punkoffice.com/queertech/3D/didy.babylon', function a (data){BABYLON.SceneLoader.ImportMesh("", "", 'data:' +data , scene,function (newMeshes) {newMeshes[0].material =stdmat;})})}
        
        assetsManager.onFinish = function (tasks) {
            engine.runRenderLoop(function () {scene.render();
            });
        };
        assetsManager.load();
    }
}   </script> 
</body>
</html>

 

Ok, I put that code in here http://www.punkoffice.com/queertech/test.html

It works fine on desktop but it crashes in the iOS browser.

 

Link to comment
Share on other sites

@ozRocker
Man sorry, i bruteforce your webserver last hour i was run into an error and start to debug, it was a stupid scope issue.

this is your model and 4096 texture form your server - i downsampel on the fly in a shader. should work now ?

hosted here: ( so i can also check it on android)
http://timber-grader-positions-35528.bitballoon.com/

source:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Nabroski-Test2</title>
<style>
  html, body {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #renderCanvas {
    width: 100%;
    height: 100%;
    touch-action: none;
  }
</style>
  <script src="https://cdn.rawgit.com/BabylonJS/Babylon.js/master/dist/preview%20release/babylon.js"></script>
 </head>
<body>
 <canvas id="renderCanvas"></canvas>
    <script>
	document.addEventListener("DOMContentLoaded", run, false);
function run() {
    if (BABYLON.Engine.isSupported()) {
        
    var canvas = document.getElementById("renderCanvas");
    var engine = new BABYLON.Engine(canvas, true);
   // window.addEventListener("resize", function () { engine.resize(); });
     engine.runRenderLoop(function () {scene.render();});
    var scene = new BABYLON.Scene(engine);
    scene.clearColor = new BABYLON.Color3(.3,.3,.3);
    var camera = new BABYLON.ArcRotateCamera(null,-1.5,1.5, 10,BABYLON.Vector3.Zero(), scene);
	camera.attachControl(canvas, true);
	var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, -1), scene);
BABYLON.Effect.ShadersStore["TestPixelShader"] =`precision highp int;precision highp float;uniform sampler2D refSampler;varying vec2 vUV;void main (){lowp vec4 t;t = texture2D (refSampler, vUV);lowp float r;r = (t.x * 255.0);r = (r + (65025.0 * t.y));r = (r + (1.658138e+07 * t.z));lowp vec3 t1;lowp vec3 c;c.z = floor(((r / 255.0) / 255.0));c.y = floor(((r - (65025.0 * c.z)) / 255.0));c.x = floor(((r - (65025.0 * c.z)) - (c.y * 255.0)));t1 = (c / 255.0);gl_FragColor.xyz = t1;gl_FragColor.w = 1.0;}`;
var refTexture = new BABYLON.Texture('http://preview.punkoffice.com/catkasey/diffuse.jpg', scene);
var cpTexture = new BABYLON.CustomProceduralTexture("cpTexture", "Test", 256, scene);
cpTexture.refreshRate =0;
cpTexture.setTexture("refSampler",refTexture);
var stdmat = new BABYLON.StandardMaterial(null,scene);
cpTexture.onGenerated = function () {
stdmat.diffuseTexture = cpTexture;
	BABYLON.Tools.LoadFile('http://preview.punkoffice.com/catkasey/ck.babylon', 
	function a (data)
	{	BABYLON.SceneLoader.ImportMesh("", "", 'data:' +data , scene,
		function (newMeshes) {
			newMeshes[0].material =stdmat;
			})
		})
     }   
	 engine.runRenderLoop(function () {
		scene.render();
	 });
    }
}   </script> 
</body>
</html>

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...