Это второй день моего участия в августовском испытании обновлений.Подробности о событии смотрите:​[Вызов августовского обновления]

предисловие

Потому что фанаты в группе просили меня написать статьюРуководство для начинающих по визуализации, он пришел сегодня. На самом деле, когда дело доходит до визуализации интерфейса, все, о чем вы можете думать, это различные графики и большие экраны. Выглядит это круто, автор занимался фронтенд-разработкой 3D и постепенно увлекся графикой. Но это всегда были трехмерные вещи, а не двумерные. Около двух месяцев назад я начал кое-что узнавать о 2D, а потом написал несколько статей, и эффект был неплохой. Так что я напишу немного опыта, пожалуйста, не распыляйтесь. Я расскажу о том, как я учусь из 4 аспектов

0. Математические основы, которыми должна овладеть визуализация
1. svgучусь
2. canvasучусь
3. Визуализациядолжен освоитьАлгоритмы графов

Прочитав эту статью, вы можете примерно знать, как мне учиться и чему мне нужно учиться? И некоторые учебные материалы и учебные ресурсы, которые я рекомендую!

Математика

Когда дело доходит до математики, у многих программистов голова болит, вау, мне приходится учить отвратительную математику, чтобы писать код, но я вам очень четко говорю -Очень важныйЕсли вы хотите учиться, можете визуализировать это, математика очень важна, геометрический смысл более важен. Читатель начал понимать не глубоко, в результате чего много чего не понимаю, есть много потерь ничего себе!

вектор

В двумерном пространстве или в трехмерном пространстве есть понятие точек, но одна двухмерная, а другая трехмерная, допустим, в этой плоской прямоугольной системе координат есть вектор v. Вектор v имеет два значения: во-первых, он может представлять точку (x, y) в системе координат; во-вторых, он может представлять отрезок прямой от начала координат (0,0) до координат (x, г).

Когда я пишу холст, я предпочитаю использовать класс Point2d.Это принцип.Холст сам по себе является системой координат. Любая точка на холсте может быть представлена ​​вектором с началом в левом верхнем углу.

сложение и вычитание векторов

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

Фактически это сложение векторов.Прежде всего, это направление должно быть единичным вектором, почему это единичный вектор? ? потому что векторразмери направление, при этомЕдиничный вектор имеет только направление и длину 1, то мы просто добавляем длину этого вектора направления ✖️ к начальной точке. ты можешь его достать. За этим стоит использование сложения векторов. Позвольте мне нарисовать картинку, чтобы показать вам.

Как показано на рисунке: я хочу пройти из точки А-В, направление од, тогда можно умножить на любую длину, чтобы получить ОД и потом сложить, можно ли получить точку В? Одна картинка стоит тысячи слов! ,вычитание каждый может придумать сам,та же причина

Перекрестное и точечное умножение векторов

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

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

Угол между вектором A и вектором B является острым углом, поэтому он направлен в одном направлении. Угол между вектором B и вектором C является тупым углом, поэтому он обратный, потому что математическая формула точки произведение — длина модуля двух векторов × cosθ.

перекрестное произведение

Геометрический смысл векторного произведения также очень важен.Вы можете вычислить площадь многоугольника и вычислить другой вектор, перпендикулярный этим двум векторам. Или начните рисовать:

Вектор X и вектор Y выполняют перекрестное произведение, а полученный вектор Z представляет собой плоскость xy.normal.

Рассчитать площадь:

Математический смысл перекрестного произведения: модульная длина вектора A × модульная длина вектора B × sinθ не является высотой H параллелограмма, поэтому его можно использовать для вычисления площади.

Перекрестное произведение также можно использовать для определения направления трех точек.

Геометрическое перекрестное произведение Корсса получает числовое значение.Поскольку судят, больше ли текущее значение 0 и меньше 0, достаточно знать, повернуты ли три точки против часовой стрелки или по часовой стрелке.

Из рисунка видно, что направления OAB и OA1B различны, значение вектора OA ✖️ OB вектора и значение, рассчитанное по вектору OA1 ✖️OB, противоположны. Позвольте мне перечислить формулы для вас:

a.x * b.y - a.y * b.x

На самом деле, скалярное произведение и векторное произведение вектора очень важны, и каждый должен хорошо это понимать.На основе этого также реализованы многие из следующих графических алгоритмов.

матрица

Большинство изменений графики в пространстве можно представить матрицами, и, вероятно, они бывают следующих типов:

0. матрица перевода
1. матрица вращения
2. матрица масштабирования
3. зеркальная матрица
4. Матрица ошибок
5. проекционная матрица

Учебные ресурсы, которые я рекомендую вам здесь, взяты из Station B:

воооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо по

Суть линейной алгебры вы сможете понять, прочитав ее, в том числе и изменения между приведенными выше векторами.

Зеркальная матрица рекомендую прочитать мою статью, я вывел зеркальную матрицу любой плоскости в трехмерном пространстве,

Найдите зеркальную матрицу любой плоскости в пространстве

Здесь я дам вам краткое объяснение самых простых изменений -матрица перевода

Или посмотрите на картинку ниже:

В такой трехмерной системе координат, от точки А к точке В, x изменяется на 2, y изменяется на 0, z изменяется на 2, чему соответствует соответствующая запись матрицы:

На самом деле каждой строке в матрице соответствует соответствующая матрица, а матрица перевода вообще изменяет первые три числа четвертого столбца

изгиб

И 2d, и 3d требуют выражения кривых.Простейшие дуги, эллиптические дуги и непрерывные кривые могут быть выражены кривыми Безье, а также B-сплайнами и кривыми nurbs. Освоение кривых — это, в конечном счете, математика.

Уравнение окружности: x^2 + y^2 = r^2

Уравнение эллипса: x^2 / a^2 + y^2 / b^2 = 1

Уравнение кривой Безье n-го порядка:

Я еще не касался кривых b-сплайнов и кривых nurbs, но друзья нашей группы делают поверхности произвольной формы, которые могут быть задействованы. Здесь я просто представляю уравнение прямой линии. С помощью уравнения вы можете выполнять моделирование высокого уровня. Например, когда я делал 3D-текст, наша базовая библиотека алгоритмов не поддерживала Бесселя, но не имеет значения, если мы нет уравнений, вы можете пройти Уравнение дискретизирует кривую Безье на несколько точек, которые затем представляются прямыми линиями. Потому что, когда мы видим вещи на экране человеческими глазами, если есть много отдельных вещей, невооруженным глазом их вообще нельзя увидеть. Позвольте мне показать вам картинку здесь:

Дуга этой части выражается моей кривой Безье, дискретной в прямые линии, а точки в стране фактически превращаются дискретными кривыми Безье в прямые линии. Визуально это можно приблизительно оценить. Чтобы узнать больше о технологиях в 3D-тексте, я напишу статью, чтобы подробно представить ее позже, а я, кстати, сам разберусь. Если вам интересно, то вы должны подписаться на меня, иначе вы меня не найдете.

Преобразование системы координат

Почему у вас есть эта штука?Системы координат холста и svg - начало координат вверху слева. Вам не кажется, что это немного античеловечно? Так неудобно.Когда я рисовал линейный график, я обнаружил, что ось координат уменьшается от начала координат вверх. На самом деле, как решить эту задачу на самом деле очень просто.Переводим систему координат.Я меняю начало исходного холста на левый нижний угол, чтобы при вычислении координат точки не было умственной нагрузки. Что мне делать? как. После разговора о 2D я расскажу вам о 3D.В качестве примера возьмем Three.js.Есть локальная система координат, система координат наблюдения (камера), мировая система координат, система координат кадрирования и система координат экрана.

Это ряд операций, выполняемых объектом в пространстве до конечного экрана.

0. Во-первых, у самого объекта есть система координат, которую мы называем локальной системой координат, у него также есть начало, но у него также есть соответствующая позиция в мировой системе координат, поэтому между ними происходит изменение матрицы——Матрица модели

1. Мировая система координат - есть еще матричная смена системы координат наблюдения, которая называетсяматрица просмотра

2. Пространство наблюдения - пространство отсечения называетсяпроекционная матрицаПоскольку мы используем камеру для имитации человеческого глаза для объектов в трехмерном пространстве, можно увидеть только объекты в области усеченного зрительного нерва. У всех есть проекционная матрица, есть перспективная проекция и ортогональная проекция, одна ближняя большая и дальняя маленькая, одна дальняя и ближняя одинаковые

3. Стандартные координаты устройства - координаты экрана. Здесь возникает проблема происхождения системы координат.

   

Нормализованные координаты относятся к центру холста, но системой координат холста по умолчанию является верхний левый угол. Давайте проанализируем изменения в системе координат.Сначала ось Y противоположна, поэтому первое изменение в том, что X остается неизменным, а затем Y составляет ✖️ -1.Это правильное направление, а разница - это смещение. Смещения для разницы между осями x и y составляют половину ширины и высоты холста. Это достигается преобразованием в экранные координаты.

SVG и ХОЛСТ

Я все же рекомендую Mdn для изучения SVG и canvas.Всем надо начинать с нуля,а потом говорить о продвинутом,а потом как оптимизировать.Вы не знакомы с базовым API и говорите о продвинутом,да?

0. учебник по svg developer.Mozilla.org/this-cn/docs/…

1. учебник по холсту developer.Mozilla.org/this-cn/docs/…

   Следуй за ним и изучай его снова, постучите по нему рукой, и вы, естественно, поймете тайну. Далее 👇 небольшой опыт, которым я так долго пользовалась, и небольшие советы

2. Разница между прописными и строчными буквами в пути в svg в основном заключается в соотношении между относительным и абсолютным позиционированием.

3. Тег svg defs не отображается на холсте, он используется для следующей комбинации

4. И g, и символы svg можно комбинировать, но символы имеют понятие viewbox, то есть окна просмотра.

5. использовать тег повторного использования соответствует идентификатору, определенному выше

6. canvas очиститьПрямая()Очистите холст, потому что холст нужно перерисовывать каждый кадр.

7. restore() save()Сохраните состояние текущего холста, чтобы гарантировать, что другие элементы рисунка не будут затронуты.

8. isPointinPath ()Его можно использовать для определения того, находится ли точка на последнем нарисованном пути (с ямой), а также для определения того, находится ли точка на графике и, наконец, решена алгоритмом.

9. Использование beginPath() и closePath()

10. Обработка на уровне пикселей. Использование данных изображения.

Ознакомившись с ними, вы сможете продвинуться вперед, и рекомендуется изучить

Продвинутое исследование

Глубокое понимание холста

Джош на design.com/afraid/books/miserable…

Рекомендации по работе с Canvas (оптимизация производительности)

woo woo woo.cn blog on.com/touch crawl rolling fight/afraid…

рендеринг холста за кадром

Dev nook.GitHub.IO/off screen CA…

холст видео обучение

воооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо

Рекомендуемые книги

«Основная технология HTML5 Canvas: графика, анимация и разработка игр»

«Основная технология программирования 2D-игр HTML5»

WEBGL

1. Изучите основы графики

Обязательно посмотрите GAMES101 Modern Computer Graphics Яна Линци. Рекомендуется скорость 1,5x, которую можно освоить примерно за месяц. Следуйте курсу и закончите домашнюю работу по растровому рендерингу и трассировке лучей.После изучения этого курса основы графики почти твердые. Почти имею базовое понимание графики, игр, 3D-движков, OpenGL, Unity, UE. Сам не читал, только учусь.

воооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо

2.webgl веб-сайт обучения, это веб-сайт, который, я думаю, очень хорошего качества и немного глубокий

Основой веб-фильтрации является .org/webadmin/les, так что…

0. Шейдеры и gsl
1. Освещение и цвет
2. Как загрузить внешние модели
3. Как триангулировать точки, линии и поверхности
4. текстура

Рекомендации по книгам:

руководство по программированию webgl

Математические методы в 3D-играх и компьютерной графике

Fundamentals of Computer Graphics (4th Edition)

Directx 9.0 Основа программирования для разработки 3D-игрНастоятельно рекомендую эту книгу.Хотя она написана на C++, он очень ясно объяснил весь процесс рендеринга.В любом случае, я многому научился, прочитав ее. Это также книга, рекомендованная нашим боссом.

рамочный уровень

THREE.JS

Threy.js - самый известный проект WebGL, количество людей в взносах составляет до 1313, а реагирование - это величина, хотя его собственное положение является просто рендерингом, но сообщество трудно поставить функции Многие игровые двигатели, такие как физический двигатель, полоса, анимация и т. Д., В исходном коде есть много примеров, что очень подходит для обучения, но многие важные функции, такие как погрузчик GLTF, размещаются в каталоге примеров , что заставляет людей чувствовать себя несправедливым.

Из-за высочайшей популярности самым большим преимуществом Three.js является то, что у него сильное сообщество, поисковые вопросы могут найти много ответов, и многие проекты с открытым исходным кодом и коммерческие проекты используют его.

Но Three.js очень непрофессионален в управлении версиями и еще не принял егоsemverСоглашение об именах версий, каждый выпуск представляет собой версию под названием rXXX, я видел, что многие проекты, основанные на Three.js, исправлены в определенной версии и не осмеливаются обновляться.

BABYLONJS

Последним важным моментом является Babylon, который также является движком WebGL, который наконец-то использует Sugar.Он не только мощный, но и имеет высокое качество кода.Типы TypeScript идеальны, и почти каждая функция имеет комментарии.

Babylon богат материалами.В дополнение к базовому PBR, он также предлагает SubSurface для кожи, ClearCoat для автомобильной краски, Sheen для ткани и Anisotropy для анизотропных материалов, таких как диски.Подождите.

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

ANTV

В AntV есть несколько разных движков визуализации, по сути, они изолированы и независимы друг от друга. Когда ты учишься, ты должен учиться один. Куб диаграммы ChartCube поддерживает интерактивное создание диаграмм. Карты визуализируются с использованием геопространственных данных L7.

ECHARTS

ECharts изначально была аббревиатурой от «Enterprise Charts» (Enterprise Charts) от команды визуализации данных Baidu EFE, представляет собой библиотеку визуализации с открытым исходным кодом, реализованную на JavaScript. Функции ECharts очень мощные, они были тщательно оптимизированы для мобильных терминалов, адаптированы для апплета WeChat, поддерживают несколько методов рендеринга и интерфейсного отображения десятков миллионов данных и даже обеспечивают безбарьерный доступ. Нижний слой инкапсулирован библиотекой z-render. Это все еще стоит изучить, это немного похоже на концепцию компонентов, и его можно настроить для отображения диаграмм.

D3

D3 означает документы, управляемые данными. D3.js — это библиотека JavaScript, которая манипулирует документами с помощью данных. D3 может оживлять данные с помощью HTML, SVG и CSS. D3 строго придерживается веб-стандартов, что делает вашу программу легко совместимой с современными популярными браузерами и позволяет избежать зависимости от конкретных фреймворков. В то же время он предоставляет мощные визуальные компоненты, которые позволяют пользователям манипулировать DOM на основе данных. Это называется визуальная версия jquery.

Алгоритмы графов

Наконец, давайте поговорим о графических алгоритмах, которые необходимо освоить, например, на очень простых примерах. Определение того, находится ли точка внутри произвольного многоугольника, не так ли?Это задействованный алгоритм.

наверное перечислю

0. Определить, находится ли точка в любом замкнутом многоугольникеИспользуя метод обнаружения луча, есть внутренние точки, такие как отправка луча в любом направлении для расчета количества точек пересечения, нечетное число — внутреннее, четное — внешнее.
1. Определите направление непрерывного многоугольника по часовой стрелке или против часовой стрелкиНайдите плюс или минус площади Найти норамл плоскости (использовать с осторожностью) неточно для вогнутых многоугольников
2. Под двумерную графику пересечение произвольной графики рекомендуют две библиотекиКонцепция машинки для стрижки и дерновых отверстий и внешних контуров, вы можете понять их на Baidu.
3. Определить, на какой стороне вектора находится точкаНаправление трех точек выше против часовой стрелки или по часовой стрелке?
4. Сегмент линии находит сегмент линии находит пересечениеНайдите фокус уравнения прямой линии
5. Найдите отношение сдерживания любых двух областей, внутри, снаружи, пересечения
6. Проверка удараограничивающая рамка найти пересечение

Здесь я кратко перечисляю некоторые алгоритмы, которые использую в своей работе.

Некоторые рекомендуемые статьи:

Разговор о нескольких алгоритмах "Поиска пересечения отрезков" (реализация js, полная версия)

Блог woohoo.cn on.com/i-GPS/arc Привет…

Несколько общих алгоритмов, связанных с вычислительной геометрией и графикой

blog.CSDN.net/Wilson1068/…

Алгоритм Point Inside Polygon. Определите, находится ли точка внутри сложного многоугольника.

blog.csdn.net/good bance 2005 / Art ...

Реализовать пересечение и различие полигонов и смещений

turfjs.org/

Подробное объяснение китайского документа библиотеки Clipper

блог woo woo woo.cn на.com/only care/afraid/119…

Суммировать

Эта статья, вероятно, является моим личным пониманием, уровень ограничен, и можно выразить только так много. Если есть лучше добро пожаловать в дополнение к изучению и общению, прошу поправить меня, если в статье есть ошибки. Наконец, я дам вам интеллект-карту для сравнения и изучения. Я Флай, который любит графику, увидимся в следующий раз👋.Наконец, если вы чувствуете, что статья полезна для вас после ее прочтения, поставьте ей лайк 👍 и подпишитесь и продолжайте, я продолжу делиться качественными статьями.

приобретение ресурсов

Если вам это будет полезно, вы можете обратить внимание на паблик аккаунта [внешняя графика] и ответить"карта разума«Двумя словами можнобесплатноПолучите интеллект-карту высокого разрешения.