Discolored / transparent pixel issue?

Questions
1

So I am working on a demo 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!

color_glitch

male

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 );

Thanks alot!

2

What happens if you do this:

playerTexture.minFilter = THREE.LinearFilter;

BTW: THREE.LinearMipMapLinearFilter is the default value of minFilter so there is no need to set it.

3

playerTexture.magFilter = THREE.NearestFilter;

playerTexture.minFilter = THREE.LinearFilter;

still does the same thing.

4

How about changing the material to this:

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

Just tried that. alphaTest actually removes some pixels.

6

it is also discoloring some of the pixels on the right side of the player.

7

Can someone help? I just need to know how to fix this.

8

I think I see what it’s doing. It’s making all of the darker pixels on the right side of the character, semi-transparent. How would I fix this?

10

Can you demonstrate the problem with a fiddle?

11

Yes, I have reproduced the problem here :

http://babylontesting.epizy.com/Three.js/SpriteAnimationHub/

The sprite ‘should’ look like this :

Not all discolored & with ‘colored - transparent’ pixels.

The quality should look exactly like this :

http://babylontesting.epizy.com/Three.js/Texture_Animation/

12

I’ve created a smaller test case with your sprite image right here: https://jsfiddle.net/f2Lommf5/16123/

Is this your intended result?

13

Yes. That’s correct.

15

I thought this issue is solved. Why don’t you use the approach from my fiddle?

16

What exactly did you do differently?

17

I use THREE.NearestFilter for texture.minFilter. The material has just this setup:

var material = new THREE.MeshBasicMaterial( { 
      map: texture, 
      transparent: true, 
      side: THREE.DoubleSide 
} );

And the renderer is just created like so:

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

Try these settings in your app.

18

So I tried what you suggested. As you can see at this link ::

view-source:http://babylontesting.epizy.com/Three.js/SpriteAnimationHub/scripts/index.js

In lines 54 through 113 of index.js, I have set texture.minFilter to THREE.NearestFilter & it still looks screwed up.

This is what I currently have for the material ::

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

As you can see in lines 53 through 59 of THREE.Context.js at this link ::

view-source:http://babylontesting.epizy.com/Three.js/SpriteAnimationHub/libraries/THREE.Context.js

This is what I have for my renderer ::

// Create the renderer
this.renderer = new THREE.WebGLRenderer ({
antialias : true,
});

A live demo can be seen at ::

http://babylontesting.epizy.com/Three.js/SpriteAnimationHub/

19

Are you sure the latest code is deployed? You still create the renderer like this (from THREE.Context.js):

this.renderer = new THREE.WebGLRenderer ({

    antialias : true, alpha : true, preserveDrawingBuffer : false, 

});
20

It’s been updated & it’s still not workiing.

22

Can you please remove the following line in THREE.SpriteAnimation.js?

this.texture.wrapS = this.texture.wrapT = THREE.RepeatWrapping;

I’m not sure why you need this one…

23

OMG! @Mugen87! It actually worked! THANK YOU! I can’t thank you enough! Will definitely be back soon!