Выборочный Antialiasing (или как добиться чёткого текста)
09 октября 2016 16:58
Побую сделать меню (HUD).
Освоил Viewport Aligment, всё ок.
Надписи на экране решил делать шрифтом (мешем), а не текстурой, чтобы не было размытия.
В итоге моя кнопка = "подложка Plane+ сетка Font".
Сделал им viewport Aligment - привязались.
Назначил им материал Shadeless
Однако какая-то засада с отображением - границы переходов цветов заблюреные.
ПРИКРЕПИЛ РИСУНОК с увеличением.
Думал движок некорректно обрабатывает близкие объекты, провел 2 эксперимента:
1. Разнес надпись и белую подложку на большое расстояние - те же грабли
2. Сделал надпись по мешу (т.е. все точки в одной плоскости) и назначил буквам черный цвет, тот же результат.
В глобальных настройках включил Антиалиазинг на HIGH - вроде стало нормально, но сильно подозреваю что на слабых конфах буду ловить фризы.
Выключил АА совсем - тоже нормально, но сцена теряет качество.
Как добиться чёткого отображения надписей?
Может как-то отключить антиалиазинг для этих объектов?
![]()
UPD
Решил попробовать сделать текстурой - то же самое, "мусор на границе цветов"
Освоил Viewport Aligment, всё ок.
Надписи на экране решил делать шрифтом (мешем), а не текстурой, чтобы не было размытия.
В итоге моя кнопка = "подложка Plane+ сетка Font".
Сделал им viewport Aligment - привязались.
Назначил им материал Shadeless
Однако какая-то засада с отображением - границы переходов цветов заблюреные.
ПРИКРЕПИЛ РИСУНОК с увеличением.
Думал движок некорректно обрабатывает близкие объекты, провел 2 эксперимента:
1. Разнес надпись и белую подложку на большое расстояние - те же грабли
2. Сделал надпись по мешу (т.е. все точки в одной плоскости) и назначил буквам черный цвет, тот же результат.
В глобальных настройках включил Антиалиазинг на HIGH - вроде стало нормально, но сильно подозреваю что на слабых конфах буду ловить фризы.
Выключил АА совсем - тоже нормально, но сцена теряет качество.
Как добиться чёткого отображения надписей?
Может как-то отключить антиалиазинг для этих объектов?
![](https://www.blend4web.com/media/uploads/8ba5922b-25f5-4dcc-b848-99ad127b2912/Blur.png)
UPD
Решил попробовать сделать текстурой - то же самое, "мусор на границе цветов"
10 октября 2016 14:56
Добрый день.
Расскажите как именно вы наносите текстуры. Это обычные деффузные текстуры?
Я подозреваю, что вас смущает размытие букв в вашей текстуре. Это вызванно линейной текстурной фильтрацией (низкочастотная фильтрация изображения при чтении из текстуры). В настоящее время её нельзя никак запретить, но в ближайшем будущем появится возможность сделать это из Blender'a. Хочется верить, что она появится в следующем релизе.
Про HUD.
HUD это обычный HTML-канвас, который лежит поверх основного 3D канваса. Он не имеет отношение к трёхмерной сцене, разве что рисует в себя информацию о ней. Там используются стандартные канвасовские 2D алгоритмы для антиалиасинга.
Расскажите как именно вы наносите текстуры. Это обычные деффузные текстуры?
Я подозреваю, что вас смущает размытие букв в вашей текстуре. Это вызванно линейной текстурной фильтрацией (низкочастотная фильтрация изображения при чтении из текстуры). В настоящее время её нельзя никак запретить, но в ближайшем будущем появится возможность сделать это из Blender'a. Хочется верить, что она появится в следующем релизе.
Про HUD.
HUD это обычный HTML-канвас, который лежит поверх основного 3D канваса. Он не имеет отношение к трёхмерной сцене, разве что рисует в себя информацию о ней. Там используются стандартные канвасовские 2D алгоритмы для антиалиасинга.
10 октября 2016 18:44
Расскажите как именно вы наносите текстуры. Это обычные деффузные текстуры?Да, обычный диффуз, текстура PNG24
Ответ на сообщение пользователя Семенцов РоманДа в том то и дело, что нет. Я сделал то же самое без текстур, просто белыми, черными и красными мешами - результат такой-же. Это мне кажется "вредит" общий антиалиазинг либо всей сцены либо данного объекта. Если я его ставлю на HIGH - всё идет нормально, но скорость страдает.
Это вызванно линейной текстурной фильтрацией (низкочастотная фильтрация изображения при чтении из текстуры).
Ответ на сообщение пользователя Семенцов Роман
Про HUD.
HUD это обычный HTML-канвас, который лежит поверх основного 3D канваса. Он не имеет отношение к трёхмерной сцене, разве что рисует в себя информацию о ней. Там используются стандартные канвасовские 2D алгоритмы для антиалиасинга.
Я, наверное не совсем понятно выразился.
У меня меню появляется и исчезает по нажатию кнопки на экране, и напротив пунктов могут появляться многовариативные галочки. В принципе я это реализовал нодами\логикой. Посмотрел у вас пример на сайте, и где-то увидел общую рекомендацию "использовать такой способ, а не канвасы"
Подозреваю ,что если работать с HTML-канвасом я не обеспечу такой гибкости как в случае 3D объектов/
Если я правильно понял, канвасы реализованы вот здесь
https://www.blend4web.com/tutorials/examples/cartoon_interior/cartoon_interior.html
Если есть еще примеры по канвасам, буду признателен.
10 октября 2016 19:20
С html версткой можно творить все что угодно. Показывать, скрывать, анимировать… И она хорошо отрисовывается. Единственно нельзя её поместить внутрь сцены. Что бы какой то 3д объект перекрывал её.
Для создания такого интерфейса потребуется знание html + js и немного изучить Api blend4web
Для создания такого интерфейса потребуется знание html + js и немного изучить Api blend4web
![winking](/static/pybb/emoticons/winking.png)
Не стой, где попало… Попадет еще раз.
http://naviris.ru/
http://naviris.ru/
11 октября 2016 10:27
Если есть еще примеры по канвасам, буду признателен.
в этой демке в качестве управляющих элементов используются div-ы, это не объекты сцены, это полноценный HTML-интерфейс. На мой взгляд, это самый удобный (для программиста) способ создания управляющиъ элементов.
Да в том то и дело, что нет. Я сделал то же самое без текстур, просто белыми, черными и красными мешами - результат такой-же. Это мне кажется "вредит" общий антиалиазинг либо всей сцены либо данного объекта. Если я его ставлю на HIGH - всё идет нормально, но скорость страдает.
Смотрите, антиалиасинг работает только на границе объекта, то есть на его контуре. Те два случая, которые вы рассматриваете - совсем разные случае. В случае наложения двух мешей друг на друга - тут работает антиалиасинг. В случае наложения текстуры - тут уже вас подводит линейная фильтрация, про которую я писал выше. Я для вас подготовил пример.
Для начала используем BMP-изображение (отсутствует какое-либо сжатие, по сути это набор пикселей как они есть). С ВКЛЮЧЕННОЙ линейной фильтрацией:
![](https://www.blend4web.com/media/uploads/26a21aac-c3bb-4b8b-92c5-2b9187a6c8f5/Screenshot_from_2016-10-11_10-19-23.png)
С ОТКЛЮЧЕННОЙ линейной фильтрацией:
![](https://www.blend4web.com/media/uploads/4179e1a4-c06d-4b8f-b4d3-1a74435f88ae/Screenshot_from_2016-10-11_10-18-07.png)
теперь тоже самое для PNG-изображения:
С ВКЛЮЧЕННОЙ линейной фильтрацией:
![](https://www.blend4web.com/media/uploads/fb657dc3-b657-4a06-94f6-90c46dc2794c/Screenshot_from_2016-10-11_10-21-27.png)
С ОТКЛЮЧЕННОЙ линейной фильтрацией:
![](https://www.blend4web.com/media/uploads/a78e2514-22c0-469f-b185-eacdda5f97eb/Screenshot_from_2016-10-11_10-23-09.png)
те же тесты для JPEG (в рассматриваемом случае использовалось сжатие 90%)
С ОТКЛЮЧЕННОЙ линейной фильтрацией:
![](https://www.blend4web.com/media/uploads/2c72a2f7-99fd-43d6-b9cf-d77cbefc00c1/Screenshot_from_2016-10-11_10-25-56.png)
С ОТКЛЮЧЕННОЙ линейной фильтрацией (стали заметны искажения, вызванные сжатием изображения):
11 октября 2016 10:29
11 октября 2016 11:45
- совсем разные случае. В случае наложения двух мешей друг на друга - тут работает антиалиасинг. В случае наложения текстуры - тут уже вас подводит линейная фильтрация, про которую я писал выше. Я для вас подготовил пример.
Спасибо за примеры, я привожу 3-й вариант:
- Одна меш, фейсы которой я покрасил 2-мя Shadeless материалами.
1. Наложения текстур нет (текстур в принципе нет). Линейную фильтрацию вычеркиваем.
2. Наложения мешей нет (меш одна). Антиалиазинг вычеркиваем.
"что-то" пытается сгладить ЦВЕТА (может движок поверх всей сцены накидывает какой-нибудь blur-фильтр? )
![](https://www.blend4web.com/media/uploads/2707adc7-3219-441f-badd-0ff3bb070f2b/dirt.png)
11 октября 2016 12:44
Спасибо за примеры, я привожу 3-й вариант:
Вот именно в этом случае подрубается антиалиасинг, я вам не совсем корректно объяснил его работу. Между кусками меша с разными материалами (сабмешами) антиалиасинг тоже работает, то, что вы видите, результат АА, для вашего конкретного примера, отключение АА избавит от артефактов