在 WebGL 中将纹理传送到 HTML 画布的最干净的方法是什么。我可以看到设置正交投影并渲染纹理四边形,但有更清洁的方法吗?
问问题
2315 次
1 回答
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
]
将从单位四边形转换为图像的大小。
进入所有矩阵数学对于这个答案来说似乎太多了,但如果你有兴趣,你可以在这里找到它参见http://games.greggman.com/game/webgl-2d-matrices/
于 2013-01-22T18:25:08.407 回答