Check out this jsfiddle I created to illustrate an issue with particles "flickering" when colored using a texture and the camera is moving.
Update: The problem occurs even when there is no animation or movement on the particles. If you notice flickering or color changes while dragging the viewport, then you are experiencing the issue. This has been observed on Firefox and Chrome on Mac OS 10.9 and Windows 7.
The particles are not overlapping or clipping in any way. When animated with a regular shader, there is no flickering. It only happens when coloring the particles with a texture (like using THREE.WebGLRenderTarget) to store previous frames for future use.
It appears that the fragment shader might be grabbing neighboring pixels instead of its target, although the target coordinates remain constant after initialization.
The target pixel coordinates for each particle are passed unaltered as vertex attributes to the fragment shader as varyings.
uniform sampler2D colorMap; // Texture used for coloring particles
varying float v_geoX; // x,y coordinates passed as varyings
varying float v_geoY;
void main() {
gl_FragColor = texture2D(colorMap, vec2(v_geoX, v_geoY));
}
Any suggestions on how to prevent this flickering issue? It seems to worsen with larger and faster animations, affecting all tested browsers.