Flickering textures on iOS

[ozRocker]

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?

[GameMonetize]

I would say try with zOffset = 10 just to be sure

If it is still zfighting then iOS (once again, this release is a pile of shit) may have some issues when outputting video to a texture. (you can force babylon to use software decoding using engine._videoTextureSupported = false)

[ozRocker]

yeh, its still zfighting no matter what the zOffset is.  I tried engine._videoTextureSupported = false and that gives me webGL errors in webkit.

[GameMonetize]

is the video a POT2?

[ozRocker]

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.

[Kesshi]

POT2 = power of two
try to change the resolution of the video to be a power of two (128, 256, 512 ...)

[RaananW]

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.

[ozRocker]

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/

 

[Nabroski]

offtopic:
nice lion

[ragingclaw]

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 November 29, 2016 by ragingclaw
correction

[Nabroski]

@ragingclaw from my experience flickering occurs in general becourse the site is to expensive.

[ozRocker]

3 hours ago, Nabroski said:

3 hours ago, Nabroski said:

 

[ozRocker]

(ignore previous post. This editor will not let me remove quoted text!)

My site here: www.punkoffice.com/queertech crashes on iOS 10, iPhone 6+

I have a 719K .babylon file and 792K texture file.  I'm surprised iPhone 6+ can't handle it

[Nabroski]

@ozRocker did you try a 1024x1024 texure ?

[RaananW]

The physical size (In kb) of the textures has nothing to do with it. It's the pixel size of the images that you should be checking.

[ozRocker]

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?

[Nabroski]

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

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

1024x1024

x1024 resampel mitchell filter

 

[Nabroski]

@ozRocker meanwhile i play with the lions, u know.

[RaananW]

@ozRocker, it is mainly because iOS shared gpu and cpu memory and doesn't have a lot of it.

A 4k x 4k image takes 64 MB ram (gpu), not including mipmaps. This is a lot. So if you have more than 3 of them, they are already taking more than 10% of your entire system's ram. 

[ozRocker]

@Nabroski I put the 1024x1024 image in.  You can see it here http://www.punkoffice.com/queertech/?size=tiny

It still crashes my iPhone so I don't think its the image size.

Unfortunately the competition deadline was 1st December and my submission was rejected because it wouldn't run on mobile devices

 

[ozRocker]

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

 

 

[Nabroski]

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>

 

[ozRocker]

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.

 

[Nabroski]

@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>

 

[GameMonetize]

Perhaps they are not generating mipmaps? You can try to turn mipmaps off when loading the texture.

It is tough to debug it without at least a log or whatever. We have big textures in the Sponza demo (like 2048x2048) and it works flawlessly on iOs