Шейдеры в WebGL и OpenGL?

Question

Я хочу использовать шейдеры для использования в WebGL и, в частности, three.js. Существует ли конкретная версия GLSL, которую используют WebGL и three.js?

Answer 1

WebGL шейдеры следовать за GLSL Е. С. 1017 SPEC

https://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf

Это отличается Desktop OpenGL несколькими способами. Один из них - версия 1.0 GLSL ES, где в качестве рабочего стола GL в версии 4.2 GLSL (не ES)

Одно большое различие между WebGL GLSL и многими статьями о шейдерах в Интернете - в OpenGL ES 2.0 нет конвейера с фиксированной функцией и поэтому в WebGL нет конвейера с фиксированной функцией.

Фиксированный функциональный конвейер оставлен из OpenGL 1.0, где вы должны использовать команды, такие как glLight и glVertex и glNormal. И тогда ваши шейдеры нуждались в способе ссылаться на эти данные. В OpenGL ES и WebGL все, что ушло, потому что все, что делает шейдер, на 100% зависит от пользователя. Все, что делает WebGL, позволяет вам определять свои собственные входы (атрибуты, униформа) и называть их любыми, что вы хотите.

WebGL2 шейдеры следовать GLSL ES 3.00 спецификации

https://www.khronos.org/registry/OpenGL/specs/es/3.0/es_spec_3.0.pdf

Что касается three.js, three.js является 3D-движок и предоставляет свой собственный набор стандартных входов, имена и другие особенности, когда это генерирует шейдер. See the docs для некоторых деталей. The uniforms and attributes provided by default are documented here. Вы также можете look at the source или check out an example.

Three.js также предоставляет что-то, называемое RawShaderMaterial, которое не добавляет никаких предопределенных вещей, видимо, в этом случае вы просто пишете стандартный WebGL GLSL.

Вы можете найти стандартные атрибуты и униформы стандарта 3.js here.

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

Shaders as a concept are pretty simple. Вы создаете пару шейдеров, настраиваете их с помощью входов, вызываете gl.drawArrays или gl.drawElements и передаете счет. Ваш вершинный шейдер будет называться временем отсчета и должен установить gl_Position. Каждый раз от 1 до 3 раз он называется WebGL, затем рисует точку, линию или треугольник. Для этого он назовет ваш шейдер фрагмента, запрашивая каждый пиксель, который собирается рисовать, какой цвет делает этот пиксель. Шейдер фрагмента должен установить gl_FragColor. Шейдеры получают данные от attributes, uniforms, textures и varyings. attributes - данные на вершину. Они извлекают свои данные из буферов, по одной части данных за атрибут за итерацию вершинного шейдера. Uniforms - это как установка глобальных переменных перед запуском шейдера. Вы можете передавать данные из вершинного шейдера в фрагментарный шейдер с varying. Эти данные будут интерполированы или изменены;) между значениями, установленными для каждой вершины примитива (треугольника), в качестве фрагментарного шейдера, вызывается для обеспечения цвета для каждого пикселя.

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

GLSL сам по себе довольно прямолинейный. Существует несколько типов: int, float, vec2, vec3, vec4, mat2, mat3, mat4. Они отвечают операторам +, -, *, / и т. Д. Есть встроенные функции.

Вы можете найти краткую версию всей информации GLSL на последних 2 страницах WebGL Reference Card.

Этого было достаточно для меня. Это и глядя на working programs.

Одна интересная вещь для меня и большинства языков - синонимы для полей vec и swizzling. Vec4, например

vec4 v = vec4(1.0, 2.0, 3.0, 4.0); 

Вы можете ссылаться на различные компоненты v с помощью x,y,z,w или s,t,u,v или r,g,b,a или стиль массива. Так, например

float red = v.r; // OR 
float red = v.x; // same thing OR 
float red = v.s; // same thing OR 
float red = v[0]; // same thing 

Другая вещь, которую вы можете сделать, это надираться

vec4 color = v.bgra; // swap red and blue 
vec4 bw = v.ggga; // make a monotone color just green & keep alpha 

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

vec2 just_xy = v.xy;