webgl使用attribute、uniform、canvas绑定事件

已于 2023-01-30 20:15:01 修改
阅读量878 收藏 2
点赞数 1
分类专栏： WebGL 文章标签： webgl
于 2022-12-18 13:17:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37987033/article/details/128284860
版权

文章目录

前言

在webgl程序在使用attribute变量向顶点着色器传入位置，使用uniform向片元着色器传入颜色，给画布绑定事件实现动态绘制点

使用attribute更改顶点坐标

attribute使用流程

虽然我们可以直接在顶点着色器中定义顶点坐标，采用这种“硬编码”的方式将使程序缺乏扩展性。attribute变量可以将在javascript中定义的顶点信息传递至顶点着色器中

在这里插入图片描述

gl.getAttribLocation() , gl.vertexAttrib3f()

gl.getAttribLocation(program, name):获取参数名为name的attribute变量存储地址

  • program: 包含顶点着色器和片元着色器的片元对象
  • name: 要获取的目标attribute地址对应的attribute变量名称

gl.vertexAttrib3f(location, v0, v1, v2):向attribute变量赋值

  • location: 目标attribute的存储位置
  • v0: 填充attribute的第一个分量
  • v1: 填充attribute的第二个分量
  • v2: 填充attribute的第三个分量

vertexAttrib3f还有几个同族函数gl.vertexAttrib1f(location, v0), gl.vertexAttrib2f(location, v0, v1), gl.vertexAttrib4f(location, v0, v1, v2,v3),它们具有相同的作用,其中v0 v1 v2默认值为0.0,v3默认值为1.0

示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>webgl</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		canvas {
			width: 500px;
			height: 500px;
		}
	</style>
</head>

<body>
	<canvas id="canvas"></canvas>
	<script>
		/** @type {HTMLCanvasElement} */
		// 获取canvas元素对象
		let canvas = document.getElementById('canvas');

		// 获取webgl绘图上下文
		const gl = canvas.getContext('webgl');
		if (!gl) {
			throw new Error('WebGL not supported');
		}

		canvas.width = 500;
		canvas.height = 500;
		gl.viewport(0, 0, canvas.width, canvas.height)

		// 设置背景色
		gl.clearColor(1.0, 1.0, 0.0, 1.0)
		// 清空缓冲区
		gl.clear(gl.COLOR_BUFFER_BIT)

		const vertex =  `
			attribute vec4 aPosition;
			void main() {
				gl_Position = aPosition;
				gl_PointSize = 10.0;
			}
		`
		const fragment =  `
			void main(){
				gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
			}
		`
		// 创建program
		const program = initShader(gl, vertex, fragment)
		// 获取attribute变量的数据存储位置
		const aPosition = gl.getAttribLocation(program, 'aPosition');
		// 向attribute赋值
		gl.vertexAttrib3f(aPosition,0.75,0.75,1.0)
		// 绘制
		gl.drawArrays(gl.POINTS, 0, 1);
	</script>
</body>

</html>

使用uniform更改顶点颜色

attribute变量只能将javascript中定义的顶点信息传递至顶点着色器中 ，使用uniform可以将信息传递给片元着色器，比如片元颜色。 整体使用与attribute几乎没有区别，唯一注意的是片元着色器没有设置默认精度，需要手动设置

示例

<script>
		/** @type {HTMLCanvasElement} */
		//------------------------------------------------------创建画布
		// 获取canvas元素对象
		let canvas = document.getElementById('canvas');

		// 获取webgl绘图上下文
		const gl = canvas.getContext('webgl');
		if (!gl) {
			throw new Error('WebGL not supported');
		}

		canvas.width = 500;
		canvas.height = 500;
		gl.viewport(0, 0, canvas.width, canvas.height)

		// 设置背景色
		gl.clearColor(1.0, 1.0, 0.0, 1.0)
		// 清空缓冲区
		gl.clear(gl.COLOR_BUFFER_BIT)

		const vertex =  `
			attribute vec4 aPosition;
			void main() {
				gl_Position = aPosition;
				gl_PointSize = 10.0;
			}
		`
		const fragment =  `
			precision highp float;
			uniform vec4 uColor;
			void main(){
				gl_FragColor = uColor;
			}
		`
		// 创建program
		const program = initShader(gl, vertex, fragment)
		// 获取attribute变量的数据存储位置
		const aPosition = gl.getAttribLocation(program, 'aPosition');
		// 获取uniform变量的数据存储位置
		const uColor = gl.getUniformLocation(program, 'uColor');
		// 向attribute赋值
		  gl.vertexAttrib3f(aPosition,0.75,0.75,1.0)
		// 向uniform赋值
		gl.uniform4f(uColor,1.0,0.0,1.0,1.0)
		// 绘制
		gl.drawArrays(gl.POINTS, 0, 1);
	</script>

动态绘制

流程

在这里插入图片描述

平面坐标系转齐次坐标

点击事件直接获取的坐标为屏幕坐标,需要转换至canvas坐标,如图

在这里插入图片描述

  • 屏幕坐标和canvas坐标的定义规则是一致的,唯一可能不同的只有原点位置
  • canvas坐标至webgl坐标既需要考虑原点平移,又需要将前两项范围固定值[-1.0, 1.0]
		// 屏幕坐标系
		const x = ev.clientX;
		const y = ev.clientY;
		const bound = ev.target.getBoundingClientRect(); // 获取原点之间相对位置
		// 转换至canvas坐标
		const canvasX = (x-bound.left);
		const canvasY = (y-bound.top);
		// 转换至齐次坐标
		glX = (2 * canvasX/canvas.width - 1)
		glY = (1 - 2 * canvasY/canvas.height)

示例效果

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>webgl</title>                                                                                                  
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		canvas {
			margin: 50px 30px;
			width: 500px;
			height: 500px;
		}
	</style>
</head>

<body>
	<canvas id="canvas"></canvas>
	<script>
		/** @type {HTMLCanvasElement} */
		//------------------------------------------------------创建画布
		// 获取canvas元素对象
		let canvas = document.getElementById('canvas');
		// canvas绑定事件
		canvas.onmousedown = function(ev){click(ev,gl,canvas,aPosition)}
		let pointList = []
		// 获取webgl绘图上下文
		const gl = canvas.getContext('webgl');
		if (!gl) {
			throw new Error('WebGL not supported');
		}
		canvas.width = 500;
		canvas.height = 500;
		gl.viewport(0, 0, canvas.width, canvas.height)

		// 设置背景色
		gl.clearColor(1.0, 1.0, 0.0, 1.0)
		// 清空缓冲区
		gl.clear(gl.COLOR_BUFFER_BIT)

		const vertex =  `
			attribute vec4 aPosition;
			void main() {
				gl_Position = aPosition;
				gl_PointSize = 10.0;
			}
		`
		const fragment = `
			precision highp float;
			uniform vec4 uColor;
			void main(){
				gl_FragColor = uColor;
			}
		`

		// 创建program
		const program = initShader(gl, vertex, fragment)
		// 获取attribute变量的数据存储位置
		const aPosition = gl.getAttribLocation(program, 'aPosition');
		// 获取uniform变量的数据存储位置
		const uColor = gl.getUniformLocation(program, 'uColor');


		// 点击绘制函数
		function click(ev, gl, canvas, aPosition) {
			console.log(pointList)
			const x = ev.clientX;
			const y = ev.clientY;
			const bound = ev.target.getBoundingClientRect();
			// 转换至canvas坐标
			const canvasX = (x - bound.left);
			const canvasY = (y - bound.top);
			// 转换至齐次坐标
			glX = (2 * canvasX / canvas.width - 1)
			glY = (1 - 2 * canvasY / canvas.height)

			pointList.push([glX, glY])

			gl.clear(gl.COLOR_BUFFER_BIT)
			// 绘制点
			pointList.forEach(function (point) {
				gl.vertexAttrib2f(aPosition, point[0], point[1])
				gl.uniform4f(uColor, point[0], point[1], 1.0, 1.0)
				gl.drawArrays(gl.POINTS, 0, 1);
			})
		}
	</script>
</body>
  
</html>

不足

  • 虽然实现了动态绘制点，但是每个点绘制都要调用一次gl.drawArrays方法
  • 当绘制多组图形时，需要在全局定义多个list，容易导致管理混乱

总结

  • attribute变量向顶点着色器写入位置
  • 使用uniform向片元着色器写入颜色
  • 给画布绑定事件实现动态绘制点
  • 不足：多次调用gl.drawArrays方法，当绘制多组时，管理混乱
迦南giser
关注
专栏目录
WebGL常用接口和事件
天涯学馆
09-26 162
WebGL编程通常围绕几个核心接口和函数进行，这些接口和函数允许开发者与WebGL上下文交互，创建和管理图形资源，以及渲染3D场景。虽然WebGL自身不直接处理事件，但可以通过JavaScript监听DOM事件，如鼠标、键盘事件，然后在事件处理函数中调用WebGL相关函数来响应用户输入。多重渲染目标允许在一次渲染调用中将输出写入多个颜色附件，这对于实现复杂的后期处理效果很有用。在WebGL编程中，3D数学运算（如向量、矩阵操作）是常见的。通过监听DOM事件和计算几何碰撞，可以实现与3D场景的交互。
WebGL渲染与创建2D内容
天涯学馆
09-23 301
WebGL是一个强大的工具，可以用来在Web浏览器中创建复杂的3D图形。虽然它的设计初衷是为了3D渲染，但也可以用于创建2D内容。通过巧妙地利用几何、投影和纹理，我们可以构建出各种2D图形。
详解Canvas事件绑定
12-13
众所周知canvas是位图，在位图里我们可以在里面画各种东西，可以是图片，可以是线条等等。那我们想给canvas里的某一张图片添加一个点击事件该怎么做到。而js只能监听到canvas的事件，很明显这个图片是不存在与dom里面的图片只是画在了canvas里而已。下面我就来简单的实现一个canvas内部各个图片的事件绑定。 我先来讲下实现原理：其实就是canvas绑定相关事件，在通过记录图片所在canvas的坐标，判断事件作用于哪个图片中。这样讲是不是感觉跟事件代理有点相似咧。不过实现起来还是有稍许复杂的。 ps：下面的代码我是用ts写的，大家当es6看就好了，稍有不同的可以查看 typescri
WebGL着色器变量(attribute、uniform和varying)
u014291990的博客
11-17 4089
WebGL着色器语言三种变量(attribute、uniform和varying) 着色器语言和C语言一样，通过一个表示特定数据类型的关键词声明一个变量，比如int num;通过int关键字声明一个整数型变量num，不过着色器语言还提供了三个关键字attribute、uniform和varying用来声明特定用途的变量。 attribute和uniform关键字的目的主要是为了javascript...
WebGl 使用uniform变量动态修改点的颜色
最新发布
dlmyrt的博客
10-14 523
在WebGL中，uniform变量用于在顶点着色器和片元着色器之间传递全局状态信息，这些信息在渲染过程中不会随着顶点的变化而变化。uniform变量可以用来设置变换矩阵、光照参数、材料属性等。由于它们在整个渲染过程中共享，因此可以被所有使用该着色器程序的顶点和片元访问。
canvas事件绑定
thlzjfefe的博客
11-23 2015
众所周知canvas是位图，在位图里我们可以在里面画各种东西，可以是图片，可以是线条等等。那我们想给canvas里的某一张图片添加一个点击事件该怎么做到。而js只能监听到canvas的事件，很明显这个图片是不存在与dom里面的图片只是画在了canvas里而已。下面我就来简单的实现一个canvas内部各个图片的事件绑定。 我先来讲下实现原理：其实就是canvas绑定相关事件，在通过记录图片所在canvas的坐标，判断事件作用于哪个图片中。这样讲是不是感觉跟事件代理有点相似咧。不过实现起来还是有稍许复杂的
webgl-attribute、uniform、varying三者的区别
以爱护甲,爱满枫林。
04-11 925
通用js:范围: 只适用于vertexShader，将js代码中的数据传递给vertexShader。使用方式：声明一个变量a_Position//获取变量内存位置let aPosition = ctx.getAttribLocation(ctx.program, "a_Position")//以为就是1f，二维就是2f，三维就是3f...，给变量内存位置设置赋值ctx.vertexAttrib2f(aPosition, x, y)范围：适用于vertexShader或fragmentShader，将js代
canvas绑定键盘事件
Liingot的博客
05-29 503
给canvas绑定键盘事件，例如delete删除只在canvas中生效。
JavaScript WebGL 使用图片
XXHolic
01-04 735
引子 JavaScript WebGL 设置颜色效果始终有限，这时候就会想到使用图片，这就涉及到 WebGL 中的纹理使用，比预想中要麻烦的多。 Origin My GitHub 使用图片 纹理(texture)可以用来添加模拟物体的细节，在 3D 游戏中各种模拟的物体都使用了纹理。在绘制矩形的基础上主要有以下几个方面的变化： 数据 顶点着色器 片元着色器 缓冲纹理坐标数据 加载并创建纹理 绘制 数据 先准备一张图片，然后为了把纹理映射到对应的矩形上，需要指定矩形每个顶点各自对应纹理的那个位置。 纹
WebGL之旅（一）canvas WebGL和shader简介
qq_44910471的博客
04-14 387
WebGL之旅（一）canvas WebGL和shader简介
WebGL入门
qq_34754747的博客
04-09 683
WebGL采用HTML5中新引入的元素（标签），它定义了网页上的绘图区域。
canvas在舞台上点击后图片旋转_canvas 进阶 —— 如何实现 canvas 的事件系统
weixin_39929715的博客
12-06 346
众所周知，canvas 是前端进军可视化领域的一大利器，借助 canvas 画布我们不仅可以实现许多 dom 和 css 难以实现的、各种绚丽多彩的视觉效果，而且在渲染数量繁多、内容复杂的场景下，其性能表现及优化空间也占据一定优势。然而 canvas 却存在一个缺陷：由于 canvas 是作为一个整体画布存在，所有的内容只不过是其内部渲染的结果，我们不能像在 dom 元素上监听事件一样，在 can...
WebGL 与 WebGPU比对[4] - Uniform
weixin_45566993的博客
02-19 1003
Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/course/detail/35475 目录* 1. WebGL 1.0 Uniform + 1.1. 用 WebGLUniformLocation 寻址 + 1.2. 矩阵赋值用 uniformMatrix[234]fv + 1.3. 标量与向量用 uniform[1234][fi][v] + 1.4. 传递纹理
canvas 元素绑定事件_canvas组件详解（二）
weixin_28688791的博客
01-13 818
添加图片时绘制全部图片。画布不会自动调整添加图片的大小，如果画布大小小于图片大小，则只显示部分图片。因此欲使添加图片在画布中全部显示可使用两种方法。一是改变画布大小，使其大于等于图片的尺寸，改变画布属性使用canvas对象.config(options)。二是调整图片大小。笔者使用PIL库或者CV2库，其他插件可以根据自己爱好使用。例如引用PIL库，采用函数为image.resize((...
WebGl-7.通过uniform传值
qq_25064691的博客
09-11 840
向顶点着色器中传递数据是通过 attribute，向片元着色器中传递数据就需要使用 uniform声明变量，uniform变量传递的数据是一致的不变的数据例如所有的颜色应用的都是这个变量但是所有点的位置是不一样的，而 attribute传递的数据是变化的。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp.
fabric操作canvas绘图-（四）事件绑定
weixin_42349568的博客
10-17 1566
事件的绑定，要区分是绑定在canvas画布上，还是画布上的图像对象上。对于某对象鼠标划过，让它颜色变大一些的动画效果怎么写呢？
webgl--attribute相关使用
weixin_43663775的博客
03-18 675
<script id="vertexShader" type="x-shader/x-vertex"> attribute vec4 a_position; void main() { gl_PointSize = 20.0; gl_Position = a_position; } </script> - attribute 是存储限定符，是专门用于向外部导出与点位相关的对象的，这类似于es6模板语法中export 。 - vec4 是变量类型，vec4是4维矢.
07 WebGL使用attribute变量
现在学习也不晚
04-27 2635
我们将位置信息从javascript程序中传给顶点着色器。有两种方式可以做到这点：attribute变量和uniform变量attribute变量传输的是与顶点相关的数据uniform变量传输的是对于所有顶点都相同（或与顶点无法）的数据。思路：1.在顶点着色器中，声明attribute变量。2.将attribute变量赋值给gl_Position变量。3.向attribute变量传输数据。示例：案...
WebGL 存储限定符attribute、gl.getAttribLocation、gl.vertexAttrib3f及其同族函数和矢量版本的介绍
dabaooooq的博客
08-17 557
在WebGL系统中建立了顶点着色器，WebGL就会对着色器进行解析，辨识出着色器具有的attribute变量，每个变量都具有一个存储地址，以便通过存储地址向变量传输数据。比如，当你想要向顶点着色器的a_Position变量传输数据时，首先需要向WebGL系统请求该变量的存储地址。我们使用gl.getAttribLocation（）来获取attribute变量的地址。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值