Представляем четыре: это WebGL, но проще

Структуры особенно заслуживают внимания. Они используют подобный «группирующий» характер struct в шейдерах в том смысле, что они сопоставляют униформу, такую ​​как источники света и камеры. Камера имеет, помимо прочего, матрицу проекции, матрицу вида модели и нормальную матрицу. Все они существуют в виде шейдеров для визуализации сцен. Структура для камеры будет генерировать униформу и предполагать, что их значения существуют в свойствах структуры с тем же именем. Впоследствии привязка структуры будет автоматически применять эти значения к сгенерированным униформам. Что делает это привлекательным, так это возможность предоставлять дополнительные функциональные возможности через структуру камеры для возможного вычисления и обновления ее униформы во время рендеринга.

Остальные

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

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

Начало работы с Four

Первое, что вам нужно сделать, это загрузить Four из репозитория GitHub . После этого включите скрипт в свою HTML-страницу:

 <script src="path/to/four.min.js"></script> 

На этом этапе вам нужно включить HTML-элемент canvas .

 <canvas width="500" height="500"></canvas> 

canvas — это окно просмотра, в котором будет отображаться финальная сцена. Если атрибуты width или height не заданы, каркас принимает их соответствующий размер области просмотра.

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

Рендеринг и вращение сетки

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

 var view = new Four.Framebuffer(); 

Программа прикрепляет шейдеры, которые будут использоваться для моделирования и рендеринга сцены. Аргумент selector указывает селектор класса CSS, который указывает на местоположение шейдеров в HTML.

 var program = new Four.Program({ selector: '.my-shader-class' }); 

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

 var camera = new Four.PerspectiveCamera({ program: program, location: [50, 50, 50] }); var light = new Four.Light({ program: program, location: [10, 10, 10] }); var mesh = new Four.Mesh({ buffers: new Four.VertexArrayObject({ program: program, attributes: ['vec3 position'] }), vertices: […] material: new Four.Material({ program: program, diffuse: 0x9F8A60 }) }); 

Последний фрагмент добавляет сетку к сцене и отображает ее в виде. Процедура исполнения перед рендерингом сцены поворачивает сцену вокруг сетки на 0,25 градуса каждый кадр.

 scene = new Four.Scene(); scene.put(mesh); scene.render(view, camera, function() { program.bind(); light.bind(); scene.rotation += 0.25; }); 

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

Шейдеры

Наряду с canvas и JavaScript нужны шейдерные скрипты. Это программы, которые запускаются на GPU для моделирования и визуализации данных, предоставляемых сеткой. Это разработано с использованием языка затенения графической библиотеки (GLSL) и требует как вершинного, так и фрагментного шейдера.

Шейдеры должны быть включены с использованием «тегов сценария шейдера» в HTML. Тег шейдера принимает две формы:

 <!-- Vertex shader --> <script class="my-shader-class" type="x-shader/x-vertex"></script> <!-- Fragment shader --> <script class="my-shader-class" type="x-shader/x-fragment"></script> 

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

Вершинный шейдер выполняется один раз для каждой вершины, прошедшей через a_position позиции a_position . Выход вершинного шейдера присваивается встроенной переменной gl_Position .

 <script class="your-shader-class" type="x-shader/x-vertex"> #version 100 precision lowp float; struct camera { mat4 projectionMatrix; mat4 modelViewMatrix; mat3 normalMatrix; } uniform camera u_camera; attribute vec3 a_position; void main() { gl_Position = camera.projectionMatrix * camera.modelViewMatrix * vec4(a_position, 1.0); } </script> 

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

 <script class="your-shader-class" type="x-shader/x-fragment"> #version 100 precision lowp float; void main() { gl_FragColor = vec4(1.0); } </script> 

Когда закончен конвейер рендеринга, наша сцена может быть отображена в виде.

Будущее четырех

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

• Сетка по умолчанию для основных геометрий, например, куб, тетраэдр, сфера и т. Д.
• Отображение отражений
• Shadow Mapping
• Нормальное отображение
• Дополнительные сетчатые погрузчики
• Анимация ключевых кадров
• Эффекты — цветение, цел…
• И более…

Вывод

WebGL — это технология для визуализации 3D-контента в Интернете, но ее API может быть сложным в использовании. Четвертый — это структура, которая пытается абстрагироваться от этой трудности, чтобы вы могли сосредоточиться на своем контенте. С его несколькими уровнями абстракции, он гибок к потребностям разработчика. Это также побуждает разработчиков разбить эти абстракции, чтобы лучше понять, как работают графические приложения.