Вотjsfiddle Я собрал вместе, показывая проблему частиц, "мерцающих", когда они окрашиваются с помощью текстуры и когда камера движется.

Обновление: не должно быть никакой анимации или движения на частицах. Если при щелчке и перетаскивании в области просмотра частицы мерцают или меняют цвета, то вы видите проблему. Это проблема, которую я тестировал и видел как на Firefox, так и на Chrome с Mac OS 10.9 и Windows 7.

Частицы не перекрываются и не ограничиваются каким-либо образом. Если частицы анимированы обычным шейдером, мерцание не происходит. Только когда частицы окрашены с использованием текстуры (в данном случае с использованием THREE.WebGLRenderTarget), это мерцание очевидно. Это делается таким образом, чтобы захватывать предыдущие кадры и сохранять их в буфере (который затем может быть использован более продвинутыми способами, не показанными в примере jsfiddle).

На самом деле кажется, что фрагментный шейдер может ошибочно захватывать соседний пиксель вместо цели, но я не уверен - и это не имеет особого смысла, потому что координаты цели генерируются только в init (), и они не меняй после этого.

Координаты целевого пикселя для каждой частицы передаются как атрибут вершины фрагментному шейдеру 1-1 без изменений (как изменяющийся, но без изменяющегося значения).

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));
}

У кого-нибудь есть идеи, как это сделать без мерцания? Когда я применяю эту технику для больших и более быстрых анимаций, проблема только ухудшается. Это происходит во всех браузерах, которые я проверял до сих пор.