WebGL异步绘制多点

异步绘制线段

1.先画一个点
在这里插入图片描述
2.一秒钟后，在左下角画一个点
在这里插入图片描述
3.两秒钟后，我再画一条线段
在这里插入图片描述

<!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)// 顶点数据let points = [0, 0.2]// 创建缓冲区const vertexBuffer = gl.createBuffer()// 绑定缓冲区 // target 要把缓冲区放在webgl系统中的什么位置, buffer 缓冲区gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)// 写入数据gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(points), 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, 1);// 一秒钟后，向顶点数据中再添加的一个顶点，修改缓冲区数据，然后清理画布，绘制顶点setTimeout(() => {points.push(-0.2, -0.1)gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(points), gl.STATIC_DRAW)gl.drawArrays(gl.POINTS, 0, 2);}, 1000)// 两秒钟后，清理画布，绘制顶点，绘制线条setTimeout(() => {gl.drawArrays(gl.POINTS, 0, 2);gl.drawArrays(gl.LINE_STRIP, 0, 2);}, 2000)</script>
</body></html>

封装

<!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 defAttr = () => ({gl: null,vertices: [],geoData: [],size: 2,attrName: 'a_Position',count: 0,types: ['POINTS'],})class Poly {constructor(attr) {Object.assign(this, defAttr(), attr)this.init()}init() {const { attrName, size, gl } = thisif (!gl) { return }const vertexBuffer = gl.createBuffer()gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)this.updateBuffer()const a_Position = gl.getAttribLocation(program, attrName)gl.vertexAttribPointer(a_Position, size, gl.FLOAT, false, 0, 0)gl.enableVertexAttribArray(a_Position)}addVertice(...params) {this.vertices.push(...params)this.updateBuffer()}popVertice() {const { vertices, size } = thisconst len = vertices.lengthvertices.splice(len - size, len)this.updateCount()}setVertice(ind, ...params) {const { vertices, size } = thisconst i = ind * sizeparams.forEach((param, paramInd) => {vertices[i + paramInd] = param})}updateBuffer() {const { gl, vertices } = thisthis.updateCount()gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW)}updateCount() {this.count = this.vertices.length / this.size}updateVertices(params) {const { geoData } = thisconst vertices = []geoData.forEach(data => {params.forEach(key => {vertices.push(data[key])})})this.vertices = vertices}draw(types = this.types) {const { gl, count } = thisfor (let type of types) {gl.drawArrays(gl[type], 0, count);}}}const poly = new Poly({gl,vertices: [0, 0.2]})poly.draw(['POINTS'])setTimeout(() => {poly.addVertice(-0.2, -0.1)poly.draw(['POINTS'])}, 1000)setTimeout(() => {poly.draw(['POINTS', 'LINE_STRIP'])}, 2000)</script>
</body></html>

根据鼠标点击绘制点和线

<!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"></canvas><script>const webgl = document.getElementById('webgl')webgl.width = window.innerWidthwebgl.height = window.innerHeightconst 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 defAttr = () => ({gl: null,vertices: [],geoData: [],size: 2,attrName: 'a_Position',count: 0,types: ['POINTS'],})class Poly {constructor(attr) {Object.assign(this, defAttr(), attr)this.init()}init() {const { attrName, size, gl } = thisif (!gl) { return }const vertexBuffer = gl.createBuffer()gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)this.updateBuffer()const a_Position = gl.getAttribLocation(program, attrName)gl.vertexAttribPointer(a_Position, size, gl.FLOAT, false, 0, 0)gl.enableVertexAttribArray(a_Position)}addVertice(...params) {this.vertices.push(...params)this.updateBuffer()}popVertice() {const { vertices, size } = thisconst len = vertices.lengthvertices.splice(len - size, len)this.updateCount()}setVertice(ind, ...params) {const { vertices, size } = thisconst i = ind * sizeparams.forEach((param, paramInd) => {vertices[i + paramInd] = param})}updateBuffer() {const { gl, vertices } = thisthis.updateCount()gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW)}updateCount() {this.count = this.vertices.length / this.size}updateVertices(params) {const { geoData } = thisconst vertices = []geoData.forEach(data => {params.forEach(key => {vertices.push(data[key])})})this.vertices = vertices}draw(types = this.types) {const { gl, count } = thisfor (let type of types) {gl.drawArrays(gl[type], 0, count);}}}const poly = new Poly({gl,types: ['POINTS', 'LINE_STRIP']})webgl.addEventListener('click', (e) => {// 获取鼠标距离视口尺寸的距离const { clientX, clientY } = e// 获取cavans坐标宽高，距离视口尺寸的距离const { left, top, width, height } = webgl.getBoundingClientRect()// 鼠标在canvas中的位置const [cssX, cssY] = [clientX - left, clientY - top]// canvas坐标转webgl坐标// canvas画布的中心位置const [halfWidth, halfHeight] = [width / 2, height / 2]// 鼠标基于webgl坐标的中心位置const [xBaseCenter, yBaseCenter] = [cssX - halfWidth, cssY - halfHeight]// 解决y方向的差异const yBaseCenterTop = -yBaseCenter// 解决坐标基底的差异const [x, y] = [xBaseCenter / halfWidth, yBaseCenterTop / halfHeight]poly.addVertice(x, y)poly.draw()})</script>
</body></html>

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

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

相关文章

redis的简单操作

redis的简单操作

redis中string的操作 安装 下载可视化软件&#xff1a;https://gitee.com/qishibo/AnotherRedisDesktopManager/releases。 Mac安装redis&#xff1a; brew install redisWindows安装redis: 安装包下载地址&#xff1a;https://github.com/tporadowski/redis/releases 1.…
阅读更多...
C++:类和对象(上)

C++:类和对象(上)

1.类的引入 C语言结构体中只能定义变量&#xff0c;在C中&#xff0c;结构体内不仅可以定义变量&#xff0c;也可以定义函数&#xff0c;同时C引入class关键字来也能实现这一作用&#xff0c;C更喜欢用class class/struct Stack {int * _array;size_t _capacity;size_t _size…
阅读更多...
3.5、文本显示（Text/Span）

3.5、文本显示（Text/Span）

创建文本 Text 可通过以下两种方式来创建： string 字符串 效果图 Text(我是一段文本)引用 Resource 资源 资源引用类型可以通过 $r 创建 Resource 类型对象，文件位置为 /resources/base/element/string.json。 引用的资源位于：src/main/resources/base/element/string…
阅读更多...
海外仓订单管理存在哪些问题？利用位像素海外仓系统能提升订单管理效率吗？

海外仓订单管理存在哪些问题？利用位像素海外仓系统能提升订单管理效率吗？

随着跨境电商业务的蓬勃发展&#xff0c;海外仓的订单量日益攀升&#xff0c;在海外仓的运作中&#xff0c;订单管理是一项看似简单实则复杂繁琐的任务。 然而&#xff0c;大批量订单的涌入&#xff0c;让其管理背后隐藏的问题也随机出现。让我们一起来看看有哪些问题吧&#…
阅读更多...
一二三应用开发平台使用手册——系统管理-组织机构-使用说明

一二三应用开发平台使用手册——系统管理-组织机构-使用说明

概述 平台文档是平台的重要组成部分&#xff0c;这块容易被忽视或不被重视。即使一个平台或系统架构优秀、设计合理、代码优雅&#xff0c;但文档缺失&#xff0c;对于平台的使用方而言&#xff0c;熟悉成本高、难度大。不可避免存在疑问&#xff0c;需要动手尝试验证或翻看源…
阅读更多...
（表征学习论文阅读）A Simple Framework for Contrastive Learning of Visual Representations

（表征学习论文阅读）A Simple Framework for Contrastive Learning of Visual Representations

Chen T, Kornblith S, Norouzi M, et al. A simple framework for contrastive learning of visual representations[C]//International conference on machine learning. PMLR, 2020: 1597-1607. 1. 前言 本文作者为了了解对比学习是如何学习到有效的表征&#xff0c;对本文所…
阅读更多...
LeetCode题练习与总结：螺旋矩阵Ⅱ--59

LeetCode题练习与总结：螺旋矩阵Ⅱ--59

一、题目描述 给你一个正整数 n &#xff0c;生成一个包含 1 到 n^2 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;[[1,2,3],[8,9,4],[7,6,5]]示例 2&#xff1a; 输入&#xff1…
阅读更多...
VMware启动显示“打开虚拟机时出错: 获取该虚拟机的所有权失败”

VMware启动显示“打开虚拟机时出错: 获取该虚拟机的所有权失败”

提示框&#xff08;忘截图了&#xff09;里提示目录C:\Users\mosep\Documents\Virtual Machines\VM-Win10 x64\中的某个文件&#xff08;在我这里好像是VM-Win10 x64.vmx&#xff0c;VM-Win10 x64是我给虚拟机取的名字&#xff09;在被使用中。 找到这个目录&#xff0c;删除.…
阅读更多...
【面试题】如何在亿级别用户中检查用户名是否存在？

【面试题】如何在亿级别用户中检查用户名是否存在？

前言 不知道大家有没有留意过&#xff0c;在使用一些app或者网站注册的时候&#xff0c;提示你用户名已经被占用了&#xff0c;比如我们熟知的《英雄联盟》有些人不知道取啥名字&#xff0c;干脆就叫“不知道取啥名”。 但是有这样困惑的可不止他一个&#xff0c;于是就出现了“…
阅读更多...
如何从应用商店Microsoft Store免费下载安装HEVC视频扩展插件

如何从应用商店Microsoft Store免费下载安装HEVC视频扩展插件

在电脑上打开一张HEIC类型的图片提示缺少HEVC解码器&#xff0c;无法打开查看&#xff0c;现象如下&#xff1a; 这种情况一般会提示我们需要下载安装HEVC解码器&#xff0c;点击“立即下载并安装”会跳转到应用商店&#xff0c;但是我们发现需要付费7元才能下载安装 免费安装…
阅读更多...
6. Z 字形变换(Java)

6. Z 字形变换(Java)

目录 题目描述&#xff1a;输入&#xff1a;输出&#xff1a;代码实现&#xff1a; 题目描述&#xff1a; 将一个给定字符串 s 根据给定的行数 numRows &#xff0c;以从上往下、从左到右进行 Z 字形排列。 比如输入字符串为 “PAYPALISHIRING” 行数为 3 时&#xff0c;排列如…
阅读更多...
mac | Windows 本地部署 Seata2.0.0，Nacos 作为配置中心、注册中心，MySQL 存储信息

mac | Windows 本地部署 Seata2.0.0，Nacos 作为配置中心、注册中心，MySQL 存储信息

1、本人环境介绍 系统 macOS sonama 14.1.1 MySQL 8.2.0 &#xff08;官方默认是5.7版本&#xff09; Seata 2.0.0 Nacos 2.2.3 2、下载&数据库初始化 默认你已经有 Nacos、MySQL&#xff0c;如果没有 Nacos 请参考我的文章 &#xff1a; Docker 部署 Nacos&#xff08;单机…
阅读更多...
订阅edk2社区邮件列表

订阅edk2社区邮件列表

给社区发邮件步骤 UEFI订阅邮件列表 开发者订阅邮箱 develedk2.groups.io | Home 点击Join This Group&#xff0c;按照步骤填写自己邮箱地址&#xff08;该地址是edk2,发送邮件到该邮箱的地址&#xff09; 自己邮箱确认就可以自动收到邮件了 比如&#xff1a;
阅读更多...
虚拟串口工具vspd.exe的使用

虚拟串口工具vspd.exe的使用

关于vspd虚拟串口工具的获取&#xff1a; 工具下载 &#xff08;1、 虚拟串口工具官方下载链接 2、通过本文资源下载&#xff09;工具按照步骤&#xff08;过于简单&#xff0c;此处省略&#xff09; 关于vspd虚拟串口工具的使用&#xff1a; 打开软件&#xff0c;如下&…
阅读更多...
Ethernet 汇总

Ethernet 汇总

Ethernet系统 硬件最小系统 CPU：可以是复杂的芯片，也可以是小的单片机DMA：用于减轻CPU负担，搬运数据系统Memory<->FIFOMAC：可以集成在芯片里面，用于CPU和PHY之间的通信MII：接口用于MAC和PHY的通信，包括控制MDIO和数据DataPHY：模拟器件，最底层，数据收发源头软件…
阅读更多...
本地电脑渲染不行怎么解决?自助式渲染助你渲染无忧

本地电脑渲染不行怎么解决?自助式渲染助你渲染无忧

有时候&#xff0c;即使购买了昂贵的新电脑&#xff0c;我们也可能会遇到渲染速度缓慢、画质不佳或渲染失败等问题。这些问题可能由多种因素引起。针对该问题&#xff0c;为大家推荐了自助式的渲染&#xff0c;解决你本地电脑渲染不佳问题。 电脑渲染不行原因 新电脑渲染效果不…
阅读更多...
为什么企业推广需要品牌故事？媒介盒子分享

为什么企业推广需要品牌故事？媒介盒子分享

从时代来看&#xff0c;我们正处“信息超载的商业时代”&#xff0c;品牌传播面临着“产品同质化”和“信息超载化”的困境。近日小米SU7的出圈除了汽车本身的话题度外&#xff0c;离不开小米的品牌故事、创始人雷军的话题等等。今天媒介盒子就来和大家聊聊&#xff1a;为什么企…
阅读更多...
postgresql发布和订阅

postgresql发布和订阅

一、发布订阅介绍 发布和订阅使用了pg的逻辑复制的功能&#xff0c;通过发布端创建publication与表绑定&#xff0c;订阅端创建subscription同时会在发布端创建逻辑复制槽实现逻辑复制功能 逻辑复制基于 发布&#xff08;Publication&#xff09; 与 订阅&#xff08;Subscri…
阅读更多...
【go】模板展示不同k8s命名空间的deployment

【go】模板展示不同k8s命名空间的deployment

gin模板展示k8s命名空间的资源 这里学习如何在前端单页面&#xff0c;调用后端接口展示k8s的资源 技术栈 后端 -> go -> gin -> gin模板前端 -> gin模板 -> html jsk8s -> k8s-go-client &#xff0c;基本资源(deployment等) 环境 go 1.19k8s 1.23go m…
阅读更多...
Centos7 安装GitLab

Centos7 安装GitLab

安装环境： 虚拟机：Centos7 最小安装 4核8G 下载GitLab 本次实验下载的是 gitlab-ce-14.1.0-ce.0.el7.x86_64.rpm 官网截图 清华源截图 安装包下载地址(官网；下载CE版本，EE是收费版本)：https://packages.gitlab.com/gitlab/gitlab-ce国内镜像源下载地址(清华源)：htt…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023