0

I'm developing a game engine in JavaScript and webgl and using the forward rendering technique, one pass for each light source in the scene.

I'm using additive blending for the second pass and it works quite well except when I need to light objects with transparent textures. In this case, I get the nasty artifact you can see in the picture below. Keep in mind objects in the scene are sorted by z (from far to near) and transparent objects are rendered after the opaque ones. I'm using the blend function gl.ONE - gl.ONE but, to be honest I tried randomly almost every possible combination that could make sense.

Anyone can give me an hint of how to fix this problem?

Blending artifact

Peter O.
  • 32,158
  • 14
  • 82
  • 96
Pierluigi Serra
  • 115
  • 1
  • 5

1 Answers1

0

I am debugging what I think is a similar issue. What I discovered is that the underlying page is showing through on pixels that have alpha less than 1. I seem to be getting this even when blending is disabled, or whatever blending mode is set. One way to debug this is change the background color on your page and see if it changes the result.

Check when you create your WebGL context if you are specifying true for 'alpha'. If so, try changing to false. This means that the browser will treat your canvas as completely opaque.

Philip Taylor
  • 521
  • 5
  • 11