WebGL+Three.js入门与实战(一)——1.3 学习使用attribute变量-绘制一个水平移动的点

零肆伍伍柒

已于 2023-12-04 11:29:40 修改

阅读量517

点赞数 12

分类专栏： webgl 文章标签： webgl javascript 学习

于 2023-11-29 08:29:49 首次发布

本文链接：https://blog.csdn.net/qq_45013951/article/details/134660371

版权

webgl 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

学习使用attribute变量

attribute的用法
attribute的使用公式
获取attribute变量
gl.getAttribLocation的用法
通过gl.vertexAttrib4f进行坐标的传值
跟gl.vertexAttrib4f一样的函数
绘制一个水平移动的点
总体流程

attribute的用法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../lib/index.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<canvas id="cancas" width="400" height="400"></canvas>
	</body>
	<script>
		const ctx = document.getElementById('cancas')
		const gl = ctx.getContext('webgl')
		//着色器
		//创建着色器源码
		const VERTEX_SHADER_SOURCE = `
		 //必须要存在 main 函数
		 attribute vec4 aPosition;
		 void main() {
			 //要绘制的点的坐标
			 gl_Position = aPosition; //默认为 vec4(0.0,0.0,0.0,1.0);
			 //点的大小
			 gl_PointSize=40.0;
		 }
		 `; //顶点着色器
		const FRAGMENT_SHADER_SOURCE = `
		void main(){
			gl_FragColor=vec4(1.0,0.0,0.0,1.0);
		}
		`; //片元着色器
		//执行绘画
		initShader(gl,VERTEX_SHADER_SOURCE,FRAGMENT_SHADER_SOURCE)
		//要绘画的图形是什么，从哪个开始，使用几个顶点
		gl.drawArrays(gl.POINTS, 0, 1);//绘制点
	</script>
</html>

attribute的使用公式

在这里插入图片描述
提示：只能在顶点着色器中使用，默认值是vec4(0.0,0.0,0.0,1.0);

获取attribute变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../lib/index.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<canvas id="cancas" width="400" height="400"></canvas>
	</body>
	<script>
		const ctx = document.getElementById('cancas')
		const gl = ctx.getContext('webgl')
		//着色器
		//创建着色器源码
		const VERTEX_SHADER_SOURCE = `
		 //必须要存在 main 函数
		 attribute vec4 aPosition;
		 void main() {
			 //要绘制的点的坐标
			 gl_Position = aPosition; //默认为 vec4(0.0,0.0,0.0,1.0);
			 //点的大小
			 gl_PointSize=40.0;
		 }
		 `; //顶点着色器
		const FRAGMENT_SHADER_SOURCE = `
		void main(){
			gl_FragColor=vec4(1.0,0.0,0.0,1.0);
		}
		`; //片元着色器
		//执行绘画
		const program=initShader(gl,VERTEX_SHADER_SOURCE,FRAGMENT_SHADER_SOURCE)
		// 获取attribute变量
		const aPosition=gl.getAttribLocation(program,'aPosition')
		//要绘画的图形是什么，从哪个开始，使用几个顶点
		gl.drawArrays(gl.POINTS, 0, 1);//绘制点
	</script>
</html>

提示：获取attribute变量需要在initShader函数之后,因为会用到program这个对象

gl.getAttribLocation的用法

在这里插入图片描述

通过gl.vertexAttrib4f进行坐标的传值

在这里插入图片描述

跟gl.vertexAttrib4f一样的函数

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../lib/index.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<canvas id="cancas" width="400" height="400"></canvas>
	</body>
	<script>
		const ctx = document.getElementById('cancas')
		const gl = ctx.getContext('webgl')
		//着色器
		//创建着色器源码
		const VERTEX_SHADER_SOURCE = `
		 //必须要存在 main 函数
		 attribute vec4 aPosition;
		 void main() {
			 //要绘制的点的坐标
			 gl_Position = aPosition; //默认为 vec4(0.0,0.0,0.0,1.0);
			 //点的大小
			 gl_PointSize=40.0;
		 }
		 `; //顶点着色器
		const FRAGMENT_SHADER_SOURCE = `
		void main(){
			gl_FragColor=vec4(1.0,0.0,0.0,1.0);
		}
		`; //片元着色器
		//执行绘画
		const program=initShader(gl,VERTEX_SHADER_SOURCE,FRAGMENT_SHADER_SOURCE)
		// 获取attribute变量
		const aPosition=gl.getAttribLocation(program,'aPosition')
		gl.vertexAttrib4f(aPosition,0.5,0.5,0.0,1.0)
		// gl.vertexAttrib3f(aPosition,0.5,0.5,0.0)
		// gl.vertexAttrib2f(aPosition,0.5,0.5)
		// gl.vertexAttrib1f(aPosition,0.5)
		
		//要绘画的图形是什么，从哪个开始，使用几个顶点
		gl.drawArrays(gl.POINTS, 0, 1);//绘制点
	</script>
</html>

绘制一个水平移动的点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../lib/index.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<canvas id="cancas" width="400" height="400"></canvas>
	</body>
	<script>
		const ctx = document.getElementById('cancas')
		const gl = ctx.getContext('webgl')
		//着色器
		//创建着色器源码
		const VERTEX_SHADER_SOURCE = `
		 //必须要存在 main 函数
		 attribute vec4 aPosition;
		 void main() {
			 //要绘制的点的坐标
			 gl_Position = aPosition; //默认为 vec4(0.0,0.0,0.0,1.0);
			 //点的大小
			 gl_PointSize=40.0;
		 }
		 `; //顶点着色器
		const FRAGMENT_SHADER_SOURCE = `
		void main(){
			gl_FragColor=vec4(1.0,0.0,0.0,1.0);
		}
		`; //片元着色器
		//执行绘画
		const program=initShader(gl,VERTEX_SHADER_SOURCE,FRAGMENT_SHADER_SOURCE)
		// 获取attribute变量
		const aPosition=gl.getAttribLocation(program,'aPosition')
		// gl.vertexAttrib4f(aPosition,0.5,0.5,0.0,1.0)
		// gl.vertexAttrib3f(aPosition,0.5,0.5,0.0)
		// gl.vertexAttrib2f(aPosition,0.5,0.5)
		// gl.vertexAttrib1f(aPosition,0.5)
		let x=0;
		setInterval(()=>{
			x+=0.1;
			if(x>1.0)
			{
				x=0;
			}
			gl.vertexAttrib1f(aPosition,x)//变更坐标
			gl.drawArrays(gl.POINTS, 0, 1);//重新绘制
		},200)
		
	</script>
</html>

提示：添加一个定时器通过不断的更改坐标重新绘制，来实现一个水平移动的点

总体流程

在这里插入图片描述

代码中的initShader方法是自己封装好的方法
请参考https://blog.csdn.net/qq_45013951/article/details/134637108
下面是WebGL+Three.js入门与实战的总体链接
1.1 绘制一个点
 1.2 webgl坐标系
 1.3 学习使用attribute变量-绘制一个水平移动的点
 1.4 通过鼠标控制绘制
 1.5 修改点的颜色
 1.6 实现贪吃蛇游戏
 2.1 使用缓冲区对象-绘制多个点