Discolored / transparent pixel issue?

[Aerion]

So I am working on a demo in Three.js ( r98 ) to bring 2D characters into the 3D world. The problem I’m having is even though the sprite texture loads fine, and even though the image itself has no “colored-transparent” pixels, three.js still renders some pixels as transparent as well as discolors a few of the pixels. I have circled both the transparent pixel issue as well as the discolored issue in this photo. I have also uploaded the original sprite sheet for confirmation of discoloration & transparent pixels. Any help would be greatly appreciated!

I have already checked the spritesheet thoroughly for transparent 'colored' pixels, and none were to be found.

Here’s the script :: 

// FLOOR

var floor = new THREE.Mesh 

(

	new THREE.PlaneBufferGeometry ( 1000, 1000, 32, 32 ), 

	new THREE.MeshBasicMaterial ( { color: 0x555555, wireframe: true } )

);

// ROTATE FLOOR

floor.rotation.x = ( - ( Math.PI / 2 ) );

// ADD FLOOR TO SCENE

this.scene.add ( floor );

// PLAYER

var playerTexture = new THREE.TextureLoader ( ).load ( "images/male.png" );

// TURN ON PIXELATION

playerTexture.magFilter = THREE.NearestFilter;
playerTexture.minFilter = THREE.LinearMipMapLinearFilter;

// PLAYER MATERIAL

var playerMaterial = new THREE.MeshBasicMaterial

(

	{

		map : playerTexture, transparent : true, opacity : 1.0, 

		side : THREE.DoubleSide, depthTest : false, depthWrite : false, 

	}

);

// PLAYER MESH

this.player = new THREE.Mesh

(

	new THREE.PlaneBufferGeometry ( 64, 64 ), playerMaterial

);

// POSITION PLAYER

this.player.position.x = 25;
this.player.position.y = 25;
this.player.position.z = 25;

// ADD PLAYER TO SCENE

this.scene.add ( this.player );

Please note, I have already tried :: 

playerTexture.minFilter = THREE.LinearFilter;

the above didn't work.

Also, I have tried :: 

var playerMaterial = new THREE.MeshBasicMaterial( { map : playerTexture, side : THREE.DoubleSide, alphaTest: 0.5 } );

and although alphaTest 'does' work in 'some' respects, it also removes the colored transparent pixels which shouldn't be transparent at all.

I have also noticed that some of my sprite is discolored if you simply compare the screenshot I included in this post to an up-close view of the spritesheet I uploaded.

Thank You very much to those who can help me!

[Salc2]

You should try make your texture power of two (POT) instead of 86x61 there could be the problem. Edit your texture in any bitmap editor could be Gimp and make it POT.

That sprite maybe was thought to be used in 2D but webGL/OpenGL rather image sizes power of 2:

https://www.katsbits.com/tutorials/textures/make-better-textures-correct-size-and-power-of-two.php

 

Cheers.

[Aerion]

Hi! I just tried that, and it did not work.

[Aerion]

Someone? Anyone? ?