Юра Артюх выпустил очень крутое видео как из модельки в блендере сделать 3D web конфигуратор всего в 81 строку кода. Must see!

И вроде я когда-то давно решил для себя не использовать r3f, это оверхед, а всё и так тормозит, но. Когда видишь этот dev experience, эту скорость разработки и эту лаконичность результата, соблазн очень велик. Как долго я бы пилил это на чистой трёхе или OGL? То то же.

И да, из описания репы:

Is it slower than raw threejs?

No. Rendering performance is up to threejs and the GPU. Components participate in the renderloop outside of React, without any additional overhead. React is otherwise very efficient in building and managing component-trees, it could potentially outperform manual/imperative apps at scale.

Такие вот дела. А видео стоит внимания 😉

#tutorial

С Новым Годом! Успехов и здоровья всем и скорейшего релиза WebGPU 😄

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

Чтобы знать в какую сторону работать полезно разбираться в бизнес стороне вопросов. Так что рекомендую свежайшее интервью с основательницей WeAR Studio:

https://youtu.be/7lpCIhUSRHk

Для меня было интересно в контексте WebAR, у них это самые дешёвые проекты в сравнении с VR решениями под всякие окулусы и мобильными приложениями на Unity. Думаю это связано с техническими ограничениями, сделать большой проект дополненной реальности в вебе не очень реально) Они продают такие проекты по 10к$.

Говорит маржа её бизнеса составляет 300%, а это очень, очень много. При этом есть стабильный поток проектов и они ставят их в очередь. Упоминает ещё интересный момент про слив брендами маркетинговых бюджетов в конце года, когда маркетологам надо потратить деньги и они готовы пускаться в авантюры. И ещё много всего другого. Думаю чтобы делать такую же маржу стоит посмотреть :)

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

#business

Скорее всего это сделано в Cinema4D, но кодом геометрию повторить вроде должно быть просто. Взять тор с треугольным сечением, разъединить где-то, повернуть один конец на 120 градусов и получим вот такую поверхность Мёбиуса. Можно реймарчингом, можно из треугольников. Ну а градиенты уже отдельно думать :)

#inspiration by pak

Если кто вдруг не знает, Юра Артюх сделал курс Слияние миров WebGL и HTML

In this course you will learn how to apply some stunning WebGL effects to the images you already have on your webpage. We will start from a beautiful but static HTML template. And spice it up with Three.js and WebGL.

До конца недели стоит 25€ вместо 100

Ссылочка

utm поставил чисто поржать с рекламщиков авардс, они не догадываются что у них есть такая кампания

В отличие от вчерашнего, сегодняшнее вдохновение гораздо сложнее повторить кодом. Хотя у меня есть вариант, да и симуляцию ткани я на днях написал (снова), адаптировать её под это будет непросто.

Ну а тем кто решится это повторить на старте поможет этот пример на threejs, нужно добавить туда трение, реакцию опоры и прилипание вместо ветра и сбалансировать это всё чтобы не КРОВЬ КИШКИ РАСПИ*****ИЛО (извиняюсь, накипело). Ну и лично мне метод Стёрмера — Верле не очень заходит, я наверное неправильно его готовлю, поэтому рекомендую тот код полностью переписать (ну или обратить внимание на раздел особенности в википедии).

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

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

#inspiration by mbsjq

Кому маловато постов о сайтах, а я про них в последнее время ничего не пишу — рекомендую подписаться на канал Валеры. Валера постоянно следит за дизайн движухой и всегда в курсе новых крутых решений. Он регулярно (в отличие от меня) собирает референсы у себя на канале, название которого иронично обманчиво:

Бездарные ссылки

А ещё он человек хороший 😉 Несколько раз давал мне идеи что такого визуально крутого сделать и очень помог мне пиаром на заре истории этого канала, когда я искал способы продвижения прекрасного в массы. Обнял)

Eye candy 😍

https://stuballinger.art/

#inspiration

Брейкдаун дизайна красивенького сайта с трёхмеркой https://solutions.centogene.com/
https://jesper-vos.medium.com/centogene-solutions-c2e5ada41eaf

На днях, когда пересматривал подборку списков, заметил что у Kenta Toshikura обновился сайт. Очень крутая задумка, крутое исполнение 💪

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

Ну и само собой он получил SOTD & Dev award. Как и предыдущая версия этого же сайта :)

#reference

Fun fact. Если скормить рендереру MSDF текста неправильный конфиг, выходит непонятно что но красивенько :) Пользы правда от этого ноль 🤷‍♂️

Ну и раз речь зашла о рисовании текста в WebGL — предлагаю почитать статью Techniques for Rendering Text with WebGL. Внутри 5 техник вывода текста с примерами и описанием их достоинств и недостатков. Хотя выбор в основном сводится либо к первому методу, либо к последнему.

После прочтения предыдущей статьи можно дополнительно ознакомиться с Kinetic Typography with Three.js. Теперь у вас будет возможность вдохнуть жизнь в любую, даже самую загрустившую надпись 😉

Ну а дальше огромный простор для творчества, достаточно поискать на ютубе kinetic typography. Пусть даже это всё вроде и вышло из трендов, знания и умения — сила :)

#tutorial

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

CineShader, Shadertoy

Большое спасибо Ивану и Павлу за помощь в реализации 🤝

Кстати, Иван — основатель генклуба, сообщества про генеративный арт. Там собралось много крутых ребят, которые постоянно обмениваются своими наработками и знаниями. Рекомендую к ним присоединиться :)

#my

Подборка вообще ВСЕГО что есть в генеративном риалтайме, спасибо за наводку @gordee_va https://www.notion.so/Creative-Code-algorithms-techniques-c5550ef2f7574126bdc77b09ed76651b

А вот список ещё покруче 😉

https://github.com/jasonwebb/morphogenesis-resources

#reference #tutorial #article

У кого какие идеи как это можно реализовать в браузере?)

#inspiraton by Gleb Kuznetsov

У нас очень кайфовое сообщество, вариантов накидали массу 😊

Самый надёжный и очевидный вариант предложил @vovazhuruk — использовать секвенции пререндеренных картинок
Плюсы: просто, красиво, апрувнуто Юрой Артюхом :D
Минусы: загрузка картинок, минимальный интерактив, для изменений нужно всё перерендеривать

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

@NobodyRoo предложил сделать cubemaps для кристалла и внутренних отражений, и отдельно запечь в текстурки внутренние грани. Не очень понял как это точно должно работать, но логика есть и по идее должно смотреться хорошо
Плюсы: не сложно, красиво, производительно
Минусы: не точная физическая отрисовка, может ничего не получиться

@karpik предложил использовать дары природы и почитать туториал с кодропс
Плюсы: готовое решение, не сложно, интерактивно, легко обновлять мэш
Минусы: не учитывается путь луча внутри кристалла, нет внутренних отражений, не вау

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

Есть ещё такая вот работа и вроде должно получаться с аппроксимациями, но публичной реализации я не видел
https://www.researchgate.net/publication/220506766_Approximate_Ray-Tracing_on_the_GPU_with_Distance_Impostors
Может на самом деле это и сделано в предыдущем варианте, надо разбираться

@Xander_nome предложил использовать Пекс, хотя изначально такой способ реализовали Lusion на трёхе
По сути это развитие того что было на codrops
Плюсы: можно менять свойства материала, вроде учитывает глубину (но это не точно), интерактивно, производительно, красиво
Минусы: нет внутренних отражений, для кристаллов не пойдёт

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

Ну и @maksim_zov предложил сделать это на WebGL, за что ему спасибо :D Он крутой дизайнер если что

Кто не знал, для подобных обсуждений есть чат @creativecoders, вступайте 😊

#reference #tutorial

Как создавался сайт Polly Kole

Вчера @NobodyRoo, сооснователь и арт-директор fluc28.io, рассказал в чате как создавался сайт Polly Kole. Весь процесс от идеи до собственно реализации через поиск референсов, стиля, создание концептов и преодоление сложностей творческого процесса. Очень крутое чтиво:

https://yangx.top/creativecoders/1660

Ну а кто не понимает о чём речь — просто зайдите на http://pollykole.com/

И вступайте в чат @creativecoders :)

#reference