尝试配置 WebGL答案

【问题标题】：Trying to configure WebGL尝试配置 WebGL
【发布时间】：2018-01-18 05:17:09
【问题描述】：

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

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>

【问题讨论】：

将“//三个顶点”直到“//将着色器变量与我们的数据缓冲区相关联”代码放入 init 方法中。此代码现在在 init 之前执行。尝试调试您的代码以了解程序流程。
不要使用window.onload。只需将脚本放在正文的结束标签下方。示例：jsfiddle.net/greggman/jz5z7h4r 您会在几乎所有主要互联网公司的编码指南中找到此建议。没有理由使用window.onload。这种做法是 15 年前的不良例子遗留下来的，只是不断地被复制和粘贴。使用window.onload 的唯一原因是您将脚本放在顶部。事情是按从上到下的顺序执行的，因此脚本下方的 HTML 尚不存在。将脚本移至底部问题已解决
或者使用defer标签。无论哪种情况，都没有理由使用window.onload。 window.onload 也有问题，因为一些旧的 3rdparty 脚本也可能会尝试设置它，要么你会覆盖它们，要么它们会覆盖你。如果你真的需要在加载时执行，那么你真的应该使用window.addEventListener('load', yourFunction)，因为这样可以在加载时执行多个脚本。

标签： javascript html webgl

【解决方案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 -> useProgram

bufferId -> bufferID

fl.FLOAT, flase -> gl.FLOAT, false

见代码sn-p：

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>

【讨论】：

谢谢！扩展初始化函数起到了作用，并纠正了我的许多错别字。感谢您的头痛缓解！