Однажды в своем PvP-шутере мы за один день потеряли 30% от 60 тысяч одновременного онлайна. Это был 2018-й, в тот день на iOS вышел Fortnite. И хотя хайп был уже около года, а PUBG регулярно бил рекорды, без королевской битвы нам жилось вполне спокойно. Но тут стало очевидно, что батлрояль нельзя игнорировать, игрокам он нравится и нужно разрабатывать свой.
Рубрика «графика» - 3
Как за день потерять 30% онлайна и за два месяца сделать батлрояль
2021-06-22 в 15:31, admin, рубрики: lod, pvp, unity, батлрояль, Блог компании Lightmap, геймдев, геймдизайн, графика, Дизайн игр, мешбейкер, Работа с 3D-графикой, разработка игр, создание картыОптимизация веб-графики в 2021 году
2021-06-20 в 14:05, admin, рубрики: ruvds_перевод, Блог компании RUVDS.com, графика, изображение, обработка, обработка изображений, оптимизация графики, разработка, Разработка веб-сайтовИзображения, используемые на веб-страницах, привлекают пользователей, пользователи довольно-таки охотно щёлкают по ним мышью. Изображения делают веб-страницы лучше во всём кроме скорости работы страниц. Изображения — это огромные куски байтов, которые обычно являются теми частями сайтов, которые загружаются медленнее всего. В этом материале я собрал всё, что нужно знать в 2021 году об улучшении скорости работы веб-страниц через оптимизацию работы с изображениями.
Изображения обычно имеют большие размеры. Даже очень большие. В большинстве случаев CSS- и JavaScript-ресурсы, необходимые для обеспечения работоспособности страниц — это мелочь в сравнении с тем объёмом данных, который нужно передать по сети для загрузки изображений, используемых на страницах. «Медленные» изображения могут повредить показателям Core Web Vitals сайта, могут оказать воздействие на SEO и потребовать дополнительных затрат на трафик. Изображения — это обычно тот самый ресурс сайта, который оказывает решающее воздействие на показатель Largest Contentful Paint (LCP) и на задержки загрузки сайта. Они способны увеличить показатель Cumulative Layout Shift (CLS). Если вы не знакомы с этими показателями производительности сайтов — почитайте о них в Definitive Guide to Measuring Web Performance.
Здесь мы поговорим о подборе наиболее подходящего формата изображений, об оптимизации их размеров в пикселях и качества, а так же о встраивании изображений в веб-страницы и о ленивой загрузке изображений.
Читать полностью »
Nuke Thunder: математика и оптимизация
2021-05-19 в 7:26, admin, рубрики: volumetric rendering, war thunder, атомный взрыв, Блог компании Gaijin Entertainment, графика, Дизайн игр, Игры и игровые приставки, Программирование, шейдеры, эффектыОбъемная задача
В обновлении «Новая сила» в War Thunder у самых результативных игроков в бою появилась возможность использовать атомное оружие. И появилась чертовски интересная задача создания визуального эффекта атомной бомбардировки.
Исходя из существующих в 40-х и 50-х годах калибров советского и американского тактического атомного вооружения, мощность взрыва была выбрана на уровне 30-40 килотонн (бомбы Mark 4 и РДС-2Читать полностью »
Шаблон удостоверяющей печати, когда нужно правильно и не как у всех
2021-05-14 в 17:40, admin, рубрики: illustrator, вектор, графика, дизайн, печать, Работа с векторной графикой, шаблонЭто рассказ о том, как, имея лишь небольшой навык работы в графическом редакторе и желание этим заняться, я начал разработку шаблона удостоверяющей печати, о проблемах, с которыми довелось встретиться, их преодолении, и о том, чем всё, в итоге, закончилось.
Памятка по работе с Canvas API
2020-05-10 в 9:12, admin, рубрики: canvas, canvas api, graphics, javascript, visualization, визуализация, графика, Программирование, разработка, Разработка веб-сайтов, холст
Доброго времени суток, друзья!
Данная статья представляет собой небольшую подборку примеров работы с Canvas API, к которой удобно обращаться при необходимости вспомнить изученный материал.
Это не руководство по работе с холстом, а лишь демонстрация некоторых из его основных инструментов.
Для меня это также своего рода промежуточный итог в изучении холста.
Код разбит на отдельные блоки-песочницы, которые для удобства чтения помещены под «кат».
Парочка важных моментов.
Ширину и высоту холста лучше определять с помощью атрибутов:
<canvas width="300" height="300"></canvas>
Если мы хотим, чтобы холстом была вся область просмотра, то делаем следующее:
const width = canvas.width = innerWidth
const height = canvas.height = innerHeight
Холст и двумерный контекст рисования я определяю следующим образом:
const canvas = document.querySelector('canvas')
// не путать с объектом jQuery
const $ = canvas.getContext('2d')
Довольно слов.
Читать полностью »
Простой подход к работе с отзывчивыми изображениями
2020-05-05 в 13:16, admin, рубрики: Блог компании RUVDS.com, графика, обработка изображений, разработка, Разработка веб-сайтовСпецификация по отзывчивым изображениям — это фантастический документ, в котором описано множество вариантов использования таких изображений. Но опыт подсказывает мне, что чаще всего при работе с ними нужно знать лишь о том, как отдавать клиенту копии одного и того же изображения разного размера, выбирая их в зависимости от ширины области просмотра страницы. Мы называем это «переключением разрешения». Для решения этой задачи можно воспользоваться атрибутами srcset
и sizes
.
Вывод отзывчивых изображений предусматривает применение достаточно сложной логики. Сюда, кроме прочего, входит определение того, изображение какого размера будет выведено, а также выяснение того, работает ли пользователь с экраном высокого разрешения. К счастью, браузеры лучше, чем люди, умеют определять то, какие именно изображения лучше всего подходят каждому конкретному пользователю. Всё, что нам нужно — это дать им некоторые подсказки. Атрибут srcset
даёт браузеру список графических ресурсов, из которых он может выбирать наиболее подходящее изображение. Атрибут sizes
позволяет сообщить браузеру о том, изображение какого размера нужно показать в том или ином случае.
И, кстати, пользуясь отзывчивыми изображениями можно не беспокоиться о браузерной поддержке этой технологии. Интересующие нас атрибуты пользуются прекрасной поддержкой браузеров. И, кроме того, в нашем распоряжении имеется резервный механизм, предназначенный для старых браузеров вроде IE11.
Читать полностью »
Теория цвета, контраст
2020-03-30 в 8:32, admin, рубрики: арт, графика, графический дизайн, Иоханнес Иттен, Иттен, колористика, разработка игрМногие говорят, что цвет — это чисто субъективная вещь и в ней нет каких то правил или принципов. На самом же деле, как и в любой науке, здесь есть место и теории. Цвет помогает дополнить тот смысл и идею, которые вы хотите вложить в свою работу, и правильное его использование помогает сделать ваш продукт более заметным и профессионально выглядящим.
Многие исследователи занимались вопросами цвета, и одним из самых заметных, несомненно, был Иоханнес Иттен, автор книги «Искусство цвета». В своей работе автор рассматривает множество аспектов колористики: психологическое воздействие цвета, «вес» каждого оттенка, сочетание цвета и формы и многое другое.
Оптимизация загрузки изображений
2020-01-04 в 10:43, admin, рубрики: javascript, графика, Клиентская оптимизация, обработка изображений, оптимизация изображений, разработкаПривет! Представляю вашему вниманию перевод статьи «How to optimize image loading on your website».
Если на сайте много красивых изображений, то это здорово, но они могут значительно ухудшить время загрузки и как результат — пострадает SEO, а многие пользователи будут закрывать сайт еще до того, как он загрузится. Нередко бывает, что несколько мегабайт изображений загружаются просто, чтобы показать слайдер на главной странице.
Представьте, что вы заходите на такой сайт через медленный мобильный интернет, это может занять очень много времени и большинство пользователей в такой ситуации просто закроют ваш сайт еще до его загрузки. Хороший способ протестировать это — воспользоваться возможностью ограничить скорость интернета через Chrome Devtools.
Проблема
Проблема в том, что часто бывает так, что сам контент уже загружен, а изображения все еще загружаются. В итоге пользователь может увидеть пустое пространство там, где изображения загружаются медленно. Это явно не то, чего вы хотели бы.
Читать полностью »
5 причин, почему вы должны прекратить использовать System.Drawing в ASP.NET
2019-12-27 в 16:03, admin, рубрики: .net, ASP.NET, System.Drawing, графика, обработка изображений, перевод, ПрограммированиеПривет! Представляю вашему вниманию перевод статьи «5 Reasons You Should Stop Using System.Drawing from ASP.NET».
Ну что ж, они таки сделали это. Команда corefx в конце концов согласилась на многочисленные просьбы и включила System.Drawing в .NET Core. Читать полностью »
Как работает видеокодек. Часть 1. Основы
2019-12-23 в 6:04, admin, рубрики: edisonsoftware, Алгоритмы, Блог компании Edison, видео, видеокодек, визуализация данных, графика, кодек, Программирование, Учебный процесс в ITВторая часть: Принципы работы видеокодека
Любое растровое изображение можно представить в виде двумерной матрицы. Когда речь заходит о цветах, идею можно развить, рассматривая изображение в виде трехмерной матрицы, в которой дополнительные измерения используются для хранения данных по каждому из цветов.
Если рассматривать итоговый цвет как комбинацию т.н. основных цветов (красного, зеленого и синего), в нашей трёхмерной матрице определяем три плоскости: первая для красного цвета, вторая для зеленого и последняя для синего.
Будем называть каждую точку в этой матрице пикселем (элементом изображения). Каждый пиксель содержит информацию об интенсивности (обычно в виде числового значение) каждого цвета. Например, красный пиксель означает, что в нём 0 зеленого цвета, 0 синего и максимум красного. Пиксель розового цвета может быть сформирован с помощью комбинации трех цветов. Используя числовой диапазон от 0 до 255, розовый пиксель определяется как Красный = 255, Зелёный = 192 и Синий = 203.Читать полностью »