韦伯格尔纹理水平翻转
Webgl texture flip horizontally
我想知道是否有任何用于 webgl 纹理水平翻转的功能。
我已经谷歌了这个问题。但是,我通过使用gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,真的);如你所知。
我还尝试编写一个简单的函数来切换像素值以获得我想要的翻转纹理。但我仍然想知道有什么方法可以直接用于水平翻转 webgl 纹理?
更好的问题是你想做什么。你说你想翻转纹理。为什么?你想完成什么?
有很多方法可以绘制翻转的纹理。绘制某个方向不需要翻转纹理的数据。 假设您正在绘制一个带有纹理的矩形。你可以
- 绘制翻转的矩形。
- 在 X 中将其缩放 -1。
- 更改数据中的纹理坐标
- 在着色器中操作纹理坐标
所有这些都可以说比尝试实际翻转纹理数据更快、更有用。今天你问如何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 !!
}
下面是使用纹理矩阵以多种方式绘制相同纹理的示例
var m4 = twgl.m4;
var gl = twgl.getWebGLContext(document.getElementById("c"));
var programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]);
var arrays = {
position: {
numComponents: 2,
data: [
0, 0,
1, 0,
0, 1,
0, 1,
1, 0,
1, 1,
],
},
texcoord: [
0, 0,
1, 0,
0, 1,
0, 1,
1, 0,
1, 1,
],
};
var bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);
// make a texture from a 2d canvas. We'll make an F so we can see it's orientation
var ctx = document.createElement("canvas").getContext("2d");
ctx.width = 64;
ctx.height = 64;
ctx.fillStyle = "red";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height / 2);
ctx.fillStyle = "blue";
ctx.fillRect(0, ctx.canvas.height / 2, ctx.canvas.width, ctx.canvas.height / 2);
ctx.fillStyle = "yellow";
ctx.font = "100px sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("F", ctx.canvas.width / 2, ctx.canvas.height / 2);
var tex = twgl.createTexture(gl, { src: ctx.canvas });
var uniforms = {
matrix: m4.identity(),
textureMatrix: m4.identity(),
texture: tex,
};
gl.useProgram(programInfo.program);
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
for (var ii = 0; ii < 10; ++ii) {
var flipX = ii & 0x1;
var flipY = ii & 0x2;
var swap = ii & 0x4;
var rot = ii & 0x8;
var x = ii % 5;
var y = ii / 5 | 0;
var m = uniforms.matrix;
m4.ortho(0, gl.canvas.width, gl.canvas.height, 0, -1, 1, m);
m4.translate(m, [x * 59 + 2, y * 59 + 2, 0], m);
m4.scale(m, [58, 58, 1], m);
var tm = uniforms.textureMatrix;
m4.identity(tm);
if (flipX) {
m4.translate(tm, [1, 0, 0], tm);
m4.scale(tm, [-1, 1, 1], tm);
}
if (flipY) {
m4.translate(tm, [0, 1, 0], tm);
m4.scale(tm, [1, -1, 1], tm);
}
if (swap) {
m4.multiply(tm, [
0, 1, 0, 0,
1, 0, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1,
], tm);
}
if (rot) {
m4.translate(tm, [0.5, 0.5, 0], tm);
m4.rotateZ(tm, Math.PI * 0.25, tm);
m4.translate(tm, [-0.5, -0.5, 0], tm);
}
twgl.setUniforms(programInfo, uniforms);
twgl.drawBufferInfo(gl, gl.TRIANGLES, bufferInfo);
}
canvas { border: 1px solid black; }
<script id="vs" type="notjs">
attribute vec4 position;
attribute vec2 texcoord;
uniform mat4 matrix;
uniform mat4 textureMatrix;
varying vec2 v_texcoord;
void main() {
gl_Position = matrix * position;
v_texcoord = (textureMatrix * vec4(texcoord, 0, 1)).xy;
}
</script>
<script id="fs" type="notjs">
precision mediump float;
uniform sampler2D texture;
varying vec2 v_texcoord;
void main() {
gl_FragColor = texture2D(texture, v_texcoord);
}
</script>
<script src="https://twgljs.org/dist/twgl-full.min.js"></script>
<canvas id="c"></canvas>
实际上,更常见的方法是减去要翻转的轴:
TexCoord.y = 1.0 - TexCoord.y;
相关文章:
- 在threejs中使用纹理网格和线框网格
- 允许表单元格内容水平展开
- 如何在c3js动态图表上进行平滑(水平)转换
- ThreeJS将画布中的文本渲染为纹理,然后应用于平面
- 无法在obj+mtl文件中加载纹理
- 加载collada纹理数据(.jpg本身)时对其进行操作
- 如何创建一个具有固定左右列和水平滚动的表
- 通过水平滚动将页眉固定到页面顶部
- 水平视差滚动从头开始-没有插件(jQuery)
- webgl在一个正方形上操纵两个纹理
- 如何在pixi.js多边形上放置纹理
- 具有Twitter引导程序的水平滚动表
- 如何避免鼠标水平滚动选项卡面板溢出
- 如何在three.js中为三角形添加纹理
- Three.js CanvasRenderer,在将图像纹理设置为平面时出现问题
- 使用CSS嵌入HTML中的水平居中jQuery
- 如何使用Jquery水平打印表中的数组元素,并在某个元素之后垂直打印
- CSS堆栈角度重复水平而非垂直
- 制作水平滑动段
- 韦伯格尔纹理水平翻转