webgl中，使用顶点索引

最新推荐文章于 2024-05-07 23:38:51 发布
最新推荐文章于 2024-05-07 23:38:51 发布
阅读量1.3k 收藏 2
点赞数 2
分类专栏： webgl 文章标签： c++ 开发语言 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/webMinStudent/article/details/122294966
版权

1.webgl中，使用顶点索引

需要解决的是，减少数据，可以重复利用现有的数据

1.创建顶点索引数据

var indices = new Uint8Array([
                0, 1, 2, 0, 2, 3,    // front
                0, 3, 4, 0, 4, 5,    // right
                0, 5, 6, 0, 6, 1,    // up
                1, 6, 7, 1, 7, 2,    // left
                7, 4, 3, 7, 3, 2,    // down
                4, 7, 6, 4, 6, 5     // back
            ]);

2.创建缓冲区(顶点索引缓冲区区)

const indexBuffer = gl.createBuffer();

3.绑定缓冲区，绑定到 ELEMENT_ARRAY_BUFFER(目标上)

gl.bindBuffer(gl.ARRAY_BUFFER, indexBuffer);

gl.bindBuffer的API说明
在这里插入图片描述
4.向缓冲区写入数据

gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

5.渲染
此时我们要使用drawElements这个api，来渲染图形，而不是drawArrays

gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="400" height="400">
        Please use a browser that supports "canvas"
    </canvas>
    <script src="../lib/cuon-matrix.js"></script>
    <script>
        var VSHADER_SOURCE =
            'attribute vec4 a_Position;\n' +
            'attribute vec4 a_Color;\n' +
            'uniform mat4 u_ViewProjMatrix;\n' +
            'varying vec4 v_Color;\n' +
            'void main() {\n' +
            '  gl_Position = u_ViewProjMatrix * a_Position;\n' +
            '  v_Color = a_Color;\n' +
            '}\n';

        // Fragment shader program
        var FSHADER_SOURCE =
            '#ifdef GL_ES\n' +
            'precision mediump float;\n' +
            '#endif\n' +
            'varying vec4 v_Color;\n' +
            'void main() {\n' +
            '  gl_FragColor = v_Color;\n' +
            '}\n';
        const gl = canvas.getContext('webgl');
        const createShader = (type, source) => {
            const shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);
            const compileState = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
            if (!compileState) {
                const info = gl.getShaderInfoLog(shader);
                console.log('编译白痴信息为' + info)
                gl.deleteShader(shader);
                return null;
            }
            return shader
        }
        const createProgram = (vshader, fshader) => {
            const vertexShader = createShader(gl.VERTEX_SHADER, vshader);
            const fragementSaher = createShader(gl.FRAGMENT_SHADER, fshader);
            if (!vertexShader || !fragementSaher) {
                console.log('创建着色器失败')
                return null
            }
            const program = gl.createProgram();
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragementSaher);
            gl.linkProgram(program);
            const linkState = gl.getProgramParameter(program, gl.LINK_STATUS);
            if (!linkState) {
                const err = gl.getProgramInfoLog(program);
                console.log('链接报错信息为' + err);
                gl.deleteShader(vertexShader);
                gl.deleteShader(fragementSaher);
                gl.deleteProgram(program);
                return null
            }
            return program
        }
        const program = createProgram(VSHADER_SOURCE, FSHADER_SOURCE)
        gl.useProgram(program);
        gl.program = program;
        const initVertexBuffers = () => {
            var verticesColors = new Float32Array([
                // Vertex coordinates and color
                1.0, 1.0, 1.0, 1.0, 1.0, 1.0,  // v0 White
                -1.0, 1.0, 1.0, 1.0, 0.0, 1.0,  // v1 Magenta
                -1.0, -1.0, 1.0, 1.0, 0.0, 0.0,  // v2 Red
                1.0, -1.0, 1.0, 1.0, 1.0, 0.0,  // v3 Yellow
                1.0, -1.0, -1.0, 0.0, 1.0, 0.0,  // v4 Green
                1.0, 1.0, -1.0, 0.0, 1.0, 1.0,  // v5 Cyan
                -1.0, 1.0, -1.0, 0.0, 0.0, 1.0,  // v6 Blue
                -1.0, -1.0, -1.0, 0.0, 0.0, 0.0   // v7 Black
            ]);

            var indices = new Uint8Array([
                0, 1, 2, 0, 2, 3,    // front
                0, 3, 4, 0, 4, 5,    // right
                0, 5, 6, 0, 6, 1,    // up
                1, 6, 7, 1, 7, 2,    // left
                7, 4, 3, 7, 3, 2,    // down
                4, 7, 6, 4, 6, 5     // back
            ]);
            const vertexColorbuffer = gl.createBuffer();
            const indexBuffer = gl.createBuffer();
            const size = verticesColors.BYTES_PER_ELEMENT;
            gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorbuffer);
            gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
            var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
            gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, size * 6, 0);
            gl.enableVertexAttribArray(a_Position);
            var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
            gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, size * 6, size * 3);
            gl.enableVertexAttribArray(a_Color);

            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

            return indices.length;
        }
        const n = initVertexBuffers();
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.enable(gl.DEPTH_TEST);
        console.log(n, 'nnn')
        var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_ViewProjMatrix');
        var mvpMatrix = new Matrix4();
        mvpMatrix.setPerspective(30, 1, 1, 100);
        mvpMatrix.lookAt(3, 3, 7, 0, 0, 0, 0, 1, 0);
        gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
        gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);

    </script>
</body>

</html>

效果
在这里插入图片描述

你大爷的,这都没注册了
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webgl-experiments:WebGL中正在进行的实验集合
05-27
WebGL实验 免责声明 在查看，评估或使用此存储库中演示的任何代码或想法时，应始终牢记“实验”一词的用法。 概述 使用WebGL进行的各种实验的集合。 除了在各个演示中显示的想法外，该存储库还包含一个非常简单的呈现引擎，其中包含以下概念： Scene -由许多场景对象组成 SceneObject场景中具有其自己的渲染信息和更新逻辑的单个对象 RenderableComponent材质和网格的组合 Material -着色器程序与制服和属性的集合的组合 MaterialPropertyBlock作为输入提供给着色器的属性。 制服或属性取决于材料。 Mesh -顶点和索引缓冲区的组合 Renderer -负责绘制所有适用的场景对象 Transform -位置，旋转和比例的组合 实验 演示使用实例化更有效地渲染大量对象。 演示可用于进行更有效的场景查询的QuadTree实现。 ..
Cesium 1.02.0 及以上版本下自定义材质报错：[Cesium WebGL] Fragment shader compile log: ERROR: 0:8: ‘texture2D‘
linzi19900517的博客
03-06 6582
解决 Cesium 1.02.0 及以上版本下自定义材质报错问题：[Cesium WebGL] Fragment shader compile log: ERROR: 0:8: 'texture2D'。
cesium webgl2.0 shader 各种函数使用
m0_38004751的博客
10-18 606
cesium webgl2.0 shader
webgl着色器学习 -出乎意外的形状
宏斌的博客
10-05 151
在向一个目标前进时莫名其妙出现了其他有意思的形状记录于此。
封装WebGL初始化着色器函数
qq_45487080的博客
05-08 188
/gl.drawArrays(gl.TRIANGLES, 0, 1) // 三角形。// x, y, z, w齐次坐标(x/w, y/w, z/w)// 着色器： 通过程序代替固定的渲染管线，来处理图像的渲。//gl.drawArrays(gl.LINES, 0, 1) // 线。// 必须要存在 main 函数 (浮点数)// 片元着色器：像素（颜色，纹理）// 要绘制的点的坐标。// 顶点着色器：顶点理解为坐标。// 顶点着色器源码。// 片元着色器源码。
OpenGL之元素缓冲对象
一个小菜鸡的学习之路
05-22 690
要想用线框模式绘制你的三角形，你可以通过glPolygonMode(GL_FRONT_AND_BACK, GL_LINE)函数配置OpenGL如何绘制图元。之后的绘制调用会一直以线框模式绘制三角形，直到我们用glPolygonMode(GL_FRONT_AND_BACK, GL_FILL)将其设置回默认模式。值得庆幸的是，元素缓冲区对象的工作方式正是如此。同样，和VBO类似，我们会把这些函数调用放在绑定和解绑函数调用之间，只不过这次我们把缓冲的类型定义为GL_ELEMENT_ARRAY_BUFFER。
5.5.3 顶点索引
虚幻社区
11-13 3491
如已经提到的，三角形是用于固体的3D对象的基本构建块。下面的代码显示了使用三角形列表（即每三个顶点形成一个三角形）构建一个四和八边形的顶点数组。 Vertex quad[6] = { v0, v1, v2, // Triangle 0 v0, v2, v3, // Triangle 1 }; Vertex octagon[24] = { v0, v1, v2, // Triangl
四、WebGL入门，索引缓冲区
a23366192007的博客
01-19 2149
这一节简单的介绍下索引缓冲区 先看一个问题，绘制如下一个矩形： 按照之前所学的的方法需要6个顶点数据，代码如下： var jsArrayData = [ //x y z -0.5, +0.5, 0.0, //0
WebGL中缓冲区对象的使用方法
moonjie444的专栏
08-05 628
使用缓冲区对象向顶点着色器传入多个顶点数据，需要遵循以下五个步骤。 1. 创建缓冲区对象 gl.createBuffer() -- 删除缓冲区对象 gl.deleteBuffer() gl.createBuffer() 创建缓冲区对象，返回创建成功的对象或者 nullgl.deleteBuffer(buffer) 传入缓冲区对象buffer，意为删除缓冲区对象 2. 绑定缓冲区对象 gl.bindBuffer() gl.bindBuffer(target, buffer); target 参数...
webgl 着色器
weixin_38107457的博客
07-16 895
webgl 绘图需要两种着色器： 顶点着色器（Vertex shader）：描述顶点的特征，如位置、颜色等。 片元着色器（Fragment shader）：进行逐片元处理，如光照。 webgl 的着色器语言是GLSL ES语言 片元着色程序，要写在type=“x-shader/x-fragment” 的script中。 <script id="fragmentShader" type="x-shader/x-fragment"> void main(.
WebGL2SDFText：具有顶点位移着色器的WebGL 2签名距离字体渲染器
02-05
字体网格生成器上的更多选项可以更改文本并选择不同字体的试用区域将FPS（每秒帧数）显示为与此项目渲染的文本科技类具有顶点位移着色器的WebGL 2签名距离字体渲染器使用许多WebGL元素来正常运行： 顶点和片段着色器...
WebGL编程指南
11-26
260 示例程序（DepthBuffer.js） 262 深度冲突 263 立方体 266 通过顶点索引绘制物体 268 示例程序（HelloCube.js） 268 向缓冲区中写入顶点的坐标、颜色与索引 271 为立方体的每个表面指定颜色 274 示例程序...
WebGL编程指南压缩包
05-15
通过顶点索引绘制物体 268 示例程序（HelloCube.js） 268 向缓冲区中写入顶点的坐标、颜色与索引 271 为立方体的每个表面指定颜色 274 示例程序（ColoredCube.js） 275 用示例程序做实验 277 总结 279 第8 章...
WebGL基础与入门示例
hhue2007的专栏
02-04 1139
我们都知道最新的HTML5中支持了画布操作，可以在上面绘制各种二三维图形，以及各种图像，相应的H5标签就是，二维图形绘制有Canvas API和WebGL API，三维图形绘制有WebGL API。
WebGL入门(五)-使用缓冲区对象向着色器传值绘制三角形
点燃火柴的博客
03-07 758
使用缓冲区对象创建三角形1.demo效果 1.demo效果
webgl缓冲区对象使用详解
qq_37987033的博客
12-26 1491
在webgl中，所有的图形都是由大量点组成的，为了绘制点，每次都需要调用gl.drawArrays()方法，当需要绘制大量三角形、多边形或者几何体时，轮番绘制各个点是非常麻烦的。为此，webgl提供了缓冲区对象功能，它通过在webgl中开辟一块独立的内存区，将需要绘制的顶点数据全部填充至缓冲区内，供顶点着色器使用。可以在一个缓冲区中传递多组信息，实现效率的优化。
WebGl-8.通过缓冲区绘制多个点
qq_25064691的博客
09-12 215
缓冲区对象： 缓冲区对象是 webgl 系统中的一块存储区，我们可以在缓冲区对象中保存想要绘制的所有顶点的数据，并且可以使用也可以不使用；使用缓冲区对象向顶点着色器传入数据，需要遵守以上五个步骤； 1、创建缓冲区对象 – gl.createBuffer() 2、绑定缓冲区对象 – gl.bindBuffer() 3、将数据写入缓冲区对象 – gl.bufferData() 4、将缓冲区对象分配给一个 attribute变量gl.vertexAttribPointer() 5、开启attribute变量.
WebGL编程指南-21 通过顶点索引绘制渐变色的立方体
weixin_46773434的博客
09-27 468
如上，通过顶点索引绘制出了一个渐变色的立方体。
初识C语言——第十四天
最新发布
硬件菜鸟的成长之路
05-07 347
【代码】初识C语言——第十四天。
unity中使用webgl
04-04
Unity支持WebGL作为一种构建平台，使您可以将您的游戏发布到Web浏览器中。...此外，使用WebGL时，您需要注意性能问题，因为WebGL会在浏览器中运行。因此，您应该确保您的游戏在所有现代Web浏览器中以可接受的速度运行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值