CODEWITHSUNDEEP
three.js
bitten
bitten

Reputation: 2543

Artifacts on the top and bottom of png textures in THREE.js v76

I'm getting some artifacts on the top and bottom sides on some of my sprites. These are the shaders I am using, if that matters. I'm using v76.

And I'm building these sprites like this:

var object = new THREE.Object3D();
var textureLoader = new THREE.TextureLoader();
textureLoader.load('path/to/image.png', function(texture) {
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.anisotropy = 16;
    var geometry = new THREE.PlaneBufferGeometry(15, 15);
    var material = new THREE.MeshPhongMaterial({
        map: texture,
        color: 0xffffff,
        transparent: true,
        alphaTest: 0.2,
        side: DoubleSide,
    });
    var mesh = new THREE.Mesh(geometry, material);
    mesh.castShadow = true;
    mesh.receiveShadow = true;
    mesh.customDepthMaterial = new ShaderMaterial({
        uniforms: { texture: { type: 't', value: this.material.map } },
        vertexShader: vertexShader,
        fragmentShader: fragmentShader,
    });
    object.add(mesh);
})

Upvotes: 0

Views: 220

Answers (1)

Andy Ray
Andy Ray

Reputation: 32076

Don't set your textures to wrap with THREE.RepeatWrapping. This can leave artifacts on texture edges meant to be used as sprites.

Upvotes: 1

Related Questions