javascript - gl-matrix 未正确包含在 webgl 应用程序中-6ren

javascript - gl-matrix 未正确包含在 webgl 应用程序中

转载作者：行者123 更新时间：2023-12-03 08:27:47

24

4

我正在尝试学习 webgl 的基础知识并遵循 MDN 教程 here .

但是，我的渲染脚本 (render.js) 无法识别包含的 gl-matrix脚本。在 Chrome 中运行 index.html(版本 88.0.4324.150(官方版本)(64 位))我希望看到黑色背景下的红色方 block 。相反，我得到黑色背景和以下控制台错误:

render.js:80 Uncaught ReferenceError: mat4 is not defined
    at DrawScene (render.js:80)
    at main (render.js:177)

这是相应的文件。

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<canvas id="canvas" width=640 height=480></canvas>
<script type="text/javascript" src="gl-matrix.js"></script>
<script type="text/javascript" src="render.js" ></script>
</body>
</html>

渲染.js


let loadShader= (gl,type,src) =>
{
    const shader = gl.createShader(type);
    gl.shaderSource(shader,src);
    gl.compileShader(shader);

    if(!gl.getShaderParameter(shader,gl.COMPILE_STATUS))
    {
        alert("An error occured during shader compilation: "+ gl.getShaderInfoLog(shader))
        gl.deleteShader(shader);
        return null;
    }

    return shader;
}


let initShaderProgram= (gl,vertShaderSrc,fragShaderSrc) =>
{
    const vertexShader=loadShader(gl,gl.VERTEX_SHADER ,vertShaderSrc);
    const fragShader=loadShader(gl,gl.FRAGMENT_SHADER, fragShaderSrc);

    const shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram,vertexShader);
    gl.attachShader(shaderProgram,fragShader);
    gl.linkProgram(shaderProgram);

    if(!gl.getProgramParameter(shaderProgram,gl.LINK_STATUS))
    {
          alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
          return null;
    }

    return shaderProgram;
}

let initBuffers = (gl) =>
{
    const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);

    const positions = [
                       1.0,1.0,
                       1.0,-1.0,
                       -1.0,1.0,
                       -1.0,-1.0
                      ];


    gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(positions),gl.STATIC_DRAW);
    return {positions:positionBuffer};
} 




 let DrawScene = (gl,programInfo,buffers) =>
{
    gl.clearColor(0.0,0.0,0.0,1.0);
    gl.clearDepth(1.0);
    gl.enable(gl.DEPTH_TEST);
    gl.depthFunc(gl.LEQUAL);

    gl.clear(gl.COLOR_BUFFER_BIT| gl.DEPTH_BUFFER_BIT);


    const fieldOfView = 45*Math.PI/180;
    const aspectRatio = gl.canvas.clientWidth/gl.canvas.clientHeight;
    const zNear = 0.1;
    const zFar = 100;
    const projectionMatrix = mat4.create();

    mat4.perspective(projectionMatrix,
                     fieldOfView,
                     aspectRatio,
                     zNear,
                     zFar);

    let modelViewMatrix = mat4.create();
    mat4.translate(modelViewMatrix,
                   modelViewMatrix,
                    [0.0,0.0,-6.0]);


    {
        const numComponents = 2;
        const type = gl.FLOAT;
        const normalize=false;
        const stride=0;
        const offset=0;
        gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition,
            numComponents,
            type,
            normalize,
            stride,
            offset
            );
        gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
    }

    gl.useProgram(programInfo.program);
    gl.uniformMatrix4fv(programInfo.uniformLocations.projectionMatrix,
        false,
        projectionMatrix);
    gl.uniformMatrix4fv(programInfo.uniformLocations.modelViewMatrix,
        false,
        modelViewMatrix);

    {
        const offset = 0;
        const vertexCount=4;
        gl.drawArrays(gl.TRIANGLE_STRIP,offset,vertexCount);
    }


};  



 let main = () =>
{
    const canvas =document.querySelector("#canvas")
    const gl =canvas.getContext("webgl")
    if(gl==null)
    {
        alert("gl is null")
        return;
    }



const  vsSource = 
`
attribute vec4 aVertexPosition;

uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
void main()
{
    gl_Position=uProjectionMatrix*uModelViewMatrix*aVertexPosition;
} 
`;


const  fsSource = 
`
void main()
{
    gl_FragColor=vec4(0.7,0.0,0.11,1);
} 
`;

const shaderProgram=initShaderProgram(gl,vsSource,fsSource);


const ProgramInfo={
    program:shaderProgram,
    attribLocations: {vertexPosition:gl.getAttribLocation(shaderProgram,'aVertexPosition')},
    uniformLocations:{projectionMatrix: gl.getUniformLocation(shaderProgram,'uProjectionMatrix'),
                      modelViewMatrix: gl.getUniformLocation(shaderProgram,'uModelViewMatrix')
                      }
};



    buffers= initBuffers(gl);

    DrawScene(gl,ProgramInfo,buffers);

}

 window.onload=main

最佳答案

如果我没记错的话，较新版本的 glMatrix 仅公开 glMatrix 命名空间，而不是各个类。因此，就您的情况而言，我认为通过在 render.js 顶部解构它们来使其可用是最简单的:

const { vec2, vec3, mat3, mat4 } = glMatrix;

关于javascript - gl-matrix 未正确包含在 webgl 应用程序中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66147508/

24

4

0

文章推荐： reactjs - 创建加载程序

文章推荐： ubuntu - 示例中的 GLPK 无效指标错误

文章推荐： syntax-error - 使用MIPS打印结果时的语法错误

文章推荐： android - 是否可以只为单个Activity设置夜间模式

c++ - 如何仅将整数从文件读取到也包含字符串的c++程序中？
我有一个包含数字和整数的文件，我只想读取整数，如果它们令人讨厌，请忽略宏，但是我只需要有整数，但是我必须确保还要读取字符串，然后忽略它们我必须在这里修改什么: #include #include
无法将双数正确导入到 C 程序中
我有一个这样格式化的txt文件: MyDepartureTown MyDestinationTown 123.45 Vehicle 12 我正在尝试将数据导入到我的 C 程序中。这是我用来实现这一目标
c++ - 将flex生成的代码放到一个普通的C++程序中
我创建了一个简单的文件，使用 flex，它生成了一个文件 lex.yy.c，现在，我想把它放到 C++ 程序中。 %{ #include %} %% stop printf("Stop co
c++ - 是否可以将一段代码插入到已经存在的 C++ 程序中？
我的一个程序用 c++ 代码生成一个大文件。有没有办法从另一个C++类调用将生成的代码插入其中？这是一个小例子，可以清楚地说明我想要实现的目标。生成的文件示例: FirstClass first
检查输入十六进制消息的第三个位置 --> 在 C 程序中
我需要了解我的程序“检查输入十六进制消息的第三个位置” 程序将采用十六进制值输入消息。例如0x0123456789abcdef 程序将检查输入消息的第三个位置，即 0 现在程序将采用另一条十六进制值的
c - 如何将最终摘要消息放入 yacc 程序中？
当我将输入从输入文件重定向到 yacc 程序时，在它完成解析文件后，我希望 yacc 解析器打印其所做操作的摘要。如果我通过键盘输入内容然后按 Ctrl+D，我希望它执行相同的操作。有办法做到这一点吗
c - 将文本文件加载到 C 程序中
我正在扫描该文件，但它有两种不同的结构。文件: ParisRoubaix "Marco MARCATO" 33 UAD ITA 26 5:43:31 ParisRoubaix "Sam BEWLEY
c - 是否可以将winsock2动态链接到我的c/c++程序中
我想将winsock2.lib 添加到我的程序中，但不希望将其包含到最终的可执行文件中。有什么方法可以让我动态加载与winsock2关联的dll吗？如果没有，是否有任何 dll(Windows 附带)
java - 如何将数据库中的元素检索到 JDBC 程序中
我尝试了一个基本程序来将数据从数据库表检索到java程序中。编译结束后，运行代码时出现异常。控制台中没有显示错误。显示异常消息 import java.sql.*; public class clas
c++ - 将压缩文件嵌入到 C++ 程序中
我想用 C++ 创建一个跨平台安装程序。它可以是任何压缩类型，例如 zip 或 gzip，像普通安装程序一样嵌入程序本身。我不想在不同的平台、linux 和 windows 上创建很多更改。如何跨平台
c - 卡在交互式 openGL 程序中
每次尝试用鼠标输入两个顶点时，我都会崩溃。我最近改变了组织每个形状的方式，以确保新形状与旧形状重叠。这个项目的想法是制作各种交互式 Canvas 。用户可以在直线、三角形和矩形之间进行选择，然后选择
python - 如何使以下文本出现在我的 python 程序中？
我想在我的程序中显示以下文本。当我在 python 中粘贴以下文本时，它会将反斜杠解释为转义序列并弄乱我的 ascii 艺术..任何解决这个问题的想法极客。这是我的文本想出现在我的节目中 _ _
java - 需要帮助将文件加载到 java 程序中
我正在尝试加载名为 Tut16_ReadText.txt 的文件，并使其运行程序以输出其重或轻。我收到了粘贴在下面的错误。我无法抽出时间让这个程序运行。谁能解释一下我必须做什么才能使这个程序正常工作
python - 有没有办法在命令行中将列表输入到 Python 程序中？
我想使用命令行将列表作为参数传递，例如: $python example.py [1,2,3] [4,5,6] 我希望第一个列表 [1,2,3] 成为 first_list，[4,5,6] 成为 se
c# - 在C#程序中，ThePreStub是什么？
在分析 C# 应用程序时，我发现名为“ThePreStub”的系统 (?) 方法中有相当多的 CPU 使用率。这是什么？最佳答案参见:CLR Inside out - The Performanc
java - 如何将斯坦福解析器软件集成到我的 java 程序中？
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 9 年前。 Improve this qu
python - 如何将我自己的图标添加到 Python 程序中
我正在用 Python 开发一个游戏，想知道如何给它自己的图标。我使用的是 Windows 计算机，没有安装 Python 的额外东西。哦，我也在使用 3.3 版，这甚至可能吗？ P.S 我在 Sta
python - 如何将谷歌地图嵌入到我的 Python 程序中？
我正在使用 tkinter 使用 Python 开发一个项目，该项目将允许对 IP 地址进行地理定位。我有原始转换，我可以获取 IP 地址并知道城市、州、国家、经度、纬度等。我想知道是否有任何方法可以
c - 为什么我的代码突然停在这个 C 程序中？
我编写了一个程序，您可以在其中选择任意数字并将其与任意数字的幂相关联。代码运行正常，直到它到达某个部分，然后我必须输入一个字符以使其移动到代码的下一部分。这就是我的意思: #include int
无法访问特定的内存地址。在 C 程序中
我正在编写“HACKING Art Of Exploitation”一书练习 Convert2.c 第 61 页。这是我的代码。下面是我的问题。 #include void usage(char

首页

博学

6Ren·AI

商城

javascript - gl-matrix 未正确包含在 webgl 应用程序中

index.html

渲染.js