Aerion

Discolored / transparent pixel issue?

Recommended Posts

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!

color_glitch.png

male.png

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.