个人中心
gpt4 book ai didi

javascript - 尝试配置 WebGL

转载 作者：行者123 更新时间：2023-11-30 14:50:18 33 4
gpt4 key购买 nike

我正在尝试初始化我的图形库以在我的网络浏览器中绘制一个简单的三 Angular 形。但是，我正在创建的 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>

最佳答案

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

将所有初始化移动到函数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。你想看到任何三 Angular 形:

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

查看代码片段:

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>

关于javascript - 尝试配置 WebGL，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48247221/

33 4 0
文章推荐： c# - 如何使用 NDepend 查看代码指标 lke Fan-In/Fan-Out
文章推荐： c - 使用信号量的进程之间的互斥
文章推荐： c - 如何在 __asm__ 中使用 int？
文章推荐： c - 为什么我的程序在完成之前只接受一个输入？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com