Hacker News Digest

Тег: #threejs

Постов: 5

Mesh2Motion – Open-source web application to animate 3D models (mesh2motion.org)

Mesh2Motion — это бесплатный веб-инструмент с открытым исходным кодом для анимации 3D-моделей. Приложение поддерживает создание анимаций для человекоподобных существ, четвероногих животных и птиц. Пользователи могут импортировать модели в форматах GLB, GLTF и FBX, выбирать подходящий скелет и интуитивно настраивать его положение. Система undo/redo позволяет исправлять ошибки, а готовые анимации экспортируются в широко поддерживаемом формате GLB.

Проект полностью бесплатен как для личного, так и коммерческого использования, включает библиотеку человеческих анимаций от Quaternius и доступен онлайн по адресу app.mesh2motion.org. Разработчики подчеркивают важность наличия открытых инструментов в области 3D-анимации, которые могут развиваться вместе с сообществом. Исходный код проекта доступен на GitHub под лицензией MIT, а для обратной связи можно использовать социальные сети автора.

by Splizard • 24 октября 2025 г. в 11:01 • 210 points

ОригиналHN

#threejs#glb#fbx#bvh#3d-animation#open-source#web-application#github#mit-license

Комментарии (35)

  • Проект представляет собой open-source-утилиту для риггинга и анимации персонажей, которая использует библиотеку three-mesh-bvh и three-mesh-geometry и предоставляет экспорт в .glb и .fbx.
  • Пользователи отмечают, что это единственный инструмент, который не требует регистрации и не использует генеративный ИИ, что делает его особенно ценным для независимых разработчиков.
  • Некоторые участники обсуждения подчеркивают, что проект не предоставляет автоматическое распознавание суставов, что требует ручной настройки, и что это может быть недостатком по сравнению с Mixamo.
  • Создатель проекта отвечает, что автоматическое распознавание суставов было бы возможно, но это потребовало бы включения большого количества кода, что противоречит философии проекта быть максимально легким.
  • Также обсуждается возможность добавления поддержки экспорта в .fbx и .blend файлы, но это потребовало бы включения большого количества кода, что также противоречит философии проекта.

Using Deno as my game engine (explodi.tubatuba.net)

Разработчик перевёл свой проект детализированного градостроительного симулятора с Go на Deno, чтобы использовать веб-технологии без потери локальности исполнения. Идея в максимально точной симуляции городских процессов на основе реальных социологических данных, а не упрощённой игровой логики, как в классическом SimCity.

Deno с его встроенным инструментарием и возможностью компиляции в нативный исполняемый файл через webview_deno позволил интегрировать ThreeJS для 3D-вида и React для сложных интерфейсов данных. Это избавило от необходимости использовать Electron и сохранило цели автономности, мультиплеера и кросс-платформенности.

by phaser • 03 октября 2025 г. в 06:33 • 136 points

ОригиналHN

#deno#threejs#reactjs#webview#webassembly#webgpu#game-development#simulation

Комментарии (48)

  • Критика использования WebView2 из-за негативного восприятия пользователями установки Microsoft Edge и предложения альтернатив, таких как Tauri или локальные веб-приложения.
  • Обсуждение технических подходов к созданию игр с использованием веб-технологий (Deno, Bun, WebGPU, React) и сравнение их производительности с традиционными движками вроде Unity.
  • Вопросы о целесообразности и практичности выбора Deno в качестве основы для игрового движка, а не просто рантайма.
  • Положительные отзывы о образовательной и градостроительной ценности игры, а также предложения по доработке механик и открытию исходного кода.
  • Обсуждение бизнес-моделей и коммерческого потенциала инди-игр, созданных как "труд любви", в противовес стремлению к прибыли.

A WebGL game where you deliver messages on a tiny planet (messenger.abeto.co) 🔥 Горячее 💬 Длинная дискуссия

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

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

by thecupisblue • 27 сентября 2025 г. в 15:17 • 1932 points

ОригиналHN

#webgl#threejs#end-to-end-encryption#meta#whatsapp#instagram#digital-markets-act

Комментарии (310)

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

Implementing a Foil Sticker Effect (4rknova.com) 🔥 Горячее

Эффект фольги в 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.

by ibobev • 01 сентября 2025 г. в 18:47 • 457 points

ОригиналHN

#threejs#glsl#shaders#webgl#pbr#svelte#graphics#mit

Комментарии (45)

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

How we built Bluey’s world (itsnicethat.com) 🔥 Горячее 💬 Длинная дискуссия

by skrebbel • 01 августа 2025 г. в 12:33 • 380 points

ОригиналHN

#reactjs#threejs#webgl#webdevelopment#3d#animation

Комментарии (173)

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