我的立方体不见了，我也不知道为什么

Question

I'm trying to create a program consisting of two cubes, one with colors, the other with a colored texture. 我正在尝试创建一个由两个立方体组成的程序，一个带有颜色，另一个带有彩色纹理。 These cubes move and rotate depending on input from the keyboard as follows: 这些多维数据集根据键盘输入而移动和旋转，如下所示：

u - up, d - down, l - left, r - right, i - in, o - out, g - grow, s - shrink u-向上，d-向下，l-左，r-右，i-入，o-出，g-增长，s-收缩

x/y/z - spin along cube's x/y/z-axis x / y / z-沿立方体的x / y / z轴旋转

shift + x/y/z - same as above but in opposite direction and the button switches between the cubes. shift + x / y / z-与上面相同，但方向相反，并且按钮在立方体之间切换。

Here is the HTML file: 这是HTML文件：

<html>
<script id="vertex-shader" type="x-shader/x-vertex">

attribute vec4 vPosition;
attribute vec4 vColor;
varying vec4 fColor;

uniform vec3 theta;
uniform vec4 posiz;

void main()
{
    // Compute the sines and cosines of theta for each of the three axes in one computation.
    vec3 angles = radians( theta );
    vec3 c = cos( angles );
    vec3 s = sin( angles );

    // Remember: these matrices are column-major
    mat4 rx = mat4( 1.0,  0.0,  0.0, 0.0,
                    0.0,  c.x,  s.x, 0.0,
                    0.0, -s.x,  c.x, 0.0,
                    0.0,  0.0,  0.0, 1.0 );

    mat4 ry = mat4( c.y, 0.0, -s.y, 0.0,
                    0.0, 1.0,  0.0, 0.0,
                    s.y, 0.0,  c.y, 0.0,
                    0.0, 0.0,  0.0, 1.0 );


    mat4 rz = mat4( c.z, -s.z, 0.0, 0.0,
                    s.z,  c.z, 0.0, 0.0,
                    0.0,  0.0, 1.0, 0.0,
                    0.0,  0.0, 0.0, 1.0 );

    // position matrix
    mat4 posMat = mat4( 1.0,  0.0,  0.0,  0.0,
                        0.0,  1.0,  0.0,  0.0,
                        0.0,  0.0,  1.0,  0.0,
                        posiz[0], posiz[1], posiz[2],  1.0 );

    // size matrix
    mat4 sizMat = mat4( posiz[3],  0.0,  0.0,  0.0,
                        0.0,  posiz[3],  0.0,  0.0,
                        0.0,  0.0,  posiz[3],  0.0,
                        0.0,  0.0,  0.0,  1.0 );

    fColor = vColor;
    gl_Position = sizMat * posMat * rz * ry * rx * vPosition;
} 
</script>

<script id="vertex-shader-texture" type="x-shader/x-vertex">

attribute  vec4 vPosition;
attribute  vec4 vColor;
attribute  vec2 vTexCoord;

varying vec4 fColor;
varying vec2 fTexCoord;

uniform vec3 theta;

void main() 
{
    // Compute the sines and cosines of theta for each of
    //   the three axes in one computation.
    vec3 angles = radians( theta );
    vec3 c = cos( angles );
    vec3 s = sin( angles );

    // Remeber: thse matrices are column-major
    mat4 rx = mat4( 1.0,  0.0,  0.0, 0.0,
            0.0,  c.x,  s.x, 0.0,
            0.0, -s.x,  c.x, 0.0,
            0.0,  0.0,  0.0, 1.0 );

    mat4 ry = mat4( c.y, 0.0, -s.y, 0.0,
            0.0, 1.0,  0.0, 0.0,
            s.y, 0.0,  c.y, 0.0,
            0.0, 0.0,  0.0, 1.0 );

    mat4 rz = mat4( c.z, -s.z, 0.0, 0.0,
            s.z,  c.z, 0.0, 0.0,
            0.0,  0.0, 1.0, 0.0,
            0.0,  0.0, 0.0, 1.0 );

    fColor = vColor;
    fTexCoord = vTexCoord;
    gl_Position = rz * ry * rx * vPosition;
} 
</script>

<script id="fragment-shader" type="x-shader/x-fragment">

precision mediump float;

varying vec4 fColor;

void
main()
{
    gl_FragColor = fColor;
}
</script>

<script id="fragment-shader-texture" type="x-shader/x-fragment">

precision mediump float;

varying vec4 fColor;
varying vec2 fTexCoord;

uniform sampler2D texture;

void
main()
{
    gl_FragColor = fColor * texture2D( texture, fTexCoord );
}
</script>

<script type="text/javascript" src="../Common/webgl-utils.js"></script>
<script type="text/javascript" src="../Common/initShaders.js"></script>
<script type="text/javascript" src="../Common/MV.js"></script>
<script type="text/javascript" src="myCubes.js"></script>

<body>
<canvas id="gl-canvas" width="512"" height="512">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>

<br/>

<input type = "button" value = "First" id = "switchButton" ></input>

<img id = "texImage" src = "diagram.png" hidden></img>
</body>
</html>

files webgl-utils.js, initShaders.js, and MV.js can be found here: 可以在以下位置找到文件webgl-utils.js，initShaders.js和MV.js：

http://www.cs.unm.edu/~angel/WebGL/7E/Common/ http://www.cs.unm.edu/~angel/WebGL/7E/Common/

And here is the accompanying javascript file: 这是随附的javascript文件：

var canvas;
var gl;

var numVertices  = 36;

var pointsArray = [];
var colorsArray = [];
var texCoordsArray = [];

var texture; // second cube texture

var xAxis = 0;
var yAxis = 1;
var zAxis = 2;

var axis1 = 0;
var axis2 = 0;

var rot1 = 1.0; // rate of rotation
var rot2 = 1.0;

var theta1 = [ 0, 0, 0 ];
var theta2 = [ 0, 0, 0 ];

// cube position along x, y, and z axis and size
var posiz1 = [ 0, 0, 0, 1 ];
var posiz2 = [ 0, 0, 0, 1 ];

// used to send info back to html, I think
var thetaLoc;
var posLoc;

var firstCube = true;

// globals
var program;
var programTexture;
var iBuffer;
var cBuffer;
var vColor;
var vBuffer;
var vPosition;
var cBufferTexture;
var vColorTexture;
var vBufferTexture;
var vPositionTexture;
var tBuffer;
var vTexCoord;
var image;

    var vertices = [
        vec3( -0.5, -0.5,  0.5 ),
        vec3( -0.5,  0.5,  0.5 ),
        vec3(  0.5,  0.5,  0.5 ),
        vec3(  0.5, -0.5,  0.5 ),
        vec3( -0.5, -0.5, -0.5 ),
        vec3( -0.5,  0.5, -0.5 ),
        vec3(  0.5,  0.5, -0.5 ),
        vec3(  0.5, -0.5, -0.5 )
    ];

    var vertexColors = [
        vec4( 0.0, 0.0, 0.0, 1.0 ),  // black
        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
        vec4( 1.0, 1.0, 0.0, 1.0 ),  // yellow
        vec4( 0.0, 1.0, 0.0, 1.0 ),  // green
        vec4( 0.0, 0.0, 1.0, 1.0 ),  // blue
        vec4( 1.0, 0.0, 1.0, 1.0 ),  // magenta
        vec4( 1.0, 1.0, 1.0, 1.0 ),  // white
        vec4( 0.0, 1.0, 1.0, 1.0 )   // cyan
    ];

// indices of the 12 triangles that comprise the cube
var indices = [
    1, 0, 3, 3, 2, 1, 2, 3, 7, 7, 6, 2,
    3, 0, 4, 4, 7, 3, 6, 5, 1, 1, 2, 6,
    4, 5, 6, 6, 7, 4, 5, 4, 0, 0, 1, 5
];

// texture coordinates
var texCoord = [
    vec2(0, 0),
    vec2(0, 1),
    vec2(1, 1),
    vec2(1, 0)
];

function configureTexture( image )
{
    texture = gl.createTexture();
    gl.bindTexture( gl.TEXTURE_2D, texture );
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image );
    gl.generateMipmap( gl.TEXTURE_2D );
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_LINEAR );
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST );

    gl.uniform1i(gl.getUniformLocation(programTexture, "texture"), 0);
}

function quad(a, b, c, d)
{
     pointsArray.push(vertices[a]); 
     colorsArray.push(vertexColors[a]); 
     texCoordsArray.push(texCoord[0]);

     pointsArray.push(vertices[b]); 
     colorsArray.push(vertexColors[a]);
     texCoordsArray.push(texCoord[1]); 

     pointsArray.push(vertices[c]); 
     colorsArray.push(vertexColors[a]);
     texCoordsArray.push(texCoord[2]); 

     pointsArray.push(vertices[a]); 
     colorsArray.push(vertexColors[a]);
     texCoordsArray.push(texCoord[0]); 

     pointsArray.push(vertices[c]); 
     colorsArray.push(vertexColors[a]);
     texCoordsArray.push(texCoord[2]); 

     pointsArray.push(vertices[d]); 
     colorsArray.push(vertexColors[a]);
     texCoordsArray.push(texCoord[3]);   
}

function colorCube()
{
    quad( 1, 0, 3, 2 );
    quad( 2, 3, 7, 6 );
    quad( 3, 0, 4, 7 );
    quad( 6, 5, 1, 2 );
    quad( 4, 5, 6, 7 );
    quad( 5, 4, 0, 1 );
}

window.onload = function init()
{
    canvas = document.getElementById( "gl-canvas" );

    gl = WebGLUtils.setupWebGL( canvas );
    if ( !gl ) { alert( "WebGL isn't available" ); }

    //event listeners for buttons
    document.getElementById( "switchButton" ).onclick = function ()
    {
        firstCube = !firstCube; // switch between cubes

        if (firstCube) document.getElementById("switchButton").value = "First";
        else document.getElementById("switchButton").value = "Second";
    };

    window.onkeydown = function(event)
    {
        var key = String.fromCharCode(event.keyCode);

        if (firstCube)
        {
            if (key == 'R') posiz1[0] += .1;
            else if (key == 'L') posiz1[0] -= .1;
            else if (key == 'U') posiz1[1] += .1;
            else if (key == 'D') posiz1[1] -= .1;
            else if (key == 'I') posiz1[2] += .1;
            else if (key == 'O') posiz1[2] -= .1;
            else if (key == 'G') posiz1[3] += .1;
            else if (key == 'S') posiz1[3] -= .1;

            if (event.shiftKey == 0 && (key == 'X' || key == 'Y' || key == 'Z'))
                rot1 = -1.0;
            else if (key == 'X' || key == 'Y' || key == 'Z')
                rot1 = 1.0;

            if (key == 'X') axis1 = xAxis;
            if (key == 'Y') axis1 = yAxis;
            if (key == 'Z') axis1 = zAxis;
        }
        else
        {
            if (key == 'R') posiz2[0] += .1;
            else if (key == 'L') posiz2[0] -= .1;
            else if (key == 'U') posiz2[1] += .1;
            else if (key == 'D') posiz2[1] -= .1;
            else if (key == 'I') posiz2[2] += .1;
            else if (key == 'O') posiz2[2] -= .1;
            else if (key == 'G') posiz2[3] += .1;
            else if (key == 'S') posiz2[3] -= .1;

            if (event.shiftKey == 0 && (key == 'X' || key == 'Y' || key == 'Z'))
                rot2 = -1.0;
            else if (key == 'X' || key == 'Y' || key == 'Z')
                rot2 = 1.0;

            if (key == 'X') axis2 = xAxis;
            if (key == 'Y') axis2 = yAxis;
            if (key == 'Z') axis2 = zAxis;
        }
    };

    gl.viewport( 0, 0, canvas.width, canvas.height );
    gl.clearColor( 1.0, 1.0, 1.0, 1.0 );

    gl.enable(gl.DEPTH_TEST);

    //  Load shaders and initialize attribute buffers
    program = initShaders( gl, "vertex-shader", "fragment-shader" );
    programTexture = initShaders( gl, "vertex-shader-texture", "fragment-shader-texture" );

    gl.useProgram( program );
    colorCube();

    // array element buffer    
    iBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(indices), gl.STATIC_DRAW);

    // color array attribute buffer
    cBuffer = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(vertexColors), gl.STATIC_DRAW );

    vColor = gl.getAttribLocation( program, "vColor" );
    gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vColor );

    // vertex array attribute buffer
    vBuffer = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW );

    vPosition = gl.getAttribLocation( program, "vPosition" );
    gl.vertexAttribPointer( vPosition, 3, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vPosition );

    // get started on textured cube
    gl.useProgram( programTexture);

    cBufferTexture = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, cBufferTexture );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(colorsArray), gl.STATIC_DRAW );

    vColorTexture = gl.getAttribLocation( programTexture, "vColor" );
    gl.vertexAttribPointer( vColorTexture, 4, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vColorTexture );

    vBufferTexture = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, vBufferTexture );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(pointsArray), gl.STATIC_DRAW );

    vPositionTexture = gl.getAttribLocation( programTexture, "vPosition" );
    gl.vertexAttribPointer( vPositionTexture, 4, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vPositionTexture );

    tBuffer = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, tBuffer );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(texCoordsArray), gl.STATIC_DRAW );

    vTexCoord = gl.getAttribLocation( programTexture, "vTexCoord" );
    gl.vertexAttribPointer( vTexCoord, 2, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vTexCoord );

    image = document.getElementById("texImage");

    configureTexture( image );

    render();
}

function render()
{
    gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    gl.useProgram(program);

    // connect location to variable in html
    thetaLoc = gl.getUniformLocation(program, "theta");
    posizLoc = gl.getUniformLocation(program, "posiz");

    // handle rendering of first cube
    theta1[axis1] += rot1;

    gl.uniform3fv(thetaLoc, theta1);
    gl.uniform4fv(posizLoc, posiz1);

    gl.drawElements( gl.TRIANGLES, numVertices, gl.UNSIGNED_BYTE, 0 );

    // handle rendering of second textured cube
    gl.useProgram(programTexture);

    thetaLoc = gl.getUniformLocation(programTexture, "theta");
    posizLoc = gl.getUniformLocation(programTexture, "posiz");

    theta2[axis2] += rot2;

    gl.uniform3fv(thetaLoc, flatten(theta2));
    gl.uniform4fv(posizLoc, posiz2);

    gl.drawArrays( gl.TRIANGLES, 0, numVertices );

//    gl.drawElements( gl.TRIANGLES, numVertices, gl.UNSIGNED_BYTE, 0 );

    requestAnimFrame( render );
}

For some reason, no cubes show up. 由于某些原因，没有多维数据集出现。 Messing a bit with the code, I find that the javascript code breaks with alterations made following the 弄乱了代码，我发现javascript代码因在

// get started on textured cube

comment line. 评论行。 The following javascript code is the same as the javascript code above save for code below the 'get started on textured cube' comment line: 以下javascript代码与上面的javascript代码相同，只是“纹理多维数据集入门”注释行下方的代码相同：

var canvas;
var gl;

var numVertices  = 36;

var pointsArray = [];
var colorsArray = [];
var texCoordsArray = [];

var texture; // second cube texture

var xAxis = 0;
var yAxis = 1;
var zAxis = 2;

var axis1 = 0;
var axis2 = 0;

var rot1 = 1.0; // rate of rotation
var rot2 = 1.0;

var theta1 = [ 0, 0, 0 ];
var theta2 = [ 0, 0, 0 ];

// cube position along x, y, and z axis and size
var posiz1 = [ 0, 0, 0, 1 ];
var posiz2 = [ 0, 0, 0, 1 ];

// used to send info back to html, I think
var thetaLoc;
var posLoc;

var firstCube = true;

// globals
var program;
var programTexture;
var iBuffer;
var cBuffer;
var vColor;
var vBuffer;
var vPosition;
var cBufferTexture;
var vColorTexture;
var vBufferTexture;
var vPositionTexture;
var tBuffer;
var vTexCoord;
var image;

    var vertices = [
        vec3( -0.5, -0.5,  0.5 ),
        vec3( -0.5,  0.5,  0.5 ),
        vec3(  0.5,  0.5,  0.5 ),
        vec3(  0.5, -0.5,  0.5 ),
        vec3( -0.5, -0.5, -0.5 ),
        vec3( -0.5,  0.5, -0.5 ),
        vec3(  0.5,  0.5, -0.5 ),
        vec3(  0.5, -0.5, -0.5 )
    ];

    var vertexColors = [
        vec4( 0.0, 0.0, 0.0, 1.0 ),  // black
        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
        vec4( 1.0, 1.0, 0.0, 1.0 ),  // yellow
        vec4( 0.0, 1.0, 0.0, 1.0 ),  // green
        vec4( 0.0, 0.0, 1.0, 1.0 ),  // blue
        vec4( 1.0, 0.0, 1.0, 1.0 ),  // magenta
        vec4( 1.0, 1.0, 1.0, 1.0 ),  // white
        vec4( 0.0, 1.0, 1.0, 1.0 )   // cyan
    ];

// indices of the 12 triangles that comprise the cube
var indices = [
    1, 0, 3, 3, 2, 1, 2, 3, 7, 7, 6, 2,
    3, 0, 4, 4, 7, 3, 6, 5, 1, 1, 2, 6,
    4, 5, 6, 6, 7, 4, 5, 4, 0, 0, 1, 5
];

// texture coordinates
var texCoord = [
    vec2(0, 0),
    vec2(0, 1),
    vec2(1, 1),
    vec2(1, 0)
];

function configureTexture( image )
{
    texture = gl.createTexture();
    gl.bindTexture( gl.TEXTURE_2D, texture );
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image );
    gl.generateMipmap( gl.TEXTURE_2D );
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_LINEAR );
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST );

    gl.uniform1i(gl.getUniformLocation(programTexture, "texture"), 0);
}

function quad(a, b, c, d)
{
     pointsArray.push(vertices[a]); 
     colorsArray.push(vertexColors[a]); 
     texCoordsArray.push(texCoord[0]);

     pointsArray.push(vertices[b]); 
     colorsArray.push(vertexColors[a]);
     texCoordsArray.push(texCoord[1]); 

     pointsArray.push(vertices[c]); 
     colorsArray.push(vertexColors[a]);
     texCoordsArray.push(texCoord[2]); 

     pointsArray.push(vertices[a]); 
     colorsArray.push(vertexColors[a]);
     texCoordsArray.push(texCoord[0]); 

     pointsArray.push(vertices[c]); 
     colorsArray.push(vertexColors[a]);
     texCoordsArray.push(texCoord[2]); 

     pointsArray.push(vertices[d]); 
     colorsArray.push(vertexColors[a]);
     texCoordsArray.push(texCoord[3]);   
}

function colorCube()
{
    quad( 1, 0, 3, 2 );
    quad( 2, 3, 7, 6 );
    quad( 3, 0, 4, 7 );
    quad( 6, 5, 1, 2 );
    quad( 4, 5, 6, 7 );
    quad( 5, 4, 0, 1 );
}

window.onload = function init()
{
    canvas = document.getElementById( "gl-canvas" );

    gl = WebGLUtils.setupWebGL( canvas );
    if ( !gl ) { alert( "WebGL isn't available" ); }

    //event listeners for buttons
    document.getElementById( "switchButton" ).onclick = function ()
    {
        firstCube = !firstCube; // switch between cubes

        if (firstCube) document.getElementById("switchButton").value = "First";
        else document.getElementById("switchButton").value = "Second";
    };

    window.onkeydown = function(event)
    {
        var key = String.fromCharCode(event.keyCode);

        if (firstCube)
        {
            if (key == 'R') posiz1[0] += .1;
            else if (key == 'L') posiz1[0] -= .1;
            else if (key == 'U') posiz1[1] += .1;
            else if (key == 'D') posiz1[1] -= .1;
            else if (key == 'I') posiz1[2] += .1;
            else if (key == 'O') posiz1[2] -= .1;
            else if (key == 'G') posiz1[3] += .1;
            else if (key == 'S') posiz1[3] -= .1;

            if (event.shiftKey == 0 && (key == 'X' || key == 'Y' || key == 'Z'))
                rot1 = -1.0;
            else if (key == 'X' || key == 'Y' || key == 'Z')
                rot1 = 1.0;

            if (key == 'X') axis1 = xAxis;
            if (key == 'Y') axis1 = yAxis;
            if (key == 'Z') axis1 = zAxis;
        }
        else
        {
            if (key == 'R') posiz2[0] += .1;
            else if (key == 'L') posiz2[0] -= .1;
            else if (key == 'U') posiz2[1] += .1;
            else if (key == 'D') posiz2[1] -= .1;
            else if (key == 'I') posiz2[2] += .1;
            else if (key == 'O') posiz2[2] -= .1;
            else if (key == 'G') posiz2[3] += .1;
            else if (key == 'S') posiz2[3] -= .1;

            if (event.shiftKey == 0 && (key == 'X' || key == 'Y' || key == 'Z'))
                rot2 = -1.0;
            else if (key == 'X' || key == 'Y' || key == 'Z')
                rot2 = 1.0;

            if (key == 'X') axis2 = xAxis;
            if (key == 'Y') axis2 = yAxis;
            if (key == 'Z') axis2 = zAxis;
        }
    };

    gl.viewport( 0, 0, canvas.width, canvas.height );
    gl.clearColor( 1.0, 1.0, 1.0, 1.0 );

    gl.enable(gl.DEPTH_TEST);

    //  Load shaders and initialize attribute buffers
    program = initShaders( gl, "vertex-shader", "fragment-shader" );
    programTexture = initShaders( gl, "vertex-shader-texture", "fragment-shader-texture" );

    gl.useProgram( program );
    colorCube();

    // array element buffer    
    iBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(indices), gl.STATIC_DRAW);

    // color array attribute buffer
    cBuffer = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(vertexColors), gl.STATIC_DRAW );

    vColor = gl.getAttribLocation( program, "vColor" );
    gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vColor );

    // vertex array attribute buffer
    vBuffer = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW );

    vPosition = gl.getAttribLocation( program, "vPosition" );
    gl.vertexAttribPointer( vPosition, 3, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vPosition );

    // get started on textured cube



    render();
}

function render()
{
    gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    // connect location to variable in html
    thetaLoc = gl.getUniformLocation(program, "theta");
    posizLoc = gl.getUniformLocation(program, "posiz");

    // handle rendering of first cube
    theta1[axis1] += rot1;

    gl.uniform3fv(thetaLoc, theta1);
    gl.uniform4fv(posizLoc, posiz1);

    gl.drawElements( gl.TRIANGLES, numVertices, gl.UNSIGNED_BYTE, 0 );

    // handle rendering of second cube
    theta2[axis2] += rot2;

    gl.uniform3fv(thetaLoc, theta2);
    gl.uniform4fv(posizLoc, posiz2);

    gl.drawElements( gl.TRIANGLES, numVertices, gl.UNSIGNED_BYTE, 0 );

    requestAnimFrame( render );
}

This javascript file works fine when it comes to rendering two colored cubes but I don't know how to go about rendering a texture on the second cube. 这个javascript文件在渲染两个彩色立方体时效果很好，但是我不知道如何在第二个立方体上渲染纹理。

I based my alterations on files texturedCube1.js and texturedCube1.html which can be retrieved here: http://www.cs.unm.edu/~angel/WebGL/7E/07/ . 我基于文件TextureDube1.js和TexturedCube1.html进行了更改，可以在这里找到它们： http : //www.cs.unm.edu/~angel/WebGL/7E/07/ 。

I'm very much a novice which you can probably tell from my code and I'm not always certain what is going on under the hood. 我是一个新手，您可能可以从我的代码中看出来，而且我并不总是确定幕后情况。 I'm going to continue tinkering with the javascript code but if anyone could help at least shed some light on why my cubes disappear or how to get a colored cube and textured cube at the same time, it would be very helpful. 我将继续修改javascript代码，但是如果有人至少可以帮助我弄清为什么我的多维数据集消失或如何同时获得彩色多维数据集和纹理多维数据集，这将非常有帮助。

Thank you so very much for your help and time in advance! 非常感谢您的帮助和提前的时间！

Answer 1

I didn't try and run your code, but it looks like you have a problem here: 我没有尝试运行您的代码，但看来您在这里遇到了问题：

vBufferTexture = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, vBufferTexture );
gl.bufferData( gl.ARRAY_BUFFER, flatten(pointsArray), gl.STATIC_DRAW );

vPositionTexture = gl.getAttribLocation( programTexture, "vPosition" );
// here:
gl.vertexAttribPointer( vPositionTexture, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPositionTexture );

pointsArray is an array of vec3 but you are passing 4 as the number of components. pointsArray是数组vec3但要传递4为组件的数目。 Try: 尝试：

gl.vertexAttribPointer( vPositionTexture, 3, gl.FLOAT, false, 0, 0 );

我的立方体不见了，我也不知道为什么

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-04-30 01:34:57

我的立方体不见了，我也不知道为什么

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-04-30 01:34:57

解决方案1
2 已采纳 2015-04-30 01:34:57