Новое видео Юры Артюха
Помимо создания симпатичной анимации, Юра рассказал про крутую тулзу для работы с анимациями — Theatre.js. Насколько я понял, она позволяет редактировать анимации с привычным для моушн дизайнеров GUI, что даёт возможность не сильно заморачиваясь делать нетривиальные изинги и ещё и значительно упрощает взаимодействие в команде. Можно отдать сцену дизайнеру, он сам доводит анимацию, возвращает таймлайн, готово. Больше не нужно проводить несколько итераций допиливания / сбора фидбека. И это кайф.
dat.gui на максималках. Я два года ждал такую либу :)
#tutorial #tool
Помимо создания симпатичной анимации, Юра рассказал про крутую тулзу для работы с анимациями — Theatre.js. Насколько я понял, она позволяет редактировать анимации с привычным для моушн дизайнеров GUI, что даёт возможность не сильно заморачиваясь делать нетривиальные изинги и ещё и значительно упрощает взаимодействие в команде. Можно отдать сцену дизайнеру, он сам доводит анимацию, возвращает таймлайн, готово. Больше не нужно проводить несколько итераций допиливания / сбора фидбека. И это кайф.
dat.gui на максималках. Я два года ждал такую либу :)
#tutorial #tool
YouTube
Deconstructing homunculus.jp distortion with three.js #11
Original: https://homunculus.jp/
Support: https://www.patreon.com/allyourhtml
Twitter: http://twitter.com/akella
Setup: https://gist.github.com/akella/a19954c9ee42e3ae85b76d0e06977535
Facebook: http://facebook.com/akella
#threejs #glsl #webgl
Support: https://www.patreon.com/allyourhtml
Twitter: http://twitter.com/akella
Setup: https://gist.github.com/akella/a19954c9ee42e3ae85b76d0e06977535
Facebook: http://facebook.com/akella
#threejs #glsl #webgl
This media is not supported in your browser
VIEW IN TELEGRAM
https://www.youtube.com/watch?v=PjHKcdeRQiY
Відтворення ефекту на https://www.zikd.space/de від Юри Артюха. Заодно показує як модифікувати матеріали тришки, що є дуже потужною технікою, і дозволяє робити дива в браузері не пишучи кілометри реалізацій PBR. Хоча в цьому випадку мабуть можна було взяти геометрію ціліндра замість площини і керувати полем offset текстур.
До речі, нагадую про зручний спосіб дивитись шейдери тришки.
Загалом це крутий, хоч і доволі простий ефект. Було б цікаво поекспериментувати з оживленням типографіки і самої форми — це відкриє величезний простір до кінетичної типографіки наступного рівня. Хто спробує і в кого вийде, напишу його ім'я на снаряді 😉😄
#tutorial #reference
Відтворення ефекту на https://www.zikd.space/de від Юри Артюха. Заодно показує як модифікувати матеріали тришки, що є дуже потужною технікою, і дозволяє робити дива в браузері не пишучи кілометри реалізацій PBR. Хоча в цьому випадку мабуть можна було взяти геометрію ціліндра замість площини і керувати полем offset текстур.
До речі, нагадую про зручний спосіб дивитись шейдери тришки.
Загалом це крутий, хоч і доволі простий ефект. Було б цікаво поекспериментувати з оживленням типографіки і самої форми — це відкриє величезний простір до кінетичної типографіки наступного рівня. Хто спробує і в кого вийде, напишу його ім'я на снаряді 😉😄
#tutorial #reference
Як швидко і просто зробити тривимірний сайт без знання WebGL
Пропоную вашій увазі чудовий туторіал по spline.design
https://www.youtube.com/watch?v=EJxeMbDTkVI
Виглядає дуже круто! Не стільки завдяки тривимірності, а більше завдяки крутому дизайну ще в фігмі. Хоча в 3D стало тільки краще 😉
Тут можна помацати кінцевий результат
#tutorial
Пропоную вашій увазі чудовий туторіал по spline.design
https://www.youtube.com/watch?v=EJxeMbDTkVI
Виглядає дуже круто! Не стільки завдяки тривимірності, а більше завдяки крутому дизайну ще в фігмі. Хоча в 3D стало тільки краще 😉
Тут можна помацати кінцевий результат
#tutorial
This media is not supported in your browser
VIEW IN TELEGRAM
Міні курс по відтворенню bokoko33.me
https://www.youtube.com/watch?v=rxTb9ys834w
Такий собі скорочений безкоштовний аналог threejs-journey.com. Але щоб отримати готовий код доведеться заплатити аж 5$ :)
У відео ви побачите:
• Моделювання в Blender
• Імпорт в Three.js
• Приклад непоганої організації коду
• Як працювати з хелперами щоб зробити розробку зручнішою
• Використання ScrollTrigger
• Адаптивність
• Анімації
• Деплой сайту на Vercel
#tutorial
https://www.youtube.com/watch?v=rxTb9ys834w
Такий собі скорочений безкоштовний аналог threejs-journey.com. Але щоб отримати готовий код доведеться заплатити аж 5$ :)
У відео ви побачите:
• Моделювання в Blender
• Імпорт в Three.js
• Приклад непоганої організації коду
• Як працювати з хелперами щоб зробити розробку зручнішою
• Використання ScrollTrigger
• Адаптивність
• Анімації
• Деплой сайту на Vercel
#tutorial
Крутий навчальний контент по WebGL від @Konstantin84UKR
https://www.youtube.com/channel/UCdD1kIGUO5m5C31eXLwY30w/playlists
Є окремі плейлісти по WebGL, glsl, WebGPU і навіть плейліст по рейтрейсингу. Він доступно і з іллюстраціями пояснює різні концепції і методи роботи з GPU графікою в вебі, і ці туторіали можуть слугувати чудовим фундаментом для подальшої роботи з студіями рівня Immersive Garden наприклад :)
Звісно, компаніям потрібні швидкі результати з використанням готових бібліотек, але без бази і чіткого розуміння як воно все робе прогресувати до небес буде складно. Тому рекомендую😉
#tutorial
https://www.youtube.com/channel/UCdD1kIGUO5m5C31eXLwY30w/playlists
Є окремі плейлісти по WebGL, glsl, WebGPU і навіть плейліст по рейтрейсингу. Він доступно і з іллюстраціями пояснює різні концепції і методи роботи з GPU графікою в вебі, і ці туторіали можуть слугувати чудовим фундаментом для подальшої роботи з студіями рівня Immersive Garden наприклад :)
Звісно, компаніям потрібні швидкі результати з використанням готових бібліотек, але без бази і чіткого розуміння як воно все робе прогресувати до небес буде складно. Тому рекомендую😉
#tutorial
YouTube
"HelloWorld" на WebGL (Видео теряет актуальность приходим на WebGPU ссылка в описании )
Переходим на WebGPU https://youtu.be/7getFv7-uPs
"HelloWorld" на WebGL
1) Обзор графического конвейера.
2) Загрузка шейдера в конвейер.
3) Простейшая программа на WebGL.
gitgub: https://github.com/Konstantin84UKR/WebGL_tutorials
liveDemo: https://kons…
"HelloWorld" на WebGL
1) Обзор графического конвейера.
2) Загрузка шейдера в конвейер.
3) Простейшая программа на WebGL.
gitgub: https://github.com/Konstantin84UKR/WebGL_tutorials
liveDemo: https://kons…
GPU dev tech engineer з AMD розповідає як з нуля робити 3D графіку
https://www.youtube.com/@ukrknowledge
Зараз на цьому каналі виходять відео про базові речі, як от що таке растеризація, як працюють матричні перетворення, кольори та анімації. Та в подальщому Ігор можливо дійде до volumetric effects, SSAO/GTAO, Tiled/Clustered Lighting. І все це українською! Тож буде дуже цікаво, підписуйтесь :)
Також можна глянути його доповідь на GDC 2022 — Hybrid Raytracing with Far Cry 6
Все це не WebGL і не web, але WebGL працює на тій самій базі, тож це корисно знати. До речі, він долучився до нашої спільноти @webgl_ua, і в чаті можна поспілкуватися напряму, тож долучайтесь 😉
#tutorial
https://www.youtube.com/@ukrknowledge
Зараз на цьому каналі виходять відео про базові речі, як от що таке растеризація, як працюють матричні перетворення, кольори та анімації. Та в подальщому Ігор можливо дійде до volumetric effects, SSAO/GTAO, Tiled/Clustered Lighting. І все це українською! Тож буде дуже цікаво, підписуйтесь :)
Також можна глянути його доповідь на GDC 2022 — Hybrid Raytracing with Far Cry 6
Все це не WebGL і не web, але WebGL працює на тій самій базі, тож це корисно знати. До речі, він долучився до нашої спільноти @webgl_ua, і в чаті можна поспілкуватися напряму, тож долучайтесь 😉
#tutorial
Канал з туторіалами по r3f, рекомендую :)
Наприклад, як доволі просто зробити ретровейв сцену з тачечкою:
https://www.youtube.com/watch?v=lcMCVWYpnrI
Посилання на канал
#tutorial
Наприклад, як доволі просто зробити ретровейв сцену з тачечкою:
https://www.youtube.com/watch?v=lcMCVWYpnrI
Посилання на канал
#tutorial
YouTube
Create a 3D car show with React Three Fiber and Three.js [ Tutorial part 1 ]
What's up youtube! As I promised I made a new video introducing React Three Fiber, this fantastic library can help to quickly setup and create amazing threejs scenes in react with very few lines of code! The entire project showcased at the beginning of the…
Хороша стаття про рефракцію і дисперсію
https://blog.maximeheckel.com/posts/refraction-dispersion-and-other-shader-light-effects/
#tutorial
https://blog.maximeheckel.com/posts/refraction-dispersion-and-other-shader-light-effects/
#tutorial
Maxime Heckel's Blog
Refraction, dispersion, and other shader light effects - Maxime Heckel's Blog
A guide on how to reproduce a chromatic dispersion effect for your React Three Fiber and shader projects with FBO, refraction, chromatic aberration, specular, and other tricks through 9 interactive code playgrounds.
Туторіал по Spline для початківців
Авторка розповідає як зробити та інтегрувати 3D візуалізацію за допомогою Spline. І незважаючи на простоту там реалізований прикольний інтерактив :)
https://www.youtube.com/watch?v=x3m1PGEfG5c
#tutorial
Авторка розповідає як зробити та інтегрувати 3D візуалізацію за допомогою Spline. І незважаючи на простоту там реалізований прикольний інтерактив :)
https://www.youtube.com/watch?v=x3m1PGEfG5c
#tutorial
YouTube
I found the PERFECT duo for 3D web animations
Let's make a quick website with scroll animations using Spline and GSAP. In my opinion, these two go very well together. So why not try out some ideas?
// ✨ Demo on CodePen:
https://codepen.io/Juxtopposed/full/xxQMyqQ
// ✨ Helpful links:
https://stacksorted.com…
// ✨ Demo on CodePen:
https://codepen.io/Juxtopposed/full/xxQMyqQ
// ✨ Helpful links:
https://stacksorted.com…
На новому стрімі Юра розповідав як відтворити 3D об'єкти, які насправді 2D картинки з https://buttermax.net/. Це захоплюючий сайт, що шикарно виглядає ідеально комбінуючи доволі прості ефекти. Рекомендую :)
https://www.youtube.com/watch?v=yWy_Tr98YDc
#tutorial
https://www.youtube.com/watch?v=yWy_Tr98YDc
#tutorial
YouTube
Creating 3D with image sequence
FYI: my only mistake in the video was forgetting to do:
texture.colorSpace = THREE.LinearSRGBColorSpace
for these loaded textures, thats why it never quite did the 3D job. All the logic was correct. 😅 Oh my.
Original: https://buttermax.net/
Sourcecode from…
texture.colorSpace = THREE.LinearSRGBColorSpace
for these loaded textures, thats why it never quite did the 3D job. All the logic was correct. 😅 Oh my.
Original: https://buttermax.net/
Sourcecode from…
Як рендерити траву растеризацією
Непоганий туторіал від Simondev, котрий показує як зробити поля травички спираючись на доповідь розробників Ghost of Tsushima на GDC. Представлені концепції доволі круті і варті того щоб в них розібратися, бо конкретних реалізацій може бути багато. І це все можна робити не лише з травою :)
https://www.youtube.com/watch?v=bp7REZBV4P4
Live demo:
https://simondevyoutube.github.io/Quick_Grass/
Github:
https://github.com/simondevyoutube/Quick_Grass?tab=readme-ov-file
А тим часом в @webgl_ua я показую WIP своєї реалізації, які проблеми виникають на шляху і як їх вирішувати :)
#reference #tutorial
Непоганий туторіал від Simondev, котрий показує як зробити поля травички спираючись на доповідь розробників Ghost of Tsushima на GDC. Представлені концепції доволі круті і варті того щоб в них розібратися, бо конкретних реалізацій може бути багато. І це все можна робити не лише з травою :)
https://www.youtube.com/watch?v=bp7REZBV4P4
Live demo:
https://simondevyoutube.github.io/Quick_Grass/
Github:
https://github.com/simondevyoutube/Quick_Grass?tab=readme-ov-file
А тим часом в @webgl_ua я показую WIP своєї реалізації, які проблеми виникають на шляху і як їх вирішувати :)
#reference #tutorial
YouTube
How do Major Video Games Render Grass?
Trying out the last grass and foliage rendering techniques used by Ghost of Tsushima.
🛒 Recommended books (on Amazon): https://www.amazon.com/hz/wishlist/ls/1IMV0IR3QIZMQ?type=wishlist&tag=simondev01-20&sort=priority&viewType=grid
❤️ Support me on Patreon:…
🛒 Recommended books (on Amazon): https://www.amazon.com/hz/wishlist/ls/1IMV0IR3QIZMQ?type=wishlist&tag=simondev01-20&sort=priority&viewType=grid
❤️ Support me on Patreon:…
Як рендерити траву раймаршингом
А ось туторіал з принципово іншим підходом до рендерингу трави, коли не потрібні чанки, лоди, і мільйони трикутників :) Само собою швидкодія в такій реалізації програє, та і реймаршинг можливо буде особливо не ефективним з маленькими травинками. Та ця реалізація виглядає краще ніж я думав і варта уваги теж 😉
https://x.com/captaingpu/status/1728083086254952706
Live demo & code:
https://www.shadertoy.com/view/WslyDj
#tutorial
А ось туторіал з принципово іншим підходом до рендерингу трави, коли не потрібні чанки, лоди, і мільйони трикутників :) Само собою швидкодія в такій реалізації програє, та і реймаршинг можливо буде особливо не ефективним з маленькими травинками. Та ця реалізація виглядає краще ніж я думав і варта уваги теж 😉
https://x.com/captaingpu/status/1728083086254952706
Live demo & code:
https://www.shadertoy.com/view/WslyDj
#tutorial
Пройшлися по траві, пройдемось і по хутру :)
В автора цих відео є ще ось такі круті техніки для рендерингу хутра:
https://www.youtube.com/watch?v=BzsmOUpkvUw
Чому хутро це ще більш складна проблема порівняно з травою:
https://www.youtube.com/watch?v=9dr-tRQzij4
+ в цьому відео ще один алгоритм з його реалізації
#tutorial
В автора цих відео є ще ось такі круті техніки для рендерингу хутра:
https://www.youtube.com/watch?v=BzsmOUpkvUw
Чому хутро це ще більш складна проблема порівняно з травою:
https://www.youtube.com/watch?v=9dr-tRQzij4
+ в цьому відео ще один алгоритм з його реалізації
#tutorial
YouTube
How Do Games Render Fur?
Get an exclusive @Surfshark deal! Enter promo code ACEROLA for an extra 3 months free at https://surfshark.deals/acerola #ad
It's easy to understand why fur is extremely problematic with its high density of objects and physical complexities, but somehow…
It's easy to understand why fur is extremely problematic with its high density of objects and physical complexities, but somehow…
Найс техніка, хоча я нікому не рекомендую так робити :)
https://tympanus.net/codrops/2025/03/03/css-meets-voxel-art-building-a-rendering-engine-with-stacked-grids/
#tutorial
https://tympanus.net/codrops/2025/03/03/css-meets-voxel-art-building-a-rendering-engine-with-stacked-grids/
#tutorial
Codrops
CSS Meets Voxel Art: Building a Rendering Engine with Stacked Grids | Codrops
Learn how transforms, perspective, and stacked grids can create a fully addressable 3D space and push the boundaries of what’s possible with pure CSS.