在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代码中删除了一些include命令。你将需要这些。

Answer 2

这里是我的解决方案...

shader代码：

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