Performance warning: clear() called with no buffers in bitmask

[drkrol]

Open the console. There will be 256 warnings.

https://jsfiddle.net/ex6vut9b/

[iGureEV]

>256 Performance warning: clear() called with no buffers in bitmask
Performance warning: clear() called with no buffers in bitmask
WebGL: too many errors, no more errors will be reported to the console for this context.

Please replace gl.clear( gl.COLORBUFFERBIT ) with gl.clear( gl.COLOR_BUFFER_BIT )

Спасибо, работает.

Подскажи, а почему ты решил использовать png изображение для точек, а не svg?

да, подскажите пожалуйста ещё:
а можно ли как-нибудь ставить анимацию на паузу, когда её не видно, чтоб не нагружать компьютер?

[iGureEV]

По сути своей SVG не изображения, а конфиг для рендеринга.
Рендерингом SVG в HTML-странице занимается браузер, и результат виден юзверю, но не программисту.
Для WebGL, как и OpenGL и DirectX нужен растр.
Что бы его получить из SVG его нужно самому нарисовать, а штатных средств для этого в браузере нет.
Думаю, потому автор и не рассматривал SVG...
Нужен SVG - сами... кодите или ищите готовые либы.
Статья по теме: https://css-tricks.com/rendering-svg-paths-in-webgl/

По поводу паузы...
В конце ShaderProgram.js есть метод update()
Можете какие угодно паузы делать в этом методе.
Автор написал основу - дальше сами.