Шось про айтішку – Telegram
Шось про айтішку
1.46K subscribers
445 photos
161 videos
2 files
597 links
Фронтенд, ШІ, 3D друк, FPV, історії з життя та роботи
Download Telegram
Вітаю. Через чотири місяці після початку війни я та мій друг трохи зібрали свої кабіни і вирішили запустити подкаст на ютубі та тг канал під нього. Приєдуйтесь, там ми будемо робити айтішний контент та збирати донати на ЗСУ. Сподіваюсь наш контент допоможе вам відволіктись від всього піздеца хоча б на півгодини кожного тижня.
https://news.1rj.ru/str/droptarget
https://www.youtube.com/channel/UCtdUJ9f7v43dQaciP42P40Q
Channel name was changed to «Шось про айтішку»
Channel photo updated
Літо пройшло, падвідьом ітогі.

Війна продовжується, таке відчуття що всі чекають ядєрку. Не зважаючи на це, я трохи змінив контекст і переїхав (все ще в Києві).

На роботі лейофнули 30% персоналу. Мені у цьому плані пощастило, чи через те, що я в Україні, чи через те, що я там написав стільки говнокоду, що мене скорочувати невигідно)

У вільний час почав колупати React Native. Останній раз щось робив на ньому років 6 назад. Після вебу це прикольна платформа, бо є повний контроль, і js і нативна частина. Потроху вивчаю c++, якось напишу нашо мені це.

А зараз чекаю поки з каналу відвалиться вся руснява падпісота, бо бачу шо сиплються на постах українською)
Тут доречі на тлі продажу Figma за дохєра бабла, невеличка компанія Penpot https://penpot.app/ підняла 8 лямів інвестицій та отримала приток користувачів https://techcrunch.com/2022/09/27/penpot-inks-8m-as-signups-for-its-open-source-spin-on-figma-jump-5600-after-adobes-20b-acquisition-move/

Команда Penpot вже давно будує опенсорсний дизайн тул, доречі сам тул написаний на ClojureScript. Хлопці дали багато кльових бібліотек в опенсорс https://github.com/funcool а ми колись переклали їх посібник по cljs українською https://lambdabooks.github.io/clojurenoscript-unraveled/
​​Дивлячись фото та відео мосту, згадав, що не так давно пробував симуляцію вибухів у EmberGen https://jangafx.com/software/embergen/

Це софтина для realt-time симуляції фізики газоподібних речовин (дим або вогонь). Чуваки розробили паралельний алгоритм симуляції, який виконується на GPU. На моїй RTX 3060 симуляція оцього вибуху дає 25-30 FPS, що набагато швидше ніж в Blender, бо Mantaflow все рахує на CPU і це може зайняти усі вихідні. От настільки GPU може взувати CPU якщо можливо адаптувати алгоритм під паралелізацію.

Симуляція потім експортується у формат VDB (Volume Database) як послідовність кадрів з вокселями і закидуються у Blender де можна вже поєднати її зі сценою, підправити візуал і відрендерити.

Я подумав, що було б кльово відрендирити VDB у бразері через WebGL, але нажаль це буде супер повільно, тому що знов ж таки — воно все проходить через CPU, а WebGL сам по собі вже повільніший через браузерну прослойку. Але ось є альтернатива — NanoVDB (https://developer.nvidia.com/nanovdb), це якраз варіант рендеру VDB на GPU. Розробники бібліотеки начебто працюють над підтримкою WebGL, тому колись воно буде.
Цікаво хто як готується до зими в Україні? Я поки шо тримаюсь думки, що Київ та центр зазнає проблем з постачанням газу та електроенергііі в останню чергу, хоча все може бути.
Бачив хтось купує акумулятори за 25-50к, сонячні батареї, балони з газом, та буржуйки.
Ми собі вирішили поки не рипатись, якщо буде погано поїхати в приватний будинок з дровами та колодязем, але це вже на крайняк.
З цікавого, десь весною замовлял Starlink, днями нарешті відправили, чекаю доставку. Але теж думаю що пограюсь і віддам в ЗСУ.
Інколи буває, що хочеться трохи пописати код, але робити якийсь фронтенд чи ганяти жисочики зовсім не цікаво, бо цього і на роботі вистачає.

Я для цього останнім часом почав лайтове входження в геймдев. Виявилось дуже фаново знов повчити фізику і закодити фізичні моделі, якусь ракету в космосі чи підвіску автомобіля.

В таких справах для мене головне — не втрачати елемент задоволення від процесу і завжди мати проміжний результат. Бо сидіти годинами мучати якусь бібліотеку чи боротися з апішкою відбиває бажання продовжувати. Це доречі головний фактор в навчанні.

Звичайно я спробував Unity та Unreal Engine, і Godot. Але поки що зупинився на самому простому — робити щось маленьке і просте, і майже все руками, тому роблю щось в вебі на pixi.js якщо це 2D або Three.js для 3D.
👍5
Відключення світла все більше впливають на роботу команди. В мене поки що не було, можливо пощастило з локацією. Тільки от зараз немає води.

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

Я поки не думав як до цього адаптуватись, особливо коли відключення відбуваються не по графіку. Поки шо плюс-мінус проблема — це статус людини. Якщо б було по графіку, в Slack можна автоматично встановлювати статус на шось типу «офлайн бо русня гандони».

В генераторах не бачу сенсу, бо часто відключають і мобільні вишки, тому зв’язку також нема. Якщо тільки ваш сетап проєкту не дозволяє працювати повністю офлайн.
2
Я згадав, що в мене є YouTube канал, на якому я вже рік-два не постив. Тому вирішив його трохи оживити. Найближчим часом там виходитиме серія відосів по моделюванню в Blender та простенькому геймдеву. Думаю буде фаново, підписуйтесь.

👉 https://youtu.be/_sCz7vGmn7A
👍8
На каналі вийшов новий відос, продовжуємо робити гру у кості. У цьому випуску ми переходимо до програмування гри використовуючи модель з минулого випуску, бібліотеки threejs для графіки та cannonjs для фізики

👉 https://youtu.be/4ZlP-ATpp9Y

Якщо вам сподобався випуск, закиньте пару гривень на збір дрону для ЗСУ 💵 https://send.monobank.ua/jar/7k7wWbnWHv

Також приймаю заявки на теми для майбутніх випусків, пишіть в коментарях під постом.
👍4
​​Я давно хотів спробувати збудувати свій 3D рушій, зробити невеличку гру і в процесі роздуплитись як працює графічний пайплайн. Насправді пробував це робити разів п’ять, але кожного разу щось не виходило і тому забивав.

Тут нещодавно втрапив на канал хлопця, який робить свій рушій та гру про ферму, дуже кльовий блог, рекомендую https://youtube.com/playlist?list=PLRIWtICgwaX02ANbLFknXLbLsHdhS_e-Z

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

Я надихнувся його відосами і вирішив ще раз спробувати пірнути у цей світ, і як не дивно, поки що все йде добре.

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

На разі маю вікно, завантаження та відображення моделей, шейдер з базовим освітленням та систему обробки подій.

Далі буду робити контроллер для камери, дороблю матеріали та шейдер і буду пробувати робити невеличкі демки для тестування.

По бібліотекам:
lwjgl — менеджер вікон
bgfx — кросс платформний рендеринг (OpenGL, Metal, Vulkan, etc)
assimp — парсер форматів 3D моделей
nuklear — рендеринг UI
yoga — флексбокс лейаут для UI
joml — векторна на матрична математика

Ресурси для вивчення:
- https://learnopengl.com/ все про OpenGL
- https://lwjglgamedev.gitbooks.io/3d-game-development-with-lwjgl/content/ більше конкретно про побудову ігор з lwjgl
- https://lettier.github.io/3d-game-shaders-for-beginners/index.html про базові шейдери в іграх
🔥4👏2
На каналі вийшов новий випуск/туторіл, аж на півтори години, у якому ми створюємо реалістичну модель гасової лампи у Blender.

Процес включає моделювання, шейдинг, створення оточення, освітлення сцени та пост обробку.

Лайк, шер, підписка, якщо вам подобаються такі відоси або вони допомогли вам вивчити щось нове.

👉 https://youtu.be/CmxdjRt75TY
👍2
Шось про айтішку pinned «На каналі вийшов новий випуск/туторіл, аж на півтори години, у якому ми створюємо реалістичну модель гасової лампи у Blender. Процес включає моделювання, шейдинг, створення оточення, освітлення сцени та пост обробку. Лайк, шер, підписка, якщо вам подобаються…»
Повертаючись до гри у кості: вийшов відос де ми робимо реалістичний кубик у Blender для гри. А за тиждень вийде фінальний випуск с закінченням розробки гри, плюс бонусне відео по процедурним шейдерам.

👉 https://www.youtube.com/watch?v=8nwLDM6uS7o
🔥1
Трохи про старлінк і екофлоу після пари місяців користування.

Про старлінк багато не розкажу, бо в умовах міста і не маючи можливість встановити його на даху — це бляшанка. На балконі він ще так сяк працює, але з постійними перебоями. Ідеально ставити на дах або у полі.
Плюс конструкція не дозволяє від’єднати дріт, щоб протягнути його через просвердлену дірку у стіні, тому його або треба розбирати або свердлити дірку побільше.

Екофлоу на пів кіловата — топчік! Небагато, але для відносно недовгих відключень вистачає з головою для домашніх справ, ще й на пару годин подивитись проектор ввечері. Час заряду (до години) супер тєма, бо я хотів брати якийсь упс і акум, але воно довше заряджається та і в цілому вся конструкція громіздка та не мобільна.

Єдиною проблемою залишається інтернет, нажаль опції з оптикою в квартиру нема, але поки шо 3G у Vodafone вистачало.

Доречі живучи у старому будинкові я зацінив газ та газову колонку, бо з цим проблем не буває.
👍5
Бонусний випуск про процедурні геометричні фігури у шейдерах, на прикладі того ж грального кубика.

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

👉 https://youtu.be/Fj9PRSUy34c
В наступному році я повертаюсь на позицію інженера, після двох років роботи як інжинірінг менеджер.

Це був гарний досвід, мені вдалось створити свою невеличку сервісну команду, провести її від роботи в стилі реагування на проблеми до проактивної роботи з проблемними місцями і їх виявленням. За цей час поміж усього ми побудували систему спостереження за перформансом фронтенду та інтегрували її у продуктові команди, паралельно навчаючи інженерів роботі з перфомансом.

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

Плюс у коробку мого рішення переключитись у інжинірінг — це той факт, що для компанії я все ж таки більш цінний саме як інженер, а не піпл менеджер, також на мою продуктивність чимало вплинули ковідні часи і особливо війна.
👍91
​​Замітка про форматування коду.

Побачив у Твіттері оцей пост про плагін для Prettier для форматування масивів. Це цілком валідний кейс, і у той же час іронічний з точки зору єдиного правила форматування коду.

У даному випадку масив значень насправді відображає набір значень кольорів у форматі rgba, тобто візуально, для читання, має сенс групувати значення по 4 штуки на рядок.

Форматування коду у свою чергу побудовано на синтаксисі конкретної мови програмування. У випадку з масивом розробник якби додає неявний синтаксис (структуру) у звичайний масив. Звичайно форматтер про це знати не може, тому людині треба проінформувати програму як саме форматувати конкретний блок коду.

Напевне ця проблема зустрічається рідко у JS, а от наприклад у ліспах (типу Clojure), це більш росповсюджено, бо нерідко використовуються макроси, які додають свій синтаксис, а отже і форматування яке має сенс для читання коду. Також конкретно у Clojure розповсюджений підхід до створення data-driven DSL, коли невеличка мова описується даними. В таких DSL теж є свій синтаксис і форматування.

У форматтерах для Clojure також є система налаштування форматування макросів, а форматування даних менш жорстке і часто форматтер не змінює написане розробником. Це цікавий трейдофф заради кращого UX.
​​Йобана русня не дала сьогодні нормально виспатися. Поки у Києві працювало ППО ми робили млинці 🥞

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

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

Все це описано у туторіалі за посиланням http://www.opengl-tutorial.org/intermediate-tutorials/tutorial-16-shadow-mapping/

Наступним кроком роблю механізм вибору об’єкту на екрані, щоб знати який саме об’єкт знаходить під курсором миші.

Це можна зробити правильно і проеціювати позицію курсору на окремі полігони, а можна схитрувати і рендерити сцену у кольорову текстуру де кожен об’єкт заповнений унікальним кольором. Тоді по кольору під курсором можна визначати який саме об’єкт був обраний. Недолік такого підходу у тому, що текстуру треба копіювати з GPU у RAM, що начебто повільно. Але насправді все залежить від складності сцени.

Багато часу йде на склеювання C та Java, але в цілому я задоволений і динамічне середовище мені все ж більш до душі.
👍3