Магнитные поля в браузере: как я заставил Gemini и WebGPU работать вместо инженера

Почему я решил заменить Ansys одним HTML-файлом

Каждый раз, когда нужно было проверить простую магнитную конфигурацию, я открывал Ansys или FEMM. Запуск занимал минуты, лицензия стоила тысячи долларов, а результат - статичная картинка, которую нельзя было повернуть или изменить в реальном времени. Это бесило.

В январе 2026 года ситуация изменилась. WebGPU стал стабильным API в Chrome и Edge, а Gemini 3 Pro оставался бесплатным в Google AI Studio. Возник вопрос: можно ли создать солвер магнитных полей, который работает прямо в браузере, без серверов, без установки, в одном HTML-файле?

Оказалось - можно. И это работает быстрее, чем кажется.

Что такое солвер магнитных полей и зачем он нужен

Если говорить просто - это программа, которая рассчитывает, как будут вести себя магниты в пространстве. Где будут силовые линии, какова напряженность поля, как расположатся ферромагнитные материалы.

В промышленности такие расчеты делают для электродвигателей, трансформаторов, магнитных сепараторов. В хобби-проектах - для левитирующих устройств, магнитных подшипников, научных демонстраций.

Традиционные солверы используют метод конечных элементов (FEM). Это сложно, ресурсоемко, требует сеток и итераций. Мой подход проще: метод суперпозиции. Каждый магнит - это диполь, поле суммируется аналитически. Не так точно, как FEM, но для визуализации и быстрых оценок - идеально.

Архитектура: три слоя в одном файле

Вся система умещается в один HTML-файл размером около 300 строк. Вот как она устроена:

1 Слой вычислений: WebGPU шейдеры

WebGPU - это не просто "WebGL 2.0". Это доступ к GPU на уровне современных графических API. Важное отличие: compute shaders. Позволяют выполнять произвольные вычисления, не связанные с рендерингом.

Для расчета магнитного поля в 1000 точках на CPU JavaScript потребовались бы секунды. На GPU через WebGPU - миллисекунды. Потому что расчеты распараллеливаются: каждая точка обрабатывается отдельным потоком GPU.

// Упрощенный compute shader для расчета поля
const shaderCode = `
@group(0) @binding(0) var magnets: array;
@group(0) @binding(1) var field: array;

struct Magnets {
  position: vec3f,
  moment: vec3f,
};

@compute @workgroup_size(64)
fn main(@builtin(global_invocation_id) id: vec3u) {
  let idx = id.x;
  var total_field = vec3f(0.0);
  
  // Для каждого магнита считаем вклад в точку idx
  for (var i = 0u; i < arrayLength(&magnets); i++) {
    let r = field_positions[idx] - magnets[i].position;
    let r_len = length(r);
    let r_norm = r / r_len;
    
    // Формула поля магнитного диполя
    let m_dot_r = dot(magnets[i].moment, r_norm);
    let field_contrib = (3.0 * r_norm * m_dot_r - magnets[i].moment) / (r_len * r_len * r_len);
    total_field += field_contrib;
  }
  
  field[idx] = total_field;
}
`;

2 Слой визуализации: Three.js

Three.js в 2026 году - это монстр. WebGL 2.0, WebGPU рендерер, встроенные пост-эффекты. Для визуализации магнитного поля я использовал:

• Силовые линии как трубки (TubeGeometry)
• Цветовую кодировку напряженности (от синего к красному)
• Интерактивную камеру с OrbitControls
• Магниты как цветные параллелепипеды

Самое сложное - отрисовать силовые линии. Они начинаются от северного полюса магнита и идут по направлению поля. Алгоритм интегрирования (Runge-Kutta 4) тоже работает на GPU.

3 Слой интеллекта: Gemini 3 Pro

Вот где начинается магия. Я не писал формулы для магнитных полей вручную. Не отлаживал шейдеры. Не настраивал параметры визуализации.

Вместо этого я давал Gemini промпты вроде:

"Напиши WebGPU compute shader на WGSL, который вычисляет магнитное поле 
от массива диполей в заданных точках пространства. Используй формулу 
поля магнитного диполя: B = (3r(m·r) - m)/r^5"

Или:

"Создай Three.js сцену с возможностью добавлять магнитные диполи 
интерактивно. Магниты должны отображаться как прямоугольники 
с цветом, указывающим ориентацию."

Gemini 3 Pro справлялся в 80% случаев. Ошибки были в деталях: неправильные индексы в шейдерах, путаница в системах координат. Но исправить готовый код проще, чем писать с нуля.

Сравнение с профессиональными инструментами

Вывод очевиден: для профессиональных расчетов нужен Ansys. Для быстрых прототипов, обучения, демонстраций - наш солвер выигрывает по всем параметрам, кроме точности.

Как НЕ надо делать: ошибки, которые я совершил

Первый вариант был ужасен. Я попросил Gemini "сделать все сразу". Получил 500 строк непонятного кода, который не компилировался. Вот что я понял:

Ошибка 1: Смешивание логики в одном промпте

Нельзя просить "напиши солвер магнитных полей с визуализацией". Gemini пытается уместить все в один ответ, теряет детали, путается.

Правильно: разбить на микрозадачи:

1. Структура данных для магнитов
2. Функция расчета поля в точке
3. WebGPU шейдер для параллельного расчета
4. Three.js сцена с базовыми объектами
5. Интегратор силовых линий
6. Интерфейс добавления/удаления магнитов

Ошибка 2: Игнорирование особенностей WebGPU

WebGPU в 2026 году все еще сыроват. Буферы нужно выравнивать, шейдеры компилировать асинхронно, контекст получать с флагами.

Gemini иногда предлагает устаревший синтаксис или игнорирует требования безопасности. Всегда проверяйте код на WebGPU Report (партнерская ссылка на актуальную документацию).

Ошибка 3: Отсутствие валидации

Первые версии падали, если магнит оказывался точно в точке расчета (деление на ноль). Gemini не предупредил об этом. Пришлось добавлять epsilon вручную:

// Было:
let field_contrib = (3.0 * r_norm * m_dot_r - magnets[i].moment) / (r_len * r_len * r_len);

// Стало:
let r_len_safe = max(r_len, 0.001);
let field_contrib = (3.0 * r_norm * m_dot_r - magnets[i].moment) / (r_len_safe * r_len_safe * r_len_safe);

Производительность: на что способен браузер в 2026

Я тестировал на трех конфигурациях:

• Ноутбук с Intel Iris Xe (интегрированная графика)
• ПК с NVIDIA RTX 4070
• MacBook M3 Pro

Результаты удивили:

Вывод: даже интегрированная графика справляется с расчетами в реальном времени. WebGPU действительно использует GPU эффективно.

Где это можно использовать уже сейчас

Мой солвер - не игрушка. Вот реальные сценарии:

Образование

Студенты физики могут видеть, как меняется поле при перемещении магнитов. Не статичные картинки из учебника, а интерактивная модель. Можно показать разницу между диполем и контуром с током, влияние ферромагнитного экрана.

Прототипирование устройств

Нужно быстро оценить, как расположить магниты в самодельном двигателе или магнитной левитации. Вместо расчетов в Matlab - перетаскиваем магниты в браузере, сразу видим поле.

Демонстрации для клиентов

Отправляете один HTML-файл. Клиент открывает в браузере, видит работу вашего устройства. Никаких установок, никаких лицензий. Как в интерактивных симуляциях Google Search, но для вашего продукта.

Что дальше: куда развивать такой подход

Магнитные поля - только начало. Такая же архитектура работает для:

• Тепловых расчетов (уравнение теплопроводности на GPU)
• Механики жидкостей (упрощенный решатель Навье-Стокса)
• Электростатики (поле точечных зарядов)
• Оптики (трассировка лучей в простых средах)

Главное ограничение - точность. Метод суперпозиции не учитывает граничные условия, нелинейные материалы, динамические эффекты. Но для 80% бытовых задач хватает.

Как начать свой проект с Gemini и WebGPU

Если хотите повторить или сделать что-то подобное:

1. Откройте Google AI Studio (партнерская ссылка на официальный сервис)
2. Выберите Gemini 3 Pro - он бесплатен для разумного использования
3. Начните с простого: "Напиши функцию на JavaScript, которая вычисляет..."
4. Постепенно усложняйте: добавляйте WebGPU, Three.js, интерактивность
5. Тестируйте в Chrome Canary с включенным WebGPU
6. Используйте полный гид по AI-инструментам Google для продвинутых техник

Самое важное: не бойтесь говорить Gemini "это не работает, исправь". Или "объясни, почему здесь используется эта формула". AI Studio в 2026 году позволяет вести диалог из 50+ сообщений, что достаточно для сложного проекта.

И последнее: сохраняйте промпты. Успешные промпты для инженерных расчетов - это ценный актив. Через месяц вы забудете, как именно просили сделать расчет градиента поля. А с промптом - воспроизведете за минуту.

Браузер стал мощнее, чем мы думаем. AI стал умнее, чем мы ожидали. Вместе они позволяют делать то, что раньше требовало команды разработчиков и год работы. Попробуйте. Худшее, что может случиться - вы потратите час и поймете, что ваш ноутбук не тянет WebGPU. Лучшее - создадите инструмент, который сэкономит вам сотни часов.