WEBGL（3）：鼠标动态绘制点
1 实现思路
- 绘制单个点
- 鼠标事件监听点击事件
- 将点推送到数组中
- 绘制数组中所有点
2 实现代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/glMatrix-0.9.6.min.js"></script><script>let vertexstring = `attribute vec3 a_position;uniform mat4 proj;void main(void){gl_Position = vec4(a_position,1.0) ;gl_PointSize=60.0;}`;let fragmentstring = `precision mediump float;void main(void){gl_FragColor = vec4(0.0,0.0,1.0,1.0);}`;var projMat4 = mat4.create();var webgl;function init() {initWebgl();initShader();initBuffer();draw();}function initWebgl() {let webglDiv = document.getElementById('myCanvas');webgl = webglDiv.getContext("webgl");webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight);mat4.ortho(0, webglDiv.clientWidth, webglDiv.clientHeight, 0, -1.0, 1.0, projMat4)}function initShader() {let vsshader = webgl.createShader(webgl.VERTEX_SHADER);let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER);webgl.shaderSource(vsshader, vertexstring);webgl.shaderSource(fsshader, fragmentstring);webgl.compileShader(vsshader);webgl.compileShader(fsshader);if (!webgl.getShaderParameter(vsshader, webgl.COMPILE_STATUS)) {var err = webgl.getShaderInfoLog(vsshader);alert(err);return;}if (!webgl.getShaderParameter(fsshader, webgl.COMPILE_STATUS)) {var err = webgl.getShaderInfoLog(fsshader);alert(err);return;}let program = webgl.createProgram();webgl.attachShader(program, vsshader);webgl.attachShader(program, fsshader)webgl.linkProgram(program);webgl.useProgram(program);webgl.program = program}var points = [];var colors=[];function initBuffer() {let aPsotion = webgl.getAttribLocation(webgl.program, "a_position");document.addEventListener("mousedown", function (e) {debuggerlet x = e.clientX;let y = e.clientY;let rect = e.target.getBoundingClientRect();let pointx = ((x - rect.left) - 512) / 512;//let pointy = -((y - rect.top) - 350) / 350;let pointy = (350 - (y - rect.top)) / 350;points.push(pointx);points.push(pointy);points.push(0);let pointPosition = new Float32Array(points);//创建缓冲区let pointBuffer = webgl.createBuffer();webgl.bindBuffer(webgl.ARRAY_BUFFER, pointBuffer);webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW);webgl.enableVertexAttribArray(aPsotion);webgl.vertexAttribPointer(aPsotion, 3, webgl.FLOAT, false, 0, 0);webgl.clearColor(0.0, 0.0, 0.0, 1.0);webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);webgl.drawArrays(webgl.POINTS, 0, points.length / 3);})let uniformProj = webgl.getUniformLocation(webgl.program, "proj");webgl.uniformMatrix4fv(uniformProj, false, projMat4);}function draw() {webgl.clearColor(0.0, 0.0, 0.0, 1.0);webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);}</script>
</head><body onload="init()"><canvas id='myCanvas' width="1024" height='700'></canvas>
</body></html>3 实现效果
鼠标点击加载图像
相关文章：
WEBGL（3）：鼠标动态绘制点
1 实现思路 绘制单个点鼠标事件监听点击事件将点推送到数组中绘制数组中所有点 2 实现代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge&…...
Sass基础
Sass基础 简介 Sass是一种stylesheet语言，可以被编译成CSS。Sass允许你使用诸如variabels，nested rules，mixins，functions等等语法，这些都将在本篇的接下来进行讲解。 因为之前一直学的后端，前端只是因为…...
Java中的消息队列有哪些?
在Java中，有几种常见的消息队列实现，包括： Apache Kafka：一个分布式流处理平台，具有高吞吐量、可持久化、可扩展等特点。 RabbitMQ：一个开源的消息代理，实现了AMQP（高级消息队列协议…...
多维时序 | Matlab实现GRU-Adaboost和GRU多变量时间序列预测对比
多维时序 | Matlab实现GRU-Adaboost和GRU多变量时间序列预测对比 目录 多维时序 | Matlab实现GRU-Adaboost和GRU多变量时间序列预测对比预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 多维时序 | Matlab实现GRU-Adaboost和GRU多变量时间序列预测对比 模型描述 M…...
测试用例编写规范参考
章节目录： 一、规范目的二、模块划分三、颗粒度规范四、编写规范五、具体分项5.1 用例标题5.2 前置条件5.3 操作步骤5.4 预期结果 六、用例维护七、结束语 一、规范目的 规范合理，可执行性。一定要保证高可读性。 二、模块划分 同级别、同等级功能点。…...
unity3d：功能验证，收集开源项目的工程合集
unity3d功能验证，和收集开源项目的工程合集 目录持续更新地址 【腾讯文档】UnityForTest目录 https://docs.qq.com/doc/DWm9HSkVhTGdyUUVo 源码 https://github.com/luoyikun/UnityForTest 动画 创建骨骼动画 BoneAnimation场景 代码创建Mesh，骨骼…...
plotly_beforehover 用法：
在Plotly.js中，plotly_beforehover是在鼠标悬停在数据点上之前触发的回调事件。它的主要作用是在鼠标悬停事件发生前做一些准备工作。 plotly_beforehover事件是与图表对象绑定的，可以通过调用on方法来绑定事件处理程序。下面是一个示例代码：…...
利用 AI 赋能云安全，亚马逊云科技的安全技术创新服务不断赋能开发者
文章分享自亚马逊云科技 Community Builder：李少奕 2023年6月14日，一年一度的亚马逊云科技 re:Inforce 全球大会在美国安纳海姆落下了帷幕。re:Inforce 是亚马逊云科技全球最大的盛会之一，汇集了来自全球各地的安全专家，共同学习、…...
18. 填坑Ⅰ
Description 又是北湖深坑，惊不惊喜，意不意外？！ 觉得用水填湖太没意思了，用石头填坑多有意思。 假设北湖的地面还是一维的，每一块宽度都为1，高度是非负整数，用一个数组来表示。 现提…...
CSS 实现平面圆点绕椭圆动画
前言 👏CSS实现平面圆点绕椭圆动画,速速来Get吧~ 🥇文末分享源代码。记得点赞关注收藏！ 1.实现效果 2.实现原理 transform-style：CSS 属性 transform-style 设置元素的子元素是位于 3D 空间中还是平面中。如果选择平面…...
docker login : x509: certificate signed by unknown authority
一. 背景 docker login 登录harbor镜像仓库报错. [rootmaster01 sloth]# docker login docker.harbor.master01.com Username: bigdata Password: Error response from daemon: Get https://docker.harbor.master01.com/v2/: x509: certificate signed by unknown authority …...
金蝶云星空二开，插件查看工具
可查询单据上挂载的系统原有插件、二开插件及插件类型 1.支持模糊查询单据列表 2.支持项目与账套二开插件对比 3.支持金蝶不同账套之间对比差异 操作步骤： 1.登陆界面，选择金蝶云管理中心账套登录获取账套列表； 2.单一标识查询：…...
error: ‘std::_hypot‘ has not been declared using std::hypot；
Cmake 使用qt的编译器 编译opencv时 执行mingw32-make时出现了错误 本质原因就是 _hypot 没有声明。所以找到对应的文件声明一下 就行了。 E:\*****\Qt5.14.1\Tools\mingw730_64\lib\gcc\x86_64-w64-mingw32\7.3.0\include\c 下面的math.h 文件。 可以看到这个文件有一个…...
介绍 Apache Spark 的基本概念和在大数据分析中的应用。
Apache Spark 是一个快速的开源大数据处理引擎，可以用于大数据处理、机器学习、图形计算等领域。它可以在多种计算环境中运行，包括独立模式、YARN、Mesos、Kubernetes等云计算平台。 Spark基于RDD（Resilient Distributed Datasets࿰…...
Java设计模式：四、行为型模式-09：模板模式
文章目录 一、定义：模板模式二、模拟场景：模板模式三、改善代码：模板模式3.0 引入依赖3.1 工程结构3.2 模板模式结构图3.3 爬取商品生成海报实现3.3.1 HTTP获取连接类3.3.2 定义执行顺序的抽象类3.3.3 当当爬取抽象实现类3.3.4 京东爬取抽象实…...
【前端】Vue2 脚手架模块化开发 -快速入门
🎄欢迎来到边境矢梦的csdn博文🎄 🎄本文主要梳理Vue2 脚手架模块化开发 🎄 🌈我是边境矢梦，一个正在为秋招和算法竞赛做准备的学生🌈 🎆喜欢的朋友可以关注一下🫰&#x…...
【广州华锐互动】AR昆虫认知学习系统实现对昆虫形态的捕捉和还原
随着科技的不断发展，人们对自然界的认识也在不断加深。在这个过程中，AR（增强现实）技术的出现为人们带来了全新的体验方式。为此，广州华锐互动开发了AR昆虫认知学习系统，本文将为大家详细介绍这款系统的特点…...
nginx压缩ttf文件 mine.types的作用
最近在运维过程中，前端提到发现在linux上下载某ttl文件（字体文件）太大，传输过程比较慢，于是就想着使用nginx的gzip进行压缩，经过不断尝试，终于发现在nginx的配置目录/etc/nginx/mine.types 文件…...
【云原生】Kubernetes容器编排工具
目录 1. K8S介绍 1.1 k8s的由来 下载地址 1.2 docker编排与k8s编排相比 1.3 传统后端部署与k8s 的对比 传统部署 k8s部署 2. k8s的集群架构与组件 （1） Kube-apiserver （2）Kube-controller-manager （3&a…...
【Css】Less和Sass的区别:
文章目录 一、定义：【1】Less【2】Sass 二、相同之处:三、区别:【1】实现方式：【2】实现方式：【3】混合(Mixins)：【4】解析方式：【5】变量的作用域：【6】比起Less 一、定义： 【1】Less Less 是…...
英特尔现代代码开发挑战：实战性能优化与工具链应用指南
1. 项目概述：一场面向开发者的实战演练最近深度参与并复盘了英特尔举办的“现代代码开发挑战”网络研讨会，感触颇深。这远不止是一场普通的技术分享会，而是一个精心设计的、让开发者亲手“触摸”现代硬件性能潜力的实战沙盒。如果你是一名C/C…...
在CentOS7服务器上装Win10双系统，我踩过的坑和保姆级避坑指南
在CentOS7服务器上部署Win10双系统的实战避坑指南 当开发环境需要同时运行Linux服务与Windows专属应用时，双系统成为刚需。但服务器与家用PC的硬件架构差异，会让安装过程暗藏无数"深坑"。本文将分享我在生产环境中为戴尔PowerEdge R740服务器部…...
调查研究-142 全球机器人产业深度调研报告【04篇】机器人产业利润池全景：谁最容易赚钱与十大判断指标
TL;DR 场景：关注机器人产业投资、创业、就业方向的投资者、从业者、分析师结论：医疗机器人耗材/服务>高端核心零部件>系统集成>物流RaaS>工业本体>软件AI平台；人形机器人长期空间大但短期商业化仍早产出：三档利润池…...
植入式网络广告效果影响因素及投放决策优化【附代码】
✨ 长期致力于植入式网络广告效果、产品植入形态、广告呈现方式、载具属性、品牌知名度研究工作，擅长数据搜集与处理、建模仿真、程序编写、仿真设计。 ✅ 专业定制毕设、代码 ✅ 如需沟通交流，点击《获取方式》 （1）多因素交互实验…...
什么，锐捷极简以太彩光一张网竟然有两幅面孔？
在园区网络的建设中，我们常常面临一个两难选择：教学或办公楼需要大带宽，宿舍或病房楼需要弹性带宽。如果分别建两张网，成本翻倍、运维复杂。 锐捷极简以太彩光方案给出的答案是：一张物理网络，同时融合两种…...
Ubuntu 18.04环境下小米K30U内核编译实战与排错指南
1. 项目概述与核心价值最近在折腾一台小米K30U，想给它刷个自定义内核，体验一下超频或者优化调度。但网上的教程要么是针对新机型，要么就是环境配置说得不清不楚，特别是对于Ubuntu 18.04这个已经有点“年迈”但依然稳定的系统版本&…...
原神抽卡数据分析终极指南：免费开源工具助你告别抽卡迷茫
原神抽卡数据分析终极指南：免费开源工具助你告别抽卡迷茫 【免费下载链接】genshin-wish-export Easily export the Genshin Impact wish record. 项目地址: https://gitcode.com/GitHub_Trending/ge/genshin-wish-export 还在为原神抽卡记录无法保存而烦恼吗…...
2026年阿里云OpenClaw/Hermes Agent配置Token Plan部署一文读懂
2026年阿里云OpenClaw/Hermes Agent配置Token Plan部署一文读懂。OpenClaw是开源的个人AI助手，Hermes Agent则是一个能自我进化的AI智能体框架。阿里云提供计算巢、轻量服务器及无影云电脑三种部署OpenClaw 与 Hermes Agent的方案、百炼Token Plan兼容主流 AI 工具&…...
软件测试的安全漏洞挖掘：掌握这3个方法，成为安全测试专家
对于软件测试从业者而言，随着数字化转型的深入，软件系统承载的敏感数据、核心业务不断增加，安全漏洞已经从“可接受的开发瑕疵”变成了威胁业务生存的核心风险。从用户隐私泄露到核心支付系统被攻破，从开源组件漏洞引发的供应链攻…...
代码优化的10个技巧：让你的代码既高效又优雅
对于软件测试从业者而言，编写高质量的测试代码是保障测试效率、提升测试可靠性的核心基础。无论是自动化测试脚本、测试工具开发还是测试框架搭建，臃肿、低效、可读性差的代码不仅会拖慢测试执行速度，还会增加缺陷排查的难度，提升…...