Hacker News Digest

Эксперименты — основа хорошего вкуса в программировании. Автор признается, что в детстве пробовал многое (гитару, боевые искусства), но с программированием не экспериментировал, хотя и восхищался играми. Позже он понял, что эксперименты — ключевой элемент его обучения. Примеры экспериментов: настройка чувствительности мыши в играх, конфигурация Linux, кастомизация механических клавиатур. Цитируется мнение: «Когда ты экспериментируешь и выбрасываешь результаты — это практика, которая должна быть мимолетной, исследовательской и частой».

Хороший вкус формируется через использование разных инструментов, отбор подходящих и отказ от неподходящих. Автор подчеркивает, что «никакое время, потраченное на обучение, не пропало зря». Он призывает сомневаться в общепринятых нормах, экспериментировать и ломать вещи. Важно найти баланс: автор не тратит все время на настройку neovim, но регулярно пробует новые технологии (GLSL, Rust, Swift), чтобы расширить кругозор и развить способность отличать посредственность от мастерства.

• Обсуждение свелось к тому, что «taste» и «tinkering» — это не про элитарность, а про любознательность и готовность экспериментировать.
• Участники обменялись историями о том, как раньше они тоже «игрались» с настройками, но со временем пришли к минимализму и перестали это делать.
• Поднялась тема о том, что «taste» в разработке ПО — это не про эстетику, а про умение выбирать правильные инструменты и не тратить время на бессмысленные оптимизации.
• Некоторые участники выразили обеспокоенность тем, что статья не раскрывает, что именно делает «taste» важным и почему он важен.
• В итоге обсуждение сошлось на том, что «taste» — это не врождённое качество, а навык, который развивается с опытом и вовремя отпускает человека от бессмысленных занятий.

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

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

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

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.
• Европа (особенно Восточная и бывший СССР) остаётся географическим центром, но встречаются группы и в США, и в Новой Зеландии.

Эффект фольги в 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 как песочница.
• Некоторые критикуют перегрузку «блёстками» и опасаются, что ИИ «вымоет» авторство и лицензии.