Question

我正在尝试初始化我的图形库，以便在我的网络浏览器中绘制一个简单的三角形。但是，我正在创建的gl对象似乎不是全局的，即使我初始化它仍然设置为undefined。我哪里错了？

var gl;
var points;

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

    if (!gl) {
        alert("WebGL is not available");
    }
}
//three vertices
    var vertices = [vec2(-1, -1), vec2(0, -1), vec2(1, -1)];

//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.userProgram(program);

//load the data into the GPU
    var bufferID = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
    gl.bufferData(gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW);

//Associate out shader variables with our data buffer
    var vPosition = gl.getAttribLocation(program, "vPosition");
    gl.vertexAttribPointer(vPosition, 2, fl.FLOAT, flase, 0, 0);
    gl.enableVertexAttribArray(vPosition);
    render();

function render()
{
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
}

<!DOCTYPE html>
<html>
<head>
    <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="../test1/webgl-utils.js"> </script>
    <script type="text/javascript" src="../test1/initShaders.js"> </script>
    <script type="text/javascript" src="../test1/MV.js"> </script>
    <script type="text/javascript" src="../test1/triangle.js"> </script>
</head>
<body>
<canvas id="gl-canvas" width="512" height="512">
    Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
</body>
</html>

Answer 1

您的代码中存在多个问题。

将所有初始化移动到函数onload。没有它，初始化将在webgl上下文初始化之前完成

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

    if (!gl) {
        alert("WebGL is not available");
    }
// } <----------------- remove this

//three vertices

   .....
   render();
} // <----------------- add this

您的顶点坐标形成一条直线，因为所有Y坐标都是-1。你想看到任何三角形：

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

将其更改为

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

你的代码中存在一些拼写错误。

userProgram - ＆gt; useProgram

bufferId - ＆gt; bufferID

fl.FLOAT, flase - ＆gt; gl.FLOAT, false

请参阅代码段：

var gl;
var points;

window.onload = function init() {
    var canvas = document.getElementById("gl-canvas");
    gl = WebGLUtils.setupWebGL(canvas);

    if (!gl) {
        alert("WebGL is not available");
    }

//three vertices
    var vertices = [-1, -1, 0, 1, 1, -1];

//configure WebGL
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.clearColor(0.0, 1.0, 1.0, 1.0);

//load shaders and initialize attribute buffers
    var program = initShaders(gl, "vertex-shader", "fragment-shader");
    gl.useProgram(program); // userProgram -> useProgram

//load the data into the GPU
    var bufferID = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, bufferID); // bufferId -> bufferID
    gl.bufferData(gl.ARRAY_BUFFER, flatten(vertices), 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); // fl -> gl, flase -> flase
    gl.enableVertexAttribArray(vPosition);
    render();
}

function render()
{
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
}

var WebGLUtils = {
    setupWebGL: function(canvas) {
        return canvas.getContext("webgl");
    }
};

function flatten(a) {
    return new Float32Array( a )
}

function initShaders(gl, vs, fs) {
    prog = ShaderProgram.Create( 
      [ { source : vs, stage : gl.VERTEX_SHADER },
        { source : fs, stage : gl.FRAGMENT_SHADER }
      ] );
      if ( prog == 0 )
        alert("invalid shader");
    return prog;
} 

var ShaderProgram = {};
ShaderProgram.Create = function( shaderList ) {
    var shaderObjs = [];
    for ( var i_sh = 0; i_sh < shaderList.length; ++ i_sh ) {
        var shderObj = this.CompileShader( shaderList[i_sh].source, shaderList[i_sh].stage );
        if ( shderObj == 0 )
            return 0;
        shaderObjs.push( shderObj );
    }
    var progObj = this.LinkProgram( shaderObjs )
    if ( progObj != 0 ) {
        progObj.attribIndex = {};
        var noOfAttributes = gl.getProgramParameter( progObj, gl.ACTIVE_ATTRIBUTES );
        for ( var i_n = 0; i_n < noOfAttributes; ++ i_n ) {
            var name = gl.getActiveAttrib( progObj, i_n ).name;
            progObj.attribIndex[name] = gl.getAttribLocation( progObj, name );
        }
        progObj.unifomLocation = {};
        var noOfUniforms = gl.getProgramParameter( progObj, gl.ACTIVE_UNIFORMS );
        for ( var i_n = 0; i_n < noOfUniforms; ++ i_n ) {
            var name = gl.getActiveUniform( progObj, i_n ).name;
            progObj.unifomLocation[name] = gl.getUniformLocation( progObj, name );
        }
    }
    return progObj;
}
ShaderProgram.AttributeIndex = function( progObj, name ) { return progObj.attribIndex[name]; } 
ShaderProgram.UniformLocation = function( progObj, name ) { return progObj.unifomLocation[name]; } 
ShaderProgram.Use = function( progObj ) { gl.useProgram( progObj ); } 
ShaderProgram.SetUniformI1  = function( progObj, name, val ) { if(progObj.unifomLocation[name]) gl.uniform1i( progObj.unifomLocation[name], val ); }
ShaderProgram.SetUniformF1  = function( progObj, name, val ) { if(progObj.unifomLocation[name]) gl.uniform1f( progObj.unifomLocation[name], val ); }
ShaderProgram.SetUniformF2  = function( progObj, name, arr ) { if(progObj.unifomLocation[name]) gl.uniform2fv( progObj.unifomLocation[name], arr ); }
ShaderProgram.SetUniformF3  = function( progObj, name, arr ) { if(progObj.unifomLocation[name]) gl.uniform3fv( progObj.unifomLocation[name], arr ); }
ShaderProgram.SetUniformF4  = function( progObj, name, arr ) { if(progObj.unifomLocation[name]) gl.uniform4fv( progObj.unifomLocation[name], arr ); }
ShaderProgram.SetUniformM33 = function( progObj, name, mat ) { if(progObj.unifomLocation[name]) gl.uniformMatrix3fv( progObj.unifomLocation[name], false, mat ); }
ShaderProgram.SetUniformM44 = function( progObj, name, mat ) { if(progObj.unifomLocation[name]) gl.uniformMatrix4fv( progObj.unifomLocation[name], false, mat ); }
ShaderProgram.CompileShader = function( source, shaderStage ) {
    var shaderScript = document.getElementById(source);
    if (shaderScript) {
      source = "";
      var node = shaderScript.firstChild;
      while (node) {
        if (node.nodeType == 3) source += node.textContent;
        node = node.nextSibling;
      }
    }
    var shaderObj = gl.createShader( shaderStage );
    gl.shaderSource( shaderObj, source );
    gl.compileShader( shaderObj );
    var status = gl.getShaderParameter( shaderObj, gl.COMPILE_STATUS );
    if ( !status ) alert(gl.getShaderInfoLog(shaderObj));
    return status ? shaderObj : 0;
} 
ShaderProgram.LinkProgram = function( shaderObjs ) {
    var prog = gl.createProgram();
    for ( var i_sh = 0; i_sh < shaderObjs.length; ++ i_sh )
        gl.attachShader( prog, shaderObjs[i_sh] );
    gl.linkProgram( prog );
    status = gl.getProgramParameter( prog, gl.LINK_STATUS );
    if ( !status ) alert("Could not initialise shaders");
    gl.useProgram( null );
    return status ? prog : 0;
}

<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>
<canvas id="gl-canvas" width="512" height="512">
      Oops ... your browser doesn't support the HTML5 canvas element
 </canvas>

尝试配置WebGL

1 个答案: