彩色多边形复合变换

最新推荐文章于 2023-01-15 20:30:00 发布

IICheny

最新推荐文章于 2023-01-15 20:30:00 发布

阅读量166

点赞数

本文链接：https://blog.csdn.net/Cheny_hou/article/details/105588430

版权

TranslatedRotatedTriangle

沿y轴平移0.6，旋转-45度

效果图：

TranslatedRotatedTriangle.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body onload="main()">
		<canvas id="webgl" width="500" height="500"></canvas>
		<script src="lib/webgl-utils.js"></script>
		<script src="lib/webgl-debug.js"></script>
		<script src="lib/cuon-utils.js"></script>
		<script src="lib/cuon-matrix.js"></script>
		<script src="js/TranslatedRotatedTriangle.js"></script>
	</body>
</html>

TranslatedRotatedTriangle.js

//TranslatedRotatedTriangle.js
//Vertex shader program
var VSHADER_SOURCE =
	//x'=xcosB-ysinB
	//y'=ysinB+ycosB
	'attribute vec4 a_Position;\n' +
	'uniform mat4 u_ModelMatrix;\n' +
	'void main(){\n' +
	'	gl_Position=u_ModelMatrix*a_Position;\n' +
	'}\n';
var FSHADER_SOURCE =
	'void main(){\n' +
	'	gl_FragColor=vec4(0.0,0.4,1.0,1.0);\n' +
	'}\n';
// The translation distance for x, y and z direction

function main() {
	//Retieve <canvas> element
	var canvas = document.getElementById('webgl');
	//Get the rendering context for WebGL
	var gl = getWebGLContext(canvas);
	if (!gl) {
		console.log('Failed to get the rendering context for WebGL');
		return false;
	}
	if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
		console.log('Failed to initialize shaders');
		return;
	}

	//write the positions of vertices to vertex shader
	var n = initVertexBuffers(gl);
	if (n < 0) {
		console.log('Failed to set the position of the vertices');
		return;
	}

	var modelMatrix = new Matrix4();

	//Calculate a model matrix
	var ANGLE = -45.0; // The rotation angle
	var Ty = 0.6; // Translation distance
	modelMatrix.setTranslate(0, Ty, 0); // Set translation matrix
	modelMatrix.rotate(ANGLE, 0, 0, 1); // Multiply modelMatrix by the calculation

	//Pass the model matrix to the vertex shader
	var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');
	if (!u_ModelMatrix) {
		console.log('Failed to get the storage location of u_ModelMatrix');
		return;
	}
	gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);
	//Pass the model matrix to the vertex shader

	// Specify the color for clearing <canvas>画布颜色
	gl.clearColor(0, 0, 0, 1);

	// Clear the <canvas>清除画布
	gl.clear(gl.COLOR_BUFFER_BIT);

	//Draw the triangle
	gl.drawArrays(gl.TRIANGLES, 0, n); //4 Draw a triangle
}

function initVertexBuffers(gl) {
	var n = 3;
	var vertices = new Float32Array([0.0, 0.3, 0.3, -0.3, -0.3, -0.3]); // THe defination of vertices

	//Create vertexBuffer object
	var vertexBuffer = gl.createBuffer();
	if (!vertexBuffer) {
		console.log('Failed to create the buffer object');
		return -1;
	}
	//Bind the buffer object to the target
	gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
	//write datas into the buffer object
	gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

	var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
	if (a_Position < 0) {
		console.log('Failed to get storage location of a_Position');
		return -1;
	}
	//Assign the buffer object to a_Positino variable 
	gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

	//Enable the assignment to a_Position variable
	gl.enableVertexAttribArray(a_Position);
	return n;
}

补充：

gl.vertexAttribPointer(location, size, type, normalized, stride, offset)

将绑定到gl.ARRAY_BUFFER的缓冲区对象分配给location指定的attribute变量

IICheny

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
彩色多边形复合变换

TranslatedRotatedTriangle沿y轴平移0.6，旋转-45度效果图：HTML<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body onload...
复制链接

扫一扫