#1 Создание игрового движка на JS — WebGL и шейдеры

Автор Georgiy Dronov
#1 Создание игрового движка на JS — WebGL и шейдеры

Всем салют и и перед тем как начать разрабатывать наш движок.

Я бы хотел сперва объяснить, что такое вообще вы, что такое шейдеры с общался просто вот эти две буквы в конце говорят сами за себя — это graphic Library библиотека и. Она позволяет нам общаться с таким элементом в нашей видеокарте которая называется графический процессор графический процессор сокращённо ошибку мы говорим этом графическому процессору помощью обещал, что вот — это нужно рисовать. А вот — это не нужно рисовать и обещал построен на другой библиотеке которая называется openshell этого многие об этой библиотеке слышали она более низкоуровневое и более сложная и мы не будем этого всего касаться и собственно чтобы что-то нарисовать с помощью вообще нужно использовать такие такую штуку как shader shader — это в принципе общее понятие которое при графике в целом.

Вы наверняка слышали.

Это слово и может быть уже знаете собственно shader позволяет вмешаться в процесс отрисовки чего-либо в на экране и сказать, что вот этот элемент нужно нарисовать подобным образом или вот этот элемент нужно нарисовать не так вот так и например кто работал с Unity3D кто пытался разрабатывать игры явно там справа когда мы создаем какой-то элемент на холсте например. Это куб мы с правом можем изменить его материал. А там есть шею ему можно выбрать shader по умолчанию там уже стоит стандартный shader который позволяет нам смотреть на объекте мы видим, что он отражает свет и всё такое. То есть он выглядит. Как должен выглядеть как по-человечески выглядит и мы можем найти шейдеры изменять на различные другие шейдеры которые там стандартные есть и они уже написаны — это нас и мы можем добавить какие-то эффекты например металлический эффект например эффект прозрачности можем сделать воду с помощью шейдеры — это есть сама суть. Я думаю понятно и. Чтобы объяснить — это более наглядно так пока, что не будем — это объяснять. Давайте перейдем вот в рисовалку такую и я объясню подробно. Из чего состоит shader shader состоит из двух. Так скажем элементов. Давайте назовём shader shader телепрограмма будет просто шедевр телепрограмма и — это шедевр телепрограмма на состоит из двух элементов — это фрагментный shader и вершинный shader и так как мы опишем эти два элемента будет зависеть представляю, что будет представлять нашей. Барби результате и собственно в начале мы когда создаем вообще что-либо что-либо мы задаем какие-то вершины то есть мы например создать квадрат к примеру и мы задаем для этого четыре вершины четыре точки и каждый какой-то какой-то координат в 3D пространстве у нас будет пространство депо. Поэтому просто пространство 2D. Хотя ладно ладно забей собственно мы задаем 4точки имеете 4точки кладем в массив. И Передаем в такую штуку которая называется буфером буфер — это временное хранилище в нашей видеокарте и она про эту информацию о наших вершинах потом эти от информация передаётся вершинный shader мы задаем вершины логику вершинного шейдера. Сами мы всё — это дело пишем сами и вершинный shader по сути обрабатывать геометрию объекта он возвращает результат который состоит из того как наш элемент будет располагаться в пространстве где он будет находиться и мы можем деформировать этот объекты и делать всё, что захотим с ним и потом идёт процесс кота растеризация вот эти точки они соединяются в какую-то фигуру и образуют какую-то фигуру который мы конечно. Зайди и вот — это пространство между точками оно заполняется пикселями и. Например если у нас квадрат размером 100 на 100 то есть на 100 высота и 100 ширина то соответственно количество пикселей будет 10.000 так как мы просто умножаем 100 настой получаем 10.000 площадь квадрата и вот эти 10000 пикселей они обрабатываются следующем который называется фрагментный shader fragment shader. Каждый пиксель. По отдельности окрашивает какой-то цвет вершинный shader. Он он 4 раза для каждой точки. По отдельности то есть вот эту точку ставит в пространстве вот эту точку стоит пространстве. Вот — это это четыре раза нашем случае, а фрагменты работает 10.000 раз он запускается 10.000 раз и каждый pixelvision закрашивает какой-то определенный цвет и таким образом мы получаем какой-то какой-то картинку на экране написано в графике им этим процессом можем естественно управлять передавай различные перемены его фрагментный shader и эти перемены всяческим образом изменяя манипулируя и так далее. В общем вся суть создание шейдера сводится к тому, что shader возвращает определенный цвет для определенной точки вот и всё и чтобы этот процесс объяснить более наглядно перейду вот в такую презентацию и здесь есть сайт и и вот — это описывает процесс рисования с помощью был совершён, что я объяснял ранее массе вершин — это просто вся информация о наших вершинах и всё такое. И мы этот массив вершин конечно заносим в буфер с помощью побежал мы будем описывать различные функции и там заносить — это всё дело в буфер и потом мы вершины переносятся в вершинный shader вершинный shader обрабатывает геометрию объекта которые мы зададим сами потом — это передаётся в такой процесс который называется rasterization расставляются расставляются пиксели внутри нашей фигуры и они потом передаются в фрагменты шейдеры для каждой писем по отдельности заполняется определенным цветом потом — это всё дело выводится на экране и давайте я всё — это дело закроем и. Давайте перейдем сейчас в. Редактор сгс — это библиотека которая построена на vl и позволяет нам рисовать что-то намного быстрее потому, что с помощью обещала если мы всё — это мы будем описывать руками то получится нисколько не знаю.

0 комментариев
0

Читайте также