Корисні ресурси для вивчення 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

Якщо є ще щось що варто додати до цього списку пишіть в коментарі :)

Для тих хто цікавиться оптимізацію шейдерів, дуже добре написанний артикул про occupancy/зайнятість. Думаю що ватрто про цю тему знати коли пишеться шейдер https://gpuopen.com/learn/occupancy-explained/

з Різдвом! https://x.com/kishimisu/status/1739060231546507306?s=46&t=w6A51o5Z99_L1GCMEocF-g

Українці - ❤️

У 2022 році було 3 млн донатерів, у 2023 році вже 5,7 млн.

У2022 році зібрали 8,5 млрд грн пожертвувань, а в 2023 році вже 27,4 млрд грн

Це статистика лише (!) Monobank за банками з 1 березня 2022 року і по сьогодні.

@skilkyskilky

Друзі, закликаємо вас підписати петицію про усунення перешкод виробництву боєприпасів для ЗСУ

Керівництво держави слушно наголошує на необхідності налагодити власне виробництво боєприпасів.

Мова не лише про сотні тисяч артилерійських снарядів, а також звичайні стрілецькі набої та боєприпаси до дронів, які включають корпуси, плати ініціації, електродетонатори і вибухові речовини.

Ключовою бюрократичною перешкодою залученню приватних компаній в цей процес є Постанова КМУ # 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

Гаряча WebGL вакансія в ЗСУ

Нарешті цей скіл може допомогти вбивати ворога! Вривайся:

https://lobbyx.army/tor/react-rozrobnyk-do-syl-oborony/

ШІ ментор по Three.js від автора Three.js

https://chat.openai.com/g/g-jGjqAMvED-three-js-mentor

Я не тестував, пишіть свої враження хто з ним поспілкується :)

#tool

Туторіал по Spline для початківців

Авторка розповідає як зробити та інтегрувати 3D візуалізацію за допомогою Spline. І незважаючи на простоту там реалізований прикольний інтерактив :)

https://www.youtube.com/watch?v=x3m1PGEfG5c

#tutorial

Як вивести формули для обчислювання дотичного та бідотичного векторів, використовуючи положення та 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

На новому стрімі Юра розповідав як відтворити 3D об'єкти, які насправді 2D картинки з https://buttermax.net/. Це захоплюючий сайт, що шикарно виглядає ідеально комбінуючи доволі прості ефекти. Рекомендую :)

https://www.youtube.com/watch?v=yWy_Tr98YDc

#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

Як рендерити траву раймаршингом

А ось туторіал з принципово іншим підходом до рендерингу трави, коли не потрібні чанки, лоди, і мільйони трикутників :) Само собою швидкодія в такій реалізації програє, та і реймаршинг можливо буде особливо не ефективним з маленькими травинками. Та ця реалізація виглядає краще ніж я думав і варта уваги теж 😉

https://x.com/captaingpu/status/1728083086254952706

Live demo & code:
https://www.shadertoy.com/view/WslyDj

#tutorial

https://www.youtube.com/watch?v=tvE2BcDYnnc

https://www.youtube.com/watch?v=yLHk82-Df9M

вкину ще один цікавий спосіб рендерити травку

техніка типу POM на стероідах)) створюється 50+ карт глибин для патча трави, потім у шейдері в залежності від кута огляду вони семпляться та інтерполюються

Efficient WebGL vegetation rendering | by Oleksandr Popov | Medium
https://keaukraine.medium.com/efficient-webgl-vegetation-rendering-b09a7fa904cc

Пройшлися по траві, пройдемось і по хутру :)

В автора цих відео є ще ось такі круті техніки для рендерингу хутра:
https://www.youtube.com/watch?v=BzsmOUpkvUw

Чому хутро це ще більш складна проблема порівняно з травою:
https://www.youtube.com/watch?v=9dr-tRQzij4
+ в цьому відео ще один алгоритм з його реалізації

#tutorial

https://manifesto.itsoffbrand.com/

Прикольна концепція сайту-квесту який проходиться використовуючи різні взаємодії з сайтом. Особливо сподобалось з цифрами, хоча на мобілці не розібрався як це пройти :)

#reference

Друзі, на ваш суд мій новий pet-проект. Приємного перегляду. https://twitter.com/Konstantin84U/status/1761613024870216112

Вітаю!
Зробили з подругою веселу інтерактивну кімнатку з її роботами
пропоную зацінити))
вимкніть, будь ласка, тихий режим, якщо у вас айфон
shaded.gallery/gannas

крутий кейс стаді https://www.epic.net/article/reward-your-prospects-with-a-game/