对不起，如果这真的很愚蠢。我遇到了最奇怪的WebGL问题。我写了一个非常基本的WebGL程序来渲染精灵。
<!DOCTYPE html>
<html lang="en">
<head><title></title>
<style>
html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; }
canvas { position: absolute; top:0;left:0; cursor: none; }
</style></head><body>
<canvas id="webgltestingthing"></canvas>
<script>
var scene,gl,cursor,sh={};
var vertexShader="
precision mediump float;
attribute vec2 a_position;
attribute vec2 a_texCoord;
uniform vec2 u_resolution;
varying vec2 v_texCoord;
void main() {
gl_Position = vec4(a_position/u_resolution*2.0-1.0, 0, 1);
v_texCoord = a_texCoord;
}";
var fragShader="
precision mediump float;
uniform sampler2D u_image;
varying vec2 v_texCoord;
void main() {
gl_FragColor = texture2D(u_image, v_texCoord);
}";
function resizeScene() {
document.getElementById("webgltestingthing").width = document.body.clientWidth;
document.getElementById("webgltestingthing").height = document.body.clientHeight;
if(gl) gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight); }
mouseX=-1000; mouseY=-1000;
function trackMouse(e) { e = e || window.event; mouseX=event.pageX; mouseY=event.pageY; }
function trackMouseOut() { mouseX=-1000; mouseY=-1000; }
function createShader(gl, type, source) {
var shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (success) { return shader; }
console.log(gl.getShaderInfoLog(shader)); gl.deleteShader(shader); }
function createProgram(gl, vertexShader, fragmentShader) {
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
var success = gl.getProgramParameter(program, gl.LINK_STATUS);
if (success) { return {p: program, a: {}, u: {}}; }
console.log(gl.getProgramInfoLog(program)); gl.deleteProgram(program); }
function createTexture(url,onload) {
this.img=new Image(); this.onload=onload; this.loaded=false;
this.img.src=url;
this.w=0; this.h=0; this.texture=gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, this.texture);
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);
postload=function() {
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.img);
this.loaded=true; this.onload(); }
this.img.addEventListener("load",postload.bind(this));
return this; }
function renderSprite(t,x,y) {
if(!t.loaded) return;
var x1=x,y1=scene.clientHeight-y,x2=x+t.img.width,y2=y1-t.img.height;
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, t.texture);
gl.useProgram(sh.sprite.p);
gl.bindBuffer(gl.ARRAY_BUFFER, sh.sprite.a.texCoordBuffer);
gl.enableVertexAttribArray(sh.sprite.a.texCoord);
gl.vertexAttribPointer(sh.sprite.a.texCoord, 2, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, sh.sprite.a.positionBuffer);
gl.enableVertexAttribArray(sh.sprite.a.position);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([x1, y1, x2, y1, x1, y2, x1, y2, x2, y1, x2, y2]), gl.STATIC_DRAW);
gl.vertexAttribPointer(sh.sprite.a.position, 2, gl.FLOAT, false, 0, 0);
gl.uniform2fv(sh.sprite.u.res, [scene.clientWidth, scene.clientHeight]);
gl.uniform1i(sh.sprite.u.img, 0);
gl.drawArrays(gl.TRIANGLES, 0, 6);
}
function renderStuff() {
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
if(mouseX>0) renderSprite(cursor,mouseX,mouseY);
requestAnimationFrame(renderStuff);
}
(function() {
scene=document.getElementById("webgltestingthing"); resizeScene();
window.addEventListener('resize', resizeScene, true);
window.addEventListener('mousemove', trackMouse, true);
scene.addEventListener('mouseout', trackMouseOut, true);
gl=scene.getContext("experimental-webgl");
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
sh.f_sprite = createShader(gl, gl.FRAGMENT_SHADER, fragShader);
sh.v_bypixels = createShader(gl, gl.VERTEX_SHADER, vertexShader);
sh.sprite = createProgram(gl, sh.v_bypixels, sh.f_sprite);
sh.sprite.u.res = gl.getUniformLocation(sh.sprite.p, "u_resolution");
sh.sprite.u.img = gl.getUniformLocation(sh.sprite.p, 'u_image');
sh.sprite.a.position = gl.getUniformLocation(sh.sprite.p, "a_position");
sh.sprite.a.positionBuffer = gl.createBuffer();
sh.sprite.a.texCoord = gl.getUniformLocation(sh.sprite.p, "a_texCoord");
sh.sprite.a.texCoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, sh.sprite.a.texCoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0]), gl.STATIC_DRAW);
cursor=createTexture("graphics/cursor.png",function() { renderStuff(); });
})();
</script>
</body>
</html>
这将显示一个空白的白色屏幕。我希望它可以在鼠标位置显示纹理。控制台或其他任何内容都没有错误。然后我做了一些玩耍，发现了我无法解释的奇怪的东西。我将其添加到片段着色器中：
if(v_texCoord==vec2(0.0,0.0)) gl_FragColor = vec4(1.0,0.0,0.0,1.0);
的确，事实证明，图像上各处的纹理坐标显然为0.0/0.0！现在，WebGL正确地呈现一个红色框，位于精灵的确切大小应为Sprite的位置。因此，我的注意力转向我设置缓冲区以通过纹理坐标的部分，甚至发生了一些怪异的事情：如果您围绕代码进行交换，以便我首先设置位置缓冲区(在Rendersprite函数中((：
gl.bindBuffer(gl.ARRAY_BUFFER, sh.sprite.a.positionBuffer);
gl.enableVertexAttribArray(sh.sprite.a.position);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([x1, y1, x2, y1, x1, y2, x1, y2, x2, y1, x2, y2]), gl.STATIC_DRAW);
gl.vertexAttribPointer(sh.sprite.a.position, 2, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, sh.sprite.a.texCoordBuffer);
gl.enableVertexAttribArray(sh.sprite.a.texCoord);
gl.vertexAttribPointer(sh.sprite.a.texCoord, 2, gl.FLOAT, false, 0, 0);
现在我的红色盒子甚至不再存在了！因此，这向我表明，出于某种原因，无论我先在这个简单的着色器上设置什么缓冲液都无法正常工作，但是我看不出任何原因。我尝试了各种不同的方式，并尝试将周围的东西赶上，到目前为止还没有运气。我也对订单完全重要的原因感到困惑。
有人有任何想法吗？
在您的设置功能中，您使用的是getUniformLocation查询属性位置，属性不是制服，并且需要使用getAttribLocation查询其位置。
在属性上调用getUniformLocation返回null，然后将其施放为enableVertexAttribArray中的0和vertexAttribPointer调用，因此您将顶点属性绑定到同一位置。
sh.sprite.a.position = gl.getAttribLocation(sh.sprite.p, "a_position");
sh.sprite.a.positionBuffer = gl.createBuffer();
sh.sprite.a.texCoord = gl.getAttribLocation(sh.sprite.p, "a_texCoord");
sh.sprite.a.texCoordBuffer = gl.createBuffer();