《WebGL编程指南》学习笔记 02、WebGL 用鼠标绘点

已于 2024-07-25 16:09:53 修改
阅读量799 收藏 13
点赞数 7
分类专栏： webgl 着色器 文章标签： webgl
于 2024-07-24 19:31:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36431831/article/details/140668879
版权

我们要用鼠标控制一个点的位置，首先要知道鼠标点在webgl 坐标系中的位置，这样才能让一个点出现在我们鼠标点击的位置。

接下来咱们就说一下如何获取鼠标点在webgl 坐标系中的位置。

1、获取鼠标在WebGL坐标系中的位置

对于鼠标点在webgl 坐标系中的位置，我们是无法直接获取的。所以我们得先获取鼠标在canvas 这个DOM元素中的位置。

1.1 获取鼠标在canvas画布中 css 位置

canvas.addEventListener('click',function(event){
    const {clientX,clientY}=event;
    const {left,top}=canvas.getBoundingClientRect();
    const [cssX,cssY]=[
        clientX-left,
        clientY-top
    ];
})

对于cssX,cssY 的获取，大家应该都不陌生，这在canvas 2d 也会用到。
我们可以用向量减法来求解。
在这里插入图片描述
已知：向量a(clientX,clientY)，向量b(left,top)
求：向量c

解：由向量的减法得：向量a减向量c，等于以向量c 的终点为起点，以向量a的终点为终点的向量c
所以：向量c=a-b=(clientX-left,clientY-top)
将向量c 视之为坐标点c，那点c 就是鼠标在canvas 画布中的css 位。
因为html 坐标系中的坐标原点和轴向与canvas 2d是一致的，所以在我们没有用css 改变画布大小，也没有对其坐标系做变换的情况下，鼠标点在canvas 画布中的css 位就是鼠标点在canvas 2d坐标系中的位置。

2.2 canvas 坐标系转WebGL坐标系

咱们这里的变换思路就是解决差异，接着上面的代码来写。
1.解决坐标原点位置的差异。

const [halfWidth,halfHeight]=[width/2,height/2];
const [xBaseCenter,yBaseCenter]=[cssX-halfWidth,cssY-halfHeight];

上面的[halfWidth,halfHeight]是canvas 画布中心的位置。
[xBaseCenter,yBaseCenter] 是用鼠标位减去canvas 画布的中心位，得到的就是鼠标基于画布中心的位置。

2.解决y 方向的差异。

const yBaseCenterTop=-yBaseCenter;

因为webgl 里的y 轴和canvas 2d 里的y轴相反，所以咱们对yBaseCenter 值取一下反即可。

3.解决坐标基底的差异。

const [x,y]=[xBaseCenter/halfWidth,yBaseCenterTop/halfHeight]

由于canvas 2d 的坐标基底中的两个分量分别是一个像素的宽高，而webgl的坐标基底的两个分量是画布的宽高，所以咱们得求个比值。

整体代码：

canvas.addEventListener('click',function(event){
  const {clientX,clientY}=event;
  const {left,top,width,height}=canvas.getBoundingClientRect();
  const [cssX,cssY]=[
    clientX-left,
    clientY-top
  ];
  const [halfWidth,halfHeight]=[width/2,height/2];
  const [xBaseCenter,yBaseCenter]=[cssX-halfWidth,cssY-halfHeight];
  const yBaseCenterTop=-yBaseCenter;
  const [x,y]=[xBaseCenter/halfWidth,yBaseCenterTop/halfHeight];
})

关于获取鼠标点在webgl 坐标系中的位置的方法，我们就说到这，接下来咱们基于这个位置，修改着色器暴露出来的位置变量即可。

2、修改attribute 变量

这个步骤和第一章的内容是差不多的：

  1. 获取attribute 变量
  2. 在获取鼠标在webgl 画布中的位置的时候，修改attribute 变量
  3. 清理画布
  4. 绘图
import {initShaders} from '../jsm/Utils.js';

const canvas = document.getElementById('canvas');
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
const gl = canvas.getContext('webgl');
const vsSource = document.getElementById('vertexShader').innerText;
const fsSource = document.getElementById('fragmentShader').innerText;
initShaders(gl, vsSource, fsSource);
const a_Position=gl.getAttribLocation(gl.program,'a_Position');
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

canvas.addEventListener('click',function(event){
  const {clientX,clientY}=event;
  const {left,top,width,height}=canvas.getBoundingClientRect();
  const [cssX,cssY]=[
    clientX-left,
    clientY-top
  ];
  const [halfWidth,halfHeight]=[width/2,height/2];
  const [xBaseCenter,yBaseCenter]=[cssX-halfWidth,cssY-halfHeight];
  const yBaseCenterTop=-yBaseCenter;
  const [x,y]=[xBaseCenter/halfWidth,yBaseCenterTop/halfHeight];
  gl.vertexAttrib2f(a_Position,x,y);
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.POINTS, 0, 1);
})

在上面的例子中，大家每点击一次canvas 画布，都会画出一个点，而上一次画的点就会消失，我们无法连续画出多个点。
请添加图片描述
为何会如此呢？我们分析一下。

3、WebGL 的同步绘图原理

具备canvas 2d可能会认为无法画出多点是gl.clear(gl.COLOR_BUFFER_BIT) 清理画布导致，因为我们在用canvas 2d 做动画时，其中就有一个ctx.clearRect() 清理画布的方法。
那咱们将gl.clear() 方法注释掉试试。

3.1 用实践得真知

gl.vertexAttrib2f(a_Position,x,y);
//gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS, 0, 1);

在这里插入图片描述
当我们鼠标点击画布时，画布中原本的黑色已经没有了，而且我们每次也只能画一个点。
我们分析一下。

gl.drawArrays(gl.POINTS, 0, 1) 方法和canvas 2d 里的ctx.draw() 方法是不一样的，ctx.draw() 真的像画画一样，一层一层的覆盖图像。

gl.drawArrays() 方法只会同步绘图，走完了js 主线程后，再次绘图时，就会从头再来。也就说，异步执行的drawArrays() 方法会把画布上的图像都刷掉。

举个栗子：
1.我先画两个点

const a_Position=gl.getAttribLocation(gl.program,'a_Position');
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.vertexAttrib2f(a_Position,0.1,0);
gl.drawArrays(gl.POINTS, 0, 1);
gl.vertexAttrib2f(a_Position,-0.1,0);
gl.drawArrays(gl.POINTS, 0, 1);

在这里插入图片描述
好的，没问题。

2.我想一秒后，再画一个点。

const a_Position=gl.getAttribLocation(gl.program,'a_Position');
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.vertexAttrib2f(a_Position,0.1,0);
gl.drawArrays(gl.POINTS, 0, 1);
gl.vertexAttrib2f(a_Position,-0.1,0);
gl.drawArrays(gl.POINTS, 0, 1);
setTimeout(()=>{
  gl.vertexAttrib2f(a_Position,0,0);
  gl.drawArrays(gl.POINTS, 0, 1);
},1000)

在这里插入图片描述
以前画好的两个点没了，黑色背景也没了。这就是咱们之前说过的webgl 同步绘图原理。

那这个问题如何解决呢？这就是一个简单的逻辑问题了。

3.我们可以用数组把一开始的那两个顶点存起来，在异步绘制第3个顶点的时候，把那两个顶点也一起画上。

const a_Position=gl.getAttribLocation(gl.program,'a_Position');
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
const g_points=[  {x:0.1,y:0},  {x:-0.1,y:0},];
render();
setTimeout(()=>{
  g_points.push({x:0,y:0});
  render();
},1000)
function render(){
  gl.clear(gl.COLOR_BUFFER_BIT);
  g_points.forEach(({x,y})=>{
    gl.vertexAttrib2f(a_Position,x,y);
    gl.drawArrays(gl.POINTS, 0, 1);
  })
}

在这里插入图片描述
这样就可以以叠加覆盖的方式画出第三个点了。

4.理解上面的原理后，那我们接下来就可以用鼠标绘制多个点了。

const a_Position=gl.getAttribLocation(gl.program,'a_Position');
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

const g_points=[];
canvas.addEventListener('click',function(event){
  const {clientX,clientY}=event;
  const {left,top,width,height}=canvas.getBoundingClientRect();
  const [cssX,cssY]=[
    clientX-left,
    clientY-top
  ];
  const [halfWidth,halfHeight]=[width/2,height/2];
  const [xBaseCenter,yBaseCenter]=[cssX-halfWidth,cssY-halfHeight];
  const yBaseCenterTop=-yBaseCenter;
  const [x,y]=[xBaseCenter/halfWidth,yBaseCenterTop/halfHeight];
  g_points.push({x,y});
  gl.clear(gl.COLOR_BUFFER_BIT);
  g_points.forEach(({x,y})=>{
    gl.vertexAttrib2f(a_Position,x,y);
    gl.drawArrays(gl.POINTS, 0, 1);
  })

})

在这里插入图片描述
关于用鼠标控制点位，并绘制多点的方法我们就说到这。咱们最后简单总结一下这个原理。

3.2webgl 同步绘图原理总结

webgl 的同步绘图的现象，其实是由webgl 底层内置的颜色缓冲区导致的。
“胸有成竹”大家知道吧？这个颜色缓冲区就是“胸有成竹”的胸，它在电脑里会占用一块内存。在我们使用webgl 绘图的时候，是先在颜色缓冲区中画出来，这样的图像还在胸中，所以外人看不见，只有webgl系统自己知道。
在我们想要将图像显示出来的时候，那就照着颜色缓冲区中的图像去画，这个步骤是webgl 内部自动完成的，我们只要执行绘图命令即可。
颜色缓冲区中存储的图像，只在当前线程有效。比如我们先在js 主线程中绘图，主线程结束后，会再去执行信息队列里的异步线程。在执行异步线程时，颜色缓冲区就会被webgl 系统重置，我们曾经在主线程里的“胸有成竹”也就没了，既然没了，也就画不出那时的图像了。
webgl 绘图原理我就说到这。接下来咱们用js控制顶点尺寸。

4.用js控制顶点尺寸

用js 控制顶点尺寸的方法和控制顶点位置的方法是一样的，所以咱们这里就不再另起一章了。
在这里插入图片描述
1.首先咱们还是要在着色器里暴露出一个可以控制顶点尺寸的attribute 变量。

<script id="vertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    attribute float a_PointSize;
    void main(){
        gl_Position = a_Position;
        gl_PointSize = a_PointSize;
    }
</script>

上面的a_PointSize 是一个浮点类型的变量。

2.在js 里获取attribute 变量

const a_PointSize=gl.getAttribLocation(gl.program,'a_PointSize');

3.修改attribute 变量

gl.vertexAttrib1f(a_PointSize,100.0);

整体代码：

<canvas id="canvas"></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    attribute float a_PointSize;
    void main(){
        gl_Position = a_Position;
        gl_PointSize = a_PointSize;
    }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
    void main() {
        gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
    }
</script>
<script type="module">
    import {initShaders} from '../jsm/Utils.js';

    const canvas = document.getElementById('canvas');
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    const gl = canvas.getContext('webgl');
    const vsSource = document.getElementById('vertexShader').innerText;
    const fsSource = document.getElementById('fragmentShader').innerText;
    initShaders(gl, vsSource, fsSource);
    const a_Position=gl.getAttribLocation(gl.program,'a_Position');
    const a_PointSize=gl.getAttribLocation(gl.program,'a_PointSize');
    gl.vertexAttrib3f(a_Position,0.0,0.0,0.0);
    gl.vertexAttrib1f(a_PointSize,100.0);
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.POINTS, 0, 1);
</script>

后面我们也可以用鼠标随机改变顶点大小：

const a_Position=gl.getAttribLocation(gl.program,'a_Position');
const a_PointSize=gl.getAttribLocation(gl.program,'a_PointSize');
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
const g_points=[];
canvas.addEventListener('click',function(event){
  const {clientX,clientY}=event;
  const {left,top,width,height}=canvas.getBoundingClientRect();
  const [cssX,cssY]=[
    clientX-left,
    clientY-top
  ];
  const [halfWidth,halfHeight]=[width/2,height/2];
  const [xBaseCenter,yBaseCenter]=[cssX-halfWidth,cssY-halfHeight];
  const yBaseCenterTop=-yBaseCenter;
  const [x,y]=[xBaseCenter/halfWidth,yBaseCenterTop/halfHeight];
  g_points.push({x,y,z:Math.random()*50});
  gl.clear(gl.COLOR_BUFFER_BIT);
  g_points.forEach(({x,y,z})=>{
    gl.vertexAttrib2f(a_Position,x,y);
    gl.vertexAttrib1f(a_PointSize,z);
    gl.drawArrays(gl.POINTS, 0, 1);
  })
})

在我们上面的案例中，无论是控制点位的尺寸，还是控制点位的位置，实际上都是对attribute 变量的操控。
那我们如果想要再改变顶点的颜色呢？那就不能再用attribute 限定符了，因为attribute 限定符限定的就是顶点相关的数据。

本文章为B站 李伟_Li慢慢 关于《WebGL+图形学》课程的学习笔记
详情请参考：https://juejin.cn/post/7067369376697024548

夜宵少吃辣
关注
专栏目录
WebGL编程指南笔记-前言
Kelvin’s blog
06-19 210
WebGL编程指南学习笔记-前言
【笔记】《WebGL编程指南》学习笔记（7）
饮冰室
03-30 415
WebGL编程指南学习（7） 7. 层次模型 由多个简单的部件组成的复杂模型 为复杂物体（机器人手臂）建立具有层次化结构的三维模型 7.1 多个简单模型组成的复杂模型 层次结构模型 当情况较为简单时，实现“部件A转动带动部件B转动”可以很直接，只要对部件B也施以部件A的旋转矩阵即可 情况复杂一些时，需要考虑多个旋转矩阵。按照模型中各个部件的层次顺序，从高到低逐一绘制，并在每个关节上应用模型矩阵 例程：单关节模型 两个立方体部件组成的机器人手臂：arm1（上臂）和arm2（前臂）。使用左右方向键控制a
【《WebGL编程指南》读书笔记】
floating_heart的博客
04-07 595
《WebGL编程指南》读书笔记-总纲
【《WebGL编程指南》读书笔记-颜色与纹理】
floating_heart的博客
04-11 1043
《WebGL编程指南》读书笔记-第五章 颜色与纹理。 要点有三：1.多个缓冲区对象的使用和单个缓冲区对象交错组织；2.顶点着色器和片元着色器工作细节；3. 纹理的使用
《WebGL编程指南》学习笔记——4.绘制一个点
hushhw的博客
12-24 1490
《WebGL编程指南》学习笔记——4.绘制一个点之前，我们学习了如何建立一个WebGL程序，如何使用一些简单的WebGL相关函数。这一节，我们进一步在一个示例程序中绘制一个最简单的图形：一个点。这一小节中我们要弄懂一个重要的概念：着色器。WebGL编程指南学习笔记4绘制一个点 HelloPoint1html 着色器 顶点着色器 Vertex shader 片元着色器Fragment shader
《WebGL编程指南》学习笔记webgl-study-notes
01-12
《WebGL编程指南》学习笔记webgl-study-notes
《WebGL编程指南》英文官方提供示例
10-24
这个是《WebGL编程指南》作者提供的原版示例，里面提供了官方下载地址 这本书是学习WebGL很不错的一本书，推荐全部手打一遍
WebGL编程指南pdf版本
04-22
包含webgl编程指南pdf版本，还有教材中实例的源码（windows和mac版本），还有cuon-matrix.js,cuon-utils.js,webgl-debug.js,webgl-utils.js供大家下载使用！
WebGL编程指南.pdf
04-06
WebGL编程指南.pdfWebGL编程指南.pdfWebGL编程指南.pdfWebGL编程指南.pdfWebGL编程指南.pdfWebGL编程指南.pdf
WebGL编程指南高清无水印.zip
06-25
webgl编程指南完整版 高清无水印 可以下载看看哟
WebGL编程指南笔记-第二章 WebGL入门
Kelvin’s blog
06-19 554
WebGL编程指南笔记-第二章 WebGL入门
【《WebGL编程指南》读书笔记-WebGL入门】
floating_heart的博客
04-07 938
《WebGL编程指南》读书笔记-第二章 WebGL入门。 初识绘图流程、缓冲区、着色器、attribute变量和uniform变量。
《WebGL编程指南》学习笔记——1.WebGL概述
hushhw的博客
12-16 3740
《WebGL编程指南》学习笔记——1.WebGL概述此系列用来记录我学习《WebGL编程指南》这本书后的心得，重点内容和总结WebGL编程指南学习笔 WebGL是一项用来在网页上绘制和渲染复杂三维图形（3D图形），并允许用户与之交互的技术。随着个人计算机和浏览器的性能越来越强，我们能够在Web上创建越来越精美、越来越复杂的3D图形
解密！抖音百万粉丝博主三维地图视频都用到了什么GIS数据和技术
Mapmost的博客
08-12 1568
（1）影像数据影像数据，通常指的是通过各种遥感技术，如卫星、无人机或地面传感器等设备捕捉到的图像信息。这类数据涵盖了从可见光到红外、微波等多个电磁波谱段，能够用于多样的应用领域：1）地图制图与地理信息系统 (GIS)：高分辨率卫星影像常用于更新地形图、制作数字高程模型(DEM)，以及土地覆盖和土地利用分类。2）农业监测：通过分析不同波段的影像数据，可以评估作物生长状况、病虫害预警及灌溉需求，助力精准农业。3）城市规划与管理：监测城市扩张、土地变化、交通流量及环境质量，为城市可持续发展提供数据支持。
【超强组合】基于淘金优化算法GRO-BP-Adaboost的数据分类预测算法Matlab实现.rar
最新发布
10-08
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
VMware Workstation Pro 和 VMware Fusion 安装与配置指南
10-08
内容概要：本文档详细指导了如何在不同的主机环境下，通过 VMWare 的两款产品——Workstation Pro 和 Fusion 进行新虚拟机的构建流程以及具体的操作要点说明。 适用人群：希望在单一机器上部署多操作系统的工作环境或学习测试场景的技术人员和学生。 使用场景及目标：旨在帮助初学者搭建属于自己的虚拟机实验平台，从而方便进行软件测试或者研究操作系统相关的新特性等任务，同时也有利于团队间的协作和资源调配。 注意事项：文中涉及的具体操作如下载源文件、配置网络参数时要注意版权合法性问题和技术安全防范。此外还需依据各自电脑的软硬件条件适当增减虚拟机的资源设定。
科研经费管理系统 SSM毕业设计 源码+数据库+论文（JAVA+SpringBoot+Vue.JS）.zip
10-08
科研经费管理系统 SSM毕业设计 源码+数据库+论文（JAVA+SpringBoot+Vue.JS） 启动教程：https://www.bilibili.com/video/BV1GK1iYyE2B
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值