Хочу рассказать о генераторе GLSL-кода для WebGL, позволяющем писать шейдеры буквально на JavaScript с некоторыми условностями, используя все удобства IDE, такие как рефакторинг, подсветка синтаксиса, автокомплит и проверка на ошибки, а в математических выражениях использовать обычные JS операторы: +, -, *, /, =, +=, -=, *=, /=, ++, --.

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

class VertexShader extends Shader {

	constructor(POSITION, NORMAL, TANGENT, NORMAL_MATRIX, AMBIENT_CUBE) {

		const s = VertexShader, void_main = s.void_main;
		const ivec3 = s.ivec3, vec3 = s.vec3, vec4 = s.vec4;
		const normalize = s.normalize, cross = s.cross, step = s.step;
		const transform = s.transform, project = s.project;
		const gl_Position = s.gl_Position;

		super(Shader.VERTEX);

		const positionAtr = s.attribute_vec3("positionAtr");
		const uvAtr = s.attribute_vec2("uvAtr");
		const normalAtr = s.attribute_vec3("normalAtr");
		const tangentAtr = s.attribute_vec3("tangentAtr");

		const objectTransform = s.uniform_vec4("objectTransform", [3]);
		const normalMatrix = s.uniform_mat3("normalMatrix");
		const initialLight = s.uniform_vec3("initialLight");
		const ambientColors = s.uniform_vec3("ambientColors", [6]);

		const cameraTransform = s.uniform_vec4("cameraTransform", [3]);
		const cameraProjection = s.uniform_vec4("cameraProjection");

		const vertexPosition = s.varying_vec3("vertexPosition");
		const vertexUV = s.varying_vec2("vertexUV");
		const vertexNormal = s.varying_vec3("vertexNormal");
		const vertexTBN = s.varying_mat3("vertexTBN");
		const vertexLight = s.varying_vec3("vertexLight");

		const position = vec4("position");
		const normal = vec3("normal");
		const tangent = vec3("tangent");

		void_main(); {

			position.it = transform(vec4(positionAtr, 1), objectTransform);

			if (POSITION) {
				vertexPosition.xyz = position.xyz;
			}

			vertexUV.xy = uvAtr;

			if (NORMAL) {
				if (NORMAL_MATRIX) {
					normal.it = normalize(normalMatrix * normalAtr);
				} else {
					normal.it = normalize(transform(normalAtr, objectTransform));
				}
				if (TANGENT) {
					if (NORMAL_MATRIX) {
						tangent.it = normalize(normalMatrix * tangentAtr);
					} else {
						tangent.it = normalize(transform(tangentAtr, objectTransform));
					}
					vertexTBN[0] = tangent;
					vertexTBN[1] = cross(normal, tangent);
					vertexTBN[2] = normal;
				} else {
					vertexNormal.xyz = normal;
				}
			}

			if (AMBIENT_CUBE) {
				vec3("light").it = initialLight; const light = s.var;
				ivec3("neg").it = ivec3(step(0, normal)); const neg = s.var;
				normal.it *= normal;
				light.it += normal.x * ambientColors[neg.x];
				light.it += normal.y * ambientColors[neg.y + 2];
				light.it += normal.z * ambientColors[neg.z + 4];
				vertexLight.rgb = light;
			} else {
				vertexLight.rgb = initialLight;
			}

			gl_Position.it = project(transform(position, cameraTransform), cameraProjection);

		}

	}

	static transform = function () {
		let s = VertexShader, return_ = s.return, vec3 = s.vec3, vec4 = s.vec4, dot = s.dot;
		let function_vec3 = s.function_vec3, function_vec4 = s.function_vec4;
		const vector = vec3("vector"), position = vec4("position");
		const rows = vec4("rows", [3]);

		function_vec3("transform", vector, rows); {
			const result = vec3("result");
			result.x = dot(vector, rows[0].xyz);
			result.y = dot(vector, rows[1].xyz);
			result.z = dot(vector, rows[2].xyz);
			return_(result);
		}

		function_vec4("transform", position, rows); {
			const result = vec4("result");
			result.x = dot(position, rows[0]);
			result.y = dot(position, rows[1]);
			result.z = dot(position, rows[2]);
			result.w = 1;
			return_(result);
		}

		return s.function;
	}().call;

	static project = function () {
		let s = VertexShader, return_ = s.return, vec4 = s.vec4, function_vec4 = s.function_vec4;
		const position = vec4("position"), parameters = vec4("parameters");

		function_vec4("project", position, parameters); {
			const result = vec4("result");
			result.it = vec4(position.xyz * parameters.xyz, position.z);
			result.z += parameters.w;
			return_(result);
		}

		return s.function;
	}().call;

}

class FragmentShader extends Shader {

	constructor(ALPHA_TEST, DIRECT_LIGHT, ENVIRONMENT, NORMAL_MAP, SPECULAR, SPECULAR_MAP, MULTIPLY, SCREEN, INVERT) {

		const s = FragmentShader, void_main = s.void_main;
		const texture2D = s.texture2D, textureCube = s.textureCube;
		const discard = s.discard, normalize = s.normalize, reflect = s.reflect;
		const dot = s.dot, max = s.max, invert = s.invert;
		const unpackNormal = s.unpackNormal, considerBlend = s.considerBlend;
		const gl_FragColor = s.gl_FragColor;

		super(Shader.FRAGMENT);

		const diffuseMap = s.uniform_sampler2D("diffuseMap");
		const specularMap = s.uniform_sampler2D("specularMap");
		const normalMap = s.uniform_sampler2D("normalMap");
		const environmentMap = s.uniform_samplerCube("environmentMap");
		const specularColor = s.uniform_vec4("specularColor");
		const alphaThreshold = s.uniform_float("alphaThreshold");

		const lightColor = s.uniform_vec3("lightColor");
		const lightDirection = s.uniform_vec3("lightDirection");
		const cameraPosition = s.uniform_vec3("cameraPosition");

		const vertexPosition = s.varying_vec3("vertexPosition");
		const vertexUV = s.varying_vec2("vertexUV");
		const vertexNormal = s.varying_vec3("vertexNormal");
		const vertexTBN = s.varying_mat3("vertexTBN");
		const vertexLight = s.varying_vec3("vertexLight");

		const color = s.vec4("color");
		const normal = s.vec3("normal");
		const specular = s.vec4("specular");
		const vector = s.vec3("vector");
		const diffuseLight = s.vec3("diffuseLight");
		const specularLight = s.vec3("specularLight");
		const environmentLight = s.vec3("environmentLight");

		void_main(); {

			color.it = texture2D(diffuseMap, vertexUV);

			if (ALPHA_TEST) {
				discard(color.a - alphaThreshold);
			}

			if (DIRECT_LIGHT || ENVIRONMENT) {
				if (NORMAL_MAP) {
					normal.it = unpackNormal(texture2D(normalMap, vertexUV).xyz, vertexTBN);
				} else {
					normal.it = normalize(vertexNormal);
				}
				if (SPECULAR || ENVIRONMENT) {
					vector.it = normalize(vertexPosition - cameraPosition);
				}
			}

			diffuseLight.it = vertexLight;

			if (SPECULAR || ENVIRONMENT) {
				vector.it = reflect(vector, normal);
				if (SPECULAR_MAP) {
					specular.it = texture2D(specularMap, vertexUV);
				} else {
					specular.it = specularColor;
				}
			}

			if (DIRECT_LIGHT) {
				diffuseLight.it += max(dot(normal, lightDirection), 0) * lightColor;
				if (SPECULAR) {
					specularLight.it = lightColor * max(dot(vector, lightDirection), 0);
				}
			}

			color.rgb *= diffuseLight;

			if (ENVIRONMENT) {
				environmentLight.it = textureCube(environmentMap, vector).rgb * specular.rgb;
				color.rgb = color.rgb * invert(environmentLight) + environmentLight;
			}

			if (SPECULAR) {
				color.rgb += specularLight * specular.xyz;
			}

			considerBlend(color, MULTIPLY, SCREEN, INVERT);

			gl_FragColor.it = color;

		}

	}

	static unpackNormal = function () {
		let s = VertexShader, return_ = s.return, vec3 = s.vec3, mat3 = s.mat3, normalize = s.normalize;
		let function_vec3 = s.function_vec3;
		const rgb = vec3("rgb"), tbn = mat3("tbn");

		function_vec3("unpackNormal", rgb, tbn); {
			const matrix = mat3("matrix");
			matrix.it = mat3(normalize(tbn[0]), normalize(tbn[1]), normalize(tbn[2]));
			const normal = vec3("normal");
			normal.it = rgb + rgb - 1;
			return_(normalize(matrix * normal));
		}

		return s.function;
	}().call;

	static considerBlend(color, MULTIPLY, SCREEN, INVERT) {
		let invert = Shader.invert;
		if (MULTIPLY) {
			color.rgb = color.rgb * color.a + invert(color.a);
		} else if (SCREEN) {
			color.rgb *= color.a;
		} else if (INVERT) {
			color.rgb = color.aaa;
		}
	}

}

При разной конфигурации флагов будут сгенерированы разные варианты шейдеров, например:

// VertexShader
attribute vec3 positionAtr;
attribute vec2 uvAtr;
attribute vec3 normalAtr;
attribute vec3 tangentAtr;
uniform vec4 cameraTransform[3];
uniform vec4 cameraProjection;
uniform vec4 objectTransform[3];
uniform vec3 initialLight;
uniform vec3 ambientColors[6];
varying vec3 vertexPosition;
varying vec2 vertexUV;
varying vec3 vertexLight;
varying mat3 vertexTBN;
vec3 transform(vec3 vector, vec4 rows[3]) {
	vec3 result;
	result.x = dot(vector, rows[0].xyz);
	result.y = dot(vector, rows[1].xyz);
	result.z = dot(vector, rows[2].xyz);
	return result;
}
vec4 transform(vec4 position, vec4 rows[3]) {
	vec4 result;
	result.x = dot(position, rows[0]);
	result.y = dot(position, rows[1]);
	result.z = dot(position, rows[2]);
	result.w = 1.0;
	return result;
}
vec4 project(vec4 position, vec4 parameters) {
	vec4 result = vec4(position.xyz * parameters.xyz, position.z);
	result.z += parameters.w;
	return result;
}
void main() {
	vec4 position = transform(vec4(positionAtr, 1.0), objectTransform);
	vertexPosition.xyz = position.xyz;
	vertexUV.xy = uvAtr;
	vec3 normal = normalize(transform(normalAtr, objectTransform));
	vec3 tangent = normalize(transform(tangentAtr, objectTransform));
	vertexTBN[0] = tangent;
	vertexTBN[1] = cross(normal, tangent);
	vertexTBN[2] = normal;
	vec3 light = initialLight;
	ivec3 neg = ivec3(step(0.0, normal));
	normal *= normal;
	light += normal.x * ambientColors[neg.x];
	light += normal.y * ambientColors[neg.y + 2];
	light += normal.z * ambientColors[neg.z + 4];
	vertexLight.rgb = light;
	gl_Position = project(transform(position, cameraTransform), cameraProjection);
}

// FragmentShader
precision mediump float;
uniform sampler2D diffuseMap;
uniform sampler2D specularMap;
uniform sampler2D normalMap;
uniform samplerCube environmentMap;
uniform float alphaThreshold;
uniform vec3 cameraPosition;
uniform vec3 lightColor;
uniform vec3 lightDirection;
varying vec3 vertexPosition;
varying vec2 vertexUV;
varying vec3 vertexLight;
varying mat3 vertexTBN;
vec3 unpackNormal(vec3 rgb, mat3 tbn) {
	mat3 matrix = mat3(normalize(tbn[0]), normalize(tbn[1]), normalize(tbn[2]));
	vec3 normal = rgb + rgb - 1.0;
	return normalize(matrix * normal);
}
void main() {
	vec4 color = texture2D(diffuseMap, vertexUV);
	if (color.a - alphaThreshold < 0.0) discard;
	vec3 normal = unpackNormal(texture2D(normalMap, vertexUV).xyz, vertexTBN);
	vec3 vector = normalize(vertexPosition - cameraPosition);
	vec3 diffuseLight = vertexLight;
	vector = reflect(vector, normal);
	vec4 specular = texture2D(specularMap, vertexUV);
	diffuseLight += max(dot(normal, lightDirection), 0.0) * lightColor;
	vec3 specularLight = lightColor * max(dot(vector, lightDirection), 0.0);
	color.rgb *= diffuseLight;
	vec3 environmentLight = textureCube(environmentMap, vector).rgb * specular.rgb;
	color.rgb = color.rgb * (1.0 - environmentLight) + environmentLight;
	color.rgb += specularLight * specular.xyz;
	gl_FragColor = color;
}

или

// VertexShader
attribute vec3 positionAtr;
attribute vec2 uvAtr;
uniform vec4 cameraTransform[3];
uniform vec4 cameraProjection;
uniform vec4 objectTransform[3];
uniform vec3 initialLight;
varying vec2 vertexUV;
varying vec3 vertexLight;
vec4 transform(vec4 position, vec4 rows[3]) {
	vec4 result;
	result.x = dot(position, rows[0]);
	result.y = dot(position, rows[1]);
	result.z = dot(position, rows[2]);
	result.w = 1.0;
	return result;
}
vec4 project(vec4 position, vec4 parameters) {
	vec4 result = vec4(position.xyz * parameters.xyz, position.z);
	result.z += parameters.w;
	return result;
}
void main() {
	vec4 position = transform(vec4(positionAtr, 1.0), objectTransform);
	vertexUV.xy = uvAtr;
	vertexLight.rgb = initialLight;
	gl_Position = project(transform(position, cameraTransform), cameraProjection);
}

// FragmentShader
precision mediump float;
uniform sampler2D diffuseMap;
varying vec2 vertexUV;
varying vec3 vertexLight;
void main() {
	vec4 color = texture2D(diffuseMap, vertexUV);
	vec3 diffuseLight = vertexLight;
	color.rgb *= diffuseLight;
	gl_FragColor = color;
}

Предпосылки к созданию генератора

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

Большое значение имеет количество вариантов шейдеров. При сложном бранчинге количество вариантов может быть неприемлемо для прекомпиляции. Генератор же «на лету» по заданной конфигурации создает нужный вариант и кэширует его. Как показывает практика, количество реально используемых вариантов существенно меньше количества всех комбинаций.

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

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

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

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

Принцип работы JSSL

Задача состоит в том, чтобы написанное на JavaScript выражение, например:

res.rgb = (bias.zyx - min(max(src.rgb, 1), vec3(c.rg, 0.2))) * a[i + offset.x + 1].w;

при выполнении создало строку GLSL-кода:

"res.rgb = (bias.zyx - min(max(src.rgb, 1.0), vec3(c.rg, 0.2))) * a[i + offset.x + 1].w;"

Для реализации этого были применены некоторые не самые популярные особенности JS.

Операндами выражения являются специальные объекты, содержащие свое строковое представление. Их метод toString() переопределен таким образом, что возвращает определенное числовое значение и помещает объект в специальный список для дальнейшего анализа выражения.

При использовании математических операторов наряду с объектами или строками движок JavaScript по возможности производит конвертацию типов, пытаясь привести все к number и вычислить результат. Таким образом, выражение, состоящее из специальных операндов и математических операторов возвращает число, которое можно сопоставить с заранее определенным шаблоном выражения.

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

Для понимания приведу пример примитивной реализации. Предположим, метод toString() операнда возвращает число 3. Мы получаем уникальные результаты выражений для двух операндов и четырех операторов: 3 + 3 = 6, 3 - 3 = 0, 3 * 3 = 9, 3 / 3 = 1, по которым можно найти соответствие с используемым оператором. Результатом выражения A * B будет 9, что соответствует *, а операнды A и B окажутся в списке. Таким образом, например, cos(A * B) мы можем записать в строку:

str = "cos(" + operands[0].code + operators[val] + operands[1].code + ")"; // "cos(A * B)"

Более сложные выражения требуют более сложных механик, но принцип тот же.

Нюансы

Чтобы строка GLSL-кода была сгенерирована по JS выражению, оно всегда должно быть чему-то присвоено или куда-то передано, чтобы вызвался метод генерации. В случае vec.x = a + b все понятно — вызывается сеттер x. Но что, если переменная имеет тип float, и у нее не может быть этого свойства. На этот случай у всех переменных есть сеттер it, принимающий значение того типа, который имеет эта переменная. Например, для переменной vec3 это сработает как сеттер xyz, с той лишь разницей, что в генерируемом коде эти компоненты будут опущены:

vec.it *= scale; // vec *= scale;
vec.xyz *= scale; // vec.xyz *= scale;

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

Например, a * (b + c) сгенерирует (b + c) * a, потому что выражение в скобках вычислилось раньше. В этом нет ничего страшного, кроме случаев, когда порядок операндов имеет значение, то есть в векторно-матричных выражениях. Но в таких случаях JSSL выдает исключение о неоднозначности интерпретации выражения.

Не допускаются цепочки присвоения вроде a = b = c. Это приведет к исключению или неверной генерации. Также не допускается использование ссылок на временные операнды, такие, как элемент массива или результат функции. Это связано с реиспользованием экземпляров операндов с целью оптимизации.

Используются только следующие операторы: +, -, *, /, =, +=, -=, *=, /=, ++, --. Причем, использование операторов ++ и -- допустимо только в простом случае и только справа от переменной.

JavaScript конструкция if … else в данной концепции служит для ветвления вариантов шейдера. В GLSL эту роль играют директивы препроцессора #ifdef, #else, #elif, #endif. Для того, чтобы сгенерировать код условного оператора, требуются вызовы специальных функций, например:

if_(a, ">=", b);
else_if_(a, "<", c);

В связи с этой неряшливостью в функцию discard(), которая используется довольно часто, был добавлен необязательный параметр, значение которого сравнивается с 0, как в инструкции kil. Если аргумент задан, то добавляется конструкция if:

discard(); // discard;
discard(color.a – alphaThreshold); // if (color.a – alphaThreshold < 0.0) discard;

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

Ограничение на цифровые константы

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

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

vec.w = 8;
cos(8);
array[8];

Любое выражение может содержать единицу, при условии, что в нем она является единственной числовой константой:

vec.w = (1 – a) * b;
cos(1 / a + b);
array[a * b + 1];

Индекс массива может состоять из одной переменной и одной произвольной целочисленной константы, при условии использования операторов + и -:

array[a + 8];
array[a – 8];
array[8 – a];

В генераторе реализованы вспомогательные методы, которые «оборачивают цифру» в специальный операнд:

vec.w = a * cf(8) + cf(16); // vec.w = a * 8.0 + 16.0;
ivc.w = i * ci(8) + ci(16); // ivc.w = i * 8 + 16;

Также можно использовать конструкторы в различных ситуациях:

const_vec4("cv").it = vec4(1, 2, 3, 4); // const vec4 cv = vec4(1, 2, 3, 4);
vec.w = a * float(8); // vec.w = a * float(8);

Кстати, при использовании float констант не имеет смысла дописывать .0 в случае отсутствия дробной части, как этого требует GLSL. Для JavaScript 1 и 1.0 — это одно и то же число. Генератор определяет тип исходя из контекста выражения и поправляет это сам.

Ограничение количества операндов

На данный момент простейшее выражение не может состоять более чем из трех операндов. Даже при таком малом количестве, учитывая все комбинации операторов, скобок и знаков минус, получается около 650 вариантов выражений, которые, учитывая добавление констант, сводятся к примерно 150 уникальным шаблонам выражений. Теоретически этот лимит можно расширить.

Ограничение на общее количество операндов в выражении посчитать сложно. Оно зависит от конфигурации общего выражения и точно не менее 16.

При следующей конфигурации это максимальное количество:

d.it = a + b + max(a + b + max(a + b + max(a + b + max(a + b + max(a + b + max(a + b + max(a, c), c), c), c), c), c), c);

Но в таком случае, как этот, ограничения вообще нет:

d = max(max(max(max(max(max(max(max(max(max(max(max(max(max(a, b), b), b), b), b), b), b), b), b), b), b), b), b), b);

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

Функции и перегрузка

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

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

Созданные функции могут быть вызваны не только внутри main(), но и внутри других функций. Единственное оганичение — не разрешается делать рекурсивные вызовы.

static add = function () {
    let s = VertexShader, p = s.parameters, return_ = s.return;
    const float = s.float, vec2 = s.vec2, vec3 = s.vec3, vec4 = s.vec4;

    s.function_vec2("add", vec2("a"), vec2("b")); { const a = p[0], b = p[1];
        return_(a + b);
    }

    s.function_vec3("add", vec3("a"), vec3("b")); { const a = p[0], b = p[1];
        return_(a + b);
    }

    s.function_vec4("add", vec4("a"), vec4("b")); { const a = p[0], b = p[1];
        return_(a + b);
    }

    s.function_vec4("add", vec4("a"), float("b")); { const a = p[0], b = p[1];
        return_(a + b);
    }

    return s.function;
}().call;

// ...

vec.xy = add(vec.xy, vec.xy);
vec.xyz = add(vec.xyz, vec.xyz);
vec.xyzw = add(vec, vec);
vec.xyzw = add(vec, vec.x);
vec.xyzw = add(vec, 10);

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

Переменные

Переменные шейдера — это как раз те специальные объекты, метод toString() которых переопределен и которые могут быть операндами JSSL выражения.

Переменная обладает квалификатором, типом, именем и длиной массива, если она является массивом.

Поддерживаемые квалификаторы: in, out, inout, varying, attribute, uniform, const, none.

Поддерживаемые типы: int, ivec2, ivec3, ivec4, float, vec2, vec3, vec4, mat2, mat3, mat4, sampler2D, samplerCube.

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

static objectMatrix = Shader.uniform_mat4("objectMatrix");
// …
const cameraPosition = uniform_vec3("cameraPosition");
const joints = uniform_vec4("joints", [96]);
const vec = vec4("vec");

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

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

Переменные шейдера имеют геттеры и сеттеры для свизловых операций, такие как xx, xyz, wzyx, rgb, bgra и так далее. Также к компонентам или элементам можно обращаться по индексу через [].

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

matrix[0] = cross(va, vb);
matrix[1][1] = a * b;
va[0] = vb.x + array[i + 5].z;

Проверка на ошибки

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

Производительность

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

Совместимость

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

Заключение

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