Мой первый PR в three.js! Хоть это и одна строчка 🙂
На работе столкнулся с тем, что тридэшечка перестала работать на стареньком iPad, когда я начал использовать ImageLoader для чтения данных с текстуры.
Залез в исходники трехи в самом проекте, нашел баг, добавил проверку на доступность класса OffscreenCanvas. Заработало! Не постеснялся и пошел форкать треху.
https://github.com/mrdoob/three.js/pull/31194
На работе столкнулся с тем, что тридэшечка перестала работать на стареньком iPad, когда я начал использовать ImageLoader для чтения данных с текстуры.
Залез в исходники трехи в самом проекте, нашел баг, добавил проверку на доступность класса OffscreenCanvas. Заработало! Не постеснялся и пошел форкать треху.
https://github.com/mrdoob/three.js/pull/31194
GitHub
WebGPURenderer: Check if `OffscreenCanvas` is in window before accessing. by pavel-mazhuga · Pull Request #31194 · mrdoob/three.js
Denoscription
Three.js fails to run on some devices that don't have OffscreenCanvas support. This PR ensures that 'OffscreenCanvas' is always safely accessed.
Three.js fails to run on some devices that don't have OffscreenCanvas support. This PR ensures that 'OffscreenCanvas' is always safely accessed.
🔥28😈2
WebGPU в бете Safari 26 (который следующий)!
https://webkit.org/blog/16993/news-from-wwdc25-web-technology-coming-this-fall-in-safari-26-beta/#webgpu
https://webkit.org/blog/16993/news-from-wwdc25-web-technology-coming-this-fall-in-safari-26-beta/#webgpu
WebKit
News from WWDC25: WebKit in Safari 26 beta
Welcome to WWDC25!
❤6😈3
Timeless: как я с фризами сражался
При переходе между сценами сайт заметно так фризило: по статам рендеринга видно, что растет количество шейдеров (видео 1). Я долго не мог понять, что происходит. Вроде и предзагружал все на видеокарту, по канонам. Начал отключать части сцены, чтобы сузить диапазон поиска. И нашел! Шейдеры рекомпилируются, когда у PointLight переключаешь свойство visible!
И это так неинтуитивно! Широко известно следующее: не удаляйте объекты со сцены, если они еще будут нужны. Намного лучше использовать свойство visible, как раз чтобы не выгружать ресурсы из GPU и избегать в том числе рекомпиляции. Это верно для обычных объектов. А тут это выстрелило в колено. На скриншоте видно, что в момент перехода на лестницу CPU усиленно пыхтит, кадры дропаются.
Зачем я это делал? По наивности :) я хотел, не удаляя источник освещения со сцены, дешево отключать расчеты алгоритма освещения. Но я забыл, что, свет считается в шейдере MeshStandardMaterial. То есть, отключив свет, код шейдера должен поменяться. Так что рекомпиляция очень даже логична :) Я перестал как-либо управлять видимостью источника освещения - фризы пропали, количество шейдеров снизилось почти вдвое (видео 2).
Но я все еще хочу не считать свет для каждого объекта, а только для тех, где это будет видно, ведь динамическое освещение - это дорого. Что делать?
Я думал, что мне помогут слои, но нет: в three.js слои (layers) позволяют управлять видимостью объектов для камеры, но они не ограничивают влияние света на объекты напрямую. То есть, если свет находится в сцене, он будет освещать все объекты, независимо от их слоев, даже если объекты и свет находятся на разных слоях. Грустно.
Можно все переписать на TSL, там можно выбирать, какие источники света на какие объекты влияют (демка), но это невозможно по соображениям временных затрат.
Так что пока выбираем меньшее из зол. Все равно на телефонах не лагает, а я, возможно, зря переживаю :)
P.S. Релиз где-то рядом
#chipsa #timeless
При переходе между сценами сайт заметно так фризило: по статам рендеринга видно, что растет количество шейдеров (видео 1). Я долго не мог понять, что происходит. Вроде и предзагружал все на видеокарту, по канонам. Начал отключать части сцены, чтобы сузить диапазон поиска. И нашел! Шейдеры рекомпилируются, когда у PointLight переключаешь свойство visible!
И это так неинтуитивно! Широко известно следующее: не удаляйте объекты со сцены, если они еще будут нужны. Намного лучше использовать свойство visible, как раз чтобы не выгружать ресурсы из GPU и избегать в том числе рекомпиляции. Это верно для обычных объектов. А тут это выстрелило в колено. На скриншоте видно, что в момент перехода на лестницу CPU усиленно пыхтит, кадры дропаются.
Зачем я это делал? По наивности :) я хотел, не удаляя источник освещения со сцены, дешево отключать расчеты алгоритма освещения. Но я забыл, что, свет считается в шейдере MeshStandardMaterial. То есть, отключив свет, код шейдера должен поменяться. Так что рекомпиляция очень даже логична :) Я перестал как-либо управлять видимостью источника освещения - фризы пропали, количество шейдеров снизилось почти вдвое (видео 2).
Но я все еще хочу не считать свет для каждого объекта, а только для тех, где это будет видно, ведь динамическое освещение - это дорого. Что делать?
Я думал, что мне помогут слои, но нет: в three.js слои (layers) позволяют управлять видимостью объектов для камеры, но они не ограничивают влияние света на объекты напрямую. То есть, если свет находится в сцене, он будет освещать все объекты, независимо от их слоев, даже если объекты и свет находятся на разных слоях. Грустно.
Можно все переписать на TSL, там можно выбирать, какие источники света на какие объекты влияют (демка), но это невозможно по соображениям временных затрат.
Так что пока выбираем меньшее из зол. Все равно на телефонах не лагает, а я, возможно, зря переживаю :)
P.S. Релиз где-то рядом
#chipsa #timeless
❤13😈4🔥1
Dissolve Effect (TSL)
тут подробно раcписана механика для WebGL, я адаптировал на TSL и доработал
Live: https://pavelmazhuga.com/lab/dissolve
Source code: https://github.com/pavel-mazhuga/portfolio/tree/main/src/app/lab/dissolve
тут подробно раcписана механика для WebGL, я адаптировал на TSL и доработал
Live: https://pavelmazhuga.com/lab/dissolve
Source code: https://github.com/pavel-mazhuga/portfolio/tree/main/src/app/lab/dissolve
😈10🔥5👍3❤🔥2
Forwarded from Chipsa Design
Время остановилось. Добро пожаловать в Timeless.
Этот проект стал для нас настоящим испытанием. Мы хотели сделать не просто сайт, а опыт, который погружает в магию пространства и атмосферы Timeless. Было много споров, долгих дней и бессонных вечеров. Честно говоря, мы сильно устали, но знаем — оно того стоило.
И именно поэтому хочется в первую очередь сказать спасибо нашей команде. Дизайнерам, разработчикам, менеджеру — каждому, кто держал этот проект и не сдавался даже тогда, когда казалось, что идей больше нет. Timeless получился таким, каким мы мечтали его видеть, только благодаря вам.
Спасибо и клиенту — за доверие и за смелость вложиться в такую непростую идею. Риск оправдал себя: сегодня совместный проект Timeless и Chipsa увидел свет.
https://timeless.club/
Дизайн — Анастасия Дианова
3D — Александр Педченко, Антон Чугунов
Арт-дирекшен — Александр Педченко
Фронтенд — Павел Мажуга, Павел Никифоров
Бэкенд — Александр Готфрид, Сергей Ветлугин
Менеджмент — Никита Грузиненко
Этот проект стал для нас настоящим испытанием. Мы хотели сделать не просто сайт, а опыт, который погружает в магию пространства и атмосферы Timeless. Было много споров, долгих дней и бессонных вечеров. Честно говоря, мы сильно устали, но знаем — оно того стоило.
И именно поэтому хочется в первую очередь сказать спасибо нашей команде. Дизайнерам, разработчикам, менеджеру — каждому, кто держал этот проект и не сдавался даже тогда, когда казалось, что идей больше нет. Timeless получился таким, каким мы мечтали его видеть, только благодаря вам.
Спасибо и клиенту — за доверие и за смелость вложиться в такую непростую идею. Риск оправдал себя: сегодня совместный проект Timeless и Chipsa увидел свет.
https://timeless.club/
Дизайн — Анастасия Дианова
3D — Александр Педченко, Антон Чугунов
Арт-дирекшен — Александр Педченко
Фронтенд — Павел Мажуга, Павел Никифоров
Бэкенд — Александр Готфрид, Сергей Ветлугин
Менеджмент — Никита Грузиненко
❤7🔥6❤🔥4😈3👍1🤯1🫡1
FastHDR
Нашел в Твиттере потенциально интересный инструмент — Needle Cloud HDRIs.
Авторы заявляют, что FastHDR (так они называют технологию) загружаются в 10 раз быстрее, чем EXR, и в 5 раз быстрее, чем UltraHDR (которая Gainmap). Они также используют на 95% меньше памяти GPU и не фризит поток при загрузке.
⁃ Это KTX2 файл в UASTC HDR 4x4 формате (GPU-friendly)
⁃ Вес файла на 75% меньше, чем HDR/EXR
Ведется работа над возможностью конвертировать ваши HDRI в формат FastHDR.
Память в 3D вебе - один из самых ограниченных ресурсов. Всегда нужно стремиться к уменьшению ее потребления, а тут еще и high dynamic range сохраняется. Короче, звучит хайпово)
Вот такой видосик со сравнением еще приложили https://www.youtube.com/watch?v=z_w3Hrzq-7o&ab_channel=Needle
Нашел в Твиттере потенциально интересный инструмент — Needle Cloud HDRIs.
Авторы заявляют, что FastHDR (так они называют технологию) загружаются в 10 раз быстрее, чем EXR, и в 5 раз быстрее, чем UltraHDR (которая Gainmap). Они также используют на 95% меньше памяти GPU и не фризит поток при загрузке.
⁃ Это KTX2 файл в UASTC HDR 4x4 формате (GPU-friendly)
⁃ Вес файла на 75% меньше, чем HDR/EXR
Ведется работа над возможностью конвертировать ваши HDRI в формат FastHDR.
Память в 3D вебе - один из самых ограниченных ресурсов. Всегда нужно стремиться к уменьшению ее потребления, а тут еще и high dynamic range сохраняется. Короче, звучит хайпово)
Вот такой видосик со сравнением еще приложили https://www.youtube.com/watch?v=z_w3Hrzq-7o&ab_channel=Needle
YouTube
10x faster than EXR for everyone using three.js — FastHDR vs EXR Comparison
Most 3D scenes are lit by an HDRI – this is called image-based lighting. We found a way to make HDRI loading in three.js and Needle really nice.
HDR environments in the FastHDR format load 10x faster than EXR and 5x faster than UltraHDR. They also use 95%…
HDR environments in the FastHDR format load 10x faster than EXR and 5x faster than UltraHDR. They also use 95%…
🔥5❤3😈1
Увидимся на Стачке
2-3 октября я выступлю на Стачке с докладом «Timeless: фронтенд-подход к эстетике, бесконечной воде и 3D-взаимодействию».
Расскажу и покажу на практике, как мы подходили к созданию timeless.club: от эстетических идей к полноценному 3D-взаимодействию с WebGL и шейдерами, а также разберём приемы для максимальной производительности в рантайме.
Место проведения: Санкт-Петербург (Cosmos Прибалтийская).
Билеты уже доступны на сайте (https://nastachku.ru/bilety). Промокод “Спикер10” даст скидку 10% на билет.
Приходите, буду рад пообщаться!
2-3 октября я выступлю на Стачке с докладом «Timeless: фронтенд-подход к эстетике, бесконечной воде и 3D-взаимодействию».
Расскажу и покажу на практике, как мы подходили к созданию timeless.club: от эстетических идей к полноценному 3D-взаимодействию с WebGL и шейдерами, а также разберём приемы для максимальной производительности в рантайме.
Место проведения: Санкт-Петербург (Cosmos Прибалтийская).
Билеты уже доступны на сайте (https://nastachku.ru/bilety). Промокод “Спикер10” даст скидку 10% на билет.
Приходите, буду рад пообщаться!
🔥9❤3🍌3
Field Guide to TSL and WebGPU - The Blog of Maxime Heckel
Большой (базовый) гайд от Maxim Heckel по TSL - новому способу написания шейдеров для WebGL/WebGPU на Three.js
https://blog.maximeheckel.com/posts/field-guide-to-tsl-and-webgpu/
(рекомендую и другие статьи автора, он хорош)
Большой (базовый) гайд от Maxim Heckel по TSL - новому способу написания шейдеров для WebGL/WebGPU на Three.js
https://blog.maximeheckel.com/posts/field-guide-to-tsl-and-webgpu/
(рекомендую и другие статьи автора, он хорош)
The Blog of Maxime Heckel
Field Guide to TSL and WebGPU - The Blog of Maxime Heckel
A comprehensive guide to building 3D web experiences with TSL and WebGPU, covering shader development, compute shader applications, and practical examples for particle systems and post-processing effects.
🔥9⚡1💯1
Новый релиз: Chillbase
https://chillbase.net/
На прошлой неделе в Chipsa релизнули сайт геймдев-студии Chillbase. Это наш первый проект в продакшене, где использовался WebGPU! Весьма интересный с технической точки зрения проект.
Было бы вам интересно узнать технические аспекты и нюансы разработки в формате лонгрида?
https://chillbase.net/
На прошлой неделе в Chipsa релизнули сайт геймдев-студии Chillbase. Это наш первый проект в продакшене, где использовался WebGPU! Весьма интересный с технической точки зрения проект.
Было бы вам интересно узнать технические аспекты и нюансы разработки в формате лонгрида?
chillbase.net
Main — Chillbase
🔥10😈3
Павел Мажуга | Frontend Developer
HolyJS 2025 Spring: Как это было
https://www.youtube.com/watch?v=EQ5m0Jhz-qs первый в СНГ доклад про TSL уже в сети 🙂 приятного просмотра!
YouTube
Павел Мажуга — Three.js Shading Language: как устроена нодовая система в Three.js
Подробнее о конференции HolyJS: https://jrg.su/EM4wwV
— —
Скачать презентацию с сайта HolyJS — https://jrg.su/Kk7uKG
Павел рассказал, что в данный момент не так с материалами в Three.js, зачем придумали Three.js Shading Language (TSL) и как он работает.…
— —
Скачать презентацию с сайта HolyJS — https://jrg.su/Kk7uKG
Павел рассказал, что в данный момент не так с материалами в Three.js, зачем придумали Three.js Shading Language (TSL) и как он работает.…
🔥11❤9😈2
Павел Мажуга | Frontend Developer
Новый релиз: Chillbase https://chillbase.net/ На прошлой неделе в Chipsa релизнули сайт геймдев-студии Chillbase. Это наш первый проект в продакшене, где использовался WebGPU! Весьма интересный с технической точки зрения проект. Было бы вам интересно узнать…
Cssdesignawards
Chillbase - CSS Design Awards
Careers site for a gamedev studio with a WebGPU-powered particle system on three.js, delivering fast, immersive 3D visuals.
❤9😈3