Каков самый чистый способ переноса текстуры на холст HTML в WebGL. Я мог бы настроить орфографическую проекцию и визуализировать текстурированный четырехугольник, но есть ли более чистый способ?
Перенос текстуры WebGL на холст
Ответы (1)
Что значит «перенести текстуру на холст HTML5»? Вы имеете в виду просто нарисовать текстуру 1x1 пиксель на холсте? Нет необходимости в орфографической проекции. Самое простое это либо сделать юнит квадр и масштабировать, либо сделать квадр в пиксельных координатах и отрисовать.
Вот четырехъядерный шейдер пиксельной координаты
attribute vec2 a_position;
attribute vec2 a_texCoord;
uniform vec2 u_resolution;
varying vec2 v_texCoord;
void main() {
// convert the rectangle from pixels to 0.0 to 1.0
vec2 zeroToOne = a_position / u_resolution;
// convert from 0->1 to 0->2
vec2 zeroToTwo = zeroToOne * 2.0;
// convert from 0->2 to -1->+1 (clipspace)
vec2 clipSpace = zeroToTwo - 1.0;
gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
v_texCoord = a_texCoord;
}
Этот пример отсюда. (http://games.greggman.com/game/webgl-image-processing/)
Масштабное смещение для версии с четырьмя юнитами будет
attribute vec2 a_position;
attribute vec2 a_texCoord;
uniform vec2 u_offset;
uniform vec2 u_scale;
varying vec2 v_texCoord;
void main() {
gl_Position = vec4(a_position * u_scale + u_offset, 0, 1);
v_texCoord = a_texCoord;
}
Наконец, в любом случае вы можете упростить код, используя матричную математику 3x3.
attribute vec2 a_position;
uniform mat3 u_matrix;
void main() {
// Multiply the position by the matrix.
gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);
}
И просто установить матрицу. Вы можете использовать либо единичный квадрат (добавляя масштабную матрицу для увеличения пикселей), либо использовать пиксели.
Матрица
[
2 / canvasWidth, 0, 0,
0, -2 / canvasHeight, 0,
-1, 1, 1
]
Преобразует из пикселей в клипспейс. Матрица
[
imageWidth, 0, 0,
0, imageHeight, 0,
0, 0, 1
]
Преобразует из единицы quad в размер вашего изображения.
Вдаваться во всю матричную математику кажется слишком сложным для этого ответа, но если вам интересно, вы можете найти его здесь. См. http://games.greggman.com/game/webgl-2d-matrices/