• Практика использования спецификации CSS Scroll Snap

    • Translation
    Часто ли у вас возникало желание воспользоваться какой-нибудь возможностью CSS, позволяющей, без лишних усилий, создать элемент-контейнер, поддерживающий прокрутку? CSS, что очень хорошо, даёт нам такую возможность. Я, когда только начинал заниматься фронтенд-разработкой, пользовался для создания прокручиваемых элементов JavaScript-плагинами. Но иногда нужно что-то такое, что позволяет создавать подобные элементы просто и быстро, без привлечения JavaScript. Сделать это можно, воспользовавшись спецификацией CSS Scroll Snap.



    Здесь я хочу раскрыть основы практического использования этой спецификации. Я сам только недавно разобрался с CSS Scroll Snap, поэтому рассказывать всё это буду, так сказать, «по горячим следам».
    Читать дальше →
    • +39
    • 5.9k
    • 6
  • Почему хабражители предпочитают велосипеды, вместо готовых решений? Или о systemd, part 0

    • Tutorial

    С Новым Годом Хабр!
    Первого января все нормальные люди занимаются прокрастинацией, уничтожением стратегического запаса оливье и прочими, не связанными с физической или интеллектуальной нагрузкой вещами. Вот и я планировал присоединиться к этой новогодней армии, но не тут-то было!

    Во всём виноват Хабр!
  • Systemd для продолжающих. Part 1 — Запуск юнитов по временным событиям

    • Tutorial

    Всем привет! В последнее время я вплотную занимаюсь исследованием возможностей systemd и решил поделиться результатом исследований с сообществом, в виде небольшого (или большого, как пойдёт ;-) цикла статей. Итак первым номером нашей программы будет запуск юнитов по различным событиям происходящим во время работы ОС. В качестве исследовательской платформы будет выступать Manjaro Linux c systemd v247.2. И... да. Некоторые события, вынудили меня написать внеочередную статью, которая «взлетела на вершину хит-парада», а опрос показал, что тема актуальна и вызывает интерес, так что погнали!

    Нырнуть в кроличью нору!
  • Пишем простой Path Tracer на старом добром GLSL

    • Tutorial

    На волне ажиотажа вокруг новых карточек от Nvidia с поддержкой RTX, я, сканируя хабр в поисках интересных статей, с удивлением обнаружил, что такая тема, как трассировка путей, здесь практически не освящена. "Так дело не пойдет" - сказал я и решил, что неплохо бы запилить что-нибудь небольшое из этой темы, да и так, чтобы другим полезно было. Тут как кстати API собственного движка нужно было протестировать, поэтому решил - запилю-ка я свой простенький path-tracer прямо во фрагментном шейдере. Что из этого вышло, думаю вы уже догадались по превью к этой статье

    Читать далее
  • Использование journalctl для просмотра и анализа логов: подробный гайд

    • Tutorial


    Journalctl — отличный инструмент для анализа логов, обычно один из первых с которым знакомятся начинающие администраторы linux систем. Встроенные возможности ротации, богатые возможности фильтрации и возможность просматривать логи всех systemd unit-сервисов одним инструментом очень удобны и заметно облегчают работу системным администраторам.

    Эта статья рассматривает основные возможности утилиты journalctl и различные варианты ее применения. С помощью journalctl можно просматривать логи системы, чтобы решить возникшие проблемы на рабочей станции или сервере использующие дистрибутив linux с демоном инициализации systemd, де-факто уже ставшим стандартом в современных Linux-системах, например: RHEL, CentOS, Fedora, Debian и многих других.

    Существует мнение, что systemd не так уж и хорош — он нагружает систему и это все еще предмет для споров на сегодняшний день, но нельзя отрицать, что он предоставляет прекрасный набор инструментов для управления системой и поиска проблем. Представьте, что вам приходится иметь дело с проблемным сервером, который даже не загружается — в таком случае можно загрузиться с live-дистрибутива, смонтировать системный раздел и просмотреть логи systemd, чтобы понять, в чем проблема.
    Читать дальше →
  • Новая технология, позволившая CD Projekt Red создать реалистичную речь персонажей Cyberpunk 2077

    • Translation

    Пиф Эдвардс: Меня зовут Пиф Эдвардс (Pif Edwards), я докторант Торонтского университета и сооснователь JALI Research. В этой презентации мы расскажем о том, как применили в Cyberpunk 2077 результаты своей статьи, опубликованной в 2016 году.

    Крис Ландрет: Привет, меня зовут Крис Ландрет (Chris Landreth), я аниматор и разработчик ПО, а также один из основателей JALI Research Inc.

    Матош Поплавски: Привет, меня зовут Матош Поплавски (Matosh Popławski), я ведущий технический директор по работе с персонажами в CD Project Red, приветствую вас в нашей презентации с SIGGraph.

    После завершения работы над Witcher 3 у нас уже была довольно неплохая система синхронизации движения губ (lipsync). Мы задались вопросом: как можно сделать её лучше, как повысить качество, не тратя сотни часов на создание анимаций? Было решено, что липсинк Cyberpunk 2077 должен быть лучше, чем в Witcher 3; также мы хотели добавить управляемую мышцами систему эмоций. Эта система должна использоваться во всём открытом мире игры и в каждом персонаже. Кроме того, нам требовалась поддержка нескольких языков, а конкретно десяти.
    Читать дальше →
    • +23
    • 8.8k
    • 8
  • Wi-Fi для мамы

    • Tutorial

    Постановка задачи


    Сделать Wi-Fi в 2+ комнатной квартире, при этом чтобы скорость в любой локации была не ниже 90Мбит/с на любом современном мобильном устройстве (IEEE 802.11ac).

    Предполагаем, что наша типовая квартира содержит типовой набор пользователей:

    1. Условный Просто пользователь (используем базовый ЯндексDNS)
    2. Условная Боящаяся интернета бабушка (ЯндексDNS, без мошеннических сайтов и вирусов)
    3. Условный Студент 5 курса, которому нужен Интернет без ограничений (выход в Интернет через VPN в Европу, DNS 8.8.8.8)
    4. Условный Школьник 7 класса, которому по административным причинам надо выключать Интернет в 21:00 час по будням и в 22:00 часа по выходным (используем ЯндексDNS «Семейный» и по расписанию выключаем/включаем SSID).


    Радио моделирование


    Начну с того, что как правило, если в квартире бетонные стены и количество комнат 2 и более, то одной точкой доступа Wi-Fi будет не обойтись, ведь 20 Мбит/с на диване у окна сегодня нас уже не устраивают, а это значит что минимальный уровень сигнала на клиенском устройстве долже быть не ниже -65дБ.

    Вот пример:
    Ставим одну точку доступа в прихожей, в 5 ГГц диапазоне зона покрытия до -65дБ выглядит так:

    image image
    Поэтому надо добавить еще как минимум 2 точки доступа, получаем следующее:

    image image
    image

    Так уже лучше, с количеством и расположением точек доступа определились.
    Читать дальше →
  • Почта, RSS и календарь — начинаем тестировать

      image

      Привет, Хабр!

      Сегодня у нас не совсем обычный день. Даже, скажем прямо, в какой-то степени знаменательный. После нескольких лет разработки мы готовы показать новые функции, которые многие из вас давно ждали. Причём, показать не по одной, а все сразу. Итак, встречаем: встроенный почтовый клиент, поддержка новостных лент RSS и календарь. Самим не верится, но это реальность. Новая реальность для браузера Vivaldi.
      Читать дальше →
    • Ретроспектива разработки интерфейса листа персонажа



      Близится 2021 год, а значит, минуло почти 4 года с момента, когда я присоединился к разработке Pathfinder:Kingmaker в качестве разработчика интерфейсов. За это время игра превратилась из маленького прототипа с минимальным функционалом в огромную, сложную систему. Игра пережила релиз, год активного багофикса и поддержки DLC, а также портирование на консоль. И теперь, когда разработку этого проекта можно считать завершенной, пришло время оглянуться и попробовать собрать ретроспективу того, как проектировались и создавались интерфейсы.


      Я решил начать с основного, на мой взгляд, интерфейса игры, с листа персонажа.
      Много текста и картинок
    • Краткий курс компьютерной графики: пишем упрощённый OpenGL своими руками, статья 1 из 6

      Содержание курса



      Улучшение кода






      Official translation (with a bit of polishing) is available here.




      Постановка задачи


      Цель этого цикла статей — показать, как работает OpenGL, написав его (сильно упрощённый!) клон самостоятельно. На удивление часто сталкиваюсь с людьми, которые не могут преодолеть первоначальный барьер обучения OpenGL/DirectX. Таким образом, я подготовил краткий цикл из шести лекций, после которого мои студенты выдают неплохие рендеры.

      Итак, задача ставится следующим образом: не используя никаких сторонних библиотек (особенно графических) получить примерно такие картинки:



      Внимание, это обучающий материал, который в целом повторит структуру библиотеки OpenGL. Это будет софтверный рендер, я не ставлю целью показать, как писать приложения под OpenGL. Я ставлю целью показать, как сам OpenGL устроен. По моему глубокому убеждению, без понимания этого написание эффективных приложений с использованием 3D библиотек невозможно.
      Читать дальше →
    • Трёхмерная графика с нуля. Часть 2: растеризация

      • Translation
      image


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

      К сожалению, эта простота имеет свою цену: низкую производительность. Несмотря на то, что существует множество способов оптимизации и параллелизации трассировщиков лучей, они всё равно остаются слишком затратными с точки зрения вычислений для выполнения в реальном времени; и хотя оборудование продолжает развиваться и становится быстрее с каждым годом, в некоторых областях применения необходимы красивые, но в сотни раз быстрее создаваемые изображения уже сегодня. Из всех этих областей применения самыми требовательными являются игры: мы ожидаем рендеринга отличной картинки с частотой не менее 60 кадров в секунду. Трассировщики лучей просто с этим не справятся.

      Тогда как это удаётся играм?

      Ответ заключается в использовании совершенно иного семейства алгоритмов, которое мы исследуем во второй части статьи. В отличие от трассировки лучей, которая получалась из простых геометрических моделей формирования изображений в человеческом глазе или в камере, сейчас мы будем начинать с другого конца — зададимся вопросом, что мы можем отрисовать на экране, и как отрисовать это как можно быстрее. В результате мы получим совершенно другие алгоритмы, которые создают примерно похожие результаты.
      Читать дальше →
      • +36
      • 32.5k
      • 2
    • Создание favicon для сайта 2020

      Что такое favicon и для чего он нужен?


      Favicon – это значок (иконка), который отображается во вкладке браузера, закладках, а также в сниппетах результатов поиска.

      image

      Favicon играет важную роль в веб-приложениях. Он может улучшить внешний вид сайта в выдаче, повышает узнаваемость вашего сайта, помогает пользователю быстро найти необходимую страницу в закладках и вкладках.

      Кроме того, пользователь может добавить страницу вашего сайта на главный экран телефона или сохранить как веб-приложение. В таком случае с помощью favicon можно быстро найти сайт среди большого количества других приложений.

      Какой формат использовать для favicon?


      Раньше в качестве основного формата использовали ICO. Особенность данного формата – мульти-размерность. Данный файл может хранить в себе несколько размеров иконки. На смену ICO пришел формат PNG. ICO все еще поддерживаемый, но большинство современных браузеров выбирают PNG формат иконки, который легче. Некоторые браузеры не могут выбрать правильный значок в файле ICO, что приводит к неправильному использования значка с низким разрешением.

      О каких платформах пойдет речь в этой статье?


      • Десктопные браузеры
      • Chrome на Android
      • Иконка закладки в iOS (PWA)
      • macOS
      • Windows

      Читать дальше →
    • Хранение данных. Или что такое NAS, SAN и прочие умные сокращения простыми словами

        TL;DR: Вводная статья с описанием разных вариантов хранения данных. Будут рассмотрены принципы, описаны преимущества и недостатки, а также предпочтительные варианты использования.


        Читать дальше →
      • Фрактальная шизофрения


          Нет, я не болен. По крайней мере так говорит голос в моей голове. Я наркоман. Вот уже более 15 лет я сижу на игле. Употребляю много, жёстко, до обморочного состояния. Докатился до того, что в последнее время не стесняюсь ни друзей, ни жены, ни детей… Двоих детей! Не люблю бадяженый, люблю чистый, без примесей. За годы перепробовал многое, но в последнее время остановился в поисках. Забавно осознавать, что от одного и того же получаешь одновременно и боль, и радость. Мне бы в лечебку, я даже хочу, я даже знаю в какую. Знаете такие, где продолжаешь употреблять, но под присмотром?

          Читать дальше →
        • Склеиваем несколько фотографий в одну длинную с помощью компьютерного зрения

            В предыдущих статьях был описан шеститочечный метод разворачивания этикеток и как мы тренировали нейронную сеть. В этой статье описано, как склеить фрагменты, сделанные из разных ракурсов, в одну длинную картинку.
            Читать дальше →
          • Как работает рендеринг 3D-игр: освещение и тени

            • Translation
            Реализация подавляющего большинства визуальных эффектов в современных играх зависит от продуманного использования освещения и теней. Без них игры были бы скучными и безжизненными. В четвёртой части анализа рендеринга 3D-игр мы сосредоточимся на том, что происходит в 3D-мире наряду с обработкой вершин и наложением текстур. Нам снова понадобится много математики, а также уверенного понимания основ оптики.

            Часть 1: обработка вершин

            Часть 2: растеризация и трассировка лучей

            Часть 3: текстурирование и фильтрация текстур

            Вспомним пройденное


            Ранее мы рассматривали ключевые аспекты перемещения и обработки объектов в сценах, их преобразования из трёхмерного пространства в плоскую сетку пикселей, а также способы наложения текстур на эти объекты. В течение многих лет такие операции составляли основную часть процесса рендеринга, и мы можем увидеть это, вернувшись в 1993 год и запустив Doom компании id Software.


            По современным стандартам использование света и тени в этой игре было очень примитивным: источники освещения не учитывались, каждой поверхности на основании её вершин давалось общее значение цвета или значение освещённости окружения. Все признаки теней создавались благодаря хитрому использованию текстур и выбору цвета окружения.

            Теней не было, потому что они не входили в задачу программистов: PC того времени представлял собой процессор на 66 МГц (то есть на 0,066 ГГц!), жёсткий диск на 40 МБ и 512-килобайтную графическую карту с минимальными 3D-возможностями. Перенесёмся на 23 вперёд: в знаменитой перезагрузке серии мы видим совершенно другую историю.


            Для рендеринга этого кадра использовалось множество технологий, он может похвастаться такими этапами, как screen space ambient occlusion, pre-pass depth mapping, фильтры размытия боке, операторы тональной коррекции, и так далее. Расчёт освещения и затенения каждой поверхности выполняется динамически: они постоянно изменяются в зависимости от условий окружающей среды и действий игрока.
            Читать дальше →
            • +27
            • 10.7k
            • 4
          • Маленькие секреты геймдизайнеров, заставляющие игрока ненавидеть вашу игру чуточку меньше

            • Translation
            Три года назад ведущий геймдизайнер ArenaNet Дженнифер Шойрле завела в Твиттере очень интересный тред на тему «отличных игровых механик, скрытых от глаз игрока с целью достижения определенного эмоционального эффекта, реакции или поведения», где любой геймдизайнер мог поделиться своими внутриигровыми «фишками».

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

            • В Hellblade предупреждение перед игрой было тщательно продумано, чтобы заставить игроков поверить, будто в игре срабатывает система permadeath в случае, если игрок умирает слишком часто, хотя на самом деле ее там нет.
            • Pacman может огибать углы более резко, чем это делают призраки, тем самым наделяя игрока небольшим преимуществом.
            • Во многих шутерах последние очки здоровья стоят больше всей остальной шкалы, чтобы усилить чувство «выживания на грани». С той же целью в System Shock последняя пуля нанесет урон в 4 раза более сильный, чем остальные.
            • И, напротив, Shadow of Mordor слегка увеличивает здоровье некоторых врагов, чтобы бои длились дольше.
            • В Bioshock и Devil May Cry, находясь за спиной игрока, противники замедляют свою атаку.
            • В Xcom, если промахнуться много раз подряд, игрок получит скрытый бонус для последующих выстрелов. Кроме того, если игроки остаются пассивными слишком долго, враги усиливают свою агрессивность.
            • Похоже, что в Heartstone есть pity timers ― таймеры жалости. Многие другие игры позорно использовали их в более ранние годы.
            • В Resident Evil 4 после слишком большого количества смертей заспавнится меньше врагов, чтобы дать игроку больше шансов пройти трудный для него эпизод.
            • В любой гоночной игре реализован адаптивный ИИ, чтобы сделать соревнование более жестким.

            Список можно продолжать и продолжать. Это настоящий кладезь подсказок от успешных геймдизайнеров.

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


            Читать дальше →
          • Новости из мира OpenStreetMap № 507 (31.03.2020-06.04.2020)

            • Translation

            lead picture


            The trend observed by Pascal Neis in the week of 16 March seems to have been broken. 1 | Pascal Neis map data OpenStreetMap contributors


            Картографирование


            • [1] Паскаль Нейс обратил внимание, что в последнее время снизилась ежедневная активность картографов в OSM. Однако у этого может быть несколько причин, как пандемия COVID-19 и появление у людей более важных дел, так и отсутствие уличных картоакций или уменьшение числа платных картографов. В Твиттере он опубликовал графики ежедневной активности картографов в OSM и статистику использования того или иного редактора OSM за последний месяц, а также некоторые «сырые» данные.
            Читать дальше →