在 WebGL 中绘制立方体

【问题标题】：Drawing a Cube in WebGL在 WebGL 中绘制立方体
【发布时间】：2014-11-05 04:46:16
【问题描述】：

我不确定这段代码有什么问题，但是当我尝试从相机视图中绘制一个立方体的线时（最后 4 条线），对象消失了。不过，我确实可以画出立方体的 8 条边线。

立方体的线（点）如下。只显示了前 8 行（16 分），但其余 4 行（8 分）我无法添加到立方体中。

        vec4(-0.5, -0.5,  1.5, 1.0),//1
        vec4(-0.5,  0.5,  1.5, 1.0),//2

        vec4(-0.5, -0.5,  1.5, 1.0),//1
        vec4(0.5, -0.5,  1.5, 1.0),//4

        vec4(-0.5, -0.5,  1.5, 1.0),//1
        vec4(-0.5, -0.5, 0.5, 1.0),//5

        vec4(-0.5,  0.5,  1.5, 1.0),//2
        vec4(0.5,  0.5,  1.5, 1.0),//3

        vec4(-0.5,  0.5,  1.5, 1.0),//2
        vec4(-0.5,  0.5, 0.5, 1.0),//6

        vec4(0.5,  0.5,  1.5, 1.0),//3
        vec4(0.5, -0.5,  1.5, 1.0),//4

        vec4(0.5,  0.5,  1.5, 1.0),//3
        vec4(0.5,  0.5, 0.5, 1.0),//7

        vec4(0.5, -0.5,  1.5, 1.0),//4
        vec4( 0.5, -0.5, 0.5, 1.0) //8
        /*
        vec4(-0.5, -0.5, 0.5, 1.0),//5
        vec4(-0.5,  0.5, 0.5, 1.0),//6
        vec4(-0.5, -0.5, 0.5, 1.0),//5
        vec4( 0.5, -0.5, 0.5, 1.0) //8
        vec4(-0.5,  0.5, 0.5, 1.0),//6
        vec4(0.5,  0.5, 0.5, 1.0),//7
        vec4(0.5,  0.5, 0.5, 1.0),//7
        vec4( 0.5, -0.5, 0.5, 1.0) //8
        */

非常感谢任何帮助。

代码如下：

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

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

    uniform mat4 modelViewMatrix;
    uniform mat4 projectionMatrix;

    void main() 
    {
        gl_Position = projectionMatrix*modelViewMatrix*vPosition;
        fColor = vColor;
    } 
    </script>

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

    precision mediump float;

    varying vec4 fColor;

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

    var canvas;
    var gl;

    var NumVertices  = 24;

    var vertices = [
        vec4(-0.5, -0.5,  1.5, 1.0),//1
        vec4(-0.5,  0.5,  1.5, 1.0),//2
        vec4(-0.5, -0.5,  1.5, 1.0),//1
        vec4(0.5, -0.5,  1.5, 1.0),//4
        vec4(-0.5, -0.5,  1.5, 1.0),//1
        vec4(-0.5, -0.5, 0.5, 1.0),//5
        vec4(-0.5,  0.5,  1.5, 1.0),//2
        vec4(0.5,  0.5,  1.5, 1.0),//3
        vec4(-0.5,  0.5,  1.5, 1.0),//2
        vec4(-0.5,  0.5, 0.5, 1.0),//6
        vec4(0.5,  0.5,  1.5, 1.0),//3
        vec4(0.5, -0.5,  1.5, 1.0),//4
        vec4(0.5,  0.5,  1.5, 1.0),//3
        vec4(0.5,  0.5, 0.5, 1.0),//7
        vec4(0.5, -0.5,  1.5, 1.0),//4
        vec4( 0.5, -0.5, 0.5, 1.0) //8
        /*
        vec4(-0.5, -0.5, 0.5, 1.0),//5
        vec4(-0.5,  0.5, 0.5, 1.0),//6
        vec4(-0.5, -0.5, 0.5, 1.0),//5
        vec4( 0.5, -0.5, 0.5, 1.0) //8
        vec4(-0.5,  0.5, 0.5, 1.0),//6
        vec4(0.5,  0.5, 0.5, 1.0),//7
        vec4(0.5,  0.5, 0.5, 1.0),//7
        vec4( 0.5, -0.5, 0.5, 1.0) //8
        */
    ];

    var vertexColors = [
        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red

        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
        /*
        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
        */
    ];

    var near = 0.3;
    var far = 10.0;
    var radius = 4.0;
    var theta  = 0.0;
    var phi    = 0.0;
    var dr = 5.0 * Math.PI/180.0;

    var  fovy = 90.0;  // Field-of-view in Y direction angle (in degrees)
    var  aspect;       // Viewport aspect ratio

    var modelViewMatrix, projectionMatrix;
    var modelViewMatrixLoc, projectionMatrixLoc;
    var eye;
    const at = vec3(0.0, 0.0, 0.0);
    const up = vec3(0.0, 1.0, 0.0);


    var program;
    var program_originline;

    var cBuffer;
    var vColor;
    var vBuffer;
    var vPosition;

    var l_vBuffer;
    var l_vPosition;
    var l_cBuffer;
    var l_vColor;

    window.onload = function init() {

        canvas = document.getElementById( "gl-canvas" );

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

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

        aspect =  canvas.width/canvas.height;

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

        gl.enable(gl.DEPTH_TEST);

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

        //CUBE Buffers
        cBuffer = gl.createBuffer();
        gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
        //gl.bufferData( gl.ARRAY_BUFFER, flatten(colorsArray), gl.STATIC_DRAW );
        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);

        vBuffer = gl.createBuffer();
        gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
        //gl.bufferData( gl.ARRAY_BUFFER, flatten(pointsArray), gl.STATIC_DRAW );
        gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW );

        vPosition = gl.getAttribLocation( program, "vPosition" );


        //Static Line
        var l_vertices = [
            vec4(0.0, 0.0,  0.0, 1.0),
            vec4(5.0,  0.0,  0.0, 1.0),
            vec4(0.0, 0.0,  0.0, 1.0),
            vec4(0.0,  5.0,  0.0, 1.0),
            vec4(0.0, 0.0,  0.0, 1.0),
            vec4(0.0,  0.0,  5.0, 1.0),
            vec4(0.0, 0.0,  0.0, 1.0),
            vec4(-5.0,  0.0,  0.0, 1.0),
            vec4(0.0, 0.0,  0.0, 1.0),
            vec4(0.0,  -5.0,  0.0, 1.0),
            vec4(0.0, 0.0,  0.0, 1.0),
            vec4(0.0,  0.0,  -5.0, 1.0),
            ];
        // Load the data into the GPU
        l_vBuffer = gl.createBuffer();
        gl.bindBuffer( gl.ARRAY_BUFFER, l_vBuffer );
        gl.bufferData( gl.ARRAY_BUFFER, flatten(l_vertices), gl.STATIC_DRAW );
        // Associate out shader variables with our data buffer
        l_vPosition = gl.getAttribLocation( program_originline, "vPosition" );


        var l_colors = [
            vec4(1.0, 1.0,  0.0, 1.0),
            vec4(1.0, 1.0,  0.0, 1.0),
            vec4(1.0, 1.0,  0.0, 1.0),
            vec4(1.0, 1.0,  0.0, 1.0),
            vec4(1.0, 1.0,  0.0, 1.0),
            vec4(1.0, 1.0,  0.0, 1.0),

            vec4(0.0, 0.0,  1.0, 1.0),
            vec4(0.0, 0.0,  1.0, 1.0),
            vec4(0.0, 0.0,  1.0, 1.0),
            vec4(0.0, 0.0,  1.0, 1.0),
            vec4(0.0, 0.0,  1.0, 1.0),
            vec4(0.0, 0.0,  1.0, 1.0),
            ];
        l_cBuffer = gl.createBuffer();
        gl.bindBuffer( gl.ARRAY_BUFFER, l_cBuffer );
        gl.bufferData( gl.ARRAY_BUFFER, flatten(l_colors), gl.STATIC_DRAW );

        l_vColor = gl.getAttribLocation( program_originline, "vColor" );


        // buttons for viewing parameters
        document.getElementById("Button1").onclick = function(){near  *= 1.1; far *= 1.1;};
        document.getElementById("Button2").onclick = function(){near *= 0.9; far *= 0.9;};
        document.getElementById("Button3").onclick = function(){radius *= 2.0;};
        document.getElementById("Button4").onclick = function(){radius *= 0.5;};
        document.getElementById("Button5").onclick = function(){theta += dr;};
        document.getElementById("Button6").onclick = function(){theta -= dr;};
        document.getElementById("Button7").onclick = function(){phi += dr;};
        document.getElementById("Button8").onclick = function(){phi -= dr;};

        render(); 
    }


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


        //LINE PROGRAM
        gl.useProgram( program_originline );
        gl.enableVertexAttribArray( l_vPosition );
        gl.bindBuffer( gl.ARRAY_BUFFER, l_vBuffer );
        gl.vertexAttribPointer( l_vPosition, 4, gl.FLOAT, false, 0, 0 );
        gl.enableVertexAttribArray( l_vColor );
        gl.bindBuffer( gl.ARRAY_BUFFER, l_cBuffer );
        gl.vertexAttribPointer( l_vColor, 4, gl.FLOAT, false, 0, 0 );   

        gl.drawArrays( gl.LINES, 0, 12);

        modelViewMatrixLoc = gl.getUniformLocation( program_originline, "modelViewMatrix" );
        projectionMatrixLoc = gl.getUniformLocation( program_originline, "projectionMatrix" );

        eye = vec3(radius*Math.sin(theta)*Math.cos(phi), 
            radius*Math.sin(theta)*Math.sin(phi), radius*Math.cos(theta));
        modelViewMatrix = lookAt(eye, at , up);
        projectionMatrix = perspective(fovy, aspect, near, far);

        gl.uniformMatrix4fv( modelViewMatrixLoc, false, flatten(modelViewMatrix) );
        gl.uniformMatrix4fv( projectionMatrixLoc, false, flatten(projectionMatrix) );


        //CUBE PROGRAM
        gl.useProgram( program );
        gl.enableVertexAttribArray( vPosition );
        gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
        gl.vertexAttribPointer( vPosition, 4, gl.FLOAT, false, 0, 0 );
        gl.enableVertexAttribArray( vColor);
        gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
        gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
        gl.drawArrays( gl.LINES, 0, 18 );

        modelViewMatrixLoc = gl.getUniformLocation( program, "modelViewMatrix" );
        projectionMatrixLoc = gl.getUniformLocation( program, "projectionMatrix" );

        eye = vec3(radius*Math.sin(theta)*Math.cos(phi),radius*Math.sin(theta)*Math.sin(phi), radius*Math.cos(theta));
        modelViewMatrix = lookAt(eye, at , up);
        projectionMatrix = perspective(fovy, aspect, near, far);

        gl.uniformMatrix4fv( modelViewMatrixLoc, false, flatten(modelViewMatrix) );
        gl.uniformMatrix4fv( projectionMatrixLoc, false, flatten(projectionMatrix) );

        requestAnimFrame(render);
    }

【问题讨论】：

    标签： webgl


    【解决方案1】：

    您必须将drawArrays 的最后一个参数从 18 更新为 24（因为每个立方体有 12 行，每行有 2 个顶点）。

    gl.drawArrays( gl.LINES, 0, 24 );

    当然记得取消注释 vertices 和 vertexColors 数组中的行（并确保数组中没有任何缺失或多余的逗号）。

    这是我完成所有必要修复后的代码：

    var canvas;
var gl;

var NumVertices  = 24;

var vertices = [
    vec4(-0.5, -0.5,  1.5, 1.0),//1
    vec4(-0.5,  0.5,  1.5, 1.0),//2
    vec4(-0.5, -0.5,  1.5, 1.0),//1
    vec4(0.5, -0.5,  1.5, 1.0),//4
    vec4(-0.5, -0.5,  1.5, 1.0),//1
    vec4(-0.5, -0.5, 0.5, 1.0),//5
    vec4(-0.5,  0.5,  1.5, 1.0),//2
    vec4(0.5,  0.5,  1.5, 1.0),//3
    vec4(-0.5,  0.5,  1.5, 1.0),//2
    vec4(-0.5,  0.5, 0.5, 1.0),//6
    vec4(0.5,  0.5,  1.5, 1.0),//3
    vec4(0.5, -0.5,  1.5, 1.0),//4
    vec4(0.5,  0.5,  1.5, 1.0),//3
    vec4(0.5,  0.5, 0.5, 1.0),//7
    vec4(0.5, -0.5,  1.5, 1.0),//4
    vec4( 0.5, -0.5, 0.5, 1.0), //8
    vec4(-0.5, -0.5, 0.5, 1.0),//5
    vec4(-0.5,  0.5, 0.5, 1.0),//6
    vec4(-0.5, -0.5, 0.5, 1.0),//5
    vec4( 0.5, -0.5, 0.5, 1.0), //8
    vec4(-0.5,  0.5, 0.5, 1.0),//6
    vec4(0.5,  0.5, 0.5, 1.0),//7
    vec4(0.5,  0.5, 0.5, 1.0),//7
    vec4( 0.5, -0.5, 0.5, 1.0) //8
];

var vertexColors = [
    vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
    vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
    vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
    vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
    vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
    vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
    vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
    vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
    vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
    vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
    vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
    vec4( 1.0, 0.0, 0.0, 1.0 ),  // red

    vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
    vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
    vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
    vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
    vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
    vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
    vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
    vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
    vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
    vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
    vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
    vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
];

var near = 0.3;
var far = 10.0;
var radius = 4.0;
var theta  = 0.0;
var phi    = 0.0;
var dr = 5.0 * Math.PI/180.0;

var  fovy = 90.0;  // Field-of-view in Y direction angle (in degrees)
var  aspect;       // Viewport aspect ratio

var modelViewMatrix, projectionMatrix;
var modelViewMatrixLoc, projectionMatrixLoc;
var eye;
const at = vec3(0.0, 0.0, 0.0);
const up = vec3(0.0, 1.0, 0.0);


var program;
var program_originline;

var cBuffer;
var vColor;
var vBuffer;
var vPosition;

var l_vBuffer;
var l_vPosition;
var l_cBuffer;
var l_vColor;

window.onload = function init() {

    canvas = document.getElementById( "gl-canvas" );

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

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

    aspect =  canvas.width/canvas.height;

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

    gl.enable(gl.DEPTH_TEST);

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

    //CUBE Buffers
    cBuffer = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
    //gl.bufferData( gl.ARRAY_BUFFER, flatten(colorsArray), gl.STATIC_DRAW );
    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);

    vBuffer = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
    //gl.bufferData( gl.ARRAY_BUFFER, flatten(pointsArray), gl.STATIC_DRAW );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW );

    vPosition = gl.getAttribLocation( program, "vPosition" );


    //Static Line
    var l_vertices = [
        vec4(0.0, 0.0,  0.0, 1.0),
        vec4(5.0,  0.0,  0.0, 1.0),
        vec4(0.0, 0.0,  0.0, 1.0),
        vec4(0.0,  5.0,  0.0, 1.0),
        vec4(0.0, 0.0,  0.0, 1.0),
        vec4(0.0,  0.0,  5.0, 1.0),
        vec4(0.0, 0.0,  0.0, 1.0),
        vec4(-5.0,  0.0,  0.0, 1.0),
        vec4(0.0, 0.0,  0.0, 1.0),
        vec4(0.0,  -5.0,  0.0, 1.0),
        vec4(0.0, 0.0,  0.0, 1.0),
        vec4(0.0,  0.0,  -5.0, 1.0),
        ];
    // Load the data into the GPU
    l_vBuffer = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, l_vBuffer );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(l_vertices), gl.STATIC_DRAW );
    // Associate out shader variables with our data buffer
    l_vPosition = gl.getAttribLocation( program_originline, "vPosition" );


    var l_colors = [
        vec4(1.0, 1.0,  0.0, 1.0),
        vec4(1.0, 1.0,  0.0, 1.0),
        vec4(1.0, 1.0,  0.0, 1.0),
        vec4(1.0, 1.0,  0.0, 1.0),
        vec4(1.0, 1.0,  0.0, 1.0),
        vec4(1.0, 1.0,  0.0, 1.0),

        vec4(0.0, 0.0,  1.0, 1.0),
        vec4(0.0, 0.0,  1.0, 1.0),
        vec4(0.0, 0.0,  1.0, 1.0),
        vec4(0.0, 0.0,  1.0, 1.0),
        vec4(0.0, 0.0,  1.0, 1.0),
        vec4(0.0, 0.0,  1.0, 1.0),
        ];
    l_cBuffer = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, l_cBuffer );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(l_colors), gl.STATIC_DRAW );

    l_vColor = gl.getAttribLocation( program_originline, "vColor" );


    // buttons for viewing parameters
    document.getElementById("Button1").onclick = function(){near  *= 1.1; far *= 1.1;};
    document.getElementById("Button2").onclick = function(){near *= 0.9; far *= 0.9;};
    document.getElementById("Button3").onclick = function(){radius *= 2.0;};
    document.getElementById("Button4").onclick = function(){radius *= 0.5;};
    document.getElementById("Button5").onclick = function(){theta += dr;};
    document.getElementById("Button6").onclick = function(){theta -= dr;};
    document.getElementById("Button7").onclick = function(){phi += dr;};
    document.getElementById("Button8").onclick = function(){phi -= dr;};

    render(); 
}


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


    //LINE PROGRAM
    gl.useProgram( program_originline );
    gl.enableVertexAttribArray( l_vPosition );
    gl.bindBuffer( gl.ARRAY_BUFFER, l_vBuffer );
    gl.vertexAttribPointer( l_vPosition, 4, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( l_vColor );
    gl.bindBuffer( gl.ARRAY_BUFFER, l_cBuffer );
    gl.vertexAttribPointer( l_vColor, 4, gl.FLOAT, false, 0, 0 );   

    gl.drawArrays( gl.LINES, 0, 12);

    modelViewMatrixLoc = gl.getUniformLocation( program_originline, "modelViewMatrix" );
    projectionMatrixLoc = gl.getUniformLocation( program_originline, "projectionMatrix" );

    eye = vec3(radius*Math.sin(theta)*Math.cos(phi), 
        radius*Math.sin(theta)*Math.sin(phi), radius*Math.cos(theta));
    modelViewMatrix = lookAt(eye, at , up);
    projectionMatrix = perspective(fovy, aspect, near, far);

    gl.uniformMatrix4fv( modelViewMatrixLoc, false, flatten(modelViewMatrix) );
    gl.uniformMatrix4fv( projectionMatrixLoc, false, flatten(projectionMatrix) );


    //CUBE PROGRAM
    gl.useProgram( program );
    gl.enableVertexAttribArray( vPosition );
    gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
    gl.vertexAttribPointer( vPosition, 4, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vColor);
    gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
    gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
    gl.drawArrays( gl.LINES, 0, 24 );

    modelViewMatrixLoc = gl.getUniformLocation( program, "modelViewMatrix" );
    projectionMatrixLoc = gl.getUniformLocation( program, "projectionMatrix" );

    eye = vec3(radius*Math.sin(theta)*Math.cos(phi),radius*Math.sin(theta)*Math.sin(phi), radius*Math.cos(theta));
    modelViewMatrix = lookAt(eye, at , up);
    projectionMatrix = perspective(fovy, aspect, near, far);

    gl.uniformMatrix4fv( modelViewMatrixLoc, false, flatten(modelViewMatrix) );
    gl.uniformMatrix4fv( projectionMatrixLoc, false, flatten(projectionMatrix) );

    requestAnimFrame(render);
}
    <html>
<head>
    <script type="text/javascript" src="http://www.cs.unm.edu/~angel/WebGL/7E/Common/webgl-utils.js"></script>
    <script type="text/javascript" src="http://www.cs.unm.edu/~angel/WebGL/7E/Common/MV.js"></script>
    <script type="text/javascript" src="http://www.cs.unm.edu/~angel/WebGL/7E/Common/initShaders.js"></script>

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

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

        uniform mat4 modelViewMatrix;
        uniform mat4 projectionMatrix;

        void main() 
        {
            gl_Position = projectionMatrix*modelViewMatrix*vPosition;
            fColor = vColor;
        } 
    </script>

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

        precision mediump float;

        varying vec4 fColor;

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

</head>
<body>
    <div>
      <canvas id="gl-canvas" width="300" height="300"></canvas>
    </div>
    <div>
      <button id="Button1" type="button">1</button>
      <button id="Button2" type="button">2</button>
      <button id="Button3" type="button">3</button>
      <button id="Button4" type="button">4</button>
      <button id="Button5" type="button">5</button>
      <button id="Button6" type="button">6</button>
      <button id="Button7" type="button">7</button>
      <button id="Button8" type="button">8</button>
    </div>
</body>
</html>

    【讨论】：

    • 您好 Anton，非常感谢您提供的解决方案。刚才我发现问题出在哪里。在声明立方体的顶点时，我忘记将逗号放在第 16 和 20 行。您还在您的解决方案中提到了“（并确保数组中没有任何缺失或多余的逗号）”。再次感谢您，它为我节省了很多时间。
    猜你喜欢
    • 2019-11-10
    • 1970-01-01
    • 2019-07-18
    • 2022-01-17
    • 2021-12-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode