Крутий навчальний контент по 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.