Юра Артюх выпустил очень крутое видео как из модельки в блендере сделать 3D web конфигуратор всего в 81 строку кода. Must see!
И вроде я когда-то давно решил для себя не использовать r3f, это оверхед, а всё и так тормозит, но. Когда видишь этот dev experience, эту скорость разработки и эту лаконичность результата, соблазн очень велик. Как долго я бы пилил это на чистой трёхе или OGL? То то же.
И да, из описания репы:
Is it slower than raw threejs?
No. Rendering performance is up to threejs and the GPU. Components participate in the renderloop outside of React, without any additional overhead. React is otherwise very efficient in building and managing component-trees, it could potentially outperform manual/imperative apps at scale.
Такие вот дела. А видео стоит внимания 😉
#tutorial
И вроде я когда-то давно решил для себя не использовать r3f, это оверхед, а всё и так тормозит, но. Когда видишь этот dev experience, эту скорость разработки и эту лаконичность результата, соблазн очень велик. Как долго я бы пилил это на чистой трёхе или OGL? То то же.
И да, из описания репы:
Is it slower than raw threejs?
No. Rendering performance is up to threejs and the GPU. Components participate in the renderloop outside of React, without any additional overhead. React is otherwise very efficient in building and managing component-trees, it could potentially outperform manual/imperative apps at scale.
Такие вот дела. А видео стоит внимания 😉
#tutorial
YouTube
3D model configurator with React Three Fiber and gltfjsx
Huge thanks to Poimandres team and Paul Henschel, who made this video possible. Im just showing result of their work!
Demo: https://codesandbox.io/s/floating-shoe-forked-qxjoj
Repo with code by Paul: https://github.com/drcmda/floating-shoe
All repos are…
Demo: https://codesandbox.io/s/floating-shoe-forked-qxjoj
Repo with code by Paul: https://github.com/drcmda/floating-shoe
All repos are…
Fun fact. Если скормить рендереру MSDF текста неправильный конфиг, выходит непонятно что но красивенько :) Пользы правда от этого ноль 🤷♂️
Ну и раз речь зашла о рисовании текста в WebGL — предлагаю почитать статью Techniques for Rendering Text with WebGL. Внутри 5 техник вывода текста с примерами и описанием их достоинств и недостатков. Хотя выбор в основном сводится либо к первому методу, либо к последнему.
После прочтения предыдущей статьи можно дополнительно ознакомиться с Kinetic Typography with Three.js. Теперь у вас будет возможность вдохнуть жизнь в любую, даже самую загрустившую надпись 😉
Ну а дальше огромный простор для творчества, достаточно поискать на ютубе kinetic typography. Пусть даже это всё вроде и вышло из трендов, знания и умения — сила :)
#tutorial
Ну и раз речь зашла о рисовании текста в WebGL — предлагаю почитать статью Techniques for Rendering Text with WebGL. Внутри 5 техник вывода текста с примерами и описанием их достоинств и недостатков. Хотя выбор в основном сводится либо к первому методу, либо к последнему.
После прочтения предыдущей статьи можно дополнительно ознакомиться с Kinetic Typography with Three.js. Теперь у вас будет возможность вдохнуть жизнь в любую, даже самую загрустившую надпись 😉
Ну а дальше огромный простор для творчества, достаточно поискать на ютубе kinetic typography. Пусть даже это всё вроде и вышло из трендов, знания и умения — сила :)
#tutorial
Creative Coder
Подборка вообще ВСЕГО что есть в генеративном риалтайме, спасибо за наводку @gordee_va https://www.notion.so/Creative-Code-algorithms-techniques-c5550ef2f7574126bdc77b09ed76651b
А вот список ещё покруче 😉
https://github.com/jasonwebb/morphogenesis-resources
#reference #tutorial #article
https://github.com/jasonwebb/morphogenesis-resources
#reference #tutorial #article
GitHub
GitHub - jasonwebb/morphogenesis-resources: Resources on the topic of digital morphogenesis (creating form with code). Includes…
Resources on the topic of digital morphogenesis (creating form with code). Includes links to major articles, code repos, creative projects, books, software, and more. - jasonwebb/morphogenesis-reso...
Creative Coder
У кого какие идеи как это можно реализовать в браузере?) #inspiraton by Gleb Kuznetsov
У нас очень кайфовое сообщество, вариантов накидали массу 😊
Самый надёжный и очевидный вариант предложил @vovazhuruk — использовать секвенции пререндеренных картинок
Плюсы: просто, красиво, апрувнуто Юрой Артюхом :D
Минусы: загрузка картинок, минимальный интерактив, для изменений нужно всё перерендеривать
Вместо секвенции можно использовать видео, о чём когда-то в нашем чате писал @dergachevm. Он предложил крутое решение проблемы с лагами при перемотке видео в обратную сторону
В теории оно хорошо уменьшает объём загружаемых данных и меньше кушает память браузера
@NobodyRoo предложил сделать cubemaps для кристалла и внутренних отражений, и отдельно запечь в текстурки внутренние грани. Не очень понял как это точно должно работать, но логика есть и по идее должно смотреться хорошо
Плюсы: не сложно, красиво, производительно
Минусы: не точная физическая отрисовка, может ничего не получиться
@karpik предложил использовать дары природы и почитать туториал с кодропс
Плюсы: готовое решение, не сложно, интерактивно, легко обновлять мэш
Минусы: не учитывается путь луча внутри кристалла, нет внутренних отражений, не вау
В соседнем посте в том же канале есть офигенное решение
Рефракции происходят в экранном пространстве, с учётом глубины, для повышения точности используется реймарчинг. Сходу сложно понять как это устроено, может когда-то разберусь
Плюсы: красиво, интерактивно, легко обновлять мэш, можно анимировать как хочешь
Минусы: сложно, тормозит, какой будет результат на кристаллах не понятно
Есть ещё такая вот работа и вроде должно получаться с аппроксимациями, но публичной реализации я не видел
https://www.researchgate.net/publication/220506766_Approximate_Ray-Tracing_on_the_GPU_with_Distance_Impostors
Может на самом деле это и сделано в предыдущем варианте, надо разбираться
@Xander_nome предложил использовать Пекс, хотя изначально такой способ реализовали Lusion на трёхе
По сути это развитие того что было на codrops
Плюсы: можно менять свойства материала, вроде учитывает глубину (но это не точно), интерактивно, производительно, красиво
Минусы: нет внутренних отражений, для кристаллов не пойдёт
И конечно же мой вариант — взять и порейтрейсить всё. Пост я скинул в отложенные вечером, а ночью попробовал. Сам кристалл рейтрейсить довольно просто и быстро, но вот с материалами, окружением и тенями пока беда. Но обкладываться костылями я мастер, так что это ещё не финал 😉
Плюсы: красиво, интерактивно, полная свобода
Минусы: дьявольская сложность, долгая компиляция шейдера, только лоу поли мэши, может тормозить (ещё не ясно, тут как выйдет)
Ну и @maksim_zov предложил сделать это на WebGL, за что ему спасибо :D Он крутой дизайнер если что
Кто не знал, для подобных обсуждений есть чат @creativecoders, вступайте 😊
#reference #tutorial
Самый надёжный и очевидный вариант предложил @vovazhuruk — использовать секвенции пререндеренных картинок
Плюсы: просто, красиво, апрувнуто Юрой Артюхом :D
Минусы: загрузка картинок, минимальный интерактив, для изменений нужно всё перерендеривать
Вместо секвенции можно использовать видео, о чём когда-то в нашем чате писал @dergachevm. Он предложил крутое решение проблемы с лагами при перемотке видео в обратную сторону
В теории оно хорошо уменьшает объём загружаемых данных и меньше кушает память браузера
@NobodyRoo предложил сделать cubemaps для кристалла и внутренних отражений, и отдельно запечь в текстурки внутренние грани. Не очень понял как это точно должно работать, но логика есть и по идее должно смотреться хорошо
Плюсы: не сложно, красиво, производительно
Минусы: не точная физическая отрисовка, может ничего не получиться
@karpik предложил использовать дары природы и почитать туториал с кодропс
Плюсы: готовое решение, не сложно, интерактивно, легко обновлять мэш
Минусы: не учитывается путь луча внутри кристалла, нет внутренних отражений, не вау
В соседнем посте в том же канале есть офигенное решение
Рефракции происходят в экранном пространстве, с учётом глубины, для повышения точности используется реймарчинг. Сходу сложно понять как это устроено, может когда-то разберусь
Плюсы: красиво, интерактивно, легко обновлять мэш, можно анимировать как хочешь
Минусы: сложно, тормозит, какой будет результат на кристаллах не понятно
Есть ещё такая вот работа и вроде должно получаться с аппроксимациями, но публичной реализации я не видел
https://www.researchgate.net/publication/220506766_Approximate_Ray-Tracing_on_the_GPU_with_Distance_Impostors
Может на самом деле это и сделано в предыдущем варианте, надо разбираться
@Xander_nome предложил использовать Пекс, хотя изначально такой способ реализовали Lusion на трёхе
По сути это развитие того что было на codrops
Плюсы: можно менять свойства материала, вроде учитывает глубину (но это не точно), интерактивно, производительно, красиво
Минусы: нет внутренних отражений, для кристаллов не пойдёт
И конечно же мой вариант — взять и порейтрейсить всё. Пост я скинул в отложенные вечером, а ночью попробовал. Сам кристалл рейтрейсить довольно просто и быстро, но вот с материалами, окружением и тенями пока беда. Но обкладываться костылями я мастер, так что это ещё не финал 😉
Плюсы: красиво, интерактивно, полная свобода
Минусы: дьявольская сложность, долгая компиляция шейдера, только лоу поли мэши, может тормозить (ещё не ясно, тут как выйдет)
Ну и @maksim_zov предложил сделать это на WebGL, за что ему спасибо :D Он крутой дизайнер если что
Кто не знал, для подобных обсуждений есть чат @creativecoders, вступайте 😊
#reference #tutorial
Telegram
Mihail Dergachev in Creative Coders
есть хитрый способ
https://www.youtube.com/watch?v=NCpaaLkmXI8
Ещё не смотрел, но с виду он рассказывает как я делаю эти свои демки :)
Update: он использует реймарчинг вместо рейтрейсинга, что не даёт ему возможности переотражать лучи больше пары раз без превращения в слайдшоу. С рейтрейсингом правда другая проблема — время компиляции шейдера растёт экспоненциально с каждым новым отражением 🤷♂️
А остальное всё то же самое, refract + reflect и готово 😉
Во второй части наверняка будет изменять IOR для каждого канала для анаглифа и форму изменит на тессеракт (вроде это он вначале)
В общем, годно, рекомендую к просмотру :)
А вот и вторая часть
https://www.youtube.com/watch?v=0RWaR7zApEo
#tutorial
Ещё не смотрел, но с виду он рассказывает как я делаю эти свои демки :)
Update: он использует реймарчинг вместо рейтрейсинга, что не даёт ему возможности переотражать лучи больше пары раз без превращения в слайдшоу. С рейтрейсингом правда другая проблема — время компиляции шейдера растёт экспоненциально с каждым новым отражением 🤷♂️
А остальное всё то же самое, refract + reflect и готово 😉
Во второй части наверняка будет изменять IOR для каждого канала для анаглифа и форму изменит на тессеракт (вроде это он вначале)
В общем, годно, рекомендую к просмотру :)
А вот и вторая часть
https://www.youtube.com/watch?v=0RWaR7zApEo
#tutorial
YouTube
Live Coding:Bending Light
In this video we'll look at refraction: the bending of light as it moves from one medium to another.
========== Social Media Links ==========
Twitter: @The_ArtOfCode
Facebook: https://www.facebook.com/groups/theartofcode/
Patreon: https://www.patreon…
========== Social Media Links ==========
Twitter: @The_ArtOfCode
Facebook: https://www.facebook.com/groups/theartofcode/
Patreon: https://www.patreon…
Новое видео Юры Артюха
Помимо создания симпатичной анимации, Юра рассказал про крутую тулзу для работы с анимациями — Theatre.js. Насколько я понял, она позволяет редактировать анимации с привычным для моушн дизайнеров GUI, что даёт возможность не сильно заморачиваясь делать нетривиальные изинги и ещё и значительно упрощает взаимодействие в команде. Можно отдать сцену дизайнеру, он сам доводит анимацию, возвращает таймлайн, готово. Больше не нужно проводить несколько итераций допиливания / сбора фидбека. И это кайф.
dat.gui на максималках. Я два года ждал такую либу :)
#tutorial #tool
Помимо создания симпатичной анимации, Юра рассказал про крутую тулзу для работы с анимациями — Theatre.js. Насколько я понял, она позволяет редактировать анимации с привычным для моушн дизайнеров GUI, что даёт возможность не сильно заморачиваясь делать нетривиальные изинги и ещё и значительно упрощает взаимодействие в команде. Можно отдать сцену дизайнеру, он сам доводит анимацию, возвращает таймлайн, готово. Больше не нужно проводить несколько итераций допиливания / сбора фидбека. И это кайф.
dat.gui на максималках. Я два года ждал такую либу :)
#tutorial #tool
YouTube
Deconstructing homunculus.jp distortion with three.js #11
Original: https://homunculus.jp/
Support: https://www.patreon.com/allyourhtml
Twitter: http://twitter.com/akella
Setup: https://gist.github.com/akella/a19954c9ee42e3ae85b76d0e06977535
Facebook: http://facebook.com/akella
#threejs #glsl #webgl
Support: https://www.patreon.com/allyourhtml
Twitter: http://twitter.com/akella
Setup: https://gist.github.com/akella/a19954c9ee42e3ae85b76d0e06977535
Facebook: http://facebook.com/akella
#threejs #glsl #webgl
This media is not supported in your browser
VIEW IN TELEGRAM
https://www.youtube.com/watch?v=PjHKcdeRQiY
Відтворення ефекту на https://www.zikd.space/de від Юри Артюха. Заодно показує як модифікувати матеріали тришки, що є дуже потужною технікою, і дозволяє робити дива в браузері не пишучи кілометри реалізацій PBR. Хоча в цьому випадку мабуть можна було взяти геометрію ціліндра замість площини і керувати полем offset текстур.
До речі, нагадую про зручний спосіб дивитись шейдери тришки.
Загалом це крутий, хоч і доволі простий ефект. Було б цікаво поекспериментувати з оживленням типографіки і самої форми — це відкриє величезний простір до кінетичної типографіки наступного рівня. Хто спробує і в кого вийде, напишу його ім'я на снаряді 😉😄
#tutorial #reference
Відтворення ефекту на https://www.zikd.space/de від Юри Артюха. Заодно показує як модифікувати матеріали тришки, що є дуже потужною технікою, і дозволяє робити дива в браузері не пишучи кілометри реалізацій PBR. Хоча в цьому випадку мабуть можна було взяти геометрію ціліндра замість площини і керувати полем offset текстур.
До речі, нагадую про зручний спосіб дивитись шейдери тришки.
Загалом це крутий, хоч і доволі простий ефект. Було б цікаво поекспериментувати з оживленням типографіки і самої форми — це відкриє величезний простір до кінетичної типографіки наступного рівня. Хто спробує і в кого вийде, напишу його ім'я на снаряді 😉😄
#tutorial #reference
Як швидко і просто зробити тривимірний сайт без знання WebGL
Пропоную вашій увазі чудовий туторіал по spline.design
https://www.youtube.com/watch?v=EJxeMbDTkVI
Виглядає дуже круто! Не стільки завдяки тривимірності, а більше завдяки крутому дизайну ще в фігмі. Хоча в 3D стало тільки краще 😉
Тут можна помацати кінцевий результат
#tutorial
Пропоную вашій увазі чудовий туторіал по spline.design
https://www.youtube.com/watch?v=EJxeMbDTkVI
Виглядає дуже круто! Не стільки завдяки тривимірності, а більше завдяки крутому дизайну ще в фігмі. Хоча в 3D стало тільки краще 😉
Тут можна помацати кінцевий результат
#tutorial
This media is not supported in your browser
VIEW IN TELEGRAM
Міні курс по відтворенню bokoko33.me
https://www.youtube.com/watch?v=rxTb9ys834w
Такий собі скорочений безкоштовний аналог threejs-journey.com. Але щоб отримати готовий код доведеться заплатити аж 5$ :)
У відео ви побачите:
• Моделювання в Blender
• Імпорт в Three.js
• Приклад непоганої організації коду
• Як працювати з хелперами щоб зробити розробку зручнішою
• Використання ScrollTrigger
• Адаптивність
• Анімації
• Деплой сайту на Vercel
#tutorial
https://www.youtube.com/watch?v=rxTb9ys834w
Такий собі скорочений безкоштовний аналог threejs-journey.com. Але щоб отримати готовий код доведеться заплатити аж 5$ :)
У відео ви побачите:
• Моделювання в Blender
• Імпорт в Three.js
• Приклад непоганої організації коду
• Як працювати з хелперами щоб зробити розробку зручнішою
• Використання ScrollTrigger
• Адаптивність
• Анімації
• Деплой сайту на Vercel
#tutorial
Крутий навчальний контент по 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.