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

WEBGL（3）：鼠标动态绘制点

news 2026/3/31 9:10:51

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&…...

编程日记 2023/9/2 9:48:40

Sass基础

Sass基础 简介 Sass是一种stylesheet语言&#xff0c;可以被编译成CSS。Sass允许你使用诸如variabels&#xff0c;nested rules&#xff0c;mixins&#xff0c;functions等等语法&#xff0c;这些都将在本篇的接下来进行讲解。 因为之前一直学的后端&#xff0c;前端只是因为…...

编程日记 2023/9/2 9:47:39

Java中的消息队列有哪些?

在Java中&#xff0c;有几种常见的消息队列实现&#xff0c;包括&#xff1a; Apache Kafka&#xff1a;一个分布式流处理平台&#xff0c;具有高吞吐量、可持久化、可扩展等特点。 RabbitMQ&#xff1a;一个开源的消息代理&#xff0c;实现了AMQP&#xff08;高级消息队列协议…...

编程日记 2023/9/2 9:46:38

多维时序 | Matlab实现GRU-Adaboost和GRU多变量时间序列预测对比

多维时序 | Matlab实现GRU-Adaboost和GRU多变量时间序列预测对比 目录 多维时序 | Matlab实现GRU-Adaboost和GRU多变量时间序列预测对比预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 多维时序 | Matlab实现GRU-Adaboost和GRU多变量时间序列预测对比 模型描述 M…...

编程日记 2023/9/2 9:45:38

测试用例编写规范参考

章节目录&#xff1a; 一、规范目的二、模块划分三、颗粒度规范四、编写规范五、具体分项5.1 用例标题5.2 前置条件5.3 操作步骤5.4 预期结果 六、用例维护七、结束语 一、规范目的 规范合理&#xff0c;可执行性。一定要保证高可读性。 二、模块划分 同级别、同等级功能点。…...

编程日记 2023/9/2 9:44:36

unity3d：功能验证，收集开源项目的工程合集

unity3d功能验证&#xff0c;和收集开源项目的工程合集 目录持续更新地址 【腾讯文档】UnityForTest目录 https://docs.qq.com/doc/DWm9HSkVhTGdyUUVo 源码 https://github.com/luoyikun/UnityForTest 动画 创建骨骼动画 BoneAnimation场景 代码创建Mesh&#xff0c;骨骼…...

编程日记 2023/9/2 9:43:35

plotly_beforehover 用法：

在Plotly.js中&#xff0c;plotly_beforehover是在鼠标悬停在数据点上之前触发的回调事件。它的主要作用是在鼠标悬停事件发生前做一些准备工作。 plotly_beforehover事件是与图表对象绑定的&#xff0c;可以通过调用on方法来绑定事件处理程序。下面是一个示例代码&#xff1a…...

编程日记 2023/9/2 9:42:34

利用 AI 赋能云安全，亚马逊云科技的安全技术创新服务不断赋能开发者

文章分享自亚马逊云科技 Community Builder&#xff1a;李少奕 2023年6月14日&#xff0c;一年一度的亚马逊云科技 re:Inforce 全球大会在美国安纳海姆落下了帷幕。re:Inforce 是亚马逊云科技全球最大的盛会之一&#xff0c;汇集了来自全球各地的安全专家&#xff0c;共同学习、…...

编程日记 2023/9/2 9:41:33

18. 填坑Ⅰ

Description 又是北湖深坑&#xff0c;惊不惊喜&#xff0c;意不意外&#xff1f;&#xff01; 觉得用水填湖太没意思了&#xff0c;用石头填坑多有意思。 假设北湖的地面还是一维的&#xff0c;每一块宽度都为1&#xff0c;高度是非负整数&#xff0c;用一个数组来表示。 现提…...

编程日记 2023/9/2 9:40:31

CSS 实现平面圆点绕椭圆动画

前言 &#x1f44f;CSS实现平面圆点绕椭圆动画,速速来Get吧~ &#x1f947;文末分享源代码。记得点赞关注收藏&#xff01; 1.实现效果 2.实现原理 transform-style&#xff1a;CSS 属性 transform-style 设置元素的子元素是位于 3D 空间中还是平面中。如果选择平面&#xf…...

编程日记 2023/9/2 9:39:30

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 …...

编程日记 2023/9/2 9:38:29

金蝶云星空二开，插件查看工具

可查询单据上挂载的系统原有插件、二开插件及插件类型 1.支持模糊查询单据列表 2.支持项目与账套二开插件对比 3.支持金蝶不同账套之间对比差异 操作步骤&#xff1a; 1.登陆界面&#xff0c;选择金蝶云管理中心账套登录获取账套列表&#xff1b; 2.单一标识查询&#xff1a;…...

编程日记 2023/9/2 9:37:28

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 文件。 可以看到这个文件有一个…...

编程日记 2023/9/2 9:36:27

介绍 Apache Spark 的基本概念和在大数据分析中的应用。

Apache Spark 是一个快速的开源大数据处理引擎&#xff0c;可以用于大数据处理、机器学习、图形计算等领域。它可以在多种计算环境中运行&#xff0c;包括独立模式、YARN、Mesos、Kubernetes等云计算平台。 Spark基于RDD&#xff08;Resilient Distributed Datasets&#xff0…...

编程日记 2023/9/2 9:35:26

Java设计模式：四、行为型模式-09：模板模式

文章目录 一、定义&#xff1a;模板模式二、模拟场景&#xff1a;模板模式三、改善代码&#xff1a;模板模式3.0 引入依赖3.1 工程结构3.2 模板模式结构图3.3 爬取商品生成海报实现3.3.1 HTTP获取连接类3.3.2 定义执行顺序的抽象类3.3.3 当当爬取抽象实现类3.3.4 京东爬取抽象实…...

编程日记 2023/9/2 9:34:25

【前端】Vue2 脚手架模块化开发 -快速入门

&#x1f384;欢迎来到边境矢梦的csdn博文&#x1f384; &#x1f384;本文主要梳理Vue2 脚手架模块化开发 &#x1f384; &#x1f308;我是边境矢梦&#xff0c;一个正在为秋招和算法竞赛做准备的学生&#x1f308; &#x1f386;喜欢的朋友可以关注一下&#x1faf0;&#x…...

编程日记 2023/9/2 9:33:23

【广州华锐互动】AR昆虫认知学习系统实现对昆虫形态的捕捉和还原

随着科技的不断发展&#xff0c;人们对自然界的认识也在不断加深。在这个过程中&#xff0c;AR&#xff08;增强现实&#xff09;技术的出现为人们带来了全新的体验方式。为此&#xff0c;广州华锐互动开发了AR昆虫认知学习系统&#xff0c;本文将为大家详细介绍这款系统的特点…...

编程日记 2023/9/2 9:32:22

nginx压缩ttf文件 mine.types的作用

最近在运维过程中&#xff0c;前端提到发现在linux上下载某ttl文件&#xff08;字体文件&#xff09;太大&#xff0c;传输过程比较慢&#xff0c;于是就想着使用nginx的gzip进行压缩&#xff0c;经过不断尝试&#xff0c;终于发现在nginx的配置目录/etc/nginx/mine.types 文件…...

编程日记 2023/9/2 9:31:20

【云原生】Kubernetes容器编排工具

目录 1. K8S介绍 1.1 k8s的由来 下载地址 1.2 docker编排与k8s编排相比 1.3 传统后端部署与k8s 的对比 传统部署 k8s部署 ​2. k8s的集群架构与组件 &#xff08;1&#xff09; Kube-apiserver &#xff08;2&#xff09;Kube-controller-manager &#xff08;3&a…...

编程日记 2023/9/2 9:30:19

【Css】Less和Sass的区别:

文章目录 一、定义&#xff1a;【1】Less【2】Sass 二、相同之处:三、区别:【1】实现方式&#xff1a;【2】实现方式&#xff1a;【3】混合(Mixins)&#xff1a;【4】解析方式&#xff1a;【5】变量的作用域&#xff1a;【6】比起Less 一、定义&#xff1a; 【1】Less Less 是…...

编程日记 2023/9/2 9:29:18

ROS2 Humble下，如何用MoveIt! Action接口让机械臂“听话”？一个抓取demo的完整复盘

ROS2 Humble下机械臂精准控制实战&#xff1a;从MoveIt! Action接口到完整抓取任务 在工业自动化和服务机器人领域&#xff0c;机械臂的精准运动控制一直是核心挑战。ROS2 Humble版本中的MoveIt!框架为这一挑战提供了优雅的解决方案&#xff0c;而理解其Action接口的运作机制则…...

编程新知 2026/3/31 9:09:55

Bilibili-Evolved性能优化实战：突破60fps流畅播放全解析

Bilibili-Evolved性能优化实战&#xff1a;突破60fps流畅播放全解析 【免费下载链接】Bilibili-Evolved 强大的哔哩哔哩增强脚本 项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved Bilibili-Evolved作为强大的哔哩哔哩增强脚本&#xff0c;通过深度优化浏…...

编程新知 2026/3/31 9:07:54

Git-RSCLIP真实场景测试：城市新区地物分类，住宅区识别效果惊艳

Git-RSCLIP真实场景测试&#xff1a;城市新区地物分类&#xff0c;住宅区识别效果惊艳 1. 模型背景与核心能力 Git-RSCLIP是北航团队基于SigLIP架构专门开发的遥感图像理解模型&#xff0c;在1000万对遥感图文数据集(Git-10M)上进行了深度预训练。与通用视觉模型不同&#xf…...

编程新知 2026/3/31 7:59:26

Janus-Pro-7B入门编程教学：从零开始学习C语言文件读写操作

Janus-Pro-7B入门编程教学&#xff1a;从零开始学习C语言文件读写操作 你是不是刚开始学C语言&#xff0c;一看到文件操作就觉得头大&#xff1f;fopen、fwrite、fread这些函数名字看着就复杂&#xff0c;更别提什么文件指针、缓冲区这些概念了。别担心&#xff0c;这感觉我懂…...

编程新知 2026/3/31 7:35:23

忍者像素绘卷镜像免配置：一键切换‘天界画坊’/‘木叶村’双主题UI

忍者像素绘卷镜像免配置&#xff1a;一键切换天界画坊/木叶村双主题UI 1. 产品概述 忍者像素绘卷是一款专为像素艺术创作者设计的图像生成工作站&#xff0c;基于Z-Image-Turbo深度优化引擎开发。这款工具将传统忍者文化与现代AI技术完美结合&#xff0c;创造出独特的16-Bit复…...

编程新知 2026/3/31 6:42:52

工业质检实战：用Real-IAD D³的‘伪3D’光度立体数据，搞定MVTec搞不定的细微划痕

工业质检实战&#xff1a;用Real-IAD D的‘伪3D’光度立体数据&#xff0c;搞定MVTec搞不定的细微划痕 在精密制造领域&#xff0c;金属表面0.1mm级的发丝划痕往往成为质检工程师的噩梦。传统2D视觉系统受限于平面成像原理&#xff0c;对这类微观三维形变束手无策&#xff1b;而…...

编程新知 2026/3/31 6:02:32

3个关键场景与4步操作：深入解析RevokeMsgPatcher防撤回工具的技术实现与应用实践

3个关键场景与4步操作&#xff1a;深入解析RevokeMsgPatcher防撤回工具的技术实现与应用实践 【免费下载链接】RevokeMsgPatcher :trollface: A hex editor for WeChat/QQ/TIM - PC版微信/QQ/TIM防撤回补丁&#xff08;我已经看到了&#xff0c;撤回也没用了&#xff09; 项目…...

编程新知 2026/3/31 5:38:24

MedGemma-1.5-4B多模态对齐效果：影像区域定位与对应文本描述精准匹配示例

MedGemma-1.5-4B多模态对齐效果&#xff1a;影像区域定位与对应文本描述精准匹配示例 1. 引言&#xff1a;当AI“看懂”医学影像 想象一下&#xff0c;你是一位医学研究者&#xff0c;面对一张复杂的胸部X光片&#xff0c;你想知道&#xff1a;“图像中左肺上叶的阴影是什么&…...

编程新知 2026/3/31 4:21:08

Mask2Former性能对比分析：R50到Swin-L各主干网络的优劣选择

Mask2Former性能对比分析&#xff1a;R50到Swin-L各主干网络的优劣选择 【免费下载链接】Mask2Former Code release for "Masked-attention Mask Transformer for Universal Image Segmentation" 项目地址: https://gitcode.com/gh_mirrors/ma/Mask2Former Ma…...

编程新知 2026/3/31 4:21:08

别只盯着Web日志！一次Windows服务器被黑，我是这样用系统日志和FTP记录挖出攻击链的

从Windows系统日志到FTP记录&#xff1a;一次完整的服务器入侵溯源实战 深夜的应急响应中心&#xff0c;刺眼的告警提示打破了宁静。大多数安全工程师的第一反应是打开Web访问日志开始排查——这几乎成了行业条件反射。但真实攻击往往发生在你最意想不到的角落。上周处理的一起…...

编程新知 2026/3/31 3:16:16