WebGL это что?
WebGL является набор графических языка спецификаций на основе JavaScript, браузер вендоров реализованы в этом наборе спецификаций для веб - разработчиков , чтобы обеспечить набор 3D图形соответствующих API.
Этот API , который позволяет веб - разработчикам использовать JavaScript языка и видеокарты (GPU) для непосредственного обмена данных. Конечно, часть GPU WebGL имеет соответствующий язык программирования называется GLSL. Мы используем его , чтобы написать шейдер программу , работающую на GPU. Shader потребности программы получить CPU (WebGL с помощью JavaScript) , переданного по данным, то эти данные обработки трубопровода, в конечном счете , отображается на экране, и , таким образом , добиться разнообразных 3D - приложений, таких как 3D - графики, веб - игр, 3D - карты, WebVR и т.д. ,
WebGL работы
3D модель данных от рождения до окончательного отображения на экране, можно представить себе 流水线производственный процесс, трубопровод сырья для переработки в соответствии с установленной процедурой, текущий шаг только результат предыдущего шага для обработки , а затем передать результаты в обрабатываемом следующий шаг будет в конечном итоге произвести сырье в готовое изделие. Подобные WebGL работы и линии, трубопровод в соответствии с тем , как данные для рендеринга 3D - моделей на экране 2D, промышленность поместить этот рендеринг называется 图形管线или 渲染管线.
WebGL можно только рисовать 点, 线段,三角形 из трех основных элементов, но мы часто видим , программа WebGL содержит кубы, сферы, цилиндры и другие регулярные формы, и даже намного более сложной и реалистичная модель нерегулярные, то WebGL как рисовать их это? На самом деле, эти модели, по существу , изготовлены из одного из 点композиции, ГПУ с точками 三角形图元нанесенной плоскостью одну минуты, взаимосвязь между этими плоскостями, таким образом , чтобы представлять собой широкий спектр трехмерной модели.
Таким образом, наша основная задача состоит в том, чтобы создать вершинные данные, состоящие из этих моделей.
В общем, начальные координаты вершин относительны 模型中心и не могут быть переданы непосредственно в шейдер, мы должны 顶点坐标следовать последовательности шагов 模型转换,, 视图转换,投影转换 WebGL координат после преобразования координат приемлемых, то есть 裁剪空间坐标. Мы завершаем 变换矩阵и 原始顶点坐标переданы GPU, рендеринг GPU операции выполнения трубопровода трубопровода на них.
Основной процесс рендеринга трубопровода GPU выглядит следующим образом:
- Первая ступень входит в вершине шейдера, используя преимущество параллельных вычислений на GPU-вершине путем преобразования координат.
- Затем в примитивную стадию сборки, вершины собраны в шаблон для типа сущности.
- Рядом этап растеризации, на этапе растеризации, заполненном с графическим пикселе не содержит информации о цвете.
- После ввода этапа фрагмент шейдера, который представляет собой пиксельный шейдер, и, наконец, отображаемый на экране.
Что такое GLSL?
GLSLВ китайском языке это означает , что OpenGL Shading Language, английское название OpenGL Shading Language, который используется в OpenGL письменного 着色器程序языка.
шейдерные программы: шейдер программа позволяет контролировать оказываемую программированию GPU
Так что часть процесса рендеринга GPU позволяет разработчикам контролировать? Ниже приводится простая демонстрация трубопровода WebGL рендеринга:
Фигура демонстрирует простой WebGL красный треугольник на процессе рендеринга, зеленая часть является то, что разработчики могут программно секции управления:
- JavaScript программы
обработка шейдеров требуются顶点坐标,法向量,颜色,纹理а также другая информация, а также несут ответственность着色器предоставить эти данные, показатель для удобства изложения, обеспечивает только положение данных треугольника вершин. - Vertex шейдер
получает JavaScript , чтобы пройти через顶点信息координаты вершин , соответствующих рисунку. - 图元装配阶段
将三个顶点装配成指定图元类型，上图采用的是三角形图元。 - 光栅化阶段 将三角形内部区域用空像素进行填充。
- 片元着色器 为三角形内部的像素填充颜色信息，上图为暗红色。
实际上，对顶点信息的变换操作既可以在 JavaScript 中进行，也可以在着色器程序中进行。通常我们都是在 JavaScript 中生成一个包含了所有变换的最终变换矩阵，然后将该矩阵传递给着色器，利用 GPU 并行计算优势对所有顶点执行变换。