WebGL+Three.js入门与实战(一)——1.1 绘制一个点

零肆伍伍柒

已于 2023-12-04 11:28:48 修改

阅读量1.2k

点赞数 44

分类专栏： webgl 文章标签： webgl javascript 开发语言 html5

于 2023-11-27 10:08:03 首次发布

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

版权

webgl 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

前提

接下来先简单的实现一个webgl的案例，让大家有一个初步的认识。

首先创建画布

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="cancas" width="400" height="400"></canvas>
	</body>
	<script>
	</script>
</html>

提示：请记得不要用style="width:400px;height:400px;"来设定Canvas的宽和高.

开始获取画布元素和创建webgl

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="cancas" width="400" height="400"></canvas>
	</body>
	<script>
	    const ctx = document.getElementById('cancas')
		const gl = ctx.getContext('webgl')
	</script>
</html>

开始创建着色器源码，着色器分为顶点着色器和片元着色器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</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 函数
		 void main() {
			 //要绘制的点的坐标
			 gl_Position = vec4(0.0,0.0,0.0,1.0); //x,y,z,w w齐次坐标 (x/w,y/w,z/w)
			 //点的大小
			 gl_PointSize=80.0;
		 }
		 `; //顶点着色器

		const FRAGMENT_SHADER_SOURCE = `
		void main(){
			gl_FragColor=vec4(1.0,0.0,0.0,1.0); // r,g,b,a
		}
		`; //片元着色器
	</script>
</html>

提示：gl_Postion设置点的位置(这里vec4传进来的四个参数,对应的是x、y、z、w，x轴、y轴、z轴、w是齐次坐标 (x/w,y/w,z/w)，w 通常会设置为 1)，gl_PointSize设置点的大小，gl_FragColor设置点的颜色（这里vec4传进来的四个参数相当于颜色的rgba）.

创建着色器—编译着色器—编译着色器—创建一个程序对象—指定顶点着色器、指定片元着色器—关联程序对象—使用程序对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</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 函数
		 void main() {
			 //要绘制的点的坐标
			 gl_Position = vec4(0.0,0.0,0.0,1.0); //x,y,z,w w齐次坐标 (x/w,y/w,z/w)
			 //点的大小
			 gl_PointSize=80.0;
		 }
		 `; //顶点着色器

		const FRAGMENT_SHADER_SOURCE = `
		void main(){
			gl_FragColor=vec4(1.0,0.0,0.0,1.0); // r,g,b,a
		}
		`; //片元着色器
		//创建着色器
		const vertexShader = gl.createShader(gl.VERTEX_SHADER);
		const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
		gl.shaderSource(vertexShader, VERTEX_SHADER_SOURCE)
		gl.shaderSource(fragmentShader, FRAGMENT_SHADER_SOURCE)
		//编译着色器
		gl.compileShader(vertexShader)
		gl.compileShader(fragmentShader)
		//创建一个程序对象
		const program = gl.createProgram();
		//指定顶点着色器
		gl.attachShader(program, vertexShader)
		//指定片元着色器
		gl.attachShader(program, fragmentShader)
		//关联程序对象
		gl.linkProgram(program)
		//使用程序对象
		gl.useProgram(program)
	</script>
</html>

最后执行绘画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</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 函数
		 void main() {
			 //要绘制的点的坐标
			 gl_Position = vec4(0.0,0.0,0.0,1.0); //x,y,z,w w齐次坐标 (x/w,y/w,z/w)
			 //点的大小
			 gl_PointSize=80.0;
		 }
		 `; //顶点着色器

		const FRAGMENT_SHADER_SOURCE = `
		void main(){
			gl_FragColor=vec4(1.0,0.0,0.0,1.0); // r,g,b,a
		}
		`; //片元着色器
		//创建着色器
		const vertexShader = gl.createShader(gl.VERTEX_SHADER);
		const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
		gl.shaderSource(vertexShader, VERTEX_SHADER_SOURCE)
		gl.shaderSource(fragmentShader, FRAGMENT_SHADER_SOURCE)
		//编译着色器
		gl.compileShader(vertexShader)
		gl.compileShader(fragmentShader)
		//创建一个程序对象
		const program = gl.createProgram();
		//指定顶点着色器
		gl.attachShader(program, vertexShader)
		//指定片元着色器
		gl.attachShader(program, fragmentShader)
		//关联程序对象
		gl.linkProgram(program)
		//使用程序对象
		gl.useProgram(program)
		//要绘画的图形是什么，从哪个开始，使用几个顶点
		gl.drawArrays(gl.POINTS, 0, 1);//绘制点
	</script>
</html>

效果图

在这里插入图片描述

为了方便后续重复使用进行了封装

层级目录

在这里插入图片描述

index.js

function initShader(gl,VERTEX_SHADER_SOURCE,FRAGMENT_SHADER_SOURCE){
	const vertexShader = gl.createShader(gl.VERTEX_SHADER);
	const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
	gl.shaderSource(vertexShader, VERTEX_SHADER_SOURCE)
	gl.shaderSource(fragmentShader, FRAGMENT_SHADER_SOURCE)
	//编译着色器
	gl.compileShader(vertexShader)
	gl.compileShader(fragmentShader)
	//创建一个程序对象
	const program = gl.createProgram();
	//指定顶点着色器
	gl.attachShader(program, vertexShader)
	//指定片元着色器
	gl.attachShader(program, fragmentShader)
	//关联程序对象
	gl.linkProgram(program)
	//使用程序对象
	gl.useProgram(program)
	return  program
}

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../lib/index.js"></script>
	</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 函数
		 void main() {
			 //要绘制的点的坐标
			 gl_Position = vec4(0.0,0.0,0.0,1.0);
			 //点的大小
			 gl_PointSize=80.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>