当前位置: 首页 > news >正文

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

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只绘制三种图形:点,线段,三角形

相关文章:

  • 狗狗俱乐部网页设计教程/青岛百度推广seo价格
  • 在线教育网站做老师靠谱不/2345网址大全下载到桌面
  • 怎么制作学校网站/网络营销专业毕业论文
  • php网站后台入口/seo专业培训中心
  • 青岛建站开发/百度学术官网登录入口
  • 仿糗事百科wordpress/教育机构在线咨询
  • Meta CTO专访:2023年AR/VR、元宇宙的下一步怎么走
  • EBS调用webservice
  • 大白话式粗浅地聊聊NLP语言模型
  • 【Java】Java开发工程师面试题目
  • 【自用】VUE项目 宝塔部署 上线阿里云服务器CentOS7.6
  • 计算机网络期末重点考点总复习
  • 基于Servlet 的Java Web项目的CSRF防御概念
  • SpringBoot+Vue项目实践课程教学管理平台
  • 基于标志点特征高精提取与匹配方法,进行双目、结构光、RGBD相机、单目相机多视拼接
  • Cartesian product
  • 如何实现高性能点赞
  • Beego框架项目搭建步骤