您的位置: 首页  >  文章  >  WebGL---4.矩阵的使用

WebGL---4.矩阵的使用

分类: 文章 • 2024-07-10 15:04:22

一、坐标系统

OpenGL希望在每次顶点着色器运行后，我们可见的所有顶点都为标准化设备坐标，也就是说，每个顶点的x，y，z坐标都应该在-1.0到1.0之间，超出这个坐标范围的顶点都将不可见。我们通常会自己设定一个坐标的范围，之后再在顶点着色器中将这些坐标变换为标准化设备坐标。将坐标变换为标准化设备坐标，接着再转化为屏幕坐标的过程通常是分步进行的，也就是类似于流水线那样子。
为了将坐标从一个坐标系变换到另一个坐标系，我们需要用到几个变换矩阵，最重要的几个分别是模型(Model)、观察(View)、投影(Projection)三个矩阵。

二、投影矩阵

将观察坐标变换为裁剪坐标的投影矩阵可以为两种不同的形式，每种形式都定义了不同的平截头体。我们可以选择创建一个正射投影矩阵或一个透视投影矩阵。

1.正射投影

正射投影矩阵定义了一个类似立方体的平截头箱，它定义了一个裁剪空间，在这空间之外的顶点都会被裁剪掉。创建一个正射投影矩阵需要指定可见平截头体的宽、高和长度。在使用正射投影矩阵变换至裁剪空间之后处于这个平截头体内的所有坐标将不会被裁剪掉。它的平截头体看起来像一个容器：

WebGL---4.矩阵的使用

要创建一个正射投影矩阵，我们可以使用glMatrix的内置函数

var projection = mat4.create()
mat4.ortho(projection,0.0, 800, 0.0, 600, 0.1, 100.0)

2.透视投影

如果你曾经体验过实际生活给你带来的景象，你就会注意到离你越远的东西看起来更小。这个奇怪的效果称之为透视。透视的效果在我们看一条无限长的高速公路或铁路时尤其明显，正如下面图片显示的那样：

WebGL---4.矩阵的使用

在glMatrix中可以这样创建一个透视投影矩阵：

var projection = mat4.create()
// 视野，观察空间的大小,如果想要一个真实的观察效果，它的值通常设置为45.0f
const fieldOfView = 45 * Math.PI / 180;
// 宽高比，由视口的宽除以高所得
const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
// 设置了平截头体的近和远平面。我们通常设置近距离为0.1f，而远距离设为100.0f。
const zNear = 0.1;
const zFar = 100.0;
mat4.perspective(projection,
       fieldOfView,
       aspect,
       zNear,
       zFar);

下面是一张透视平截头体的图片：

WebGL---4.矩阵的使用

三、最终组合

一个顶点坐标将会根据模型矩阵->观察矩阵->投影矩阵过程被变换到裁剪坐标：

gl_Position = projection * view * model * a_position;

注意矩阵运算的顺序是相反的（记住我们需要从右往左阅读矩阵的乘法）。最后的顶点应该被赋值到顶点着色器中的gl_Position，OpenGL将会自动进行透视除法和裁剪。

然后呢？

顶点着色器的输出要求所有的顶点都在裁剪空间内，这正是我们刚才使用变换矩阵所做的。OpenGL然后对裁剪坐标执行透视除法从而将它们变换到标准化设备坐标。OpenGL会使用glViewPort内部的参数来将标准化设备坐标映射到屏幕坐标，每个坐标都关联了一个屏幕上的点（在我们的例子中是一个800x600的屏幕）。这个过程称为视口变换。

四、实例代码

<html>
	<canvas id='c' width='640' height='480'></canvas>
	<script type="x-shader/x-vertex" id="vertex-shader">
	  	attribute vec4 a_position;
	  	attribute vec4 a_color;
	  	uniform mat4 model;
	  	uniform mat4 view;
	  	uniform mat4 projection;

	  	varying lowp vec4 v_color;

	  	void main(){
	  		gl_Position = projection * view * model * a_position;
	  		v_color = a_color;
	  	}
	</script>
	<script type="x-shader/x-fragment" id="fragment-shader">
		//需要声明浮点数精度，否则报错No precision specified for (float)
	  	precision mediump float;
	  	varying lowp vec4 v_color;

	  	void main(){
	  		gl_FragColor = v_color;
	  	}
	</script>
	<script src="WebGLUtils.js"> </script>
	<script src="gl-matrix.js"></script>

	<script>
		var ratation = 0.0
		var gl = createGLContext('c')

		// alert(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS))

		//创建shader program
		var program = createProgramFromElementId(gl,'vertex-shader','fragment-shader');
		gl.useProgram(program);


		function initBuffers(gl,program){

			// 坐标数据写入GPU缓冲区
			const positions = new Float32Array([
				 1.0,  1.0,
				-1.0,  1.0,
				 1.0, -1.0,
				-1.0, -1.0,
			]);
			var FSIZE = positions.BYTES_PER_ELEMENT;


			const positionBuffer = gl.createBuffer();
  			gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  			gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
  			// 向着色器传递坐标数据
  			var a_position = gl.getAttribLocation(program,"a_position");
  			gl.enableVertexAttribArray(a_position);
			gl.vertexAttribPointer(a_position,2,gl.FLOAT,false,2*FSIZE,0);


  			// 颜色数据写入GPU缓冲区
  			const colors = new Float32Array([
  				1.0,  1.0,  1.0,  1.0,    // white
  				1.0,  0.0,  0.0,  1.0,    // red
  				0.0,  1.0,  0.0,  1.0,    // green
  				0.0,  0.0,  1.0,  1.0,    // blue
  			]);

  			const colorBuffer = gl.createBuffer();
  			gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
  			gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
  			// 向着色器传递颜色数据
  			var a_color = gl.getAttribLocation(program,"a_color");
  			gl.enableVertexAttribArray(a_color);
  			gl.vertexAttribPointer(a_color,4,gl.FLOAT,false,4*FSIZE,0);

  			return {
  				position:positionBuffer,
  				color:colorBuffer
  			}

		}

		const buffers = initBuffers(gl,program);


		function drawScene(gl,deltaTime){
			gl.clearColor(0.0, 0.0, 0.0, 1.0)
			gl.clearDepth(1.0)
			gl.enable(gl.DEPTH_TEST)
			gl.depthFunc(gl.LEQUAL); 
  			gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  			//-------创建投影矩阵-----------//
  			var projection = mat4.create()
  			// 视野，观察空间的大小
  			const fieldOfView = 45 * Math.PI / 180;
  			const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
  			const zNear = 0.1;
  			const zFar = 100.0;
  			mat4.perspective(projection,
                   fieldOfView,
                   aspect,
                   zNear,
                   zFar);
     		// mat4.ortho(projection,0.0, 800, 0.0, 600, 0.1, 100.0)
  			var projection_matrix = gl.getUniformLocation(program, 'projection')
  			gl.uniformMatrix4fv(projection_matrix,false,projection)

  			//---------------------------//

  			//-------创建模型矩阵-----------//
  			var model = mat4.create()
  			mat4.rotate(model,model,ratation,[1,0,0])
  			var model_matrix = gl.getUniformLocation(program, 'model')
  			gl.uniformMatrix4fv(model_matrix,false,model)
  			//----------------------------//

  			//-------创建观察矩阵-----------//
  			var view = mat4.create()
  			mat4.translate(view,view,[-0.0, 0.0, -6.0])
  			var view_matrix = gl.getUniformLocation(program, 'view')
  			gl.uniformMatrix4fv(view_matrix,false,view)
  			//----------------------------//

  			gl.drawArrays(gl.TRIANGLE_STRIP,0,4)

  			ratation += deltaTime;
		}

		var old = 0
		function render(now) {
			now *= 0.001;  // convert to seconds
			const deltaTime = now - old;
			old = now;

			drawScene(gl,deltaTime);

			requestAnimationFrame(render);
		}
		requestAnimationFrame(render);

	</script>
</html>

相关推荐