0

I have a canvas based texture with transparent background that I'm alpha-blending with the diffuse color of my material. This is done using the follow custom vertex-shader code based on this SO answer:

vec4 texelColor = texture2D( map, vUv );
gl_FragColor.rgb = mix(gl_FragColor.rgb, texelColor.rgb, texelColor.a);
vec3 surfDiffuse = mix(diffuse, vec3(1,1,1), texelColor.a);

I have played around with the premultiplyAlpha setting on the texture. This is what i get:

What can i do to get rid of the dark edges around my texture?

Community
  • 1
  • 1
olov
  • 23
  • 1
  • 6

1 Answers1

0

Best solution is to bleed your texture edges into alpha in image editing software (or in this case make rgb solid color and have mask in alpha).

So that instead of:

rgb alpha
-------
BBB 000
BCB 010
BBB 000 //*B = black, C = texture color, 0 = transparent, 1 = opaque

you had:

rgb alpha
-------
CCC 000
CCC 010
CCC 000

This way you will have perfect edges.

Kromster
  • 7,181
  • 7
  • 63
  • 111
  • This looks really interesting, but i'm not sure how to translate it to WebGL/THREE.js. Where do you implement the bitmasks? In the fragment shader? – olov May 20 '13 at 16:25
  • These are made in image editing software and are all in textures RGBA image. – Kromster May 20 '13 at 17:54