Хороша стаття про рефракцію і дисперсію
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.
This media is not supported in your browser
VIEW IN TELEGRAM
Great Shadow Caustics Setup Rendered in Blender Cycles
https://80.lv/articles/check-out-a-great-shadow-caustics-setup-rendered-in-blender-cycles/
#reference
https://80.lv/articles/check-out-a-great-shadow-caustics-setup-rendered-in-blender-cycles/
#reference
Дуже пізнавальна серія відео про світло від 3b1b
https://www.youtube.com/watch?v=QCX62YJCmGk
https://www.youtube.com/watch?v=aXRTczANuIs
https://www.youtube.com/watch?v=KTzGBJPuJwM
https://www.youtube.com/watch?v=Cz4Q4QOuoo8
Практичного сенсу для нас розробників мабуть ніякого, бо симулювати все це ніхто не буде не те що в рілтаймі, а й в оффлайн рендерингу ніхто не буде. Але мати уявлення як воно все насправді працює (хоч і з спрощеннями) ніколи зайвим не буває.
Плюс знання правил дозволяє краще розуміти як їх порушувати (мова лише про симуляції фізики 😅).
Врешті-решт, все що ми бачимо — лише світло :)
https://www.youtube.com/watch?v=QCX62YJCmGk
https://www.youtube.com/watch?v=aXRTczANuIs
https://www.youtube.com/watch?v=KTzGBJPuJwM
https://www.youtube.com/watch?v=Cz4Q4QOuoo8
Практичного сенсу для нас розробників мабуть ніякого, бо симулювати все це ніхто не буде не те що в рілтаймі, а й в оффлайн рендерингу ніхто не буде. Але мати уявлення як воно все насправді працює (хоч і з спрощеннями) ніколи зайвим не буває.
Плюс знання правил дозволяє краще розуміти як їх порушувати (мова лише про симуляції фізики 😅).
Врешті-решт, все що ми бачимо — лише світло :)
YouTube
This tests your understanding of light | The barber pole effect
The barber pole effect of shining polarized light into sugar water.
Next video: https://youtu.be/aXRTczANuIs
Steve Mould's video on the topic: https://youtu.be/975r9a7FMqc
Help fund future projects: https://www.patreon.com/3blue1brown
An equally valuable…
Next video: https://youtu.be/aXRTczANuIs
Steve Mould's video on the topic: https://youtu.be/975r9a7FMqc
Help fund future projects: https://www.patreon.com/3blue1brown
An equally valuable…
Forwarded from Yuri
доповідь про вігл штучки https://youtu.be/aaSiXQ3JGIU
YouTube
This Is Why Most 3D Websites Suck
In this video, I share why most 3D websites don't get attention. I also explain the power of interactivity in real time graphics, with a demo that takes a basic Three.js sweater configurator and turns it into an epic web experience.
✷ You can play with the…
✷ You can play with the…
Forwarded from Yuri
буду щось лайвкодити українською на DOU, заходьте якшо шо ) https://dou.ua/calendar/49355/
DOU
🎥 DOU Livecoding: React Three Fiber анімація з Юрієм Артюхом, 19 грудня 2023
У телеграм-каналі DOU | Front-end - лайвкодинг! Про React Three Fiber анімацію говоритиме та демонструватиме лайфхаки Юрій Артюх
Корисні ресурси для вивчення WebGL і Three.js
WebGL:
https://webglfundamentals.org/
http://www.webglacademy.com/
https://learnwebgl.brown37.net/index.html
https://www.amazon.com/Real-Time-Graphics-WebGL-interactive-applications-ebook/dp/B07GVNQLH5
https://voxelent.com/resources/books-code-examples/
https://www.youtube.com/@konstantinbondarenko5235
https://www.youtube.com/watch?v=-T6EbWCq99c&list=PLPbmjY2NVO_X1U1JzLxLDdRn4NmtxyQQo
Three.js:
https://threejs.org/manual/#en/fundamentals
https://threejs-workshops.com/
https://threejs-journey.com/
https://www.youtube.com/@akella_
https://www.youtube.com/@BrunoSimon
https://www.youtube.com/@irradiance730
https://www.youtube.com/watch?v=FSMkaiB5wVo
Шейдери, математика:
https://thebookofshaders.com/
https://simondev.teachable.com/courses/
https://www.youtube.com/@t3ssel8r
https://www.youtube.com/c/acerola_t
https://www.youtube.com/@cem_yuksel
WebGPU:
https://www.amazon.com/Practical-WebGPU-Graphics-Creating-Next-Generation/dp/B091GCHJ41 — 2021
https://www.amazon.com/WebGPU-Examples-Explore-Next-Generation-Graphics/dp/B0C4MZFLQN — 2023
https://webgpufundamentals.org/
https://toji.dev/webgpu-best-practices/
https://surma.dev/things/webgpu/
https://www.willusher.io/graphics/2023/06/24/0-to-gltf-full-scene
https://jack1232.github.io/webgpu00/
https://codelabs.developers.google.com/your-first-webgpu-app#0
https://carmencincotti.com/2022-09-12/webgpu-cloth-simulation-is-in-github/
https://github.com/Konstantin84UKR/webgpu_examples?tab=readme-ov-file
Якщо є ще щось що варто додати до цього списку пишіть в коментарі :)
WebGL:
https://webglfundamentals.org/
http://www.webglacademy.com/
https://learnwebgl.brown37.net/index.html
https://www.amazon.com/Real-Time-Graphics-WebGL-interactive-applications-ebook/dp/B07GVNQLH5
https://voxelent.com/resources/books-code-examples/
https://www.youtube.com/@konstantinbondarenko5235
https://www.youtube.com/watch?v=-T6EbWCq99c&list=PLPbmjY2NVO_X1U1JzLxLDdRn4NmtxyQQo
Three.js:
https://threejs.org/manual/#en/fundamentals
https://threejs-workshops.com/
https://threejs-journey.com/
https://www.youtube.com/@akella_
https://www.youtube.com/@BrunoSimon
https://www.youtube.com/@irradiance730
https://www.youtube.com/watch?v=FSMkaiB5wVo
Шейдери, математика:
https://thebookofshaders.com/
https://simondev.teachable.com/courses/
https://www.youtube.com/@t3ssel8r
https://www.youtube.com/c/acerola_t
https://www.youtube.com/@cem_yuksel
WebGPU:
https://www.amazon.com/Practical-WebGPU-Graphics-Creating-Next-Generation/dp/B091GCHJ41 — 2021
https://www.amazon.com/WebGPU-Examples-Explore-Next-Generation-Graphics/dp/B0C4MZFLQN — 2023
https://webgpufundamentals.org/
https://toji.dev/webgpu-best-practices/
https://surma.dev/things/webgpu/
https://www.willusher.io/graphics/2023/06/24/0-to-gltf-full-scene
https://jack1232.github.io/webgpu00/
https://codelabs.developers.google.com/your-first-webgpu-app#0
https://carmencincotti.com/2022-09-12/webgpu-cloth-simulation-is-in-github/
https://github.com/Konstantin84UKR/webgpu_examples?tab=readme-ov-file
Якщо є ще щось що варто додати до цього списку пишіть в коментарі :)
webglfundamentals.org
Learn WebGL from the ground up. No magic
Forwarded from Ігор
Для тих хто цікавиться оптимізацію шейдерів, дуже добре написанний артикул про occupancy/зайнятість. Думаю що ватрто про цю тему знати коли пишеться шейдер https://gpuopen.com/learn/occupancy-explained/
AMD GPUOpen
Occupancy explained
In this blog post we will try to demystify what exactly occupancy is, which factors limit occupancy, and how to use tools to identify occupancy-limited workloads.
Forwarded from Yuri
Forwarded from Скільки-скільки?
Українці - ❤️
У 2022 році було 3 млн донатерів, у 2023 році вже 5,7 млн.
У2022 році зібрали 8,5 млрд грн пожертвувань, а в 2023 році вже 27,4 млрд грн
Це статистика лише (!) Monobank за банками з 1 березня 2022 року і по сьогодні.
@skilkyskilky
У 2022 році було 3 млн донатерів, у 2023 році вже 5,7 млн.
У2022 році зібрали 8,5 млрд грн пожертвувань, а в 2023 році вже 27,4 млрд грн
Це статистика лише (!) Monobank за банками з 1 березня 2022 року і по сьогодні.
@skilkyskilky
Forwarded from Останній Капіталіст ✙
Друзі, закликаємо вас підписати петицію про усунення перешкод виробництву боєприпасів для ЗСУ
Керівництво держави слушно наголошує на необхідності налагодити власне виробництво боєприпасів.
Мова не лише про сотні тисяч артилерійських снарядів, а також звичайні стрілецькі набої та боєприпаси до дронів, які включають корпуси, плати ініціації, електродетонатори і вибухові речовини.
Ключовою бюрократичною перешкодою залученню приватних компаній в цей процес є Постанова КМУ # 576 “Про затвердження положення про дозвільну систему”, прийнята ще далекого 1992 року.
Це положення давно суперечить Конституції та низці законів, що неодноразово підтверджено Державною регуляторною службою.
На підставі цього Положення, щоб отримати ліцензію для виробництва зброї і боєприпасів крім виконання ліцензійних умов, необхідно ще й отримати окремий дозвіл на ліцензію, для якого не визначено чіткого порядку і терміну надання, що створює багато простору для зловживань.
Також для імпорту детонаторів чи інших складових боєприпасів замість одного дозволу Державної служби експортного контролю, на підставі цього Положення, необхідно ще три дозволи МВС, за процедурами 1992 року.
Менше дозволів від МВС - більше снарядів для ЗСУ. Тому закликаємо вас приєднатися до підписання петиції:
https://petition.president.gov.ua/petition/213562
Керівництво держави слушно наголошує на необхідності налагодити власне виробництво боєприпасів.
Мова не лише про сотні тисяч артилерійських снарядів, а також звичайні стрілецькі набої та боєприпаси до дронів, які включають корпуси, плати ініціації, електродетонатори і вибухові речовини.
Ключовою бюрократичною перешкодою залученню приватних компаній в цей процес є Постанова КМУ # 576 “Про затвердження положення про дозвільну систему”, прийнята ще далекого 1992 року.
Це положення давно суперечить Конституції та низці законів, що неодноразово підтверджено Державною регуляторною службою.
На підставі цього Положення, щоб отримати ліцензію для виробництва зброї і боєприпасів крім виконання ліцензійних умов, необхідно ще й отримати окремий дозвіл на ліцензію, для якого не визначено чіткого порядку і терміну надання, що створює багато простору для зловживань.
Також для імпорту детонаторів чи інших складових боєприпасів замість одного дозволу Державної служби експортного контролю, на підставі цього Положення, необхідно ще три дозволи МВС, за процедурами 1992 року.
Менше дозволів від МВС - більше снарядів для ЗСУ. Тому закликаємо вас приєднатися до підписання петиції:
https://petition.president.gov.ua/petition/213562
Screen Space Horizon GI
https://www.shadertoy.com/view/dsGBzW
Screen space multibounce GI by integrating horizons with visibility bitmasks.
Simple temporal accumulation, fully dynamic scenes requires a better denoiser
Based on: https://arxiv.org/pdf/2301.11376.pdf
#tool
https://www.shadertoy.com/view/dsGBzW
Screen space multibounce GI by integrating horizons with visibility bitmasks.
Simple temporal accumulation, fully dynamic scenes requires a better denoiser
Based on: https://arxiv.org/pdf/2301.11376.pdf
#tool
Shadertoy
Build shaders, share them, and learn from the best community.
Гаряча WebGL вакансія в ЗСУ
Нарешті цей скіл може допомогти вбивати ворога! Вривайся:
https://lobbyx.army/tor/react-rozrobnyk-do-syl-oborony/
Нарешті цей скіл може допомогти вбивати ворога! Вривайся:
https://lobbyx.army/tor/react-rozrobnyk-do-syl-oborony/
ШІ ментор по Three.js від автора Three.js
https://chat.openai.com/g/g-jGjqAMvED-three-js-mentor
Я не тестував, пишіть свої враження хто з ним поспілкується :)
#tool
https://chat.openai.com/g/g-jGjqAMvED-three-js-mentor
Я не тестував, пишіть свої враження хто з ним поспілкується :)
#tool
ChatGPT
ChatGPT - Three.js Mentor
A patient and knowledgeable Three.js guide.
Туторіал по 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…
Як вивести формули для обчислювання дотичного та бідотичного векторів, використовуючи положення та 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\), ...
На новому стрімі Юра розповідав як відтворити 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
Forwarded from andr fiber
https://www.youtube.com/watch?v=tvE2BcDYnnc
https://www.youtube.com/watch?v=yLHk82-Df9M
вкину ще один цікавий спосіб рендерити травку
техніка типу POM на стероідах)) створюється 50+ карт глибин для патча трави, потім у шейдері в залежності від кута огляду вони семпляться та інтерполюються
https://www.youtube.com/watch?v=yLHk82-Df9M
вкину ще один цікавий спосіб рендерити травку
техніка типу POM на стероідах)) створюється 50+ карт глибин для патча трави, потім у шейдері в залежності від кута огляду вони семпляться та інтерполюються
YouTube
Parallax Occlusion Intersection (Grass Pixel Shader) Close-ups
More (4K) footage of my shader because youtube compression makes it hard to see.
The algorithm is described at 1:15 here: https://youtu.be/yLHk82-Df9M
Quality settings:
Using a large patch is the most flexible, as it can recreate any target mesh without obvious…
The algorithm is described at 1:15 here: https://youtu.be/yLHk82-Df9M
Quality settings:
Using a large patch is the most flexible, as it can recreate any target mesh without obvious…
Forwarded from O Popov
Efficient WebGL vegetation rendering | by Oleksandr Popov | Medium
https://keaukraine.medium.com/efficient-webgl-vegetation-rendering-b09a7fa904cc
https://keaukraine.medium.com/efficient-webgl-vegetation-rendering-b09a7fa904cc
Medium
Efficient WebGL vegetation rendering
In this article I’ll explain the rendering pipeline of Spring Flowers WebGL Demo and its corresponding Android app. Also I will describe…
Пройшлися по траві, пройдемось і по хутру :)
В автора цих відео є ще ось такі круті техніки для рендерингу хутра:
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…