Javascript 如何在WebGL中对立方体使用多个纹理？_Javascript_Opengl Es_Textures_Webgl

Javascript 如何在WebGL中对立方体使用多个纹理？

javascript opengl-es webgl

Javascript 如何在WebGL中对立方体使用多个纹理？,javascript,opengl-es,textures,webgl,Javascript,Opengl Es,Textures,Webgl,这是我的源代码。它仍然不起作用。我想把6个不同的图片放在一个立方体的6面上，这是动画。请帮助： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <title>WebGL</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"

这是我的源代码。它仍然不起作用。我想把6个不同的图片放在一个立方体的6面上，这是动画。请帮助：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>WebGL</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">


<script type="text/javascript" src="glMatrix-0.9.5.min.js"></script>

<script type="text/javascript" src="webgl-utils.js"></script>

<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;

varying vec2 vTextureCoord;

uniform sampler2D uSampler;

void main(void) {
    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
}
</script>

<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;

uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;

varying vec2 vTextureCoord;


void main(void) {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    vTextureCoord = aTextureCoord;
}
</script>


<script type="text/javascript">

var gl;

function initGL(canvas) {
    try {
        gl = canvas.getContext("experimental-webgl");
        gl.viewportWidth = canvas.width;
        gl.viewportHeight = canvas.height;
    } catch (e) {
    }
    if (!gl) {
        alert("Could not initialise WebGL, sorry :-(");
    }
}


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-fragment") {
        shader = gl.createShader(gl.FRAGMENT_SHADER);
    } else if (shaderScript.type == "x-shader/x-vertex") {
        shader = gl.createShader(gl.VERTEX_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;
}


var shaderProgram;

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

    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);

    shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
    gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

    shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
    gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);

    shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
    shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
    shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
}


var texturen = new Array();
function initTexture(sFilename,texturen)  
{
  var anz = texturen.length;
  texturen[anz] = gl.createTexture();
  texturen[anz].image = new Image();
  texturen[anz].image.onload = function()    
  {
  gl.bindTexture(gl.TEXTURE_2D, texturen[anz]);
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
  gl.texImage2D
  (gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texturen[anz].image);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  gl.bindTexture(gl.TEXTURE_2D, null);
  }
  texturen[anz].image.src = sFilename;
} 


var mvMatrix = mat4.create();
var mvMatrixStack = [];
var pMatrix = mat4.create();

function mvPushMatrix() {
    var copy = mat4.create();
    mat4.set(mvMatrix, copy);
    mvMatrixStack.push(copy);
}

function mvPopMatrix() {
    if (mvMatrixStack.length == 0) {
        throw "Invalid popMatrix!";
    }
    mvMatrix = mvMatrixStack.pop();
}


function setMatrixUniforms() {
    gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
    gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
}


function degToRad(degrees) {
    return degrees * Math.PI / 180;
}

function initBuffers() {
    var vertBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertBuffer);
    var vertices = [
        // Front face
        -1.0, -1.0,  1.0,
         1.0, -1.0,  1.0,
         1.0,  1.0,  1.0,
        -1.0,  1.0,  1.0,

        // Back face
        -1.0, -1.0, -1.0,
        -1.0,  1.0, -1.0,
         1.0,  1.0, -1.0,
         1.0, -1.0, -1.0,

        // Top face
        -1.0,  1.0, -1.0,
        -1.0,  1.0,  1.0,
         1.0,  1.0,  1.0,
         1.0,  1.0, -1.0,

       // Bottom face
        -1.0, -1.0, -1.0,
         1.0, -1.0, -1.0,
         1.0, -1.0,  1.0,
        -1.0, -1.0,  1.0,

        // Right face
         1.0, -1.0, -1.0,
         1.0,  1.0, -1.0,
         1.0,  1.0,  1.0,
         1.0, -1.0,  1.0,

        // Left face
        -1.0, -1.0, -1.0,
        -1.0, -1.0,  1.0,
        -1.0,  1.0,  1.0,
        -1.0,  1.0, -1.0,
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    vertBuffer.itemSize = 3;
    vertBuffer.numItems = 24;


    CoordBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER,CoordBuffer);
    var textureCoords = [
      // Front face
      0.0, 0.0,
      1.0, 0.0,
      1.0, 1.0,
      0.0, 1.0,

      // Back face
      1.0, 0.0,
      1.0, 1.0,
      0.0, 1.0,
      0.0, 0.0,

      // Top face
      0.0, 1.0,
      0.0, 0.0,
      1.0, 0.0,
      1.0, 1.0,

   // Bottom face
      1.0, 1.0,
      0.0, 1.0,
      0.0, 0.0,
      1.0, 0.0,

      // Right face
      1.0, 0.0,
      1.0, 1.0,
      0.0, 1.0,
      0.0, 0.0,

      // Left face
      0.0, 0.0,
      1.0, 0.0,
      1.0, 1.0,
      0.0, 1.0,
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
    CoordBuffer.itemSize = 2;
    CoordBuffer.numItems = 24;

var IndexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, IndexBuffer);
    var Indices = [
        0, 1, 2,      0, 2, 3,    // Front face
        4, 5, 6,      4, 6, 7,    // Back face
        8, 9, 10,     8, 10, 11,  // Top face
        12, 13, 14,   12, 14, 15, // Bottom face
        16, 17, 18,   16, 18, 19, // Right face
        20, 21, 22,   20, 22, 23  // Left face
    ];
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(Indices), gl.STATIC_DRAW);
    IndexBuffer.itemSize = 1;
    IndexBuffer.numItems = 36;



}


var xRot = 0;
var yRot = 0;
var zRot = 0;

function drawScene() {
    gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);

    mat4.identity(mvMatrix);

    mat4.translate(mvMatrix, [0.0, 0.0, -5.0]);

    mat4.rotate(mvMatrix, degToRad(xRot), [1, 0, 0]);
    mat4.rotate(mvMatrix, degToRad(yRot), [0, 1, 0]);
    mat4.rotate(mvMatrix, degToRad(zRot), [0, 0, 0]);
    setMatrixUniforms();



gl.bindBuffer(gl.ARRAY_BUFFER, vertBuffer);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, IndexBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,vertBuffer.itemSize, 
  gl.FLOAT, false, 0, 0);

// Draw face 0
gl.bindTexture(gl.TEXTURE_2D, texturen[0]);
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);

// Draw face 1
gl.bindTexture(gl.TEXTURE_2D, texturen[1]);
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 12);

// Draw face 2
gl.bindTexture(gl.TEXTURE_2D, texturen[2]);
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 24);

// Draw face 3
gl.bindTexture(gl.TEXTURE_2D, texturen[3]);
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 36);

// Draw face 4
gl.bindTexture(gl.TEXTURE_2D, texturen[4]);
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 48);

// Draw face 5
gl.bindTexture(gl.TEXTURE_2D, texturen[5]);
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 60);
}


var lastTime = 0;

function animate() {
    var timeNow = new Date().getTime();
    if (lastTime != 0) {
        var elapsed = timeNow - lastTime;

        xRot += (90 * elapsed) / 1000.0;
        yRot += (90 * elapsed) / 1000.0;
        zRot += (90 * elapsed) / 1000.0;
    }
    lastTime = timeNow;
}


function tick() {
    requestAnimFrame(tick);
    drawScene();
    animate();
}


function webGLStart() {
    var canvas = document.getElementById("lesson05-canvas");
    initGL(canvas);
    initShaders();
    initBuffers();
    initTexture("Logo.png",texturen);
    initTexture("le.png",texturen);
initTexture("Logo.png",texturen);
    initTexture("le.png",texturen);
initTexture("Logo.png",texturen);
    initTexture("le.png",texturen);

gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.enable(gl.DEPTH_TEST);

    tick();
}


</script>


</head>
<body onload="webGLStart();">
<canvas id="lesson05-canvas" style="border: none;" width="500" height="500">    </canvas>    <canvas id="lesson05-canvas" style="border: none;" width="500" height="500">    </canvas>
</body></html>

我希望这只是两张不同的图片这一事实无关紧要。

你有试过调试这个吗？上面粘贴的代码未运行，并出现JavaScript错误。在Chrome中打开JavaScript控制台扳手->工具->JavaScript控制台。在Firefox->Web Developer->Web控制台中

出了问题的事情

使用了很多全局变量，但实际上并不是全局变量

将vertBuffer、IndexBuffer和CoordBuffer声明为中的局部变量初始化缓冲区，然后在drawScene中使用它们

这使得它至少不会出现JavaScript错误

没有设置纹理坐标

代码生成了一个CoordBuffer，但从未在属性中使用它。这导致 GL错误属性未在Chrome中正确设置

修复此问题使其停止获取GL错误。在这一点上，我设置了绿色的背景色，我看到一个旋转的黑色立方体，这表明下一个问题是纹理

未将纹理设置为不处理mips和非2次幂纹理

如果每个维度的纹理不是2的幂，则需要设置纹理用夹子包起来

gl.texParameterigl.TEXTURE_2D、gl.TEXTURE_WRAP_S、gl.CLAMP_TO_EDGE； gl.texParameterigl.TEXTURE_2D、gl.TEXTURE_WRAP_T、gl.CLAMP_至边

这是一个使用随机彩色画布而不是图像的工作版本

var-gl；函数initGLcanvas{ 试一试{ gl=canvas.getContextexperimental-webgl； gl.viewportWidth=canvas.width； gl.viewportHeight=canvas.height； }抓住e{ } 如果！德国劳埃德船级社{ 警报无法初始化WebGL，抱歉：-； } } 函数getShadergl，id{ var shaderScript=document.getElementByIdid；如果！着色器脚本{ 返回null； } str=shaderScript.text； var着色器；如果shaderScript.type==x-shader/x-fragment{ 着色器=gl.createShadergl.FRAGMENT\u着色器； }如果shaderScript.type==x-shader/x-vertex，则为else{ 着色器=gl.createShadergl.VERTEX_着色器； }否则{ 返回null； } shaderSourceshader街gl号； gl.compileShadershader；如果！gl.getShaderParametershader，gl.COMPILE\u状态{ alertgl.getShaderInfoLogshader；返回null； } 返回着色器； } var着色器程序；函数初始化着色器{ var fragmentShader=getShadergl，着色器fs； var vertexShader=getShadergl，shader vs； shaderProgram=gl.createProgram； gl.AttachShaderShader程序，vertexShader； gl.AttachShaderShader程序，碎片着色器； gl.linkProgramshaderProgram；如果！gl.getProgramParametershaderProgram，gl.LINK\u状态{ 警报无法初始化着色器； } gl.useProgramshaderProgram； //这是一个错误的代码。 //如果上下文为lsot，则着色器程序将为null //并尝试将vertexPositionAttribute分配给null //将引发异常。 //最好是 //着色器程序={}； //shaderProgram.program=gl.createProgram； //shaderProgram.VertExpositionaAttribute=。。。 shaderProgram.vertexPositionAttribute=gl.GetAttributeLocationShaderProgram，aVertexPosition； gl.EnableVertexAttribute数组ShaderProgramm.vertexPositionAttribute； shaderProgram.TextureCordAttribute=gl.GetAttributeLocationShaderprogram，ATEXTRACTORCORD； gl.EnableVertexAttributeArrayShaderProgramm.TextureCordAttribute； shaderProgram.pMatrixUniform=gl.getUniformLocationsShaderprogram，uPMatrix； shaderProgram.mvMatrixUniform=gl.getUniformLocationsShaderprogram，uMVMatrix； shaderProgram.samplerUniform=gl.getUniformLocationsShaderprogram，uSampler； } var texturen=新数组；函数initTextureFileName，texturen { var anz=纹理长度；纹理[anz]=gl.createTexture； //这是一个错误的代码。在上下文丢失时，gl.createTexture将返回null和 //尝试将.image附加到null时将引发异常 //最好是 //纹理[anz]={}； //纹理[anz].texture=gl.createTexture； //纹理[anz]。图像=新图像；纹理[anz]。图像=新图像；纹理[anz].image.onload=函数 { gl.bindTexturegl.TEXTURE_2D，Textureen[anz]； gl.pixelStoreigl.UNPACK_FLIP_Y_WEBGL，false； //gl.texImage2D gl.TEXTURE_2D，0，gl.RGBA，gl.RGBA，gl.UNSIGNED_字节，texturen[anz]。图像； gl.texParameterigl.TEXTURE_2D，gl.TEXTURE_MIN_过滤器，gl.NEAREST； gl.texParameterigl.TEXTURE_2D，gl.TEXTURE_MAG_过滤器，gl.NEAREST； gl.texParameterigl.TEXTURE_2D、gl.TEXTURE_WRAP_S、gl.CLAMP_TO_EDGE； gl.texParameterigl.TEXTURE_2D、gl.TEXTURE_WRAP_T、gl.CLAMP_至边； gl.bindTexturegl.TEXTURE_2D，空； } //texturen[anz].image.src=sFilename； //因为我不能跨域加载，所以我将使用画布来制作纹理函数rnd{返回Math.floorMath.random*256；} var c=document.createElementcanv 像 c、宽度=64； c、高度=64； var ctx=c.getContext2d； ctx.fillStyle=rgb+rnd+，+rnd+，+rnd+； ctx.fillRect0,0,64,64； ctx.fillStyle=rgb+rnd+，+rnd+，+rnd+； ctx.beginPath； ctx.arc32,32,30,0，Math.PI*2，false； ctx.fill； gl.bindTexturegl.TEXTURE_2D，Textureen[anz]； gl.texImage2Dgl.TEXTURE_2D，0，gl.RGBA，gl.RGBA，gl.UNSIGNED_字节，c； gl.texParameterigl.TEXTURE_2D，gl.TEXTURE_MIN_过滤器，gl.NEAREST； gl.texParameterigl.TEXTURE_2D，gl.TEXTURE_MAG_过滤器，gl.NEAREST； gl.texParameterigl.TEXTURE_2D、gl.TEXTURE_WRAP_S、gl.CLAMP_TO_EDGE； gl.texParameterigl.TEXTURE_2D、gl.TEXTURE_WRAP_T、gl.CLAMP_至边； } var mvMatrix=mat4.create； var mvMatrixStack=[]； var pMatrix=mat4.create；函数矩阵{ var copy=mat4.create； mat4.复印件，mvMatrix； mvMatrixStack.pushcopy； } 函数矩阵{ 如果mvMatrixStack.length==0{ 抛出无效的popMatrix！； } mvMatrix=mvMatrixStack.pop； } 函数集矩阵形式{ gl.uniformMatrix4fvshaderProgram.pMatrixUniform，false，pMatrix； gl.uniformMatrix4fvshaderProgram.mvMatrixUniform，false，mvMatrix； } 函数去余度{ 返回度*Math.PI/180； } 函数初始化缓冲区{ vertBuffer=gl.createBuffer； gl.bindBuffergl.ARRAY_BUFFER，vertBuffer；变量顶点=[ //正面 -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, //背面 -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, //顶面 -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0, //底面 -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0, //右脸 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, //左脸 -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, ]; gl.bufferDatagl.ARRAY\u BUFFER，新float32arrayvities，gl.STATIC\u DRAW； //这是错误代码。请参阅上面的错误代码示例。 //vertBuffer在上下文丢失时将为null，并且此代码 //将引发异常。 vertBuffer.itemSize=3； vertBuffer.numItems=24； CoordBuffer=gl.createBuffer； gl.bindBuffergl.ARRAY_BUFFER，CoordBuffer； var textureCoords=[ //正面 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, //背面 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 0.0, 0.0, //顶面 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, //底面 1.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, //右脸 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 0.0, 0.0, //左脸 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, ]; gl.bufferDatagl.ARRAY\u BUFFER，新float32arraytexturecords，gl.STATIC\u DRAW； CoordBuffer.itemSize=2； CoordBuffer.numItems=24； IndexBuffer=gl.createBuffer； gl.bindbuffer gl.ELEMENT_数组_BUFFER，IndexBuffer；风险值指数=[ 0,1,2,0,2,3，//正面 4,5,6,4,6,7，//背面 8，9，10，8，10，11，//顶面 12、13、14、12、14、15、//底面 16，17，18，16，18，19，//右脸 20,21,22,20,22,23//左脸 ]; gl.bufferDatagl.ELEMENT_ARRAY_BUFFER，新Uint16ArrayIndices，gl.STATIC_DRAW； IndexBuffer.itemSize=1； IndexBuffer.numItems=36； } var xRot=0； var-yRot=0； var-zRot=0；功能绘图场景{ gl.viewport0，0，gl.viewportWidth，gl.viewportHeight； gl.cleargl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT； mat4.perspectivepMatrix，45，gl.viewportWidth/gl.viewportHeight，0.1100.0； mat4.识别矩阵； mat4.translatemvMatrix，mvMatrix，[0.0,0.0，-5.0]； mat4.rotatemvMatrix，mvMatrix，degToRadxRot，[1,0,0]； mat4.rotatemvMatrix，mvMatrix，degToRadyRot，[0,1,0]； mat4.rotatemvMatrix，mvMatrix，degToRadzRot，[0,0,0]；刚毛状体； gl.bindBuffergl.ARRAY_BUFFER，vertBuffer； gl.VertexAttributesPointerShaderProgram.vertexPositionAttribute，vertBuffer.itemSize， gl.FLOAT，false，0,0； gl.bindBuffergl.ARRAY_BUFFER，CoordBuffer； gl.VertexAttributePointerShaderProgram.TextureCordAttribute，CoordBuffer.itemSize， gl.FLOAT，false，0,0； gl.bindbuffer gl.ELEMENT_数组_BUFFER，IndexBuffer； //绘制面0 gl.bindTexturegl.TEXTURE_2D，texturen[0]； gl.drawerElementsGL.TRIANGLES，6，gl.UNSIGNED_SHORT，0； //绘制面1 gl.bindTexturegl.TEXTURE_2D，texturen[1]； gl.drawElementsgl.TRIANGLES，6，gl.UNSIGNED_SHORT，12； //绘制面2 gl.bindTexturegl.TEXTURE_2D，texturen[2]； gl.drawElementsgl.TRIANGLES，6，gl.UNSIGNED_SHORT，24； //绘制面3 gl.bindTexturegl.TEXT URE_2D，texturen[3]； gl.drawElementsgl.TRIANGLES，6，gl.UNSIGNED_SHORT，36； //绘制面4 gl.bindTexturegl.TEXTURE_2D，texturen[4]； gl.drawElementsgl.TRIANGLES，6，gl.UNSIGNED_SHORT，48； //绘制面5 gl.bindTexturegl.TEXTURE_2D，texturen[5]； gl.drawElementsgl.TRIANGLES，6，gl.UNSIGNED_SHORT，60； } var lastTime=0；函数动画{ var timeNow=new Date.getTime；如果上次！=0{ var Expased=timeNow-lastTime； xRot+=90*1000.0； yRot+=90*经过/1000.0； zRot+=90*1000.0； } lastTime=timeNow； } 功能记号{ requestAnimationFrametick；绘画场景；使有生气 } 函数webGLStart{ var canvas=document.getElementByIdlesson05-canvas；初始化画布；初始化着色器；初始化缓冲区； initTextureLogo.png，texturen； initTexturele.png，texturen； initTextureLogo.png，texturen； initTexturele.png，texturen； initTextureLogo.png，texturen； initTexturele.png，texturen； gl.clearColor0.0、1.0、0.0、1.0； gl.enablegl.DEPTH_测试；打上钩 } webGLStart；精密中泵浮子；可变向量2 vTextureCoord；均匀取样器；无效主无效{ gl_FragColor=纹理采样，向量2 vTextureCoord.s，vTextureCoord.t； } 属性向量3；属性向量2编码；均匀mat4-uMVMatrix；一致mat4上矩阵；可变向量2 vTextureCoord；无效主无效{ gl_位置=上矩阵*UMV矩阵*VEC4，1.0； vTextureCoord=ATextureCord； }

到底是什么不起作用？黑屏？奇怪的输出？由于这是WebGL，因此如果添加正在使用的浏览器版本，可能会很有用。新概念英语第五册画布表明这是某个地方的教程？介意说明一下吗？我找不到任何对glGetError的调用。对的回答是否不满足您的要求？+1，因为您是否尝试调试此问题？：调试控制台是你的朋友！已将您的工作版本更新为webgl-utils.js，但已移动