Hacker News Digest

Эффект фольги в 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 лишь для комментариев и шаблонов.