Javascript Webgl纹理水平翻转

我想知道有没有webgl纹理水平翻转的功能

我在谷歌上搜索过这个问题。 然而，我通过使用gl.pixelStorei（gl.UNPACK_flip_Y_WEBGL，true）得到了垂直翻转纹理的答案；如你所知

我还尝试编写一个简单的函数来切换像素值，以获得我想要的翻转纹理。

---

但我还是想知道有没有什么方法可以直接用来水平翻转webgl纹理？

更好的问题是你想做什么。您说要翻转纹理。为什么？你想完成什么

有很多方法可以绘制翻转的纹理。绘制特定方向不需要翻转纹理的数据。假设您正在绘制一个带有纹理的矩形。你可以

• 绘制翻转的矩形
• 按-1英寸X的比例缩放
• 更改数据中的纹理坐标
• 操纵着色器中的纹理坐标

所有这些都比尝试实际翻转纹理数据更快、更有用。今天，您将询问如何对数据进行x翻转。明天您将询问如何旋转数据。您通常不会对纹理进行x翻转或旋转，而是操纵顶点和/或纹理坐标

那么，你到底想实现什么，你认为x翻转纹理数据能解决这个问题

旧的固定函数OpenGL有一个纹理矩阵，对应于上面的最后一个想法。您可能有这样一个顶点着色器

attribute vec4 position;
attribute vec2 texcoord;

uniform mat4 matrix;

varying vec2 v_texcoord;

void main() {
  gl_Position = matrix * position;

  // pass through to fragment shader
  v_texcoord = texcoord;  
}

attribute vec4 position;
attribute vec2 texcoord;

uniform mat4 matrix;
uniform mat4 textureMatrix;  // ADDED!!

varying vec2 v_texcoord;

void main() {
  gl_Position = matrix * position;

  // pass through to fragment shader after
  // multiplying by texture matrix
  v_texcoord = (textureMatrix * vec4(texcoord, 0, 1)).xy;  // CHANGED !!
}

您可以像这样添加纹理矩阵

attribute vec4 position;
attribute vec2 texcoord;

uniform mat4 matrix;

varying vec2 v_texcoord;

void main() {
  gl_Position = matrix * position;

  // pass through to fragment shader
  v_texcoord = texcoord;  
}

attribute vec4 position;
attribute vec2 texcoord;

uniform mat4 matrix;
uniform mat4 textureMatrix;  // ADDED!!

varying vec2 v_texcoord;

void main() {
  gl_Position = matrix * position;

  // pass through to fragment shader after
  // multiplying by texture matrix
  v_texcoord = (textureMatrix * vec4(texcoord, 0, 1)).xy;  // CHANGED !!
}

下面是一个使用纹理矩阵以多种方式绘制相同纹理的示例

var m4=twgl.m4；
var gl=twgl.getWebGLContext（document.getElementById（“c”））；
var programInfo=twgl.createProgramInfo（gl，[“vs”，“fs]”）；
变量数组={
位置：{
NUM组件：2，
数据：[
0, 0, 
1, 0, 
0, 1, 
0, 1, 
1, 0, 
1, 1,
],
},
特克斯库尔德：[
0, 0, 
1, 0, 
0, 1, 
0, 1, 
1, 0, 
1, 1,
],
};
var bufferInfo=twgl.createBufferInfoFromArrays（gl，arrays）；
//从2d画布创建纹理。我们做一个F，这样我们就可以看到它的方向
var ctx=document.createElement（“canvas”）.getContext（“2d”）；
ctx.width=64；
ctx.height=64；
ctx.fillStyle=“红色”；
ctx.fillRect（0,0，ctx.canvas.width，ctx.canvas.height/2）；
ctx.fillStyle=“蓝色”；
ctx.fillRect（0，ctx.canvas.height/2，ctx.canvas.width，ctx.canvas.height/2）；
ctx.fillStyle=“黄色”；
ctx.font=“100px无衬线”；
ctx.textAlign=“中心”；
ctx.textb基线=“中间”；
ctx.fillText（“F”，ctx.canvas.width/2，ctx.canvas.height/2）；
var tex=twgl.createTexture（gl，{src:ctx.canvas}）；
变量={
矩阵：m4.identity（），
textureMatrix:m4.identity（），
质地：特克斯，
};
总账使用程序（programInfo.program）；
twgl.setBuffersAndAttributes（总帐、程序信息、缓冲信息）；
对于（var ii=0；ii<10；++ii）{
变量flipX=ii&0x1；
变量flipY=ii&0x2；
var掉期=ii&0x4；
var rot=ii&0x8；
var x=ii%5；
变量y=ii/5 | 0；
var m=矩阵；
m4.正交（0，gl.canvas.width，gl.canvas.height，0，-1，1，m）；
m4.平移（m[x*59+2，y*59+2,0]，m）；
m4.刻度（米[58,58,1]，米）；
var tm=制服纹理矩阵；
m4.身份（tm）；
如果（flipX）{
m4.翻译（tm[1,0,0]，tm）；
m4.刻度（tm，[-1,1,1]，tm）；
}
如果（flipY）{
m4.翻译（tm[0,1,0]，tm）；
m4.刻度（tm，[1，-1,1]，tm）；
}
如果（互换）{
m4.乘法（tm[
0, 1, 0, 0,
1, 0, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1,
]，tm）；
}
如果（腐烂）{
m4.翻译（tm[0.5,0.5,0]，tm）；
m4.rotateZ（tm，Math.PI*0.25，tm）；
m4.翻译（tm，[-0.5，-0.5,0]，tm）；
}  
twgl.设置制服（程序信息、制服）；
twgl.drawBufferInfo（总图，总图三角形，bufferInfo）；
}

canvas{边框：1px纯黑；}

属性向量4位置；
属性向量2 texcoord；
一致mat4矩阵；
均匀mat4组织矩阵；
可变矢量2 v_texcoord；
void main（）{
gl_位置=矩阵*位置；
v_texcoord=（textureMatrix*vec4（texcoord，0，1））.xy；
}
精密中泵浮子；
二维纹理均匀；
可变矢量2 v_texcoord；
void main（）{
gl_FragColor=纹理2D（纹理，v_texcoord）；
}

实际上，更常见的方法是将要翻转的轴减去一：

TexCoord.y = 1.0 - TexCoord.y;

---

向后拉？翻转纹理坐标？没有简单的方法来翻转数据本身，我只是尝试先使用gl.readPixels来获取纹理数据，然后使用for loop来交换像素值。只是想知道是否有任何方法可以快速翻转纹理。或者我可以尝试先翻转图像，然后绑定到纹理。这非常有效-请注意，您可以在着色器内部或外部执行此操作