I am having a strange problem when using pngs as a texture in three.js. The pngs get strange borders at the area between visible and transparent. I allready tried to play around with alphatest value but then sometimes the image disapears completly in areas where are really thin 1px lines. Is there a solution how to solve this?

var explosionTexture = new THREE.ImageUtils.loadTexture( 'explosion.png' );
        boomer = new TextureAnimator( explosionTexture, 4, 4, 16, 55 ); // texture, #horiz, #vert, #total, duration.
        var explosionMaterial = new THREE.MeshBasicMaterial( { map: explosionTexture } );
        explosionMaterial.transparent = true;
        var cube2Geometry = new THREE.PlaneGeometry( 64, 64, 1, 1 );
        cube2 = new THREE.Mesh( cube2Geometry, explosionMaterial );
        cube2.position.set(100,26,0);
        scene.add(cube2);


        // renderer

        //renderer = new THREE.WebGLRenderer( { antialias: false, premultipliedAlpha: true  } );
        renderer = new THREE.WebGLRenderer( { antialias: false } );

I am having a strange problem when using pngs as a texture in three.js. The pngs get strange borders at the area between visible and transparent. I allready tried to play around with alphatest value but then sometimes the image disapears completly in areas where are really thin 1px lines. Is there a solution how to solve this?

var explosionTexture = new THREE.ImageUtils.loadTexture( 'explosion.png' );
        boomer = new TextureAnimator( explosionTexture, 4, 4, 16, 55 ); // texture, #horiz, #vert, #total, duration.
        var explosionMaterial = new THREE.MeshBasicMaterial( { map: explosionTexture } );
        explosionMaterial.transparent = true;
        var cube2Geometry = new THREE.PlaneGeometry( 64, 64, 1, 1 );
        cube2 = new THREE.Mesh( cube2Geometry, explosionMaterial );
        cube2.position.set(100,26,0);
        scene.add(cube2);


        // renderer

        //renderer = new THREE.WebGLRenderer( { antialias: false, premultipliedAlpha: true  } );
        renderer = new THREE.WebGLRenderer( { antialias: false } );

• javascript
• three.js

• some code will be great – Muath Commented Jul 2, 2013 at 9:20
• 1 Here you can see how the 1px thin line looks in the editor: [1]: i.imgur.com/Www2PsR.png?1?2013 and here how it looks like in the browser as a texture: [2]: i.imgur.com/Z3J9S0f.png?1?5201 – mixed_farmer Commented Jul 2, 2013 at 15:04

5 Answers 5

Just try this:

explosionTexture.anisotropy = 0;
explosionTexture.magFilter = THREE.NearestFilter;
explosionTexture.minFilter = THREE.NearestFilter;

Also you should not use antialaising when constructing the renderer:

renderer = new THREE.WebGLRenderer({antialias: false});

Did this to preview minecraft texture packs, works great :-)

Use material blending, the following configuration worked for me:

material.blending = THREE.CustomBlending
material.blendSrc = THREE.OneFactor
material.blendDst = THREE.OneMinusSrcAlphaFactor

See this example: http://threejs.org/examples/#webgl_materials_blending_custom

Congratulations, you've run directly into the Texel-to-Pixel-mapping-trap. :)

This should help you out of there, although it's not WebGL the basics still apply.

Ok, so I tried all the solutions on this page. They all failed.

What worked for me was to use the correct Texture.wrapS (horizontal wrapping) and Texture.wrapT (vertical wrapping) for the sprite texture.

I personally was finding this ugly edge on the top of my sprite. I just had to make sure my Texture.wrapT setting was THREE.ClampToEdgeWrapping instead of THREE.RepeatWrapping.

Solved the issue perfectly without messing with alpha test values, texture filters, vertices or antialiasing.

i solved it like this:

            var c2GVertices = cube2Geometry.vertices;


            for (var i = 0; i < c2GVertices.length; i++) {
              c2GVertices[i].x =  c2GVertices[i].x - 0.5;
              c2GVertices[i].y =  c2GVertices[i].y - 0.5;
            }

is there an easier way to move all vertices a half pixel?