Войти
ПрограммированиеФорумГрафика

Как рендерить примитивные формы? (C++, OpenGL)

Страницы: 1 2 Следующая »
#0
20:21, 5 дек. 2019

Пришла мне идея одарить свое C++ двигло собственным UI
Накидал себе в голове список нужных визуальных элементов, получилось совсем немного:
1. Прямоугольники (с закруглениями, без, а так же видимыми границами, все как в HTML)
2. Картинки
3. Текст

Думаю, что на основе этого, абсолютно весь UI построить можно (может что-то и забыл -_-)

С текстом все однозначно, делать как делают все (Rectangle + текстура)
С картинками тоже (Rect + текстура)

А вот с прямоугольниками ступор...
Тут хотелось бы услышать мнение и варианты людей которые с этим работали уже.

Мысль или пойти через геометрию или через текстуру.

Через геометрию:
1. Генерим Rect, закругленный или нет, тут без разницы
+ Color на каждую вершину (аля background color)

2. Генерим границу (если есть) так же как и Rect, только пустую внутри и заданной ширины
+ Color на каждую вершину (аля border color)

Имеем кучу вершин, но никаких текстур + все в 1 буффере и самый банальный проход для всего этого.

Через текстуру:
1. Можно Rect + шейдер (будет рисовать закругленный прямоугольник с границей, но быстро ли?)
2. Можно составлять текстуру на CPU (например Bitmap, но быстро ли это будет при масштабном UI?)

В итоге 1 текстура + 4 вершины, что еще нужно для счастья...
Минус - что-бы определить клик нужно получить цвет пикселя, т.к. углы у закругленного прямоугольника прозрачные и там клик проходить не должен.

Это первые варианты которые мне пришли в голову и никак не могу понять что лучше выбрать и есть ли альтернативы, буду рад помощи!


#1
20:24, 5 дек. 2019

IIIarp
Прямоугольники с закругленными гейскими краями не нужны.

#2
20:33, 5 дек. 2019

nes
Скажи это автору gamedev.ru, здесь каждая кнопка имеет закругление в 3px(на данный момент) и это и есть тот самый прямоугольник с гейским закруглением -_-

А при уровне закругления в 50% от ширины/высоты мы получаем круг, который тоже может быть полезен.

#3
20:34, 5 дек. 2019

IIIarp
Не стоит уподобляться кому попало.

#4
20:39, 5 дек. 2019

Прямоугольники через текстуру ужас какой-то. Медленно и трата памяти в пустую. Через геометрию намного лучше и универсальней. Только задавать цвет каждой вершине не обязательно, проще через uniform.

#5
20:41, 5 дек. 2019

IIIarp
> Скажи это автору gamedev.ru, здесь каждая кнопка имеет закругление в 3px(на
> данный момент) и это и есть тот самый прямоугольник с гейским закруглением -_-
Если хочется красивые кнопочки, то лучше их делать через 9-patch с текстуркой.

#6
20:43, 5 дек. 2019

njo
Через вершины можно делать градинтный фон (если это вообще понадобиться когда-либо)

#7
20:45, 5 дек. 2019

IIIarp
> Через вершины можно делать градинтный фон (если это вообще понадобиться
> когда-либо)
Для этого можно отдельный класс сделать. Довольно редко бывает нужно.

#8
20:51, 5 дек. 2019

я через сдф делаю формы, а атиалиазинг сразу получается

#9
21:09, 5 дек. 2019

IIIarp
> 1. Можно Rect + шейдер (будет рисовать закругленный прямоугольник с границей, но быстро ли?)
Быстро. Обычно быстрее, чем из кучи треугольников.

> 2. Можно составлять текстуру на CPU (например Bitmap, но быстро ли это будет при масштабном UI?)
Медленно. Лучше сразу выкидывать такой способ.

> В итоге 1 текстура + 4 вершины, что еще нужно для счастья...
Не нужно если прямоугольник одноцветный. Такое нужно только если прямоугольник твой будет текстурой, которую рисует художник. В остальных случаях текстура - это избыточно.

#10
21:12, 5 дек. 2019

1 голос за геометрию
2 за SDF

Теперь я еще сильнее задумался :)

#11
21:14, 5 дек. 2019

Рисуй обычный прямоугольник из 4 вершин, а в шейдера дискарди те пиксели, что выходят за закругление. Никаких текстур не надо и будет работать одинаково на любом разрешении. Передавая доп параметры сможешь регулировать радиус закругления и создавать более сложную логику

#12
21:35, 5 дек. 2019

Либо делай просто кнопки по вершинам и цветом через юниформу. Либо матчи uv к вершинам. А скругленные края это тебе триангуляция нужна. И ты уже считай меши делаешь.

#13
21:44, 5 дек. 2019

lookid
Вопрос не только в кнопках а во всей UI системе:
1. Задний фон этого сайта - полноэкранный прямоугольник
2. Верхнее меню - прямоугольник на всю ширину но N пикселей в высоту
3. Поле для ввода этого комментария - скругленный белый прямоугольник с границей серого цвета
4. Кнопки - скругленный прямоугольники без границ
5. Скролл бар - куча прямоугольников(один для фона, один для ползунка и т.д.)
6. Нижнее меню - тоже прямоугольник

И т.д.
Я хочу весь UI выразить в прямоугольниках, поверх которых либо ничего нет либо есть текст либо картинки (иконки - тоже картинки)

#14
21:50, 5 дек. 2019

Есть идея как рисовать все оч быстро, но способ рисования все же выбрать осталось.

А рисовать оч быстро можно весь UI в текстуру с накоплением.
Рисовать в эту текстуру только те элементы UI (Scissor test), которые требуют перерисовки и не очищать текстуру перед каждой прорисовкой.

После выводить фул скрин квад с этой текстурой.

И отрисовок будет минимум и будут они очень редко (если я не буду выводить FPS)

Однако если, допустим, произошел скролл страницы, то перерисовать придется все дочерние элементы измененного блока (т.е. весь UI)

Страницы: 1 2 Следующая »
ПрограммированиеФорумГрафика