WebGL利用缓冲区绘制三角和矩形-程序员宅基地

技术标签： webgl Web3D

在这里插入图片描述

什么是attribute 变量

它是一种存储限定符，表示定义一个attribute的全局变量，这种变量的数据将由外部向顶点着色器内传输，并保存顶点相关的数据，只有顶点着色器才能使用它

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="webgl" width="200" height="200"></canvas>
    <script>
        const webgl = document.getElementById('webgl')
        const gl = webgl.getContext('webgl')
        
        // 创建着色器
        const vertexShader = gl.createShader(gl.VERTEX_SHADER)
        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
        // 绑定数据源
        // 声明顶点着色器 attribute 变量
        gl.shaderSource(vertexShader, `
            attribute vec4 a_Position;
            void main(){
               gl_Position = a_Position;
               gl_PointSize = 20.0;
            }
        `)
        gl.shaderSource(fragmentShader, `
            void main(){
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }
        `)
        
        // 编译着色器
        gl.compileShader(vertexShader)
        gl.compileShader(fragmentShader)
        // 创建着色器程序
        const program = gl.createProgram()
        // 绑定着色器
        gl.attachShader(program, vertexShader)
        gl.attachShader(program, fragmentShader)
        // 连接着色器
        gl.linkProgram(program)
        // 使用着色器
        gl.useProgram(program)

        // 定义一个类型数组保存顶点坐标值
        const vertices = new Float32Array([
        	//x, y
	        0.0, 0.5,
	        -0.5, -0.5,
	        0.5, -0.5
        ])
        // 创建缓冲区
        const vertexBuffer = gl.createBuffer()
        // 绑定缓冲区 
        // target 要把缓冲区放在webgl系统中的什么位置, buffer 缓冲区
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
        // 写入数据
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
        // 获取到顶点着色器中变量
        const a_Position = gl.getAttribLocation(program, 'a_Position')
        // 从当前绑定的缓冲区中读取顶点数据(index, size, type, normalized是否顶点数据归一, stride相邻两个顶点间的字节数, offset从缓冲区的什么位置开始存储变量)
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
        // 开启顶点数据的批处理功能
        gl.enableVertexAttribArray(a_Position)

        // 绘制指定位置的三角
       	// 点 
        // gl.drawArrays(gl.POINTS, 0, 3)
        // 闭合线条
       	// gl.drawArrays(gl.LINE_LOOP, 0, 3)
        // 单独三角形 (如果是正面，逆时针绘制, 实际引擎开发中用的最多，就是比较费点)
       	gl.drawArrays(gl.TRIANGLES, 0, 3)
       	// LINES 单独线段（每2组一条线）
       	// LINE_STRIP 线条 (线条相连，但首尾不相连)
    </script>
</body>

</html>

TRIANGLE_STRIP 三角带

在这里插入图片描述

TRIANGLE_FAN 三角扇

在这里插入图片描述

以上四个面得绘制顺序是：
v0>v1>v2
以上一个三角形的第三条边+下一个点为基础，按照和第三条边相反的顺序，绘制三角形
v0>v2>v3
同上
v0>v3>v4
同上
v0>v4>v5
同上

绘制矩形面

webgl可绘制的面只有三角面，要绘制矩形的话，只能用两个三角形去拼

在这里插入图片描述

本文链接：https://blog.csdn.net/qq_45487080/article/details/132543725

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

linux devkmem 源码,linux dev/mem dev/kmem实现访问物理/虚拟内存-程序员宅基地

文章浏览阅读451次。dev/mem: 物理内存的全镜像。可以用来访问物理内存。/dev/kmem: kernel看到的虚拟内存的全镜像。可以用来访问kernel的内容。调试嵌入式Linux内核时，可能需要查看某个内核变量的值。/dev/kmem正好提供了访问内核虚拟内存的途径。现在的内核大都默认禁用了/dev/kmem，打开的方法是在 make menuconfig中选中 device drivers --> ..._dev/mem 源码实现

vxe-table 小众但功能齐全的vue表格组件-程序员宅基地

文章浏览阅读7.1k次，点赞2次，收藏19次。vxe-table，一个小众但功能齐全并支持excel操作的vue表格组件_vxe-table

（开发）bable - es6转码-程序员宅基地

文章浏览阅读62次。参考：http://www.ruanyifeng.com/blog/2016/01/babel.htmlBabelBabel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行// 转码前input.map(item => item + 1);// 转码后input.map(function (item) { return item..._让开发环境支持bable

FPGA 视频处理 FIFO 的典型应用_fpga 频分复用视频-程序员宅基地

文章浏览阅读2.8k次，点赞6次，收藏29次。摘要：FPGA视频处理FIFO的典型应用，视频输入FIFO的作用，视频输出FIFO的作用，视频数据跨时钟域FIFO，视频缩放FIFO的作用_fpga 频分复用视频

R语言：设置工作路径为当前文件存储路径_r语言设置工作目录到目标文件夹-程序员宅基地

文章浏览阅读575次。【代码】R语言：设置工作路径为当前文件存储路径。_r语言设置工作目录到目标文件夹

background 线性渐变-程序员宅基地

文章浏览阅读452次。格式：background: linear-gradient(direction, color-stop1, color-stop2, ...);<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner>] ,]? &l..._background线性渐变

随便推点

【蓝桥杯省赛真题39】python输出最大的数中小学青少年组蓝桥杯比赛算法思维python编程省赛真题解析-程序员宅基地

文章浏览阅读1k次，点赞26次，收藏8次。第十三届蓝桥杯青少年组python编程省赛真题一、题目要求（注：input（）输入函数的括号中不允许添加任何信息）1、编程实现给定一个正整数N，输出正整数N中各数位最大的那个数字。例如:N=132，则输出3。2、输入输出输入描述：只有一行，输入一个正整数N输出描述：只有一行，输出正整数N中各数位最大的那个数字输入样例：

网络协议的三要素-程序员宅基地

文章浏览阅读2.2k次。一个网络协议主要由以下三个要素组成：1.语法数据与控制信息的结构或格式，包括数据的组织方式、编码方式、信号电平的表示方式等。2.语义即需要发出何种控制信息，完成何种动作，以及做出何种应答，以实现数据交换的协调和差错处理。3.时序即事件实现顺序的详细说明，以实现速率匹配和排序。不完整理解：语法表示长什么样，语义表示能干什么，时序表示排序。转载于:https://blog.51cto.com/98..._网络协议三要素csdn

The Log: What every software engineer should know about real-time data's unifying abstraction-程序员宅基地

文章浏览阅读153次。主要的思想，将所有的系统都可以看作两部分，真正的数据log系统和各种各样的query engine所有的一致性由log系统来保证，其他各种query engine不需要考虑一致性，安全性，只需要不停的从log系统来同步数据，如果数据丢失或crash可以从log系统replay来恢复可以看出kafka系统在linkedin中的重要地位，不光是d..._the log: what every software engineer should know about real-time data's uni