Comments 42
Я свечку не держал, но думаю, что там всё сделано проще - предварительный гауссблюр скринкопии в мипчейн, а у стекляшек текстура, у которой в двух каналах DuDv и в третьем - степень размытия - мип скринкопии. И каждый канал семплится с разным скейлом оффсета для дисперсии. В GLSL это выглядело бы как-то так:
vec3 dudvlod = texture( ddltex, uv ).rgb;
vec3 result;
result.r = textureLod( screencopy, screen_uv + dudvlod.xy * 5.0, dudvlod.z ).r;
result.g = textureLod( screencopy, screen_uv + dudvlod.xy * 6.0, dudvlod.z ).g;
result.b = textureLod( screencopy, screen_uv + dudvlod.xy * 7.0, dudvlod.z ).b;
каждый канал семплится с разным скейлом оффсета
Почему вы не пишете просто по-английски?
Потому что это общепринятый сленг в комп графике
А почему вы душните?
Вы действительно ждёте ответ на свой вопрос или так, чисто минусануться решили?
Я хочу научиться понимать мотивацию людей, чтобы предсказывать их поведение, это у меня что-то типа отголосков Аспергера.
Написание английских слов транслитом мне не очень понятно. Правда, лет в 15 я тоже предпочитал использовать фразы "юзер не ламер, сам дрова поставит", но потом это стало как-то не актуально и не элитарно.
А на минусы не обижаюсь, я привык, что люди вокруг часто мыслят иначе, чем я.
Если кому-то душно от того, что я пытаюсь в них разобраться, то моя ли в этом вина? Я же не должен раади этого отказываться от изучения людей. Или да?
Мне прилетел минус в карму за "плохое оформление, ошибки". Напишите хоть, что за ошибки.
Большая надежда на китайцев, может быть у Xiaomi получится сделать что-то подобное
А какова цель? Предположим, что Apple это сделали, чтобы отличаться, а зачем за ними повторять, если отличаться уже не получится? Это как каверы играть.
Я так понимаю, это риторический вопрос?)
За Apple так или иначе все повторяют. Фишки из iOS кочуют в MIUI. (Хотя иногда они кочуют и в обратном направлении)
нет не совсем так, это не как кавер, а это как соляк, тоесть это практики
вот щас играем арпеджио, потом уходим в пассаж, потом бендами дотягиваем и немного флажолетов, по гамме пройтись сверху вниз пройтись по обращенным гаммам тоже наверно интересно
а как тогда писать музыку в фрути лупс - это удивительно, но там похожая ситуация, берем семплы, и творим, получается практиками тоже
в IT это всё таки практики, иначе не понятно даже как кидать тени и можно долго доходить до некоторых практик
например как еффективно выделять память, когда делать симд, а когда нет, а может просто написать и посмотреть как оно вообще типо того
Я не против практики, но тут получается, что практиковаться начинают, когда кто-то сделает, и очень срочно практикуются, да ещё и у себя добавляют.
ну понимаете еффект размытия и плюшки стали интересны потомучто чипы стали помощнее, стали наверно изучать математику потомучто мощность чипа позволит сделать какую-то прикольную штуку, ну так а это давно было КДЕ Плазма там есть настройка Garuda_Linux, которая сделает ультра стеклянный интерфейс, что-то там с виджетами помните? LXQt помните?, не могу не отметить Gnome наверняка тут тоже что-то есть, потом винда ушла сначала в определенный стиль плашки - по-сути квадратики и метки для кнопок при наведении, у винды есть или был стиль Аква или Аеро не помню, где каверы это просто дизайн + интеграция математики наверно, так тут характер будет только визуально напоминать эталон остаётся у IOS же, да и вопрос этот в плоскости похожести как кидать тени, чур каждый кидает по разному чтоли?)
что-то там с виджетами помните? LXQt помните?
Я — нет, я с gnome2 перешёл на xfce и там и остаюсь.
Раз чипы толтко что стали способны это делать, значит это что-то тяжёлое, значит, оно расходует батарею просто так. Мы называли это свистелками. Кому-то нравится, конечно же, но у меня вызывало бы тревожность.
А что собственно плохого в каверах? Разве каверы делаются с той логикой, которую вы описали?
Если человек чувствует в себе желание творить, он будет творить, а если не чувствует, а лишь пытается повторить чужой успех на чужих песнях — это это голая коммерция. У поп-групп коммерция хотя бы перемешана с творчеством.
Я не против того, чтобы учиться у фирмовых групп, но я не понимаю, зачем строить свой репертуар только из чужих песен. Есть даже группы, которые 40 лет на сцене, а ничего своего не играют. Неужели у них нет ни одного способного написать песню, у кого есть, что сказать людям, выразить себя?
По сути всё делается проще:
блур уменьшенной текстурки фона ui элемента
нормал мапа бокс элемента - единственная, заранее заготовленная маленькая текстура, которая применяется ко всем ui элементам
типа такой
итоговый пиксель формируется смещением блура по нормал мапе
Такое должно работать не сильно медленнее старого размытия элементов интерфейса
Очень интересно. Надо попробовать! Спасибо
Тут уже CSS-ом и SVG-шным displacement map-ом этот эффект отсимулировали. Довольно грубо из-за зума и особенностей дисплейсмента (смещает только на целое значение), но вполне рабочий вариант. Просто копипаст html кода из гиста перед тегом </body> на любую страницу – и вуаля.
https://gist.github.com/rebane2001/8ba35ad6e1b17c4cb5b2b2431d9e992c
Может, чем-то вам пригодится.
Технически это не normal map, это displacement map. Используются только 2 канала и в целом может отличаться, просто для вот таких форм похожа
Моделировать честное поведение стекла в реальном мире нет нужды, для таких вещей используется displacement map текстура, с предрасчитанными искажениями. Она же неплохо тянется и масштабируется, что даёт возможность использовать уменьшенные текстуры.
Таким образом основной эффект - комбинация размытия для задника и сдвигов пикселей для элементов.
Блики могут быть сделаны немного по разному, надо смотреть на разные примеры, но возможно они сделаны через тот же дисплей момент, для вашего примера это вероятно.
Аберрации могут немного усложнить этот эффект.
Самое тяжёлое тут на самом деле блюр, потому что дисплейсмент это одна выборка, а размытие - чем больше выборок, тем качественнее, может быть и 3*3 и 15*15
Самая большая проблема тут скорее организация - нет проблемы сделать такой эффект для 2х слоев, задник и элементы, но может быть проблемы с множественными перекрытиями. Впрочем современное железо кушает и не такое.
По сути ничего технически сложного тут нет со времён win vista, когда MS поддержали лёгкий бобр для всех поверхностей и полупрозрачные окна (не факт что они были первые, но тут это было массово)
Что действительно хорошо у Эппл, так это холистический подход - они обновили весь дизайн и для системы, и для приложений, создаёт ощущение целостности. И у них есть много возможностей навязать целостный дизайн сторонним разработчикам. У большинства вендоров android с этим проблемы, да и зоопарк больше.
Поэтому мы конечно скоро увидим такие оболочки на android, но эффект будет не тот, конечно
блик это спекуляр мап - текстура (и центр вьюхи тоесть центра екрана смотрит внутрь тогда будут блики)) на скоко помню , я думаю в телефоне на рабочем столе нету смысла рендерить PBR), блюр в картинке не так сложен кстати как может казаться если в ios крутой чип то они могли уложиться векторкой и если отходить от случая счета векторкой на чипе в случае если он мощный, там могли быть какието статические переходные посчитанные данные, но именно посчитать блюр не накладно вроде, а ну вот спекуляр мап да это статик числа наверно
итого имеем 4 точки надо найти текущий центр(а не тот который уехал вниз/вверх) и ситуация что то что в вьюхе плывёт вниз вверх а центр остаётся, операция не нагрузная вроде, потомучто размытие будет по замапленым сдвигам чтоли
Спекулар мап описывает интенсивность и цвет блика на разных частях материала, когда это уместно, например, когда текстура содержит много материалов - одежда не блестит, пуговицы блестят золотым, а металл ремней - синеватым. Или например ржавое железо на технике - некоторые части бликуют, а некоторые - нет.
Если материал у вас одинаковый (в данном случае - гладкое стекло), то смысла в экстра текстуре нет, мощность блика описывается целиком для всей поверхности.
При этом сами блики такого рода должны быть ориентированы от какого то источника, который обычно расположен со стороны наблюдателя.
Здесь же больше похоже, как будто это вторичный цвет от иконок под ними, отраженный краем.
Для такого технологии классических бликов не подойдут, нужны множественные источники света, нужно что-то типа radial cascades.
Но так как эффект простой, с большой вероятностью он сделан на тех же displacement map - с ними можно сделать эффект, когда искажение захватывает объекты за пределами иконки, это не проблема.
Конечно возможно там более сложный эффект, но на примерах этого не видно.
Я бы сказал, что всего что видно можно достичь только комбинацией этих двух эффектов - смещение и размытие.
Остальное - лишь аккуратный и правильный дизайн.
Еще крутая фишка там - плавное перетекание из одной формы в другую.
Такое можно сделать через distance field или маски, и эти эффекты довольно сильно замороченные.
Если Apple сделала их действительно легкими для любых элементов, то это действительно интересно.
Но возможно они просто заморочились в нескольких местах стандартными методами и чуда там нет - ваши элементы сделать с такой анимацией легко не получится.
На Хабре давно была статья про быстрое размытие на Android. Быстрее всего было сначала ужать картинку в 0.5x разрешения и ниже, а потом проходиться алгоритмом.
Насчет самого эффекта: плохое UX, поскольку цвета проявляются в ином от объекта месте или, как у вас на предпоследней картинке, площадь цвета преумножается. Если проще: больше цветов меняется при прокрутке, отвлекает. Это примерно как солнечный зайчик у вас в помещении по стене пролетит, потому что кто-то на улице машину открыл. У Apple этот эффект меньше проявляется, чем на простом шейдере, но он есть.
Я прочёл десятки комментариев о том, что подобное уже было в прошивках китайских смартфонов, таких как Сяоми или чё там ещё у Китая.
Всю эту ерунду пишут люди не заставшие (или позабывшие) Apple Aqua, который и принёс в мир UI всю эту "стеклянную" моду. А было это 25 лет назад.
К подобным "красивостям" привыкаешь за пару дней, зато сливается так, что усложняет чтение текста, а как выглядит панель quick settings поверх рабочего стола с иконками это вообще шик, непонятно где иконка приложения, а где кнопка wi-fi. Да, видно, но задача дизайна быть как можно более читаемым и понятным, с этим он справляется плохо. Плюс размытие неплохо отнимает процессорное время. Я понимаю, что его некуда девать в айфоне, но всё же, батареи тоже не бесконечные, по моему это растрата зазря.
Отличный пример убогого блевотного дизайна, который вместо читаемости и удобства даёт юзеру прозрачность и какой-то всратый блюр.
Какие причины пытаться повторить это убожество, если ты не сумасшедший?
Всё это вкусновщина и субъективщина. Мне, например, понравился такой эффект, поэтому я решил попытаться его воссоздать.
Проблема с читабельностью на текущем этапе моей реализации очевидна, но у меня уже есть идеи что с этим можно сделать. Кроме того, у Apple с этим всё не так плохо. Стоит признать, что их "цифровое стекло" более продуманное, нежели простенький AGSL шейжер, написанный "на коленке".
Ну и переходя ко второй части вопроса, если у меня есть причины, значит я - сумашедший и мой ответ вас не устроит)
Прикол. Я задал примерно этот же вопрос, но без экспрессии, люди оценили минусами, а тут — плюсами.
Зафиксировал.
А может, для начала, стоит сделать так чтобы система то тут, то там не лагала и не глючила, а уже потом вся эта мишура? Вычислительные ресурсы тратятся на рюшечки...
а на что же их ещё тратить?))
p.s. вначале сделал свой вариант просто в html ссылка на html
p.s.s затем нашёл вариант более красивый так же делюсь ссылкой
сам эффект красивый, но у эпл как всегда ум за разум заходит - красивости много а пользоваться сложно, отвлекает и непонятно зачем... но красиво
Повторяю стекломорфизм в Android на AGSL шейдерах (лучше бы я этого не делал)