CODEWITHSUNDEEP
three.jsinternet-explorer-11
wapipl
wapipl

Reputation: 171

polygonOffset does not work in IE11?

A simple z-fighting problem.

http://jsfiddle.net/jmchen/y03q54oa/

polygonOffset: true,
polygonOffsetFactor: 1.0,
polygonOffsetUnits: 4.0

Code works fine in latest Chrome, FF, even Edge, but in IE11 generates artifacts. My findings show, that in IE11, function polygonOffset changes Z-position of the mesh, not the depth buffor value!!! Can someone confirm my suspiction? Should I report bug in Microsoft or in THREEJS lib?

Upvotes: 2

Views: 337

Answers (2)

wapipl
wapipl

Reputation: 171

It seems there is problem in WebGLState.setPolygonOffset function:

if ( polygonOffset ) {

        enable( gl.POLYGON_OFFSET_FILL );

        if ( currentPolygonOffsetFactor !== factor || currentPolygonOffsetUnits !== units ) {

            gl.polygonOffset( factor, units );

            currentPolygonOffsetFactor = factor;
            currentPolygonOffsetUnits = units;

        }

    } else {

        disable( gl.POLYGON_OFFSET_FILL );

    }

If there is one mesh with polygonOffset=true, library enables gl.POLYGON_OFFSET_FILL. It seems, in IE11, disabling this feature for other materials (polygonOffset=false) does not work properly. And the rest of meshes use the same factor and units -> artifacts are visible. If you set for other meshes polygonOffset=true and default values factor, units = {0,0) as in your example -> library sets new factor,units and everything is fine. I think, the function WebGLState.setPolygonOffset could be changed in order to set factor,units for every material, not only for polygonOffset=true, if there was at least one mesh with polygonOffset=true.

Regards Waldemar

Upvotes: 2

TheJim01
TheJim01

Reputation: 8866

I got it to work in IE11 with the following:

var mesh0 = new THREE.Mesh(new THREE.BoxGeometry(50, 50, 50),
    new THREE.MeshBasicMaterial({
        color: 0x0000ff,
        polygonOffset: true,
        polygonOffsetFactor: 0,
        polygonOffsetUnits: 0
}));

It seems to only happen when the two shapes are both meshes (the lines work fine). While it doesn't make much sense (every browser on Windows renders through ANGLE unless you force it into native GL mode), this is an IE problem.

I tested your original code in Edge, and it works fine. Microsoft has pretty much put IE to sleep, only producing security updates going forward.

Upvotes: 1

Related Questions