Как сделать вращающуюся анимашку-кольцо в WebGL?

Question

[pavelkolodin]

Нынче на смену переворачивающимся виндовым песочным часам пришло крутящееся переливающееся кольцо.

У меня есть webgl canvas, где отключен всякий антиалиасинг для скорости и простоты.

Как бы в таком канвасе нарисовать красивое анимированое плавное крутящееся антиалиасное кольцо с минимумом пожирания ресурсов?

Answer 1

[svaa1982]

Возьмите текстуру и крутите, проблема с антиалиасингом решится за счёт текстурной фильтрации. Это будет, пожалуй, самый лучший способ.

Comments

[pavelkolodin]

Что такое "текстурная фильтрация"?

[svaa1982]

при взятии пикселя, несколько соседних будут автоматически усредняться, что очень похоже на антиалиасинг

[svaa1982]

в общем если используете three.js (или verge3d), то просто сделайте спрайт на основе текстуры:
www.soft8soft.com/docs/#api/textures/Texture
www.soft8soft.com/docs/#api/objects/Sprite

у текстуры соответственно выставьте magFilter и minFilter в LinearFilter

[pavelkolodin]

svaa1982, у меня отключено такое:

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

В текстуре лежит много спрайтов. Без этой настройки крайние пиксели одного спрайта смешиваются с пикселями соседних.

[svaa1982]

pavelkolodin, можно решить небольшим зазором, либо дорисовать либо брать меньше на шейдере, в любом случае NEAREST всегда даёт отвратительное качество, если не считывать тектуру в масштабе 1:1

[pavelkolodin]

svaa1982, пока текстуры всегда выводлись в масштабе 1:1, либо какой-то пиксель текстуры использовался для заливки большого прямоугольника. Спасибо.