在 WebGL 中绘制多个形状

Question

我面临创建多个对象（一个旋转和一个静态）的相同问题。我想在下面的代码中绘制一个静态矩形（旋转矩形代码来自 Edward Angels WebGL 示例）。我尝试按照 gman 从链接 Drawing many shapes in WebGL 中所说的说明进行操作，但仍然无法解决。如果能在这方面获得一些帮助，以便在代码中创建另一个静态对象（例如矩形）以及这个旋转矩形，那就太好了。谢谢。

    <script id="vertex-shader" type="x-shader/x-vertex">
    attribute vec4 vPosition;
    uniform float theta;

    void
    main()
    {
        float s = sin( theta );
        float c = cos( theta );

        gl_Position.x = -s * vPosition.x + c * vPosition.y;
        gl_Position.y =  s * vPosition.y + c * vPosition.x;
        gl_Position.z = 0.0;
        gl_Position.w = 1.0;
    }
    </script>

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

    precision mediump float;

    void
    main()
    {
        gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
    }
    </script>



    var canvas;
    var gl;

    var theta = 0.0;
    var thetaLoc;

    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 );
        gl.clearColor( 1.0, 1.0, 1.0, 1.0 );

        var program = initShaders( gl, "vertex-shader", "fragment-shader" );
        gl.useProgram( program );

        var vertices = [
            vec2(  0,  1 ),
            vec2(  1,  0 ),
            vec2( -1,  0 ),
            vec2(  0, -1 )
        ];

        var bufferId = gl.createBuffer();
        gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );
        gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW );

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

        thetaLoc = gl.getUniformLocation( program, "theta" );

        render();
    };


    function render() {

        gl.clear( gl.COLOR_BUFFER_BIT );

        theta += 0.1;
        gl.uniform1f( thetaLoc, theta );

        gl.drawArrays( gl.TRIANGLE_STRIP, 0, 4 );

        window.requestAnimFrame(render);
    }

Answer 1

所以，如果您为矩形定义了顶点，只需添加更多顶点即可在画布上的不同点创建一个额外的矩形。这个你只需要画一次，所以如果你说：

var render = function(){
    //Insert rest of code
    if(!not_First_Time)
    {
        gl.drawArrays(gl.TRIANGLE_STRIP , 4 , 8 );
    }
    gl.drawArrays( gl.TRIANGLE_STRIP, 0, 4 );
    //Insert rest of code

但这或多或少是一种作弊方式，因为您仍在修改要旋转的点，如果您重新绘制它们，它们会像主正方形一样旋转。

我还注意到您从 HTML 代码中删除了一些包含命令。你会需要这些。

Answer 2

这是我的解决方案...

着色器代码：

    <script id="vertex-shader" type="x-shader/x-vertex">
    attribute vec4 vPosition;
    uniform float theta;

    void
    main()
    {
        float s = sin( theta );
        float c = cos( theta );

        gl_Position.x = -s * vPosition.x + c * vPosition.y;
        gl_Position.y =  s * vPosition.y + c * vPosition.x;
        gl_Position.z = 0.0;
        gl_Position.w = 1.0;
    }
    </script>

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

    precision mediump float;

    void
    main()
    {
        gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
    }
    </script>

JAVASCRIPT 代码：

    var canvas;
    var gl;

    var theta = 0.0;
    var thetaLoc;

    var program;
    var program1;


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

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

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

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


        //Rotating Rectangle
        var rr_vertices = [
            vec2( 0,  0.25),
            vec2( 0.25,  0),
            vec2(-0.25,  0 ),
            vec2( 0, -0.25)
        ];
        // Load the data into the GPU
        rr_bufferId = gl.createBuffer();
        gl.bindBuffer( gl.ARRAY_BUFFER, rr_bufferId );
        gl.bufferData( gl.ARRAY_BUFFER, flatten(rr_vertices), gl.STATIC_DRAW );
        // Associate out shader variables with our data buffer
        rr_vPosition = gl.getAttribLocation( program, "vPosition" );
        gl.vertexAttribPointer( rr_vPosition, 2, gl.FLOAT, false, 0, 0 );

        //Static Rectangle
        var sr_vertices = [
            vec2( 0.5,  0.5),
            vec2( 1.0,  0.5),
            vec2( 0.5,  1.0 ),
            vec2( 1.0,  1.0)
        ];
        // Load the data into the GPU
        sr_bufferId = gl.createBuffer();
        gl.bindBuffer( gl.ARRAY_BUFFER, sr_bufferId );
        gl.bufferData( gl.ARRAY_BUFFER, flatten(sr_vertices), gl.STATIC_DRAW );
        // Associate out shader variables with our data buffer
        sr_vPosition = gl.getAttribLocation( program, "vPosition" );



        render();
    };

    var rr_vPosition;
    var sr_vPosition;
    var rr_bufferId;
    var sr_bufferId;

    function render() {

        gl.clear( gl.COLOR_BUFFER_BIT );

        gl.useProgram( program1 );
        gl.enableVertexAttribArray( sr_vPosition );
        gl.bindBuffer( gl.ARRAY_BUFFER, sr_bufferId );
        gl.vertexAttribPointer( sr_vPosition, 2, gl.FLOAT, false, 0, 0 );
        gl.drawArrays( gl.TRIANGLE_STRIP, 0, 4 );

        gl.useProgram( program );
        thetaLoc = gl.getUniformLocation( program, "theta" );

        gl.enableVertexAttribArray( rr_vPosition );
        gl.bindBuffer( gl.ARRAY_BUFFER, rr_bufferId );
        gl.vertexAttribPointer( rr_vPosition, 2, gl.FLOAT, false, 0, 0 );
        theta += 0.1;
        gl.uniform1f( thetaLoc, theta );
        gl.drawArrays( gl.TRIANGLE_STRIP, 0, 4 );




        window.requestAnimFrame(render);
    }