Javascript 错误的纹理设置或疯狂的纹理行为
我正在尝试为背景矩形(由两个三角形组成)设置纹理。 取决于我设置为textCoord的坐标,我得到了绘图、旋转、缩放等随机选项,但不是我实际需要的。关于这个。我需要用这张图片填充这个形状,我用它作为背景。 这是我的着色器:Javascript 错误的纹理设置或疯狂的纹理行为,javascript,webgl,textures,Javascript,Webgl,Textures,我正在尝试为背景矩形(由两个三角形组成)设置纹理。 取决于我设置为textCoord的坐标,我得到了绘图、旋转、缩放等随机选项,但不是我实际需要的。关于这个。我需要用这张图片填充这个形状,我用它作为背景。 这是我的着色器: const vsBSource = ` attribute vec2 aposition; attribute vec2 atexCoord; varying vec2 vtextCoord; void main() { gl_Position =
const vsBSource = `
attribute vec2 aposition;
attribute vec2 atexCoord;
varying vec2 vtextCoord;
void main() {
gl_Position = vec4(aposition,0,1);
vtextCoord = atexCoord;
}
`;
const fsBSource = `
precision mediump float;
varying vec2 vtextCoord;
uniform sampler2D uimage;
void main() {
gl_FragColor = texture2D(uimage, vtextCoord);
}
`;
问题是如何为纹理设置正确的坐标?
webGL中的剪辑空间坐标为[x,y]|-1 var background = new Shape(-1, -1, 2.0)
background.positionBuffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, background.positionBuffer)
setBackgroundVerticies(background.origin.x,background.origin.y, 2.0)
let url = "./res/background.jpg"
background.texture = loadImageAndCreateTextureInfo(url)
background.texture.positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, background.texture.positionBuffer)
setBackgroundVerticies(background.origin.x,background.origin.y, 2.0)
glManager.background = background
我在上面使用的函数:
function setBackgroundVerticies(_x, _y, _step) {
var gl = glManager.gl
var step = _step
var x = _x
var y = _y
var positions = []
positions = unitBlock(x ,y, step)
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW)
}
function unitBlock(x, y, step) {
var x1 = x;
var x2 = x1 + step;
let y1 = y;
let y2 = y1 + step;
return [
x1, y1,
x1, y2,
x2, y1,
x1, y2,
x2, y2,
x2, y1,
]
}
function loadImageAndCreateTextureInfo(url) {
var gl = glManager.gl
var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
// Fill the texture with a 1x1 blue pixel.
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
new Uint8Array([0, 0, 255, 255]));
// Because in webgl by design texture loads upside down i need to flip it.
// For flipping im usingg this func gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
// https://www.khronos.org/webgl/public-mailing-list/public_webgl/1212/msg00009.php
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
var textureInfo = {
width: 1, // we don't know the size until it loads
height: 1,
texture: tex,
};
var img = new Image();
img.addEventListener('load', function() {
textureInfo.width = img.width;
textureInfo.height = img.height;
gl.bindTexture(gl.TEXTURE_2D, textureInfo.texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
});
img.crossOrigin = "null";
img.src = url;
return textureInfo;
}
问题是如何为纹理设置正确的坐标?webGL中的剪辑空间坐标为[x,y]|-1u = x*0.5 + 0.5
v = y*0.5 + 0.5
@拉比:这是有效的。非常感谢。你能给我一个答案,让我投赞成票并结束这个问题吗?