Рендер

С этим тегом используют

3D 3D моделирование Blender Арт Компьютерная графика 3D графика 3ds Max Все

4 месяца назад

Мой ламповый 2009⁠⁠

Поскольку ачивка сама себя не сделает, напишу про свой ламповый 2009 год.
Как раз вернулся из армии, и сразу-же первая мысль, зайдя в свою трёшку: Млин, а чего всё такое маленькое=) Потолки низенькие, коридорчики коротенькие, комнатки крохотные=)
Подыскивал работу. Поскольку на завод идти не хотелось, за неделю собрал портфолио на коленке и пошёл устраиваться промышленным дизайнером... на завод=) Завод по розливу напитков и пива=)
В отделе маркетинга, где меня пытались отфутболить, нехотя посмотрели моё портфолио, и спросили: а вы умеете работать в 3D? Мы готовим новую линию по розливу напитков и пива под стекло и нам нужен специалист, который сможет подготовить чертежи и 3D модели бутылок для формокомплекта. Конечно — ответил я им, гордо закатив глаза. На самом деле ни о каком 3D я тогда и понятия не имел. Так, открывал пару раз 3Ds Max, смотрел на него, как выпускник ПТУ на панель центра управления полётов, ловил когнитивный диссонанс и в ужасе закрывал=)
Но, кушать и одеваться хотелось, поэтому пришлось пойти на враньё=) Неделю, практически без отдыха и сна учил после работы полигональное моделирование (кстати спасибо экстремистскому юТьюбу), пытался в шейдинг, освещение и рендер. Чертить, благо худо-бедно умел.
Параллельно с этим меня закидывали всякой рутиной вроде дизайна этикеток, буклетами продукции, мерчём, оформлением фирменных точек по розливу, фотографированием объектов завода, видеороликами для региональных каналов и прочей мутью. Благо чуть позже пришла в отдел девочка-дизайнер, которая умела немного тупить в Корал и Фотошоп. Она взяла часть работы по этикеткам и фоткала завод. Привет Элла, если читаешь этот стыд=)
Спустя две недели предоставил на всеобщее голосование завода около 15 начальных эскизов бутылок. Устроили типа фокус-группу из 20 рандомных сотрудников завода, каждый из которых вставлял мне по моим-же эскизам своё «профессиональное» мнение=) Как-же у меня подгорало тогда, когда даже техничка завода имела право высказать всё, что думает о моих каракулях.
14 вариантов зарубили сразу, оставили 1 вариант в форме биты на доработку, который почему-то сильно понравился директору завода.
Позже начальник отдела (привет Ирина) скинула мне своё неземное ТЗ примерно следующего содержания: Подготовить прототип бутылки под разный объём (0,25, 0,33 и 0,5 л) так, чтобы бутылка эстетически подошла для различных напитков и пива, с полным обвесом: чертежи, 3D-модели и расчёты по объёмам.
Сказать, что я малость охерел, ничего не сказать. У меня в голове не укладывалось: ну как, как млять можно создать универсальную бутылку, чтобы она была похожа и на пивную и в то-же самое время в неё не стыдно было залить лимонад или морс и дать в руки ребёнку.
Поскольку в технической части я разбирался на тот момент слабо, начальник отдела отправила меня к главному инженеру завода.
Прихожу к нему, представляюсь: Здравствуйте. Я такой-то и такой-то. У нас задача сделать бутылку под нашу линию розлива под стекло в 3-х различных объёмах.
Он: Ну и?
Уточняю: Но какую толщину дна и стенок делать? Крышка какой должна быть? И может быть ещё есть какие-то пожелания и подводные камни с этой линией?
Говорит мне: А я нихера не знаю! Чего ты вообще ко мне пришёл, кто тебя отправил? Зайди вон в интернет свой и там посмотри ГОСТы=)
Дабы не томить уважаемых читателей, настало время картинок: Изрядно натрахавшись с ГОСТами, подготовил рендер 1 варианта бутылки, который изначально понравился директору:

Прошу строго не судить. Это была моя первая работа в 3D. Сейчас я понимаю, что это полный Егор Кринж=) Но не забывайте, на дворе был тёплый и ламповый 2009 год=)

Вариант с прозрачным стеклом:

Да сюда не то что пиво, водку залить не грешно=)

Сказать, что мои рендеры произвели на сотрудников завода некое впечатление, ничего не сказать=) На меня перестали смотреть как на ...овно=) Предыдущий дизайнер отдела (привет Настя) вообще сказала мне, что я просто гений и мои картинки просто потрясающие, как живые=) Мне мол срочно нужно уезжать в Европу, нечего мне такому молодому и перспективному зарывать свой талант на этом убогом заводе=)
А, ну и чертёж разумеется:

Ничего не предвещало беды. Все это барахло вместе с 3D-моделями под различные объёмы мы отправили в Германию, чтобы они изготовили нам формокомплекты для отлива под стекло.
Но... когда вся работа была уже сделана, выяснилось, что из-за такой формы бутылка получилась узкой и из-за этого больно высокой, и просто физически не встанет на половину стеллажей супермаркетов города=)

Пробовали делать бутылку толще, чтобы прибрать высоту. Но всё тщетно, она превращалась в итоге в коническую колбу из кабинета химии=)
Через 2 дня начальник отдела торжественно заносит в кабинет бутылку из под Кроненбург 1664 и говорит: сделай ещё вот такую, 1 в 1=)
Ну, сделал, чё. Благо в 3D уже немного научился=)) и за пару рабочих дней родилось вот это:

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

Послесловие: Эта история, увы, имеет печальный финал. Позже ко мне подошел начальник отдела и сказала: У нас по штату положен только 1 дизайнер и завод будет вынужден выбирать между тобой и Эллой. Ну, меня это конечно немного расстроило и я решил включить Д'артаньяна. Сказал ей мол, что ещё мне с девчонками соревнований не хватало. Я просто видел, как она держалась за ту работу и предложил такой расклад: Вы оставляете Эллу, а я ухожу искать новое место работы, мужик как никак, не пропаду. На что она мне ответила: Знаешь, этот выбор чистая формальность и тебя всё равно бы выбрал завод, и если бы ты ушёл прямо сейчас, они бы всё равно попросили Эллу на выход, потому как она умела только качать готовые клипарты и переделывать их в Корале, всё.
Ну, работа мне тоже была нужна и раз такой расклад, я остался. Эллу тогда попросили, я помню она тогда плакала, было очень грустно. Я чувствовал себя виноватым и в то-же самое время понимал, что её всё равно бы уволили.
Где-то через пол года ушёл в декрет наш менеджер (привет Наташа), второго уволили следом. Не пощадили и нашего начальника отдела. Её тоже попросили, кажется даже был небольшой скандал. Остался в отделе я и какой-то новенький менеджер. Я просто охерел, собрал манатки и написал заявление об увольнении. Не стал ждать, когда и меня попросят. Меня конечно пара человек с коммерческого отдела пытались отговорить, но я уже привык к тем людям со старой команды и ещё непонятно, какими бы людьми они укомплектовали тот отдел. К тому-же меня дико бесило ходить и фоткать еще объекты завода для каких-то там отчётов — я до сих пор не понимаю, какое это отношение вообще имеет к промышленному дизайну и дизайну в общем. Для этого есть прекрасная служба безопасности как по мне. В общем ушёл даже не колеблясь.
Вот таким был мой тёплый и ламповый 2009=) Потом я сделал довольно таки хорошую карьеру в рекламной сфере, позже работал в США, потом снова вернулся в Россию, но это уже история совсем другого поста=)
Всем спасибо за внимание и за ваше терпение. И поскольку задание само себя не сделает, кому-то пришлось читать эту простынь, всем пис=)

Показать полностью 5

[моё] 15 лет назад Промышленный дизайн Чертеж Завод Бутылка 3D моделирование Рендер Пивоварня Длиннопост Мат Работа

Proglib

4 месяца назад

Серия Итоги недели в мире фронтенда и обзоры сервисов

Итоги недели в мире фронтенда и обзоры новых сервисов: Как выбрать стратегию рендеринга⁠⁠

☕ 5 способов создания DOM-элементов из HTML-строк методами JavaScript

Создание DOM-элементов из строк обеспечивает:

Динамическое создание контента – можно добавлять новые элементы на страницу без перезагрузки.
Гибкость – можно легко генерировать HTML на основе данных, полученных от пользователя или с сервера.
Шаблонизацию – поскольку упрощает создание повторяющихся структур HTML.
Управление интерфейсом – помогает создавать интерактивные элементы, которые реагируют на действия пользователя.

Почти все современные JavaScript-фреймворки и библиотеки предоставляют удобные инструменты для создания DOM-элементов из HTML-строк – это одна из основных задач, которую они решают. Если же нужно обойтись возможностями ванильного JavaScript, то это можно сделать несколькими разными способами.

innerHTML

Это самый известный метод: он позволяет вставить строку HTML внутрь атрибута innerHTML контейнера и затем получить доступ к созданному узлу DOM. Однако он может обрабатывать только допустимые узлы HTML – к примеру, попытка вставить элемент <tr> в <div> приведет к тому, что узел не будет создан. Кроме того, этот метод не выполняет скрипты в HTML-строках, что делает его безопасным при работе с непроверенным содержимым.

innerHTML + template

Использование тега <template> снимает ограничения на содержимое – он может содержать любую HTML-структуру, включая элементы, связанные с таблицами – <tr> и <td>.

insertAdjacentHTML

Как и innerHTML, этот метод обрабатывает только допустимые HTML-узлы и не выполняет скрипты.

DOMParser

Этот метод работает медленнее остальных, поскольку он разбирает строку, создавая полный HTML-документ, и только потом извлекает узел из документа. Он также может обрабатывать только допустимые узлы HTML и не выполняет скрипты.

Range.createContextualFragment

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

🎓☕ Подтянуть свои знания по Java вы можете на нашем телеграм-канале «Библиотека Java для собеса»

🦮 Интерактивные гайды

Гайд по SVG

SVG-графика предоставляет нам стандартизированный способ создания изображений и иконок, которые можно отображать в любом размере без потери качества изображения. Но разобраться в методах SVG не так-то просто. На помощь придет интерактивный справочник SSSVG.

SSSVG поможет быстро понять принцип работы всех основных атрибутов

К слову, возможности SVG простираются за пределы создания векторных картинок и лого: энтузиасты умудрились сделать «Тетрис» в виде одного SVG-файла.

Этот «Тетрис» сделан полностью на SVG

Гайд по :has() в CSS

Псевдокласс :has() открывает новые возможности для творческих экспериментов в CSS, позволяя создавать сложные и интерактивные дизайны без использования JavaScript. Это первый родительский селектор, позволяющий стилизовать элемент в зависимости от его содержимого. Все невероятные возможности :has() продемонстрированы в интерактивном гайде CSS :has() Interactive Guide.

В гайде подробно разобраны десятки примеров использования :has()

🐘🧩 Интересные задачи по PHP для практики можно найти на нашем телеграм-канале «Библиотека задач по PHP»

🪚 Инструменты

Plasmic – опенсорсный визуальный конструктор для создания сайтов и веб-приложений на React со множеством функций:

Можно интегрировать с существующими React-проектами.
Можно использовать как CMS.
Позволяет подключать разные источники данных и бэкенд-сервисы.
Совместим с Next.js и Gatsby.
Поддерживает оптимизацию производительности, включая статическую генерацию сайтов и оптимизацию изображений.

article-extractor – эта библиотека Node.js извлекает текст статей, метаданные и ссылки на изображения по URL.

Протестировать article-extractor можно на демо-сайте

Turndown – Node.js-библиотека для конвертирования HTML в Markdown. Отлично работает в связке с предыдущим инструментом.

article-extractor + turndown подготовят контент для LLM

15 полезных расширений VS Code для фронтендера

Auto Rename Tag – при переименовании HTML-тега автоматически обновляет парный тег.
Code Spell Checker – находит опечатки в именах переменных и других идентификаторах.
DotEnv – добавляет цветовое оформление и улучшает читаемость файлов с переменными окружения.
Docker – добавляет вкладку для удобной работы с контейнерами, если вы используете Docker.
ESLint – выявляет проблемы в коде (нарушения форматирования или потенциальные ошибки) на лету.
Figma – позволяет встраивать и просматривать файлы дизайна Figma прямо в VS Code.
GitHub Copilot – предлагает AI-генерируемые подсказки во время набора кода.
Copilot Chat – предоставляет окно чата в стиле ChatGPT прямо в редакторе.
GraphQL – набор расширений, упрощающих работу с GraphQL.
Import Cost – показывает размер импортируемых пакетов, помогая выявить потенциальное раздувание кода.
Live Server – запускает локальный сервер с автоматической перезагрузкой, что удобно для предварительного просмотра изменений.
Live Share – позволяет программировать в команде с другими разработчиками, работая в одном редакторе в реальном времени.
Markdown Preview Enhanced – предоставляет живой предпросмотр Markdown-файлов во время редактирования.
Notes – удобный блокнот для хранения заметок по проекту, инструкций по настройке и т. д.
Hinty – предоставляет динамические подсказки в реальном времени. Помогает избегать повторения распространенных ошибок и соблюдать стандарты написания кода в команде.

🐍🎓 Подтянуть свои знания по Python вы можете на нашем телеграм-канале «Библиотека Python для собеса»

⚛️ Как выбрать оптимальную стратегию рендеринга

Рендеринг – это процесс превращения кода в контент. За годы развития интернета эта технология прошла долгий путь – от формирования простейших HTML-страниц на стороне сервера до динамического обновления интерактивных приложений без перезагрузки. Сейчас в ходу несколько методов рендеринга:

Генерация статических сайтов (предварительно генерирует HTML-страницы во время сборки приложения).
Генерация на стороне сервера (генерирует полный HTML для страницы при каждом запросе).
Генерация на стороне клиента (использует JavaScript для рендеринга контента в браузере пользователя).
Инкрементальная статическая регенерация (позволяет обновлять отдельные страницы после сборки сайта).
Частичный пререндеринг (экспериментальный подход, который стремится автоматически оптимизировать стратегии рендеринга).

Эти методы по-разному подходят к оптимизации работы приложения, SEO и пользовательского опыта. Их можно комбинировать – это позволяет по максимуму использовать сильные стороны, нивелировать недостатки и обеспечить оптимальный баланс производительности, свежести данных и интерактивности. Разработчики Vercel (эта компания создала Next.js) написали подробную статью о преимуществах и недостатках каждого подхода и о том, как их лучше комбинировать.

Генератор статических сайтов (SSG)

Идеально подходит для страниц с редко меняющимся контентом, макетов сайтов, документации и лендингов, для которых важна максимальная скорость загрузки.

Преимущества:

Самая быстрая загрузка страниц.
Отличные показатели SEO.
Самая низкая нагрузка на сервер.
Низкие затраты на инфраструктуру.

Недостатки:

Увеличенное время сборки для сайтов с большим количеством страниц.
Обновление контента требует новой сборки и развертывания.

Рендеринг на стороне сервера (SSR)

Идеально подходит для персонализированных дашбордов, лент соцсетей и визуализации данных в реальном времени.

Преимущества:

Всегда отдает свежий, актуальный контент.
Показатели SEO и времени загрузки данных лучше, чем при рендеринге на стороне клиента.

Недостатки:

Загрузка происходит медленнее, чем при использовании SSG или ISR.
Показатель времени до первого байта (TTFB) может быть неудовлетворительным.
Потребляет больше серверных ресурсов.

Инкрементальная статическая регенерация (ISR)

Подходит для случаев, когда сборка с SSG занимает слишком много времени. Используется для страниц продуктов в e-commerce, новостных порталов и крупных контентных сайтов.

Преимущества:

Сохраняет быструю загрузку страниц, как у SSG.
Позволяет обновлять контент по требованию без полной пересборки.
Эффективно масштабируется на большое количество страниц.
Может быть экономичнее, чем SSR, в некоторых случаях.

Недостаток:

Требует тщательного управления стратегиями инвалидации кэша.

Рендеринг на стороне клиента (CSR)

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

Преимущества:

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

Недостатки:

Начальная загрузка может быть медленнее из-за необходимости загрузки JavaScript-бандла.
Оптимизация Core Web Vitals может быть сложной.
Требует тщательного управления состоянием на клиенте.

Частичный пререндеринг (PPR)

PPR призван объединить преимущества других стратегий рендеринга и потенциально может стать стандартным подходом для веб-приложений в будущем.

Преимущества:

Мгновенная загрузка страницы (как у SSG).
Плавная потоковая передача динамического контента.
Улучшенная производительность с меньшими затратами на разработку.

Недостатки:

Все еще находится в стадии исследований и разработки.
Может потребовать рефакторинга кода для включения в существующий проект.

Выбор стратегии рендеринга

При выборе стратегии рендеринга нужно учитывать следующие факторы.

Как часто обновляется контент?

Статический контент лучше всего обрабатывать генератором статических сайтов.
Для вывода периодически обновляемого контента отлично подходит инкрементальная статическая регенерация.
Обновление контента в реальном времени требует серверного или клиентского рендеринга.

Для повышения производительности нужно стремиться к максимальному использованию SSG и ISR, прибегая к SSR только в случае необходимости получения абсолютно свежих данных.

Насколько важно продвижение страницы в поисковых системах?

Хотя Google может рендерить JavaScript на стороне клиента, ключевые показатели Core Web Vitals все еще сильно влияют на ранжирование.
Высоких показателей CWV легче добиться на статических и серверных страницах, чем на страницах с клиентской загрузкой внешних данных.

Насколько активно пользователь будет взаимодействовать со страницей?

Если страница в основном статическая с минимальным взаимодействием, используйте SSG или ISR с небольшим количеством клиентского JavaScript.
В противном случае может потребоваться SSR (с гидратацией на стороне клиента).

Каковы требования к скорости загрузки?

Для максимально быстрой начальной загрузки используйте SSG или ISR с редкой инвалидацией.
Чтобы сбалансировать свежесть данных и скорость, используйте ISR или SSR (для актуальных данных).
CSR может обеспечить данные в реальном времени, но часто за счет начальной загрузки.

Нужно ли персонализировать контент?

Если вам нужен персонализированный контент, скорее всего, потребуется SSR или CSR.
ISR может работать в случаях, когда можно кэшировать персонализированный контент, например, настройки веб-приложения.
SSG не позволяет персонализировать контент.

🔤 Больше полезных материалов вы найдете на нашем телеграм-канале «Азбука айтишника»

Автор рассылки: Наталья Кайда

Показать полностью 10 1