简单的WebGL程序RotateTriangle（WebGL编程指南，第3章）无法工作

我很抱歉粘贴了一个代码列表，但它非常简单。我不知道为什么，不是警告没有错误，它会在静默中崩溃。这是源代码，它引用了一个utils.js文件，我保证外部文件中没有错误。因为其他基于此的程序运行得相当好

---

试验
正文{背景：粉红色}
画布{背景：橙色}
属性向量4；
均匀浮动uCosB，uSinB；
void main（）{
gl_Position.x=aVertexPosition.x*uCosB-aVertexPosition.y*uSinB；
gl_Position.y=aVertexPosition.x*uCosB+aVertexPosition.y*uSinB；
gl_Position.z=0.z；
gl_位置w=1.0；
}
void main（）{
gl_FragColor=vec4（1.0,0.0,0.0,1.0）；
}
var gl、画布、着色器程序；
window.onload=函数（）{
initCanvasAndGL（“画布”）；
initProgram（）；
initBuffer（）；
gl.clearColor（0.0,0.0,0.0,1.0）；
总账清除（总账颜色缓冲位）；
变量角度=90/180*Math.PI；
var uSinB=gl.getUniformLocation（着色器程序，“uSinB”）；
var uCosB=gl.getUniformLocation（着色器程序，“uCosB”）；
gl.uniform1f（uSinB，数学sin（角度））；
gl.uniform1f（uCosB，数学cos（角度））；
总图数组（总图三角形，0,3）；
}
函数initBuffer（）{
变量顶点=[0.0,0.5，-0.5，-0.5,0.5，-0.5]；
var vertexBuffer=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，vertexBuffer）；
gl.bufferData（gl.ARRAY\u BUFFER、新Float32Array（顶点）、gl.STATIC\u DRAW）；
var aVertexPosition=gl.GetAttriblLocation（着色器程序，“aVertexPosition”）；
gl.VertexAttributePointer（1，2，gl.FLOAT，false，0，0）；
gl.EnableVertexAttributeArray（可编程逻辑阵列）；
}
不支持画布！：(

---

如果您确实怀疑utils.js，以下是源代码。
函数initCanvasAndGL（canvasID）{
canvas=document.getElementById（canvasID）；
变量名称=[
“webgl”，“实验性webgl”，
“webkit-3d”、“moz webgl”
];
对于（变量i=0；i

---

你可以把它放在一起运行程序。但是结果真的让我抓狂。

是的，正如另一个人评论的那样-你需要改变你的gl_位置。y作为

gl_Position.y = aVertexPosition.x * uSinB + aVertexPosition.y * uCosB;

然后会显示一个红色三角形

---

享受

我知道了， gl_Position.y=aVertexPosition.x*uCosB+aVertexPosition.y*uSinB；应该改成： gl_Position.y=aVertexPosition.x*uSinB+aVertexPosition.y*uCosB；非常感谢您，非常感谢您观看这个节目！

If you do suspect the utils.js, Here is the source code.
function initCanvasAndGL(canvasID) {
    canvas = document.getElementById(canvasID);
    var names = [
        "webgl", "experimental-webgl",
        "webkit-3d", "moz-webgl"
    ];

    for(var i = 0; i < names.length; ++i) {
        try {
            gl = canvas.getContext(names[i]);
        } catch(e) {}

        if(gl) {
            break;
        }
    }

    if(!gl) {
        alert("WebGL is not available! :(");
    }
}

function getShader(gl, id) {
    var shaderScript = document.getElementById(id);
    if(!shaderScript) {
        return null;
    }

    var str = "";
    var k = shaderScript.firstChild;
    while(k) {
        if(k.nodeType == 3) {
            str += k.textContent;
        }

        k = k.nextSibling;
    }

    var shader;
    if(shaderScript.type == "x-shader/x-vertex") {
        shader = gl.createShader(gl.VERTEX_SHADER);
    } else if(shaderScript.type == "x-shader/x-fragment") {
        shader = gl.createShader(gl.FRAGMENT_SHADER);
    } else {
        return null;
    }

    gl.shaderSource(shader, str);
    gl.compileShader(shader);

    if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        alert(gl.getShaderInfoLog(shader));
        return null;
    }

    return shader;
}

function initProgram() {
    var vertexShader = getShader(gl, "shader-vs");
    var fragmentShader = getShader(gl, "shader-fs");

    shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);

    if(!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
        alert("Could not initialise shaders! :(");
    }

    gl.useProgram(shaderProgram);
}

gl_Position.y = aVertexPosition.x * uSinB + aVertexPosition.y * uCosB;