All MicroEvals
Создай полностью автономный, рабочий HTML-файл с интерактивн...
Create MicroEval
Header image for Создай полностью автономный, рабочий HTML-файл с интерактивн...

Создай полностью автономный, рабочий HTML-файл с интерактивн...

Prompt

Создай полностью автономный, рабочий HTML-файл с интерактивной 3D-симуляцией спиральной галактики из частиц на Three.js (подключи через cdnjs) с использованием кастомных GLSL-шейдеров (THREE.ShaderMaterial). Визуальный ориентир: эстетика космического спирального вихря частиц на черном фоне (как на странице GPT-6 Astra). Технические требования к реализации: 1. Сцена и рендерер: - Полное окно (100vw, 100vh), фон строго глубокий черный (#000000). - Поддержка `window.devicePixelRatio`, обработчик `resize`. - Рендерер с включенным `antialias: true` и `powerPreference: "high-performance"`. 2. Распределение частиц (CPU/BufferGeometry): - Количество частиц: 70 000 – 100 000. - Геометрия: логарифмическая спираль с 2 выраженными рукавами ($r = a \cdot e^{b\theta}$). - Центр: плотное, ослепительно яркое ядро со степенным сгущением к началу координат. - Рукава: добавь нормальное (гауссово) случайное рассеивание по осям X, Y, Z, чтобы создать объемный пылевой диск и звездные кластеры. - Атрибуты буфера: передай в шейдер `position`, `customColor`, `size` и `randomShift/twinkle`. 3. Шейдеры (GLSL): - Vertex Shader: * Расчет размера точки с аттенюацией по глубине: `gl_PointSize = size * (scale / -mvPosition.z)`. * Добавь мерцание частиц на основе синуса времени `uTime` и индивидуального сдвига. - Fragment Shader: * Никаких внешних текстур-картинок — рисуй мягкие светящиеся сферы процедурно через `gl_PointCoord`. * Радиальный градиент с экспоненциальным затуханием от центра к краю точки (`smoothstep` / `exp`), отсечение углов квадрата (`discard` при `dist > 0.5`). * Смешение цветов: от горячего белого ядра к мягкому ледяному белому и теплым янтарно-золотым звездам в рукавах. - Материал: `blending: THREE.AdditiveBlending`, `depthWrite: false`, `transparent: true`. 4. Анимация и интерактивность: - Плавное, непрерывное вращение галактики вокруг центральной оси через `requestAnimationFrame`. - Реакция на курсор мыши: плавный параллакс (lerp/демпфирование угла наклона камеры при движении курсора). - Оптимизация: без просадок FPS, чистый код в одном файле без внешних ассетов.

A system prompt was added to support web rendering