This media is not supported in your browser
VIEW IN TELEGRAM
Кажется, это тот самый случай, когда эффекты используются только ради эффектов. Элементарная сборка подошвы при скролле несёт в себе больше смысла чем большая часть эффектов на WebGL. Да, это реализация концепта, да, это хорошие решения в его рамках, но по мне это всё как-то не секси.
А макет крутой)
https://www.awwwards.com/case-study-cobo.html
#article
А макет крутой)
https://www.awwwards.com/case-study-cobo.html
#article
This media is not supported in your browser
VIEW IN TELEGRAM
Как создавался https://fiomet.com/
По мне это очень крутой кейс и статья раскрывает достаточно подробностей.
Рекомендую прочитать:
https://medium.com/active-theory/fiomet-case-study-9a0180268423
#article #reference
По мне это очень крутой кейс и статья раскрывает достаточно подробностей.
Рекомендую прочитать:
https://medium.com/active-theory/fiomet-case-study-9a0180268423
#article #reference
Рубрика почитать на выходных:
Исследование читаемости шрифтов
Засечки вс гротески. Если вкратце – по читаемости шрифты без засечек чуть-чуть лучше, шрифты с засечками вызывают чуть-чуть более выраженный эмоциональный отклик.
https://habr.com/ru/company/tinkoff/blog/498878/
#article
Исследование читаемости шрифтов
Засечки вс гротески. Если вкратце – по читаемости шрифты без засечек чуть-чуть лучше, шрифты с засечками вызывают чуть-чуть более выраженный эмоциональный отклик.
https://habr.com/ru/company/tinkoff/blog/498878/
#article
Создание интерфейса для игры
Просто статья о процессе создания интерфейса, nothing special.
https://habr.com/ru/post/498600/
К ней прилагаются референсы игровых магазинов и визуального стиля из игр:
https://www.figma.com/file/zNQ09f97jPyl4bFkZtb1tS/GUI_Process_Tutorial
https://www.figma.com/file/WOLAP66uHyUBRj2tnuKY15/GUI_VISUAL_STYLE_REFS (тут бонусные скрины из SC2)
#article #reference
Просто статья о процессе создания интерфейса, nothing special.
https://habr.com/ru/post/498600/
К ней прилагаются референсы игровых магазинов и визуального стиля из игр:
https://www.figma.com/file/zNQ09f97jPyl4bFkZtb1tS/GUI_Process_Tutorial
https://www.figma.com/file/WOLAP66uHyUBRj2tnuKY15/GUI_VISUAL_STYLE_REFS (тут бонусные скрины из SC2)
#article #reference
3D-аркада в браузере: как мы сделали игру на React + Redux
Статья о том, как НЕ надо делать 3D игры. Ну или как поднять перформанс Redux
https://habr.com/ru/company/2gis/blog/498638/
#article
Статья о том, как НЕ надо делать 3D игры. Ну или как поднять перформанс Redux
https://habr.com/ru/company/2gis/blog/498638/
#article
И последняя, золотая статья аж 2015го года:
GTA V - Graphics Study
Разбор техник применяемых при рендеринге в GTA V в трёх частях.
В блоге ещё несколько разборов рендеринга в ААА играх. Не веб конечно, но отдельные техники применять можно и в WebGL. Adrian Courrèges, ты крутой, спасибо!
http://www.adriancourreges.com/blog/2015/11/02/gta-v-graphics-study/
#article #top
GTA V - Graphics Study
Разбор техник применяемых при рендеринге в GTA V в трёх частях.
В блоге ещё несколько разборов рендеринга в ААА играх. Не веб конечно, но отдельные техники применять можно и в WebGL. Adrian Courrèges, ты крутой, спасибо!
http://www.adriancourreges.com/blog/2015/11/02/gta-v-graphics-study/
#article #top
This media is not supported in your browser
VIEW IN TELEGRAM
Как создавался illuminating-radioactivity.com от tubikstudio.com. И правда, зачем весь этот WebGL, когда есть редимаг? 😏
https://www.awwwards.com/case-study-illuminating-radioactivity-website-by-tubik.html
#article
https://www.awwwards.com/case-study-illuminating-radioactivity-website-by-tubik.html
#article
Анализ кадра Mortal Kombat 11
Коненчо, для веба это слишком хардкорно, а для WebGL скорее невозможно, но даже если не знать все эти техники, то хотя бы иметь представление об их существовании полезно. Тем более вон в твиттере уже screen space GI на WebGL сделали)
https://habr.com/ru/post/500840/
#article
Коненчо, для веба это слишком хардкорно, а для WebGL скорее невозможно, но даже если не знать все эти техники, то хотя бы иметь представление об их существовании полезно. Тем более вон в твиттере уже screen space GI на WebGL сделали)
https://habr.com/ru/post/500840/
#article
Creative Coder
Как круто рендерить кукурузку или разбор corn revolution 🌽 По запросу ребят из @promaxdesign решил исследовать рендеринг https://go.pioneer.com/cornrevolution от https://resn.co.nz/. Там действительно есть крутые фишки, но обо всём по порядку 😊 Разберу рендеринг…
А вот и статья от создателей сайта – Resn. Очень рекомендую почитать
https://www.awwwards.com/resns-pioneer-corn-revolutionized-wins-site-of-the-month-july-2020.html
#article
https://www.awwwards.com/resns-pioneer-corn-revolutionized-wins-site-of-the-month-july-2020.html
#article
Awwwards
Resn’s Pioneer - Corn Revolutionized wins Site of the Month July 2020
<h2>Outstanding in its field, the winner of July’s Site of the Month is <a href="https://www.awwwards.com/sites/pioneer-corn-revolutionized" target="_blank">Pioneer - Corn Revolutionized</a> by <a href="https://www.awwwards.com/resn/"...
Прекрасная статья про свет и тени в компьютерной графике:
https://ciechanow.ski/lights-and-shadows/
#article
https://ciechanow.ski/lights-and-shadows/
#article
Очень крутая техника объёмного рендеринга
https://habr.com/ru/post/500914/
Для оптимизации автор использует мои любимые ray-surface instersectors где это возможно, дым приходится реймарчить. В статье также описан процесс полировки результата, а это самый сок :)
И там же есть шейдертой. Если поставить PERFORMANCE_MODE 1, оно даже летает на полном экране, ценой появления незначительных артефактов. Собственно в прикреплённых видео показаны оба режима 😉
Если кто-то знает крутых математиков умеющих интегрировать SDF c fBM по прямой — пишите, создадим крутую технологию 😊 В теории можно будет избавиться от реймарчинга и получить высокую производительность.
Мечты, мечты...
#reference #article
https://habr.com/ru/post/500914/
Для оптимизации автор использует мои любимые ray-surface instersectors где это возможно, дым приходится реймарчить. В статье также описан процесс полировки результата, а это самый сок :)
И там же есть шейдертой. Если поставить PERFORMANCE_MODE 1, оно даже летает на полном экране, ценой появления незначительных артефактов. Собственно в прикреплённых видео показаны оба режима 😉
Если кто-то знает крутых математиков умеющих интегрировать SDF c fBM по прямой — пишите, создадим крутую технологию 😊 В теории можно будет избавиться от реймарчинга и получить высокую производительность.
Мечты, мечты...
#reference #article
karpik.realtime
Подборка вообще ВСЕГО что есть в генеративном риалтайме, спасибо за наводку @gordee_va https://www.notion.so/Creative-Code-algorithms-techniques-c5550ef2f7574126bdc77b09ed76651b
А вот список ещё покруче 😉
https://github.com/jasonwebb/morphogenesis-resources
#reference #tutorial #article
https://github.com/jasonwebb/morphogenesis-resources
#reference #tutorial #article
GitHub
GitHub - jasonwebb/morphogenesis-resources: Resources on the topic of digital morphogenesis (creating form with code). Includes…
Resources on the topic of digital morphogenesis (creating form with code). Includes links to major articles, code repos, creative projects, books, software, and more. - jasonwebb/morphogenesis-reso...
Дуже круте відео, що на пальцях пояснює метод Ейлера та як запобігти деяким проблемам при його впроважденні
https://www.youtube.com/watch?v=KPoeNZZ6H4s
Навіщо це знати веб розробникам? Власне щоб надати своїм сайтам більше інтерактивності, анімуючи елементи не за допомогою gsap і заздалегідь заданих ізингів, а розраховуючи реальну фізику. Дрібниця, яку скоріше не помітять, але відчують :)
#article
https://www.youtube.com/watch?v=KPoeNZZ6H4s
Навіщо це знати веб розробникам? Власне щоб надати своїм сайтам більше інтерактивності, анімуючи елементи не за допомогою gsap і заздалегідь заданих ізингів, а розраховуючи реальну фізику. Дрібниця, яку скоріше не помітять, але відчують :)
#article
YouTube
Giving Personality to Procedural Animations using Math
It's been a while since the last video hasn't it? I've made quite a bit of progress since the last update, and since one of the things I worked on was some procedurally animated characters, I decided to make a video about the subject. In particular, this…
👍6🔥4🤯1
Будь-якій інженерній споруді потрібна міцна база, фундамент на якій буде заснована вся конструкція. Тому в комп'ютерній графіці важливо розібратися в засадах, зрозуміти математичний інструментарій. З цією метою добре підійде канал від проффесора Університету Юти Cem Yuksel (я називаю його чувак у червоній майці).
На каналі представлені плей-лист за загальною теорією та Interactive Computer Graphics.
https://www.youtube.com/@cem_yuksel
До речі, він відповідає на коментарі під відео 😉
#article
На каналі представлені плей-лист за загальною теорією та Interactive Computer Graphics.
https://www.youtube.com/@cem_yuksel
До речі, він відповідає на коментарі під відео 😉
#article
👍7🔥4❤2
Як вивести формули для обчислювання дотичного та бідотичного векторів, використовуючи положення та UV-координати у вершинах трикутника:
https://knowledge-in-ukrainian.blogspot.com/2024/01/obchyslennya-dotychnoho-ta-bidotychnoho-vektoriv.html?trk=feed-detail_main-feed-card_feed-article-content&m=1
#article
https://knowledge-in-ukrainian.blogspot.com/2024/01/obchyslennya-dotychnoho-ta-bidotychnoho-vektoriv.html?trk=feed-detail_main-feed-card_feed-article-content&m=1
#article
Blogspot
Обчислення дотичного та бідотичного векторів
Було питання на твітері щодо того, як обчислити дотичний/tangent та бідотичний/bitangent вектори, знаючи тільки положення, \(UV\), ...
👍6❤1
https://tympanus.net/codrops/2025/01/29/particles-progress-and-perseverance-a-journey-into-webgpu-fluids/
#article@creative_coder
#article@creative_coder
Codrops
Particles, Progress, and Perseverance: A Journey into WebGPU Fluids | Codrops
Editor's note: If you’ve been around the world of web graphics, you probably know Hector Arellano, a.k.a Hat—a developer
🔥3
Кайфово про кольори
https://www.youtube.com/watch?v=7KYwi2F5Ce4
Маю ремарку - автор відео називає okLab більш точною кольоровою моделлю, але насправді вона менш точна, але зручна для обчислень. Більше можна дізнатися в статті, що представила okLab світу
#article
https://www.youtube.com/watch?v=7KYwi2F5Ce4
Маю ремарку - автор відео називає okLab більш точною кольоровою моделлю, але насправді вона менш точна, але зручна для обчислень. Більше можна дізнатися в статті, що представила okLab світу
#article
YouTube
What's the "Geometry" of Colours?
What are colours? Do they form a particular geometry? Can we build this geometry from our perceptions? All the answers in 20 minutes!
0:00 - Introduction
1:07 - What is a colour?
2:03 - Newton's disc
6:02 - The XYZ space
8:49 - Screens and vision
12:09 …
0:00 - Introduction
1:07 - What is a colour?
2:03 - Newton's disc
6:02 - The XYZ space
8:49 - Screens and vision
12:09 …
❤2🔥2💅1