three.js fog on chrome mobile not working

Question

Well I have a scene and I add some fog to it and the result is the fog is filling my entire screen with that color, like having a plain black background.

Chrome version: 39.0.2171.93 Mobile device: nexus 5 Android: lolipop

Here is my code:

 Demo.prototype.initializeScene = function( settings ) {

    var defaults = {

        fogColor: 0x000000,
        fogIntensity: 0.0005,
        near:50000,
        far:120000

    };

    this.options.scene = $.extend(true, defaults, settings);

    this.scene = new THREE.Scene();
    this.scene.fog = new THREE.FogExp2( this.options.scene.fogColor, this.options.scene.fogIntensity );


}

The code works fine on desktop and other mobile devices. If I remove the fog everything seems to work great.

Furthermore everything takes place inside a dome (json) mesh created with blender and then loaded, here is the code in case it's a material issue.

Demo.prototype.initializeEnvironment = function() {

    var that = this;

    loadMesh("geometry/dome.json", function(geometry, materials) {

        var materials = [
            new THREE.MeshLambertMaterial({ color: 0x3333ff, shading: THREE.FlatShading, overdraw: false}),
            new THREE.MeshLambertMaterial({ color: 0x2e2eff, wireframe: true})
        ];

        that.dome = new THREE.SceneUtils.createMultiMaterialObject(geometry, materials);
        that.dome.position.set(0,0,0);
        that.dome.scale.set(500,500,500);
        that.scene.add(that.dome);

    });

}

Finally the renderer code:

Demo.prototype.initializeRenderer = function( settings ) {

    var defaults = {

        init :{
            antialias: true, 
            alpha: true,
            autoClear: false
        },

        clearColor: 0x000000,
        clearColorIntensity: 1

    };

    this.options.renderer = $.extend(true, defaults, settings);

    this.renderer = new THREE.WebGLRenderer( this.options.renderer.init );
    this.renderer.setClearColor( this.options.renderer.clearColor, this.options.renderer.clearColorIntensity );
    this.renderer.setSize( this.options.generic.container.clientWidth, this.options.generic.container.clientHeight );

    this.options.generic.container.appendChild( this.renderer.domElement );

}

Answer 1

I am using Three.js r73 and hit the same issue on my Nexus 4 with Android 5. Fog seems to work again after disabling antialiasing.

You can achieve the same anti-aliasing effect by setting the renderer's pixelRatio. Here's what I do:

renderer.setPixelRatio((window.devicePixelRatio || 1) * 2);