Hier ist ein jsfiddle Ich habe das Problem des "Flackerns" von Partikeln zusammengestellt, während sie mit einer Textur gefärbt werden und während sich die Kamera bewegt.

Update: Auf den Partikeln sollte keine Animation oder Bewegung stattfinden. Wenn Sie auf das Ansichtsfenster klicken und ziehen und die Partikel flackern oder die Farben ändern, wird das Problem angezeigt. Dies ist ein Problem, das ich auf Firefox und Chrome mit Mac OS 10.9 und Windows 7 getestet und gesehen habe.

Die Partikel überlappen sich in keiner Weise. Wenn die Partikel mit einem normalen Shader animiert werden, tritt kein Flackern auf. Erst wenn die Partikel mit einer Textur eingefärbt sind (in diesem Fall mit THREE.WebGLRenderTarget), ist das Flackern erkennbar. Dies geschieht auf diese Weise, um vorherige Frames zu erfassen und in einem Puffer zu speichern (der dann auf weitergehende Weise verwendet werden kann, die im jsfiddle-Beispiel nicht dargestellt sind).

Es sieht tatsächlich so aus, als würde der Fragment-Shader fälschlicherweise ein Nachbarpixel anstelle des Ziels greifen, aber ich bin mir nicht sicher - und das macht wenig Sinn, da die Zielkoordinaten nur auf init () und erzeugt werden sie ändern sich danach nicht mehr.

Die Zielpixelkoordinaten für jedes Partikel werden unverändert als Scheitelpunktattribut an den Fragment-Shader 1-1 übergeben (als variierend, aber ohne variierenden Wert).

uniform sampler2D colorMap; // The texture being used to color each particle
varying float v_geoX; // x,y coordinates passed as varyings
varying float v_geoY;

void main() {
    // Normally pulling the correct color, but this seems to get confused during camera movement.
    gl_FragColor = texture2D(colorMap, vec2(v_geoX, v_geoY));
}

Hat jemand eine Idee, wie man das ohne Flackern macht? Wenn ich diese Technik auf größere und schnellere Animationen anwende, scheint sich das Problem nur zu verschlimmern. Dies geschieht in allen Browsern, die ich bisher überprüft habe.