Web Dev Sandbox

Симулятор разработки: приложение для заметок (часть 2)

2022-11-02T12:10:18.408Z

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

Сегодня нам предстоит спланировать этапы, которые будут отвечать за то, в какой последовательности мы будем что-то разрабатывать или настраивать + начнем работать с кодом, мы то знаем, что это самая кайфовая часть)

Давайте посмотрим на то, как выглядит наша доска с задачами в данный момент:

Задача, которая сформулирована как "Создать каркас приложения" - не особо то понятна, помните, что при виде задачи, вы должны с легкостью себе ответить на вопросы:

Что именно должно быть сделано в этой задаче?
Как я пойму, что задача завершена?

Определяемся, что нужно для старта

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

Что нужно чтобы сделать фронтовой проект? Ну, давайте подумаем...

Создать базовый проект и очистить его от всего ненужного (банальный create-react-app)
Определиться со стайлингом и настроить автоматическое исправление
Определиться со структурой папок, чтобы не было хаоса
Настроить коннект с git

Пакеты все пачкой ставить не будем, лучше этим заниматься по мере необходимости!

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

Создаем базовый проект и зачищаем ненужное

Приступаем к первой задаче, просто создадим наше приложение:

yarn create react-app note-app --template typescript

Чтобы у нас не было ничего лишнего, удалим все из папки src, кроме index.tsx, index.css и App.tsx, причем в index.tsx оставим только вот это:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

А в App.tsx вот это:

import React from 'react';

const App = () => {
  return <div>App</div>;
};

export default App;

А в папке public/ оставим только

Настраиваем eslint

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

Для начала поставим необходимые зависимости для eslint:

yarn add -D eslint-plugin-import @typescript-eslint/parser eslint-import-resolver-typescript

После чего произведем инициализацию:

npx eslint --init

Отвечаем на вопросы в консоли примерно вот так:

How would you like to use ESLint?

-> To check syntax and find problems

What type of modules does your project use?

-> JavaScript modules (import/export)

Which framework does your project use?

-> React

Does your project use TypeScript?

-> Yes

Where does your code run?

-> Browser, Node

What format do you want your config file to be in?

-> JSON

Would you like to install them now?

-> yes

Which package manager do you want to use?

-> yarn

После этого нужно будет внести некоторые изменения в .eslintrc.json чтобы внести немного своих правил + чтобы у нас не было дальше конфликта с prettier, итоговый файл выглядит вот так:

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true,
    "jest": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "react-hooks",
    "@typescript-eslint",
    "prettier"
  ],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "spaced-comment": "error",
    "quotes": ["error", "single"],
    "no-duplicate-imports": "error"
  },
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
}

Настраиваем prettier

Устанавливаем необходимые зависимости:

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react-hooks

И создаем файл .prettierrc.json:

{
  "semi": true,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "all",
  "jsxSingleQuote": true,
  "bracketSpacing": true
}

И так, на этом настройка утилит закончена, осталось только добавить новые скрипты в package.json:

"lint": "eslint src/**/*.{js,jsx,ts,tsx,json}",
"lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx,json}'",
"format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"

Структура папок

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

И так, я предлагаю придерживаться в нашем проекте вот такой структуры:

-src/
----components/
------App/
--------index.ts
--------component.tsx
--------test.tsx 
------- style.css
------Sidebar/
--------index.ts
--------component.tsx
--------test.tsx 
------- style.css
------...

----hooks/
----context/
----typings/
----configs/

----services/
------Database/
--------index.ts
--------service.ts
--------test.ts

components/ - для хранения компонент нашего приложения
hooks/ - для общих хуков, которые используются в разных местах
context/ - для описание различных контекстов приложения
typings/ - для описание типов в приложении
configs/ - для хранения различных кончиков (например, роутинг)
services/ - для описание различных утилит, которые пригодятся нам при работе

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

Если у вас есть свои идеи по структуре файлов, то жду ваши комментарии)

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

Ну а мы, пойдем дальше...

Приступаем к планированию разработки

Для начала давайте вспомним формальные требования, которые мы составили в прошлый раз:

Необходимо создать приложение Заметки с помощью Reactjs и технологий браузеров.

Возможные действия с заметками:

Создать (нажимаем на кнопку создать, открывается markdown редактор на ввод)
Редактировать (чтобы редактировать заметку нужно открыть нужную заметку и нажать на отдельную кнопку для редактирования)
Удалить (чтобы удалить заметку нужно открыть нужную заметку и нажать на отдельную кнопку для удаления, после чего нужна остерегающая модалка)

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

Если подумать, то нужно сделать примерно следующие задачи:

Настроить навигацию, чтобы иметь возможность перемещаться между заметками
Подключить базу данных
Настроить общий контекст
Отображение списка существующих заметок
Открытие текста определенной заметки
Создание простой текстовой заметки
Удаления заметки
Редактирование заметки
Поиск по списку заметок
Отображение заметки в виде отрендеренного Markdown
Что-то еще?

Возможно, сейчас я что-то упустила, но мы это с вами обнаружим в ходе работы, если что!

Унесите эти задачи себе на доску проекта, чтобы ничего не потерять!

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

Если вам интересен такой формат разора работы над проектом, то очень жду ваших реакций и комментариев!

🤖 Чтобы не пропустить новые уроки подпишись на телеграм канал!

Симулятор разработки: приложение для заметок (часть 1)

2022-10-27T11:52:20.706Z

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

Именно поэтому, для тех у кого еще нет опыта работы над большими проектами, я решила запустить новый вид циклов статей "Симулятор разработки", чтобы вы могли с головой погрузиться в эту историю!

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

как формализовать требования
составить простенький макет
организовать основу архитектуры приложения

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

React Context
React Router
Markdown
Dexie.js
Библиотека компонент Antd
TypeScript

Формализуем требования

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

Поэтому для начала мы с вами формализуем требования к нашему приложению.

Если подумать, то для в случае заметок, скорее всего, от заказчика мы бы получили примерно следующую формулировку:

Необходимо создать приложение Заметки с помощью Reactjs и технологий браузеров. Важно, чтобы можно было создавать заметки через markdown и просматривать их в преобразованном виде.

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

Как должно происходить сохранение заметки
Открывается ли при клике на заметку сразу режим редактирования или просто отображения?
Можно ли удалять заметки? Выводим предупреждения?

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

Необходимо создать приложение Заметки с помощью Reactjs и технологий браузеров.

Возможные действия с заметками:

Создать (нажимаем на кнопку создать, открывается markdown редактор на ввод)
Редактировать (чтобы редактировать заметку нужно открыть нужную заметку и нажать на отдельную кнопку для редактирования)
Удалить (чтобы удалить заметку нужно открыть нужную заметку и нажать на отдельную кнопку для удаления, после чего нужна остерегающая модалка)

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

Составим план

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

На данном этапе можно представить нашу доску примерно вот так:

Я составляю подобные доску в Notion, но в целом можно и в любом другом инструменте, например, Trello.

Если вы хотите тоже делать это в Notion, то можете скопировать себе мой шаблон и использовать!

Как видите тут еще нет задач на разработку, но нам уже есть что делать дальше, поэтому не будем останавливаться.

Прототип внешнего вида

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

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

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

Если что, то вот какой элемент чем является:

Базовая архитектура

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

Чтобы не устраивать ад пропсов (~~а что если я хочу?~~) у нас в приложении мы будем использовать React Context, значит у нас будет что-то вроде основного компонента, который создает нам всю истину общаясь с бд и генерируя нужные колбеки, назовем его, возможно, банально, но App.

Для наглядности буду приводить картинки

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

Не буду углубляться в детали, нам сейчас это не нужно, и приведу следующую картинку, которая сделает наш дальнейший план разработки немного более понятным (желтые - компоненты, которые умеют что-то делать с контексом):

И так, после проделанной работы наша доска проекта выглядит примерно вот так

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

Если вам интересен такой формат разора работы над проектом, то очень жду ваших реакций и комментариев!

🤖 Чтобы не пропустить новые уроки подпишись на телеграм канал!

React является декларативным - что это значит?

2022-10-25T16:31:05.243Z

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

Декларативный vs императивный

Противоположностью декларативности является императивность. Это не специфические для React термины. Они применимы к программированию в целом.

Если кратко, то с точки зрения пользовательских интерфейсов:

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

Давайте посмотрим на примеры

Допустим, нам нужно создать такой пользовательский интерфейс:

Императивный подход

Вот императивное решение.Для каждого взаимодействия мы предоставляем пошаговые мутации DOM для достижения желаемого состояния пользовательского интерфейса.

const btn = document.querySelector('.btn');
const container = document.querySelector('.container');

const listner1 = () => {
  btn.style.background = '#DB2777';
  btn.innerText = 'Точно?';
  btn.removeEventListener('click', listner1);
  btn.addEventListener('click', listner2);
}

const listner2 = () => {
  container.innerText = '🦄';
  btn.style.display = 'none';
}

btn.addEventListener('click', listner1);

Вот песочница с примером, чтобы можно было потыкаться:

Декларативный подход

Вот пример декларативного решения React.

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

const [scene, setScene] = useState('button');

if (scene === 'button') {
  return (
    <Button
      blue
      onClick={() => setScene('question')}
    >
      Покажи единорожку
    </Button>
  );
}

if (scene === 'question') {
  return (
    <Button
      pink
      onClick={() => setScene('unicorn')}
    >
      Точно?
    </Button>
  );
}

if (scene === 'unicorn') {
  return <span>🦄</span>
}

Мы можем структурировать компонент по-другому. Это не делает его менее декларативным.

const [scene, setScene] = useState('button');

if (scene === 'button' || scene === 'question') {
  return (
    <Button
      blue={scene === 'button'}
      pink={scene === 'question'}
      onClick={() => setScene(scene === 'button' ? 'question' : 'unicorn')}
    >
      {scene === 'button' ? 'Покажи единорожку' : 'Точно?'}
    </Button>
  );
}


if (scene === 'unicorn') {
  return <span>🦄</span>
}

Декларативным этот подход делает то, что мы описываем конечный пользовательский интерфейс для любого данного представления состояния. Это противоположно предоставлению ручных мутаций DOM для перехода между состояниями пользовательского интерфейса (императив).

На этом сегодня все, надеюсь вам это было полезно!

🤖 Чтобы не пропустить новые уроки подпишись на телеграм канал!

Исследуем код React (часть 1)

2022-10-09T12:57:55.386Z

Я всегда воспринимала React как черный ящик, который берет JSX и выводит что-то на экран, не задумываясь о том, как он это делает.

Конечно, я знаю то-то и то-то о виртуальном DOM и алгоритме свертки и т.д. По крайней мере, в теории.

Но только в этом году мое любопытство наконец-то пересилило меня. Я открыла репозиторий React, но на этот раз с намерением прочитать код....

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

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

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

Ну что же, давайте начнем!

И первое что мы видим... Монорепа

Я открыла репозиторий ректа, ожидая найти каталог src. Вместо этого я увидела один каталог с названием packages, сразу поняв, что передо мной монорепа.

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

Репозиторий React содержит 30+ пакетов, включая react, react-dom, react-server, react-devtools и многие другие.

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

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

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

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

Однако это не критика архитектуры React. Я уверена, что мейнтейнеры разобрались в своих процессах.

С чего бы начать?

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

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

Что такое такое публичные API React?

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

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

import ReactDOM from 'react-dom';

const root = ReactDOM.createRoot(container);
root.render(element);

Это синтаксис для подключения нашего приложения к DOM, начиная с React 18. Прочитав реализацию этих функций и отследив операции, которые они выполняют, мы можем начать разбираться с кодовой базой.

Возможно, вы заметили, что функция, которую мы будем изучать, не является частью основной библиотеки. Она является частью react-dom, которая представляет собой привязку браузера к React, соединяющую его с DOM.

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

Как происходит подключение к Reconciler
Что скрывает в себе Component
Как именно настроено взаимодействие между Renderer и Reconciler
Посмотрим на основные методы Renderer

На этом сегодня все, надеюсь я вас немного заинтересовала и вы захотите прочитать этот цикл статей полностью!

🤖 Чтобы не пропустить новые уроки подпишись на телеграм канал!

React и DOM дерево

2022-10-08T12:15:07.875Z

Всякий раз, когда я сталкиваюсь с проблемами в работе с React, это происходит потому, что я не очень хорошо понимаю, как он работает на самом деле.

Вот краткое объяснение:

Чтобы понять, как работает React, нам нужно понять проблему, для решения которой он был разработан.

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

Для этого нужно сделать три вещи:

Отследить событие нажатия на кнопке
Найти место в DOM, куда вы хотите добавить баннер
Создать баннер и обновить DOM в этот момент

И тут есть одна проблема - каждый раз, когда вы обновляете DOM, это вызывает обновление пользовательского интерфейса, поскольку браузер рисует новую структуру дерева.

Эти обновления происходят медленно, поэтому их нужно свести к минимуму.

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

Два потока событий могут произойти один за другим и на мгновение заблокировать пользовательский интерфейс из-за перерисовок.

У React есть классное решение из коробки: он хранит копию DOM в памяти браузера.

Это называется виртуальным DOM и является основой того, что делает React (относительно) быстрым.

Любые изменения в вашем приложении перехватываются React и сначала применяются к этому виртуальному DOM.

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

Затем React сравнивает новую версию DOM с текущей версией (все еще находящейся в памяти).

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

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

Затем все эти изменения собираются вместе и применяются одновременно.

Прелесть здесь в том, что делаются только необходимые обновления DOM.

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

Это может показаться не очень важным в случае не особо больших компонентов, но помните, что этот процесс создания виртуального DOM повторно выполняет перерисовку всех ваших компонент.

Вызовы функций, объявления переменных, циклы по массивам и т.д. - все это выполняется заново! Это падение производительности со временем превращается в "смерть от тысячи порезов бумаги".

Именно поэтому в React есть такие инструменты, как memo, useMemo, useCallback - они предоставляют React больше информации о том, следует ли обновлять определенный компонент или нет. Немного подробнее об этом писала тут.

На этом сегодня все, надеюсь вам это было полезно!

🤖 Чтобы не пропустить новые уроки подпишись на телеграм канал!

Текстуры (часть 3)

2022-10-05T07:34:10.176Z

В прошлой статье мы разбирали как мы можем модифицировать наши текстуры на объектах. А сейчас мы пройдем последнюю часть про текстуры, освоим фильтрацию, мипмэппинг и оптимизацию!

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

Это связано с фильтрацией и мипмаппингом.

Mipmapping (или "mip mapping" с пробелом) - это техника, которая заключается в создании наполовину меньшей версии текстуры снова и снова, пока не получится текстура 1x1. Все эти варианты текстуры отправляются на GPU, и GPU выбирает наиболее подходящую версию текстуры.

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

Фильтр минификации

Фильтр минификации срабатывает, когда пиксели текстуры меньше пикселей рендера. Другими словами, текстура слишком велика для поверхности, которую она покрывает.

Вы можете изменить фильтр минификации текстуры с помощью свойства minFilter.

Вот какие значения существуют:

THREE.NearestFilter
THREE.LinearFilter
THREE.LinearMipmapNearestFilter
THREE.LinearMipmapLinearFilter
THREE.NearestMipmapNearestFilter
THREE.NearestMipmapLinearFilter

По умолчанию используется фильтр THREE.LinearMipmapLinearFilter. Если вам не нравится то, как выглядит ваша текстура, попробуйте другие фильтры.

Мы не будем рассматривать каждый из них, но мы протестируем THREE.LinearFilter, который дает совсем другой результат:

colorTexture.minFilter = THREE.LinearFilter;

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

Артефакты, которые некоторого размытия, называются муаровыми узорами, и обычно их лучше избегать.

Фильтр увеличения

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

Вы можете увидеть результат, используя текстуру checkerboard-8x8.png, которая расположена в папке static/textures/:

const colorTexture = textureLoader.load('/textures/checkerboard-8x8.png');

Текстура становится размытой, потому что это очень маленькая текстура на очень большой поверхности.

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

Можно изменить фильтр увеличения текстуры с помощью свойства magFilter.

Есть только два возможных значения:

THREE.NearestFilter
THREE.LinearFilter

По умолчанию используется THREE.LinearFilter.

Если вы протестируете THREE.NearestFilter, вы увидите, что базовое изображение сохраняется, и вы получите пикселизированную текстуру:

Это может быть полезно, если вы хотите создать стиль с пиксельными текстурами.

Вы можете увидеть результат, используя текстуру minecraft.png, расположенную в папке static/textures/:

const colorTexture = textureLoader.load('/textures/minecraft.png');

И последнее слово обо всех этих фильтрах: THREE.NearestFilter дешевле других, и вы должны получить лучшие показатели скорости отрисовки при его использовании.

Используйте мипмапы только для свойства minFilter. Если вы используете THREE.NearestFilter, вам не нужны мипмапы, и вы можете отключить их с помощью colorTexture.generateMipmaps = false:

colorTexture.generateMipmaps = false;
colorTexture.minFilter = THREE.NearestFilter;

Это немного разгрузит графический процессор.

Формат и оптимизация текстур

При создании текстуры, важно помнить о трех важнейших элементах:

Вес
Размер (или разрешение)
Данные

Вес

Не забывайте, что пользователям, заходящим на ваш сайт, придется скачивать эти текстуры. Вы можете использовать большинство типов изображений, которые мы используем в Интернете, например .jpg (сжатие с потерями, но обычно легче) или .png (сжатие без потерь, но обычно тяжелее).

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

Размер

Так как каждый пиксель используемых текстур должен храниться на GPU независимо от веса изображения. А GPU, как и ваш жесткий диск, имеет ограничения по объему памяти. Это еще хуже, потому что автоматически создаваемый мипмэппинг увеличивает количество пикселей, которые необходимо хранить.

Старайтесь максимально уменьшить размер ваших изображений.

Если вы помните, что мы говорили о мипмаппинге, Three.js будет создавать уменьшенную вдвое версию текстуры несколько раз, пока не получит текстуру 1x1. Поэтому ширина и высота вашей текстуры должны быть кратна 2. Это необходимо для того, чтобы Three.js мог разделить размер текстуры на 2.

Некоторые примеры: 512x512, 1024x1024 или 512x2048.

512, 1024 и 2048 можно делить на 2, пока не получится 1.

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

Данные

Мы еще не рассмотрели подобные примеры, потому что нам нужно сначала пройти другие вещи, но текстуры поддерживают прозрачность. Как вы, возможно, знаете, файлы jpg не имеют альфа-канала, поэтому вы можете предпочесть использовать png.

Или вы можете использовать альфа-карту, как мы увидим в одном из следующих уроков.

Где найти текстуры

К сожалению, всегда трудно найти идеальные текстуры. Существует множество сайтов, но текстуры не всегда подходят, и, возможно, вам придется заплатить.

Возможно, стоит начать с поиска в Интернете. Вот несколько сайтов, на которых я часто бываю.

Вы также можете создавать свои собственные текстуры, используя фотографии и 2D-программы, такие как Photoshop, или даже процедурные текстуры с помощью программ, таких как Substance Designer.

На этом сегодня все, надеюсь вам это было полезно!

🤖 Чтобы не пропустить новые уроки подпишись на телеграм канал!

Текстуры (часть 2)

2022-10-04T09:22:51.616Z

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

Как разворачиваются текстуры?

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

Как вы можете видеть, текстура растягивается или сжимается различными способами, чтобы покрыть геометрию.
Это называется UV-развёрткой. Вы можете представить это как разворачивание оригами или конфетной обертки, чтобы сделать ее плоской.

Каждая вершина будет иметь 2D координаты на плоскости (обычно квадратной).

Вы можете увидеть эти UV координаты в свойстве geometry.attributes.uv:

console.log(geometry.attributes.uv);

Эти UV-координаты генерируются Three.js при использовании примитивов. Если вы создаете собственную геометрию и хотите наложить на нее текстуру, вам придется указать UV-координаты.

Если вы создаете геометрию с помощью 3D-программы, вам также придется выполнить развертку UV-координат.

Не волнуйтесь, большинство 3D-программ также имеют функцию для обеспечения автоматического разворачивания, которая должна справиться с этой задачей.

Преобразование текстур

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

Повтор

Вы можете сделать текстуру повторяемой с помощью свойства repeat, тип этого свойств - Vector2, что означает, что у него есть свойства x и y.

Попробуем изменить эти свойства:

const colorTexture = textureLoader.load('/textures/door/color.jpg');
colorTexture.repeat.x = 2;
colorTexture.repeat.y = 2;

Как видите, текстура не повторяется, но она стала меньше, а последний пиксель кажется супер растянутым.

Это связано с тем, что текстура по умолчанию не будет повторяться. Чтобы изменить это, необходимо обновить свойства wrapS и wrapT с помощью константы THREE.RepeatWrapping.

wrapS для оси x
wrapT для оси y

colorTexture.wrapS = THREE.RepeatWrapping;
colorTexture.wrapT = THREE.RepeatWrapping;

Также можете чередовать направления текстуры с помощью:

colorTexture.wrapS = THREE.MirroredRepeatWrapping;
colorTexture.wrapT = THREE.MirroredRepeatWrapping;

Вращение

Повернуть текстуру можно с помощью свойства rotation, которое представляет собой простое число, соответствующее углу в радианах:

colorTexture.rotation = Math.PI * 0.25;

Если убрать свойство repeat, то можно увидеть, что вращение происходит вокруг левого нижнего угла куба:

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

colorTexture.rotation = Math.PI * 0.25;
colorTexture.center.x = 0.5;
colorTexture.center.y = 0.5;

Теперь текстура будет вращаться вокруг центра.

Смещение

Вы можете сместить текстуру с помощью свойства offset, которое также является Vector2 со свойствами x и y. Изменение этих свойств просто сместит UV-координаты:

colorTexture.offset.x = 0.5;
colorTexture.offset.y = 0.5;

На этом сегодня все, надеюсь вам это было полезно!

🤖 Чтобы не пропустить новые уроки подпишись на телеграм канал!

🚀 Код для данного урока вы можете найти тут.

Текстуры (часть 1)

2022-10-02T11:17:02.625Z

Вам уже надоел ваш одноцветный куб? Пришло время добавить текстуры!

Но сначала давайте узнаем, что это такое и что мы можем с ними делать.

Что такое текстуры

Текстуры - это изображения, которые покрывают поверхность ваших геометрических фигур. Многие типы текстур могут по-разному влиять на внешний вид вашей геометрии. Речь идет не только о цвете.

Тут я расскажу про типы текстур, ссылаясь на достаточно популярную текстуру двери от João Paulo.

Цвет или текстура альбедо

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

Альфа-текстура

Альфа-текстура - это полутоновое изображение, где белый цвет будет виден, а черный - нет.

Текстура высоты

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

Текстура нормалей

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

Ambient occlusion

Текстура ambient occlusion - это полутоновое изображение, которое будет имитировать тени в щелях поверхности. Хотя она и не является физически точной, она, безусловно, помогает создать контраст.

Текстура металлизации

Текстура металлизации - это изображение в сером спектре, которое определяет, какая часть является металлической (белой), а какая неметаллической (черной). Эта информация поможет создать отражение.

Текстура шероховатости

Шероховатость - это изображение в в сером спектре, которое идет вместе с металлизацией, и которое определяет, какая часть шероховатая (белая), а какая гладкая (черная).

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

Здесь дерево однородное, потому что на нем есть прозрачный слой.

Отрисовка на основе физических характеристик

Эти текстуры (особенно металлизация и шероховатость) соответствуют тому, что называется принципами PBR.

PBR расшифровывается как Physically Based Rendering (отрисовка на основе физических характеристик). Этот метод объединяет множество техник, которые направлены на получение реалистичных результатов.

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

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

Как загружать текстуры

Получение URL изображения

Чтобы загрузить текстуру, нам нужен URL-адрес файла изображения.

Поскольку мы используем Webpack, есть два способа получить его.

Можно поместить текстуру изображения в папку /src/ и импортировать ее, как мы импортировали бы зависимость JavaScript:

import imageSource from './image.png';

console.log(imageSource);

Или можно поместить это изображение в папку /static/ и получить к нему доступ, просто добавив путь к изображению (без /static) в URL:

const imageSource = '/image.png';

console.log(imageSource);

Будьте внимательны, эта папка /static/ работает только благодаря конфигурации шаблона Webpack. Если вы используете другие типы бандлеров, вам, возможно, придется адаптировать свой проект.

Мы будем использовать папку /static/ до конца курса.

Загружаем изображение

Текстуры дверей, которые мы только что видели, можно найти в репозитории проекта в папке /static/textures, и существует несколько способов их загрузки.

Используем нативный JavaScript

В JavaScript сначала нужно создать объект класса Image, прослушать событие load, а затем изменить его свойство src, чтобы начать загрузку изображения:

const image = new Image();

image.onload = () => {
    console.log('image loaded');
};

image.src = '/textures/door/color.jpg';

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

Это связано с тем, что WebGL нужен очень специфический формат, понятный GPU, а также с тем, что к текстурам будут применены некоторые изменения, например, mipmapping, но об этом мы узнаем чуть позже.

Создайте текстуру с помощью класса Texture:

const image = new Image();

image.addEventListener('load', () => {
    const texture = new THREE.Texture(image);
});

image.src = '/textures/door/color.jpg';

Теперь нам нужно использовать эту текстуру в материале. К сожалению, переменная texture была объявлена в функции, и мы не можем получить к ней доступ вне этой функции. Это ограничение JavaScript, называемое областью видимости.

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

const image = new Image();
const texture = new THREE.Texture(image);

image.addEventListener('load', () => {
    texture.needsUpdate = true;
});

image.src = '/textures/door/color.jpg';

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

Чтобы увидеть текстуру на кубе, замените свойство color на map и используйте texture:

const material = new THREE.MeshBasicMaterial({ map: texture });

Вы должны увидеть текстуру двери на каждой стороне вашего куба:

Используя TextureLoader

Нативная загрузка JavaScript не так сложна, но есть еще более простой способ с TextureLoader.

Создайте переменную класса TextureLoader и используйте его метод .load(...) для создания текстуры:

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('/textures/door/color.jpg');

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

Вы можете загрузить столько текстур, сколько хотите, используя только один объект TextureLoader.

Можно прокинуть три колбека в метод .load(...) после строки, которая описывает путь до файла. Эти методы будут вызываться при следующих событиях:

load при успешной загрузке изображения
progress, если загрузка идет успешно
error, если что-то пошло не так

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load(
    '/textures/door/color.jpg',
    () => {
        console.log('loading finished');
    },
    () => {
        console.log('loading progressing');
    },
    () => {
        console.log('loading error');
    }
);

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

Используя LoadingManager

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

Создайте экземпляр класса LoadingManager и передайте его в TextureLoader:

const loadingManager = new THREE.LoadingManager();
const textureLoader = new THREE.TextureLoader(loadingManager);

Можно прослушивать различные события, заменив следующие свойства своими собственными функциями onStart, onLoad, onProgress и onError:

const loadingManager = new THREE.LoadingManager();

loadingManager.onStart = () => {
    console.log('loading started');
};

loadingManager.onLoad = () => {
    console.log('loading finished');
};

loadingManager.onProgress = () => {
    console.log('loading progressing');
};

loadingManager.onError = () => {
    console.log('loading error');
};

const textureLoader = new THREE.TextureLoader(loadingManager);

Потом вы можете начать загрузку всех необходимых изображений:

// ...
const colorTexture = textureLoader.load('/textures/door/color.jpg');
const alphaTexture = textureLoader.load('/textures/door/alpha.jpg');
const heightTexture = textureLoader.load('/textures/door/height.jpg');
const normalTexture = textureLoader.load('/textures/door/normal.jpg');
// ...

Как вы можете видеть здесь, мы переименовали переменную texture в colorTexture, поэтому не забудьте изменить ее и в материале:

const material = new THREE.MeshBasicMaterial({ map: colorTexture });

LoadingManager очень полезен, если вы хотите показать загрузчик и скрыть его только тогда, когда вся статика загружена. Как мы увидим в одном из следующих уроков, его можно использовать и с другими типами загрузчиков.

На этом сегодня все, надеюсь вам это было полезно!

🤖 Чтобы не пропустить новые уроки подпишись на телеграм канал!

🚀 Код для данного урока вы можете найти тут.

Текстуры (часть 2) ->

Трансформация объектов (часть 1)

2022-09-27T17:57:27.372Z

Перед тем как начать

В предыдущем уроке мы настроили полноценную сборку проекта с three.js при помощи webpack, если вы это пропустили, то советую вернуться!

Теперь, когда у нас все готово, мы можем изучить функциональные возможности three.js. Сегодня мы рассмотрим как перемещать и масштабировать объекты...

Перед анимацией нашей сцены нам необходимо знать, как трансформировать объекты в нашей сцене. Мы уже сделали это с камерой, переместив ее назад с помощью строчки camera.position.z = 3.

Существует 4 свойства для преобразования объектов в нашей сцене:

position (для перемещения)
scale (для изменения размера)
rotation (для вращения)
quaternion (тоже для вращения, но об этом позже 😏)

Все классы, которые наследуются от класса Object3D, обладают такими свойствами, как PerspectiveCamera или Mesh, а также классы, которые мы еще не рассматривали.

Подготовка

Если у вас нет кода всего проекта, то вы можете найти его в репозитории.

Перемещение объектов

position обладает тремя основными свойствами- x, y и z. Это свойства необходимы для позиционирования чего-либо в трехмерном пространстве.

Направление каждой оси является произвольным, и может меняться в зависимости от окружающей среды. В three.js обычно считают, что ось yнаправлена вверх, ось z - назад, а ось x - вправо.

Что касается масштаба единицы измерения, то это зависит от вас. Это может быть 1 сантиметр, 1 метр или даже 1 километр. Я рекомендую вам адаптировать единицу к тому, что вы хотите построить.

Например, если вы собираетесь создать дом, то, вероятно, вам следует считать, что 1 единица - это 1 метр.

Давайте переместим наш куб:

mesh.position.x = -1;
mesh.position.y = -0.8;
mesh.position.z = 0.4;

🤖 Обязательно меняйте положение куба до вызова метода render(...), иначе вы отрендерите сетку до ее перемещения.

Вы можете поиграть со свойством position и попытаться угадать, куда попадет куб (старайтесь, чтобы он находился на экране).

Свойство position - это экземпляр класса Vector3. Этот класс имеет не только свойства x, y и z, но еще и множество полезных методов.

Вы можете получить длину вектора:

console.log(mesh.position.length());

Вы можете получить расстояние от другого Vector3 (убедитесь, что используете этот код после создания камеры):

console.log(mesh.position.distanceTo(camera.position));

Можно нормализовать значение вектора (это означает, что вы уменьшите длину вектора до 1 единицы, но сохраните его направление):

console.log(mesh.position.normalize());

Для перемещения объекта, вместо того чтобы изменять x, y и z по отдельности, можно также использовать метод set(...):

mesh.position.set(-1, -0.8, 0.4);

Добавляем визуализацию осей

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

Одним из хороших решений является использование three.js AxesHelper.

AxesHelper отобразит 3 линии, соответствующие осям x, y и z, каждая из которых начинается в центре сцены и идет в соответствующем направлении.

Чтобы создать AxesHelper, создайте объект и добавьте на сцену. В качестве единственного параметра можно указать длину, с которой нужно отрисовать оси. Мы будем использовать 3:

// Отрисовка осей координат
const axesHelper = new THREE.AxesHelper(3); scene.add(axesHelper);

Вы должны увидеть зеленую и красную линии.

Зеленая линия соответствует оси y. Красная линия соответствует оси x, а синяя линия соответствует оси z, но мы ее не видим, потому что она идеально выровнена относительно камеры.

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

Масштабирование объектов

scale также является объектом класса Vector3. По умолчанию x, y и z равны 1, что означает, что к объекту не применяется масштабирование. Если вы поставите значение 0,5, объект будет иметь половину своего размера по этой оси, а если вы поставите значение 2, он будет вдвое больше своего первоначального размера по этой оси.

Если вы измените эти значения, объект начнет масштабироваться соответствующим образом. Давайте закомментируем изменения положения и добавьте новые масштабы:

mesh.scale.x = 0.5;
mesh.scale.y = 2;
mesh.scale.z = 0.7;

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

Поскольку scale это Vector3, мы можем использовать все ранее упомянутые методы этого класса.

Трансформация объектов (часть 2) ->

#javascript

#three_js

#3d_графика

#анимация

#программирование

Гайд по Emmet

2022-06-06T07:39:32.664Z

Emmet - довольно классный инструмент, который помогает вам писать HTML очень и очень быстро. Это похоже на волшебство. Emmet - это не что-то новое, он существует уже много лет, и для каждого редактора есть плагин.

Всем, кто только начинает осваиваться в программирование эта статья точно пойдет на пользу!

В VS Code Emmet интегрирован "из коробки", и всякий раз, когда редактор распознает возможную команду Emmet, он покажет вам всплывающую подсказку.

Если то, что вы пишете, не имеет других интерпретаций, и VS Code считает, что это должно быть выражение Emmet, то оно будет показано непосредственно во всплывающей подсказке, достаточно красиво:

Тем не менее, я действительно не знала, как использовать его во всех его тонкостях, пока не начала исследовать и писать об этом)

Я хочу использовать его в своей повседневной работе, поэтому вот что я узнала:

Создайте HTML-файл с нуля

Напечатайте ! и вы получите базовый шаблон HTML для работы:

> и +

> означает ребенка
+ означает элемент на том же уровне

Вы можете комбинировать их для выполнения более сложных разметок:

Level up

Используя ^ вы можете повысить уровень обратно с любого момента, когда вы использовали > для создания дочернего:

Вы можете использовать его несколько раз:

Применяем умножение

Любой тег может быть добавлен несколько раз с помощью *:

Группировка выражений

С умножением все начинает становиться немного сложнее. Что делать, если вы хотите умножить 2 элемента? Вы группируете их в круглые скобки ( ):

Атрибуты id и class

id и class, вероятно, являются наиболее часто используемыми атрибутами в HTML.

Вы можете создать фрагмент HTML, который включает их, используя синтаксис, подобный CSS:

Вы можете добавить несколько классов:

Добавление уникального class или id

id должен быть уникальным на вашей странице в любое время.

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

Вы можете сделать это с помощью $:

Другие атрибуты

Атрибуты, отличные от class и id, должны быть добавлены с помощью скобок []:

Вы можете добавить сразу несколько атрибутов:

Добавление контента

Конечно, вы также можете заполнить HTML-элементы содержимым:

Добавление инкрементного числа в разметку

Число обычно начинается с 1, но вы можете заставить его начинаться с произвольного числа:

Теги для заголовка страницы

Общие теги

Семантические теги

Теги для форм

На этом сегодня все, надеюсь эта статья поможет вам вывести скорость разработки на новый уровень 🔥

Не забывайте подписываться на телеграм канал!