Психоделическая абстрактная визуализация с использованием WebGPU и WGSL шейдеров.

• 🎨 4 визуальных слоя:

  • Background: Эволюционирующий психоделический фон
  • Liquid: Жидкие дисторсии и искажения
  • Razaka: Ленты, сферы и геометрические элементы
  • Flames: Пламя, облака и варпированный чекерборд

• ⚡ WebGPU рендеринг: Максимальная производительность на GPU

• 🎭 Процедурная генерация: Бесконечная анимация без повторов

• 🌈 Динамическая палитра: Плавные цветовые переходы

• 📱 Адаптивный дизайн: Работает на любых разрешениях

# Установить зависимости
npm install

# Запустить dev сервер
npm run dev

Откроется браузер на http://localhost:5173

# Собрать проект
npm run build

# Предпросмотр собранной версии
npm run preview

Проект настроен для автоматического деплоя на GitHub User Pages (taravkov.github.io).

1. Настрой Pages в GitHub:

   • Открой https://github.com/taravkov/taravkov.github.io/settings/pages
   • Source: выбери "GitHub Actions"
   • Сохрани

2. Запуш код:

   git add .
   git commit -m "Initial commit"
   git push origin main

3. Готово! Сайт будет доступен на:

   https://taravkov.github.io
   

GitHub Actions автоматически соберет и задеплоит проект!

Примечание: Для User Pages (username.github.io) конфигурация vite.config.js уже правильно настроена с base: '/'

📖 Подробная инструкция: См. DEPLOYMENT.md

• Vite - Быстрая сборка и dev сервер
• WebGPU - Современный GPU API для браузера
• WGSL - WebGPU Shading Language
• Three.js - 3D библиотека (минимальное использование)

surreal_3d/
├── src/
│   ├── main.js              # Точка входа
│   ├── webgpu.js            # WebGPU рендерер
│   ├── audio.js             # Аудио система (placeholder)
│   └── shaders/
│       ├── abstract.wgsl    # Главный шейдер
│       └── components/
│           ├── common.wgsl  # Общие утилиты и noise
│           ├── razaka.wgsl  # Razaka layer
│           └── flames.wgsl  # Flames layer
├── index.html
├── package.json
├── vite.config.js
└── .github/
    └── workflows/
        └── deploy.yml       # GitHub Actions деплой

Цвета генерируются процедурно в src/shaders/components/common.wgsl:

fn evolvingColor(baseHue: f32, time: f32, seed: f32) -> vec3f {
    // Настрой диапазон hue для других цветов
    let hue1 = 0.55 + zoneFactor * 0.9;  // Purple/blue/pink
    let hue2 = zoneFactor * 0.2 - 0.1;   // Deep red
    ...
}

В src/main.js:

const time = performance.now() / 1000;  // Измени делитель для скорости

В шейдерах:

let t = uniforms.time * 0.3;  // Измени множитель

1. Создай новый файл в src/shaders/components/
2. Импортируй в src/main.js
3. Добавь вызов в src/shaders/abstract.wgsl

• Современный браузер с поддержкой WebGPU:
  • Chrome/Edge 113+
  • Firefox (с включенным флагом)
  • Safari Technology Preview

Проверить поддержку: webgpureport.org

• Обнови браузер до последней версии
• Для Firefox: включи dom.webgpu.enabled в about:config
• Проверь что GPU не в черном списке

• Закрой другие вкладки
• Уменьши разрешение окна
• Проверь что используется дискретная видеокарта (для ноутбуков)

• Обнови драйвера видеокарты
• Попробуй другой браузер
• Проверь консоль на ошибки шейдеров

MIT License - делай что хочешь с кодом!

Pull requests приветствуются! Для больших изменений сначала открой issue.

После деплоя твоя визуализация будет доступна по адресам:

https://taravkov.github.io
https://cj-t.ee

Используется кастомный домен cj-t.ee с автоматическим HTTPS!

Создано с ❤️ и WebGPU