WebGL笔记:绘制多个点,三角形,以及画各种不同的线条

绘制多点

1 ) WebGL 缓冲区

  • 我们在用js定点位的时候,肯定是要建立一份顶点数据的,这份顶点数据是给着色器的,因为着色器需要这份顶点数据绘图
  • 然而,我们在js中建立顶点数据,着色器肯定是拿不到的,这是语言不通导致的
  • 为了解决这个问题,webgl 系统就建立了一个能翻译双方语言的缓冲区
  • js 可以用特定的方法把数据存在这个缓冲区中,着色器可以从缓冲区中拿到相应的数据
  • 接下来就看一下这个缓冲区是如何建的,着色器又是如何从其中拿数据的

2 )WebGL 绘制多点步骤

2.1 建立着色器源文件

<script id="vertexShader" type="x-shader/x-vertex">attribute vec4 a_Position;void main(){gl_Position = a_Position;gl_PointSize = 20.0;}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">void main(){gl_FragColor=vec4(1.0,1.0,0.0,1.0);}
</script>

2.2 获取webgl 上下文

const canvas = document.getElementById('canvas');
canvas.width = 200;
canvas.height = 200;
const gl = canvas.getContext('webgl');

2.3 初始化着色器

const vsSource = document.getElementById('vertexShader').innerText;
const fsSource = document.getElementById('fragmentShader').innerText;
initShaders(gl, vsSource, fsSource);

2.4 设置顶点点位

const vertices = new Float32Array([0.0,  0.1,-0.1,-0.1,0.1, -0.1
]);const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_Position);
  • 建立顶点数据,两个浮点数构成一个顶点,分别代表 x、y 值
    const vertices = new Float32Array([// x, y0.0,  0.1, // 顶点-0.1, -0.1, // 顶点0.1, -0.1  // 顶点
    ])
    
  • 现在上面的这些顶点数据是存储在js 缓存里的,着色器拿不到,需要建立一个着色器和js 都能进入的公共区,即缓冲区
  • 建立缓冲对象
    const vertexBuffer = gl.createBuffer();
    
  • 现在上面的这个缓冲区是独立存在的,它只是一个空着的仓库,和谁都没有关系。接下来咱们就让其和着色器建立连接
  • 绑定缓冲对象
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    
  • 绑定缓冲区相关api为:gl.bindBuffer(target,buffer)
    • target 要把缓冲区放在 webgl 系统中的什么位置
    • buffer 缓冲区
  • 着色器对象在执行 initShaders() 初始化方法的时候,已经被写入webgl 上下文对象gl 中了,这个 initShaders 方法可查阅之前博文
  • 当缓冲区和着色器建立了绑定关系,我们就可以往这块空间写入数据了
  • 往缓冲区对象中写入数据
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
    
  • 相关api为:bufferData(target, data, usage) 将数据写入缓冲区
    • target 要把缓冲区放在 webgl 系统中的什么位置
    • data 数据
    • usage 向缓冲区写入数据的方式,目前使用 gl.STATIC_DRAW 方式,它是向缓冲区中一次性写入数据,着色器会绘制多次
    • 现在着色器虽然绑定了缓冲区,可以访问里面的数据了
    • 但是我们还得让着色器知道这个仓库是给哪个变量的,比如咱们这里用于控制点位的attribute 变量,这样做是为了提高绘图效率
  • 将缓冲区对象分配给 attribute 变量
    const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
    
  • 相关api为:gl.vertexAttribPointer(local, size, type, normalized, stride, offset) 将缓冲区对象分配给 attribute 变量
    • local attribute变量
    • size 顶点分量的个数,比如我们的vertices 数组中,两个数据表示一个顶点,我们定一个 2
    • type 数据类型,比如 gl.FLOAT 浮点型
    • normalized 是否将顶点数据归一
    • stride 相邻两个顶点间的字节数,我的例子里写的是0,那就是顶点之间是紧挨着的
    • offset 从缓冲区的什么位置开始存储变量,我的例子里写的是0,那就是从头开始存储变量
  • 到了这里,着色器就知道缓冲区的数据是给谁的了,因为咱们缓冲区里的顶点数据是数组,里面有多个顶点
  • 所以我们得开启一个让着色器批量处理顶点数据的属性,默认着色器只会一个一个的接收顶点数据,然后一个一个的绘制顶点
  • 开启顶点数据的批处理功能
    gl.enableVertexAttribArray(a_Position);
    
  • 相关api, enableVertexAttribArray(location), location attribute 变量
  • 好, 目前已经是万事俱备,可以着手绘图, 绘图前,先将画布清理下

2.5 清理画布

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

2.6 绘图

gl.drawArrays(gl.POINTS, 0, 3); // 这是绘制三个顶点
  • 相关api:drawArrays(mode, first, count)
    • mode 绘图模式,比如 gl.POINTS 画点
    • first 从哪个顶点开始绘制
    • count 要画多少个顶点

绘制三角形

  • 绘制完成三个点,那么绘制三角形的工作就简单了
  • 注意:绘制三角形是不需要设置顶点的大小的

1 )顶点着色器移除顶点的配置

<script id="vertexShader" type="x-shader/x-vertex">attribute vec4 a_Position;void main(){gl_Position = a_Position;// gl_PointSize = 20.0;}
</script>
  • 因为 gl_PointSize 这个属性是控制顶点大小的,已经不需要了

2 )js中更改绘制方式

// gl.drawArrays(gl.POINTS, 0, 3);
gl.drawArrays(gl.TRIANGLES, 0, 3);
  • gl.TRIANGLES 就是绘制三角形

画不同的线条

  • 关于 drawArrays 第一个 mode 参数
    • POINTS 可视的点
    • LINES 单独线段
    • LINE_STRIP 线条
    • LINE_LOOP 闭合线条
    • TRIANGLES 单独三角形
    • TRIANGLE_STRIP 三角带
    • TRIANGLE_FAN 三角扇

1 )POINTS

  • 字面理解就是一个个的可以看到的点

  • 上面六个点的绘制顺序是:v0, v1, v2, v3, v4, v5

2 )LINES 单独线段


  • 上面三条有向线段的绘制顺序是
    • v0 > v1
    • v2 > v3
    • v4 > v5

3 )LINE_STRIP 线条


  • 上面线条的绘制顺序是:v0>v1>v2>v3>v4>v5

4 )LINE_LOOP 闭合线条


  • 上面线条的绘制顺序是:v0>v1>v2>v3>v4>v5>v0

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/144363.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ElementUI之首页导航与左侧菜单

目录 一、Mock 1.1 什么是Mock.js 1.2 安装与配置 1.2.1 安装mock.js 1.2.2 引入mock.js 1.3 mock.js使用 1.3.1 定义测试数据文件 1.3.2 mock拦截Ajax请求 1.3.3 界面代码优化 二、总线 2.1 定义 2.2 类型分类 2.3 前期准备 2.4 配置组件与路由关系 2.4.1 配置…

arduino - UNO-R3,mega2560-R3,NUCLEO-H723ZG的arduino引脚定义区别

文章目录 arduino - UNO-R3,mega2560-R3,NUCLEO-H723ZG的引脚定义区别概述笔记NUCLEO-H723ZGmega2560-R3UNO-R3经过比对, 这2个板子(NUCLEO-H723ZG, mega2560-R3)都是和UNO-R3的arduino引脚定义一样的.mega2560-r3和NUCLEO-H723ZG的区别补充arduino uno r3的纯数字IO和模拟IO作…

HTTP 协商缓存 Last-Modified,If-Modified-Since

浏览器第一次跟服务器请求一个资源&#xff0c;服务器在返回这个资源的同时&#xff0c;在respone header加上Last-Modified属性&#xff08;表示这个资源在服务器上的最后修改时间&#xff09;&#xff1a; ----------------------------------------------------------------…

【Java 进阶篇】MySQL 数据库备份与还原

MySQL 是一款常用的关系型数据库管理系统&#xff0c;用于存储和管理数据。在数据库应用中&#xff0c;数据备份和还原是非常重要的操作&#xff0c;用于保护数据免受意外删除、损坏或数据丢失的影响。本文将详细介绍如何在 MySQL 中进行数据库备份和还原操作&#xff0c;包括常…

5+铁死亡+分型+WGCNA+机器学习分析

今天给同学们分享一篇铁死亡分型WGCNA机器学习的生信文章“Identification of ferroptosis-related molecular clusters and genes for diabetic osteoporosis based on the machine learning”&#xff0c;这篇文章于2023年8月14日发表在Front Endocrinol (Lausanne)期刊上&am…

Swift 周报 第三十八期

文章目录 前言新闻和社区苹果自研调制解调器芯片受挫&#xff1a;速度太慢容易过热&#xff0c;落后高通 3 年App Store 现已接受适用于最新版操作系统的 App 和游戏提交 提案通过的提案正在审查的提案驳回的提案 Swift论坛推荐博文话题讨论关于我们 前言 本期是 Swift 编辑组…

redis主从从,redis-7.0.13

redis主从从&#xff0c;redis-7.0.13 下载redis安装redis安装redis-7.0.13过程报错1、没有gcc&#xff0c;报错2、没有python3&#xff0c;报错3、[adlist.o] 错误 127 解决安装报错安装完成 部署redis 主从从结构redis主服务器配置redis启动redis登录redisredis默认是主 redi…

DEM格式转换:转换NSDTF-DEM国标数据格式为通用格式,使用ArcGIS工具转换NSDTF-DEM国标.dem文件为通用.tif格式。

DEM格式转换&#xff1a;转换NSDTF-DEM国标数据格式为通用格式&#xff0c;使用ArcGIS工具转换NSDTF-DEM国标.dem文件为通用.tif格式。 *.dem是一种比较常见的DEM数据格式&#xff0c;其有两种文件组织方式&#xff0c;即NSDTF-DEM和USGS-DEM。 &#xff08;1&#xff09;NSDT…

【Linux】网络原理

文章目录 &#x1f4d6; 前言1. 计算机内部的交流1.1 计算机之间的交流&#xff1a; 2. 协议2.1 网络分层&#xff1a;2.2 以打电话为例&#xff1a;2.3 OSI七层模型&#xff1a;2.4 TCP/IP&#xff1a; 3. 操作系统与网络的关系4. 报头与解包4.1 报头的作用&#xff1a; 5. 局…

IDEA Debug技巧大全,看完就能提升工作效率

作者简介 目录 1.行断点 2.方法断点 3.异常断点 4.字段断点 5.条件表达式 1.行断点 行断点就是平时我们在代码行旁边单击鼠标打上的断点&#xff0c;这个没有什么好说的。关键点在于很多人不知道的&#xff0c;行断点其实是可以右击选择是对改行的全部调用都生效&#xf…

最新影视视频微信小程序源码-带支付和采集功能/微信小程序影视源码PHP(更新)

源码简介&#xff1a; 这个影视视频微信小程序源码&#xff0c;新更新的&#xff0c;它还带支付和采集功能&#xff0c;作为微信小程序影视源码&#xff0c;它可以为用户 提供丰富的影视资源&#xff0c;包括电影、电视剧、综艺节目等。 这个小程序影视源码&#xff0c;还带有…

Opengl之抛光物

我们目前使用的光照都来自于空间中的一个点。它能给我们不错的效果&#xff0c;但现实世界中&#xff0c;我们有很多种类的光照&#xff0c;每种的表现都不同。将光投射(Cast)到物体的光源叫做投光物(Light Caster) 平行光 当一个光源处于很远的地方时&#xff0c;来自光源的…

使用LDA(线性判别公式)进行iris鸢尾花的分类

线性判别分析((Linear Discriminant Analysis &#xff0c;简称 LDA)是一种经典的线性学习方法&#xff0c;在二分类问题上因为最早由 [Fisher,1936] 提出&#xff0c;亦称 ”Fisher 判别分析“。并且LDA也是一种监督学习的降维技术&#xff0c;也就是说它的数据集的每个样本都…

Simulink仿真封装中的参数个对话框设置

目录 参数和对话框窗格 初始化窗格 文档窗格 为了更加直观和清晰的分析仿真&#xff0c;会将多个元件实现的一个功能封装在一起&#xff0c;通过参数对话框窗格&#xff0c;可以使用参数、显示和动作选项板中的对话框控制设计封装对话框。如图所示&#xff1a; 参数和对话框…

Flutter笔记:关于应用程序中提交图片作为头像

Flutter笔记 关于应用程序中提交图片作为头像 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/article/details/133418554…

【数据库——MySQL】(12)过程式对象程序设计——存储过程

目录 1. 存储过程2. 局部变量3. 条件分支3.1 IF 语句3.2 CASE 语句 4. 循环语句4.1 WHILE 语句4.2 REPEAT 语句4.3 LOOP和LEAVE语句4.4 LOOP和ITERATE语句 5. 存储过程应用示例参考书籍 1. 存储过程 要创建存储过程&#xff0c;需要用到 CREATE 语句&#xff1a; CREATE PROCED…

《动手学深度学习 Pytorch版》 7.6 残差网络(ResNet)

import torch from torch import nn from torch.nn import functional as F from d2l import torch as d2l7.6.1 函数类 如果把模型看作一个函数&#xff0c;我们设计的更强大的模型则可以看作范围更大的函数。为了使函数能逐渐靠拢到最优解&#xff0c;应尽量使函数嵌套&…

web:[极客大挑战 2019]LoveSQL

题目 打开页面显示如下 查看源代码&#xff0c;查到一个check.php&#xff0c;还是get传参 尝试账号密码输入 题目名为sql&#xff0c;用万能密码 1or 11# 或 admin or 11 给了一段乱码&#xff0c;也不是flag 查看字段数 /check.php?usernameadmin order by 3%23&pass…

PDF文件超出上传大小?三分钟学会PDF压缩

PDF作为一种流行的文档格式&#xff0c;被广泛用于各种场合&#xff0c;然而有时候PDF文件的大小超出了上传限制&#xff0c;这时候我们就需要采取一些措施来减小PDF文件的大小&#xff0c;下面就给大家分享几个方法&#xff0c;一起来学习下吧~ 方法一&#xff1a;嗨格式压缩大…

Acer宏碁笔记本暗影骑士轻刃AN715-51原装出厂Windows10系统工厂模式镜像

系统自带所有驱动、NITROSENSE风扇键盘灯控制中心、Office办公软件、出厂主题壁纸、系统属性Acer宏基专属的LOGO标志、 Acer Care Center、Quick Access等预装程序 下载链接&#xff1a;https://pan.baidu.com/s/1FDCP5EONlk0o12CYFXbhrg?pwdvazt 所需要工具&#xff1a;32G…