# WebGL Multiple Lights, Blending, and Render Order

I am trying to do simple forward rendering for multiple lights using additive blending in WebGL. Following advice from this SO and this one, I simply turn on blending using glBlendFunc(GL_ONE, GL_ONE) and glEnable(GL_BLEND).

However, while this is combining the contribution from multiple lights, it is also making everything "transparent", as in the front faces of my object are blending with the back faces. I know that rendering transparent objects requires sorting the objects by depth, but this would be extremely slow in javascript, and doesn't seem to be necessary as blending should only occur when faces are at equal depth, which is something the depth test/z-buffer should be able to handle, right?

So is sorting the objects really necessary for forward rendering of multiple lights?

I solved this with some help from Nathan Reed in the comments of this SO answer. The blend function glBlendFunc(GL_ONE, GL_ONE) is purely additive, and because addition is commutative, order doesn't matter. However, what does matter is to establish depth in the z-buffer through an opaque pass before doing any blending. My solution was to simply disable blending and draw a first pass with all objects colored black, and then turn blending on and draw the contribution of each light source.