Hacker News Digest

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