Hacker News Digest

Layoutit Terra - это интерактивный генератор рельефа на CSS, позволяющий создавать разнообразные ландшафты с настраиваемыми параметрами. Инструмент предлагает выбор между типами рельефа (пампы, холмы, горы) и биомами (умеренный, арктический, пустынный), а также контроль над размером мира и покрытием суши. Пользователи могут детально настраивать камеру через параметры вращения, наклона и увеличения, добавляя анимацию к созданным ландшафтам.

Генератор поддерживает экспорт результатов в多种 форматы, включая CSS, высотные карты, VOX, TXT и PNG, что обеспечивает гибкость использования. Функции импорта, отмены/повтора действий, а возможность копировать код для встраивания или открывать его в Codepen упрощают интеграцию в другие проекты. Несмотря на раннюю версию (v0.0.1), Layoutit Terra уже предоставляет мощные возможности для создания детализированных CSS-ландшафтов с минимальными усилиями.

• Пользователи отмечают, что «CSS-only»-демо всё же использует JS для интерактивности, хотя рендеринг ландшафта действительно на 100 % CSS.
• Визуально демо напоминает RCT, SimCity 2000, Populous и другие изометрические «тайкун»-игры, вызывая ностальгию.
• Несколько человек сообщили о проблемах с производительностью: при включённом JS в Firefox 144 и Chrome 131 на Windows 10/11 рендеринг занимает 100-200 мс на обновление кадра, что приводит к просадкам фпс.
• Автор ответил, что в будущих версиях планируется добавить реки и водопады, а также улучшить производительность.

Статья исследует странные аттракторы — математические концепции, создающие красивые паттерны из простых уравнений. Автор, экспериментируя с Three.js, обнаружил, что сложные визуальные образы возникают из трёх базовых уравнений, что поглотило его время и внимание. Странные аттракторы демонстрируют, как порядок может рождаться из хаоса, что оказалось для автора глубоко удовлетворительным наблюдением.

Динамические системы описывают, как вещи меняются во времени, следуя определённым правилам. Фазовое пространство представляет все возможные состояния системы, а динамика определяет переходы между этими состояниями. Теория хаоса изучает системы, которые кажутся случайными, но на самом деле следуют детерминированным правилам. Такие системы, как погода или экономика, чрезвычайно чувствительны к начальным условиям — малейшее изменение может привести к совершенно разным результатам, что известно как эффект бабочки.

• Обсуждение показало, что визуализация 3D-фазового пространства привела к всплеску ностальгии по 90-м и эпохе Fractint, а также подчеркнула, что современные технологии позволяют в реальном времени рендерить то, что раньше требовало часов рендеринга.
• Участники делились личными историями, от вдохновляющих всплесков любознательности до вдохновляющих влияний на их карьеру.
• Обсуждались идеи добавить параметры для взаимодействия, такие как изменение цвета точек в зависимости от их положения в пространстве фаз, что может быть реализовано в будущем.
• Также обсуждались вопросы открытого исходного кода и использования визуализации в образовательных целях.
• Были сделаны ссылки на старые и новые инструменты, такие как Fractint и современные библиотеки визуализации.

Этот код — минималистичная демка в 464 символах GLSL, созданная без текстур и мешей, чисто математикой. Она генерирует пейзаж с горами, туманом и облаками, используя накопление синусоидальных волн для шума вместо дорогих методов вроде градиентного или value noise. Каждый пиксель вычисляется процедурно через итеративный цикл, имитирующий лучи для объёма и глубины.

Ключевые приёмы: компактный шум через abs(sin(x) + sin(y)), матричные вращения для камеры и анимации, нелинейные преобразования для цвета и освещения. Практический вывод — даже сложную графику можно ужать в крошечный код, жертвуя читаемостью ради размера. Неожиданный эффект: демка "стареет" из-за накопления ошибок чисел с плавающей точкой, требуя периодической перезагрузки.

• Обнаружена возможность сэкономить байты в шейдерном коде через математические преобразования.
• Предложена дальнейшая оптимизация кода с сохранением трёх байтов за счёт предварительного умножения переменной.
• Автор принял предложение и обновил код на Shadertoy с указанием авторства.
• Возникли проблемы с производительностью WebGL в браузерах Edge и Chrome на Windows из-за слишком большого количества контекстов.
• Демонстрация корректно работает в Firefox на Windows и получила высокую оценку за визуальный эффект.

Meta представила новую функцию для Messenger, позволяющую отправлять сообщения между разными платформами мессенджеров, такими как WhatsApp и Instagram. Это шаг к соответствию требованиям Европейского цифрового рынка (DMA), который обязывает крупные технологические компании обеспечивать совместимость сервисов. Пока функция доступна в тестовом режиме для ограниченного числа пользователей в ЕС.

Основное внимание уделяется безопасности: сообщения шифруются сквозным шифрованием, даже при передаче между платформами. Это позволяет пользователям общаться, не теряя приватности. Однако некоторые функции, такие как редактирование сообщений или чаты с несколькими участниками, пока недоступны при кросс-платформенной переписке.

• Высокая оценка визуального стиля, графики и плавности работы на мобильных устройствах.
• Критика управления камерой и элементов геймплея, вызывающих у некоторых пользователей тошноту.
• Восхищение технической реализацией, включая малый вес игры и использование Three.js без игрового движка.
• Запросы на добавление обучения и более понятных указаний для выполнения заданий.
• Общее впечатление умиротворения, вдохновения и ностальгии по инди-проектам.

0b5vr: 64K «живой сет» в одиночку
Японский сценер 0b5vr показал на Revision 2023 интро 0mix: 64 КБ HTML-файл, который выглядит как запись клубного live-coding-сета.

Идея
Смешал три вещи:

• техно-демки с диджейским миксом (Medium, Ion Traxx, Emix)
• live-coding: код и визуал/саунд рождаются на глазах
• 64K-интро: всё процедурно, весом до 64 КБ

Реализация
Год спустя, в одиночку:

• собственный 64K-движок на WebGL
• синтезатор и секвенсор в GLSL
• таймлайн, переходы, VJ-эффекты — всё кодом
• финальный файл — обычный index.html 64 КБ

Выводы

• Делать 64K solo «адски тяжело» — берите напарников.
• Попал в PC-demo-вместо 64K-конкурса — не обиделся, главное показать.
• В Японии растёт тренд: музыка через шейдеры, машинный лайв, генеративный VJ.

Для непрограммистов
«Сцена — место, где код = волшебство. Смотрите, танцуйте, не бойтесь».

• Ветка вызвала ностальгию у «старичков», вспомнивших mode13h и ранние 90-е.
• Новичкам советуют начать с Revision (Саарбрюккен, Пасха) или летней Evoke в Кёльне; есть специальные «newcomer corners».
• Сцена живёт ради «чистого» искусства без monetизации и чтобы тусоваться с единомышленниками.
• Ключевые ресурсы: pouet.net, scene.org, деморепозитории на GitHub.
• Европа (особенно Восточная и бывший СССР) остаётся географическим центром, но встречаются группы и в США, и в Новой Зеландии.

Глава 1: Что такое свет?
Свет — это то, что позволяет видеть мир. Древние греки считали его огнём, исходящим из глаз; Декарт — волной, Ньютон — частицами-корпускулами. Современная квантовая электродинамика объясняет всё, но в графике достаточно геометрической оптики.

Электрическая сила
Заряд бывает положительным и отрицательным; одноимённые отталкиваются, разноимённые притягиваются. Сила описывается законом Кулона. Каждый заряд создаёт электрическое поле, которое можно показать линиями поля или цветовой картой напряжённости.

Специальная теория относительности и магнетизм
Движущийся заряд рядом с проводом с током в нашей системе счёта не испытывает силы. В его собственной системе он покоится, а положительные заряды провода движутся. Из-за релятивистского сокращения длины возникает избыток отрицательных зарядов — мы воспринимаем это как магнитное отталкивание.

Уравнения Максвелла
Третье уравнение (закон Фарадея): изменяющееся магнитное поле порождает электрическое поле — принцип генераторов.
Четвёртое (закон Ампера): ток создаёт магнитное поле — основа электромагнитов.
Взаимное порождение полей даёт самоподдерживающиеся электромагнитные волны, распространяющиеся со скоростью света.

Электромагнитное излучение
Это синхронные колебания электрического и магнитного полей.

• Амплитуда — яркость (число фотонов).
• Частота — энергия отдельного фотона; выше частота → короче волна и выше энергия.

• Пользователи хвалят интерактивность и визуальные объяснения, но жалуются на проблемы с отображением в Firefox/Android.
• Автор отвечает, что всё написано на чистом JS/WebGL и выкладывает 8000-строчный исходник.
• Идёт спор о «first principles»: одни считают подход глубоким, другие — пугающе абстрактным и запутанным.
• Предложено добавить раздел о поляризации и использовать реальные BRDF-измерения для верификации моделей.
• Несколько человек делятся ссылками на похожие ресурсы и исследования по измерению материалов.

Эффект фольги в Three.js
Создаём шейдер, имитирующий голографическую наклейку: угловая иризация + блёстки.

Иризация

Цвет меняется с углом обзора: отражённый вектор → HSL-оттенок, имитируем тонкоплёночную интерференцию.

Блёстки

Процедурный шум (2D-случайные точки) даёт блестящие частицы, которые мигают при движении камеры.

Реализация

PBR-параметры используются как художественный приём, а не физика.

Вершинный шейдер

uniform float uPeelAmount, uPeelAngle;
varying vec2 vUv; varying vec3 vWorldPos, vNormal; varying float vAOIntensity;

void main() {
    vUv = vec2(uv.x, 1.0 - uv.y);
    vec3 pos = position, hinge = vec3(0);
    vec3 toVertex = pos - hinge;
    float peelFactor = (uv.x + uv.y) * 0.5;
    float angle = radians(uPeelAngle) * uPeelAmount * peelFactor;
    vec3 axis = normalize(vec3(cos(radians(uPeelAngle + 90.)), sin(radians(uPeelAngle + 90.)), 0));
    float c = cos(angle), s = sin(angle);
    pos = pos * c + cross(axis, pos) * s + axis * dot(axis, pos) * (1.0 - c);
    vNormal = normalize(normalMatrix * (normal * c + cross(axis, normal) * s + axis * dot(axis, normal) * (1.0 - c)));
    vAOIntensity = peelFactor * uPeelAmount;
    vWorldPos = (modelMatrix * vec4(pos, 1.0)).xyz;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}

Фрагментный шейдер

uniform vec3 uBaseColor, uLightDir;
uniform float uMetalness, uRoughness, uFoilScale, uFlakeDensity, uFlakeSize;
varying vec2 vUv; varying vec3 vWorldPos, vNormal; varying float vAOIntensity;

float hash(vec2 p) { return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); }
vec3 hueShift(vec3 c, float h) { return c * cos(h) + vec3(-.14861, 1.78277, -.29227) * sin(h); }

void main() {
    vec3 N = normalize(vNormal), V = normalize(cameraPosition - vWorldPos);
    float NdotV = max(dot(N, V), 0.0);
    float fresnel = pow(1.0 - NdotV, 4.0);

    vec2 uv = vUv * uFoilScale;
    float flake = smoothstep(1.0 - uFlakeSize, 1.0, hash(floor(uv * uFlakeDensity)) * hash(floor(uv * uFlakeDensity * 10.0)));
    vec3 iridescence = hueShift(uBaseColor, NdotV * 6.28318);

    vec3 color = mix(uBaseColor, iridescence, fresnel) + vec3(flake) * uMetalness;
    color *= 1.0 - vAOIntensity * 0.5;

    gl_FragColor = vec4(color, 1.0);
}

Лицензия

MIT.

• Участники делятся ссылками на похожие шейдер-эффекты: физически корректный металл, голографический «golden ticket» в Threads и Pokémon-CSS.
• Разработчики обсуждают, как встроить разнообразные фольг-эффекты MTG-карт в Svelte-приложение без потери производительности.
• Несколько человек вспоминают, что iOS-стикеры и старые мобильные игры уже используют ориентацию телефона для «блеска» 3D-объектов.
• Поднимаются технические детали: шум, воронои, лицензии (CC BY-NC), Shadertoy как песочница.
• Некоторые критикуют перегрузку «блёстками» и опасаются, что ИИ «вымоет» авторство и лицензии.

Как двигать объекты в 3D

Кликните вправо, чтобы идти дальше →

---

От круга к сферической спирали

Куб движется по кругу:
x = 10 cos(πt/2)
y = 10 sin(πt/2)

Умножаем радиус на 0.03 t — получаем растущую спираль.

---

Сферическая спираль

Добавляем z:
z = 10 cos(0.02 πt)

Радиус x, y теперь умножается на sin(0.02 πt), поэтому он сначала растёт, потом уменьшается.

x = 10 cos(πt/2) · sin(0.02 πt)
y = 10 sin(πt/2) · sin(0.02 πt)
z = 10 cos(0.02 πt)

Куб облетает сферу по спирали.

---

Итог

Положение в 3D задаётся параметрическими уравнениями x(t), y(t), z(t).
Меняя функции, получаем любые траектории — от простого круга до «хаотичных» путей.

Проект Damar • Twitter @damarberlari

• Пользователи восторгаются плавной анимацией и наглядностью объяснения сферической спирали.
• Некоторые жалуются на тормоза в Firefox/Linux и просят убрать «диззи»-эффект.
• Просят добавить навигацию свайпом/скроллом, кнопки «вперёд-назад» и RSS-ленту.
• Отмечен скачок сложности: от азов к финальной спирали — слишком большой шаг для новичков.
• Появились предложения расширить тему: полярные координаты, матрицы поворота, Fibonacci-спираль на сфере.

Академия шейдеров
Для работы приложения включите JavaScript.

• Пользователи делятся опытом: кто-то начинал с Shader Graph в Unity, но вернулся к стандартным шейдерам URP.
• Критика дизайна: «дефолтный» вид сайта и AI-генерированные текстуры создают ощущение «vibe-coded» качества.
• Технические проблемы: Firefox/Linux и некоторые версии macOS жалуются на отсутствие WebGL, хотя он поддерживается.
• Практическая ценность: шейдеры всё ещё нужны даже в Unity/UE для кастомных эффектов; без них продвинутый визуал не сделать.
• Создатели Shader Academy приглашают в Discord за фидбеком, признают использование AI лишь для комментариев и шаблонов.

• 3d hilbert curve
• shingles
• temple
• rusty maze
• spring
• fbm terrain
• torus knot
• dandelion
• power line
• woven WIP
• roots
• bumpy sphere
• abstract hourglass
• birdbath
• concrete tetrapod
• terraced floating island
• extruded clay bowl
• fancy shader props
• superellipse dominos
• dark souls tree

Автор всех работ: ameo
Geoscript и Geotoy — Casey Primozic, открытый код.

• GeoToy — это «Shadertoy для геометрии»: вместо цвета пикселя функция возвращает вершины, поэтому куб рисуется 36 вызовами, а не 921 600.
• Похож на DSL для 3D-моделей; пример «temple» помогает быстрее понять синтаксис.
• Материалы задаются не кодом, а через UI (три пиктограммы → «materials») и используют трипланарное отображение без UV.
• Анимации пока нет, но пользователи просят добавить переменную вроде iTime из Shadertoy.
• Проект вызывает ассоциации с Structure Synth и geometry-шейдерами, но последние считаются трудными для оптимизации.

Как работает технология «мультиплеера» в Figma

Основная идея
Figma позволяет десяткам дизайнеров одновременно работать над одним файлом без конфликтов. Это достигается за счёт оперативной синхронизации изменений и разрешения конфликтов на лету.

Архитектура

• WebSocket-соединение — каждый клиент держит постоянное соединение с сервером.
• Операционные преобразования (OT) — любое действие (перемещение слоя, изменение текста) описывается как операция. Сервер применяет её и рассылает всем клиентам.
• Дельты и патчи — вместо полной передачи файла отправляются только изменения, что экономит трафик и ускоряет работу.

Разрешение конфликтов
Если два пользователя одновременно изменяют один и тот же объект, алгоритм OT выстраивает правильный порядок операций, сохраняя логическую целостность. Пользователи видят результат почти мгновенно.

Производительность

• Дерево объектов хранится в памяти браузера и обновляется по мере поступления операций.
• Сжатие и батчинг — несколько операций объединяются в один пакет, чтобы снизить нагрузку на сеть.
• Кеширование — сервер хранит последние состояния файлов, чтобы быстро «догнать» клиента, который только подключился.

Безопасность и надёжность

• Все операции логируются и могут быть отменены (undo/redo).
• Данные шифруются при передаче и хранятся в зашифрованном виде.
• Регулярные снепшоты защищают от потери данных при сбоях.

Итог
Технология «мультиплеера» превращает Figma в «Google Docs для дизайна», где коллаборация происходит без конфликтов и задержек.

• Участники делятся ссылками на материалы Linear, Automerge, Croquet и другие решения для реал-тайм синхронизации.
• Обсуждают, насколько сложной остаётся задача и какие новые инструменты (Liveblocks, Electric SQL, Rocicorp Zero) делают её доступнее.
• Спорят о терминологии «multiplayer» и о том, насколько часто пользователи действительно одновременно редактируют дизайн.
• Отмечают, что Figma пошла на радикальные меры: собственный WebGL-рендерер и протокол, отказавшись от готовых библиотек.
• Шутят о случайном переключении сайта из тёмной в светлую тему при прокрутке и о «figma balls».

As a Queenslander now living in the UK, seeing Bluey for the first time filled me with homesickness in a way that no other media has.Despite the huge media industry in SEQ, it's so rare to see it actually represented as itself (rather than dressed up as Manhattan, eg). I also rem