Что это?
Sylva — это интерактивный этюд пейзажа на Three.js: процедурный, покрытый мхом корень прорастает сквозь журнальную природоохранную сцену и реагирует на указатель, как живой.
Sylva — это интерактивный этюд пейзажа на Three.js: процедурный, покрытый мхом корень прорастает сквозь журнальную природоохранную сцену и реагирует на указатель, как живой.Это переиспользуемая библиотека или просто отдельная страница?Это отдельная самодостаточная веб-страница, а не библиотека для импорта — всё действо живёт в одном index.html, построенном на vendored-сборке Three.js r149.
Это отдельная самодостаточная веб-страница, а не библиотека для импорта — всё действо живёт в одном index.html, построенном на vendored-сборке Three.js r149.Как запустить его локально?Просто раздайте корень репозитория любым HTTP-сервером и откройте страницу — нет ни шага установки, ни конвейера сборки.
Просто раздайте корень репозитория любым HTTP-сервером и откройте страницу — нет ни шага установки, ни конвейера сборки.Нужно ли что-то, кроме браузера?Только браузер с поддержкой WebGL2; если сцена Three.js не сможет запуститься, страница всё равно сохранит вёрстку и основной контент.
Только браузер с поддержкой WebGL2; если сцена Three.js не сможет запуститься, страница всё равно сохранит вёрстку и основной контент.Мшистый пейзаж случайно меняется при каждом посещении?Нет — он детерминирован: один и тот же шум с фиксированным зерном при каждой загрузке выращивает идентичные корень, мох и подлесок, безо всяких скачиваемых вещей вроде заранее отрисованной плиты мха или 3D-модели.
Нет — он детерминирован: один и тот же шум с фиксированным зерном при каждой загрузке выращивает идентичные корень, мох и подлесок, безо всяких скачиваемых вещей вроде заранее отрисованной плиты мха или 3D-модели.Обращается ли страница к серверу после загрузки?Нет — вся геометрия, шум и изображения, нужные во время работы, лежат в репозитории, и после загрузки страница не делает внешних сетевых запросов.
Нет — вся геометрия, шум и изображения, нужные во время работы, лежат в репозитории, и после загрузки страница не делает внешних сетевых запросов.Можно ли переиспользовать код, дизайн или графику?Нет — собственный код, дизайн и графика Sylva не лицензированы для переиспользования или распространения, хотя входящие в комплект Three.js (MIT) и шрифт Lexend (OFL) сохраняют свои открытые лицензии.
Нет — собственный код, дизайн и графика Sylva не лицензированы для переиспользования или распространения, хотя входящие в комплект Three.js (MIT) и шрифт Lexend (OFL) сохраняют свои открытые лицензии.Что происходит со мхом, когда я двигаю указатель?Мох расступается вокруг курсора и выпускает короткий след пыльцы, пока указатель движется по пейзажу, — всё анимировано в том же цикле, что и остальная сцена.
Мох расступается вокруг курсора и выпускает короткий след пыльцы, пока указатель движется по пейзажу, — всё анимировано в том же цикле, что и остальная сцена.Кнопки Explore и Play — часть основной 3D-сцены?Нет, каждая кнопка из жидкого металла работает в собственном изолированном WebGL2-iframe, чтобы её состояние шейдеров не могло утечь в рендерер основной страницы.
Нет, каждая кнопка из жидкого металла работает в собственном изолированном WebGL2-iframe, чтобы её состояние шейдеров не могло утечь в рендерер основной страницы.Сколько мха он реально отрисовывает?До 250 000 инстансированных травинок мха на десктопе, построенных из геометрии протяжённых трубок с рекурсивными отростками, папоротниками, цветами и частицами.
До 250 000 инстансированных травинок мха на десктопе, построенных из геометрии протяжённых трубок с рекурсивными отростками, папоротниками, цветами и частицами.Откуда пришла идея исходной композиции?Вёрстка начиналась как независимое изучение журнальной природоохранной композиции дизайнера Daniel Snows; Sylva заменяет передний план оригинальной процедурной геометрией и движением и не связана с исходным дизайнером.
Вёрстка начиналась как независимое изучение журнальной природоохранной композиции дизайнера Daniel Snows; Sylva заменяет передний план оригинальной процедурной геометрией и движением и не связана с исходным дизайнером.What are similar projects?natural-disasters, clay-safari, dioramas, threejs-architecture-effects, LinearAbilityExtThreeJS, awesome-opus5-5-videos, three.js, canvas-ui
natural-disasters, clay-safari, dioramas, threejs-architecture-effects, LinearAbilityExtThreeJS, awesome-opus5-5-videos, three.js, canvas-uiWhich topics is it in?webgl2, procedural-generation, github-pages, generative-art, static-site, shaders, zero-dependency, creative-coding, threejs, canvas, webgl, 3d
webgl2, procedural-generation, github-pages, generative-art, static-site, shaders, zero-dependency, creative-coding, threejs, canvas, webgl, 3d