webgl—将多组点传给webgl系统中

news/2024/10/25 15:20:37/

webgl应用的整体流程:
获取webgl绘图上下文----
初始化着色器—
设置点的坐标信息—
设置canvas背景色----
清空canvas—
绘制
1.webgl借助canvas绘制的

2.绘制线
首先确定线的点坐标,Webgl运行在GPU中,而js代码运行在CPU中,最终将绘制的图像通过htm’l中的canvas元素进行呈现。
需要将js中的坐标传给webgl系统,传送多个点使用的方法是缓冲区对象:缓冲区对象是webgl系统中的一块存储区,在缓冲区对象中保存想要的绘制的所有顶点的数据
缓冲区对象使用方法:gl.createBuffer()使用首先创建缓冲区
gl.bindBuffer:绑定缓冲区对象的作用是指定缓冲区数据的用途,因为缓冲区不仅可以用来存储顶点数据,同样可以存储颜色信息,需要进行明确的确定
gl.bufferData:将js中的顶点坐标数据写入到缓冲区中
gl.vertexAttribPointer():目的是将缓冲区和顶点着色器中存放顶点坐标的变量建立链接,但是此时着色器还不能从缓冲区读取顶点坐标数据
gl.enableVertexAttribArray():正式启用缓冲区和顶点着色器之间的连接,也就是说顶点着色器可以从缓冲区读取顶点坐标值了
最后使用基本图元的绘制方法
gl.drawArrays(int mode,int first,int count)
first:指定从哪个点开始绘制,一般为0
count:表示绘制需要多少个点
mode:表示绘制的方法:
gl.POINTS:绘制一系列的点
gl.LINES:绘制一系列的单独线段,每两个点作为线段,线段之间不想连接
gl.LINE_STRIP:绘制连续的线段
gl.LINE_LOOP:绘制闭合的线圈
gl.TRIANGLE_STRIP:绘制一个三角带
gl.TRIANGLE_FAN:绘制一个三角扇
gl.TRIANGLE:绘制一系列三角形,每三个点为一个三角形
webgl只绘制三种图形:点,线段,三角形


http://www.ppmy.cn/news/5762.html

相关文章

[Python图像处理] 使用 HSV 色彩空间检测病毒对象

使用 HSV 色彩空间检测病毒对象前言检测病毒对象相关链接前言 在本节中,我们将学习如何使用 OpenCV 在 HSV 色彩空间中使用特定颜色检测感兴趣对象。我们需要通过指定颜色值范围识别和提取感兴趣的对象,使用具有病毒的血细胞图像,我们的目标…

11个案例讲透 Python 函数参数

今天给大家分享一下自己整理的一篇 Python 参数的内容,内容非常的干,全文通过案例的形式来理解知识点,自认为比网上 80% 的文章讲的都要明白,如果你是入门不久的 python 新手,相信本篇文章应该对你会有不小的帮助。 接…

nginx架构解析:朴实中见真知

目录前言为什么高并发很重要Apache可以做到吗使用nginx会更有优势吗?nginx架构概览代码结构Workers模型nginx进程规则nginx缓存概览nginx配置nginx内部典型的HTTP请求处理循环课程总结前言 nginx(发音“engine x”)是俄国的软件工程师Igor S…

【3.3 ads篇(重点)】

3.3 ads篇(重点) 提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、基本概念1.1 基本定义1.2 关键类型二、数据类型2.1 ads数据类型2.2 类型转换2.3 结果缓冲区总结前言 提示:以下是本篇文章正文内容,下面案例可供参考 一、基本概念 …

第4、5、6 章

第4章 数据库编程 用如下拼接sql的方式检验用户名和密码: select * from user where useridaa and userpwda or 11 : where条件为真。所以是不安全的。 避免方式:在sql中使用"?"进行预编译 第5章 JavaBean简介 JavaBean是Java W…

关于2022年国内软件质量调查问卷的一些感悟与收获

📋前言 1️⃣关于2022年国内软件质量调查主题征文活动 CSDN《2022年国内软件质量调查》正式开启,我们诚邀各位博主,特别是测试领域的各位技术er参与调查,并围绕主题,撰写《我填写“2022年国内软件质量调查问卷”的感想…

制作圣诞帽其实特简单(附 Python 代码)

圣诞将至,虽然咱不过这洋节,但是热闹还是要凑一下的,相信已经有很多圣诞帽相关的周边在流传了,今天咱们就自己动手,给头像增加一个圣诞帽。 文章目录基础知识准备数字图像图像通道ROI和mask矩阵(Numpy&…

34.前端笔记-CSS3-动画

1、动画 动画animation是CSS3中具有颠覆性的特征之一,可以通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果 相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果 2、动画的基本使用 …