Hacker News Digest

• Размытие в играх — основа эффектов: Bloom, DoF, UI.
• Цель: быстрое размытие в реальном времени на GPU.
• Путь: от простого Box Blur до Dual Kawase Blur.

---

Box Blur

Среднее цветов в квадрате.
Проблема: O(n²) по радиусу, медленно.

---

Ядро (kernel)

Матрица весов для свёртки.
Box = все веса 1.
Gaussian = веса по нормальному распределению.

---

Gaussian Blur

Два прохода: горизонталь + вертикаль → O(n) вместо O(n²).
Но: при радиусе > 10 всё ещё дорого.

---

Частоты

Размытие = низкочастотный фильтр.
Можно свернуть сразу в частотной области, но FFT на маленьких изображениях не выигрывает.

---

Оптимизации

• Билинейная интерполяция: считаем не каждый пиксель, а с шагом 2×, экономим 4× выборок.
• Даунсемплинг: уменьшаем изображение в 2×, размываем, растягиваем обратно — почти бесплатно.

---

Kawase Blur

4–5 проходов с offset-выборками по спирали.
Выглядит как Gaussian, но дешевле при больших радиусах.

---

Dual Kawase Blur

Пара Kawase-проходов на уменьшенной копии + один upscale.
Результат: кинематографическое размытие за O(log n).
Используют Unreal, Unity, Frostbite — де-факто стандарт.

---

Итог

Dual Kawase = лучшее соотношение качество/скорость для больших радиусов в реальном времени.

• Автор статьи рассказал о Dual-Kawase Blur и личном интервью с Масаки Кавасэ.
• Участники обсудили, что Kawase-blur 2005 года уступает современным боке-эффектам, но всё ещё полезен на слабом железе.
• Поднят вопрос: как адаптировать Kawase для compute-шейдеров без записи в DRAM.
• Уточнили, что гауссово размытие можно точно получить в Фурье-пространстве, но это не всегда быстрее.
• Появились советы по улучшению читаемости (убрать выключку) и объяснено, что Spherical Harmonics не связаны с размытием.

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

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

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