使用Javascript,WebGL和HTML绘制正方形

时间:2016-09-02 18:25:10

标签: javascript html html5 graphics webgl

您好我正在关注Edward Angel的交互式3D图形简介。我想做一个递归迷宫,但首先我需要能够做一个基本的方块。我在书籍脚本上为sierpinski垫片建模了这个脚本。我已经花了好几个小时,只是看不出我做错了什么。 HTML页面只显示一行。我尝试了不同类型的顶点连接器,如LINES LINE_LOOP POLYGON,但我似乎无法让它工作。请帮助我,我觉得我疯了。 这是脚本:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Maze Sierpinski Gasket</title>


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


void
main()
{
    gl_Position = vPosition;
}
</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>

<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>
//goal: try and draw just a square.

var canvas;
var gl;

var points = [];



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

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

   //enter new script 

var vertices = [
  vec2(-1.0,-1.0),
  vec2(-1.0,1.0),
  vec2(1.0,1.0),
  vec2(1.0,-1.0)
];

square(vertices[0],vertices[1],vertices[2],vertices[3]);

//
    //  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

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

    // Load the data into the GPU

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

    // Associate out shader variables with our data buffer

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

    render();
};

function square(a,b,c,d)
{
points.push(a);
points.push(b);
points.push(c);
points.push(d);
}


function render(){
    gl.clear( gl.COLOR_BUFFER_BIT );
    gl.drawArrays(gl.LINES, 0, points.length);
}

</script>
</head>   

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

1 个答案:

答案 0 :(得分:1)

2个问题

  1. 假设flatten的标准实现,它返回一个JavaScript本机数组,但gl.bufferData需要一个类型化数组。所以我把它改成了

    gl.bufferData(..., new Float32Array(flatten(...)), ...
    
  2. gl.LINES绘制每一对点。你只传了4分,这意味着2线。你不会得到一个正方形。您可以使用gl.LINE_LOOP连接所有4个点,也可以使用最后一个连接到第一个点。

  3. 另外,当我运行你的代码时,我在JavaScript控制台中遇到了错误,这帮助我找到了问题。您应该始终检查JavaScript控制台是否有错误和警告。

    &#13;
    &#13;
    //goal: try and draw just a square.
    
    var canvas;
    var gl;
    
    var points = [];
    
    function init()
    {
        canvas = document.getElementById( "gl-canvas" );
    
        gl = WebGLUtils.setupWebGL( canvas );
        if ( !gl ) { alert( "WebGL isn't available" ); }
    
       //enter new script 
    
    var vertices = [
      vec2(-1.0,-1.0),
      vec2(-1.0,1.0),
      vec2(1.0,1.0),
      vec2(1.0,-1.0)
    ];
    
    square(vertices[0],vertices[1],vertices[2],vertices[3]);
    
    //
        //  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
    
        var program = initShaders( gl, "vertex-shader", "fragment-shader" );
        gl.useProgram( program );
    
        // Load the data into the GPU
    
        var bufferId = gl.createBuffer();
        gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );
        gl.bufferData( gl.ARRAY_BUFFER, new Float32Array(flatten(points)), gl.STATIC_DRAW );
    
        // Associate out shader variables with our data buffer
    
        var vPosition = gl.getAttribLocation( program, "vPosition" );
        gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 );
        gl.enableVertexAttribArray( vPosition );
    
        render();
    };
    
    function square(a,b,c,d)
    {
    points.push(a);
    points.push(b);
    points.push(c);
    points.push(d);
    }
    
    
    function render(){
        gl.clear( gl.COLOR_BUFFER_BIT );
        gl.drawArrays(gl.LINE_LOOP, 0, points.length);
    }
    
    // ---------------[ missing functions ] ---------
    
    var WebGLUtils = {
      setupWebGL: function(canvas) {
        return canvas.getContext("webgl");
      },
    };
    
    function initShaders(gl, vs, fs) {
      return twgl.createProgramFromScripts(gl, [vs, fs]);
    }
    
    function vec2(x, y) {
      return [x, y];
    }
    
    function flatten(arrayOfArrays) {
      var flattened =  arrayOfArrays.reduce(function(a, b) {
        return a.concat(b);
      }, []);
      return flattened;
    }
      
    init();
    &#13;
    <script id="vertex-shader" type="x-shader/x-vertex">
    attribute vec4 vPosition;
    
    
    void
    main()
    {
        gl_Position = vPosition;
    }
    </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>
    
    <script src="https://twgljs.org/dist/twgl.min.js"></script>
    <canvas id="gl-canvas" width="512" height="512">
    Oops ... your browser doesn't support the HTML5 canvas element
    </canvas>
    &#13;
    &#13;
    &#13;