WebGL实现简单的图像绘制与变换总结

最新推荐文章于 2024-07-30 18:00:16 发布

IICheny

最新推荐文章于 2024-07-30 18:00:16 发布

阅读量721

点赞数

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

版权

本文总结了使用WebGL进行简单图像绘制和变换的方法，包括DrawRectangle、FillCanvas、着色器的使用、DrawPoint及其属性、鼠标点击事件、缓冲区与缓冲对象的运用，以及图形的平移、旋转和缩放变换。详细阐述了顶点着色器、片元着色器的工作原理，并通过五角星变换实例进行了深入解析。

摘要由CSDN通过智能技术生成

DrawRectangle

前台HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Draw a blue rectangle</title>
	</head>
	<body onload="main()">
		<canvas id="explame" width="500" height="500">
			please use a browser the support "canvas"
		</canvas>
		<script src="js/DrawRectangle.js">
		</script>
	</body>
</html>

后台 js

function main()
{
	// Retrieve <canvas> element,example
	var canvas = document.getElementById('explame');
	if(!canvas)
	{
		console.log('Failed to retrive the <canvas> Element');
		return false;
	}
	// Get the rendering context for 2DCG
	var ctx = canvas.getContext('2d');
	// Draw: set color, fill
	ctx.fillStyle = 'rgba(0,0,255,1.0)';
	ctx.fillRect(120,10,150,150);
}

fillStyle设置填充颜色

fillRect设置填充区域的位置与大小

FillCanvas

前台

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Fill Canvas</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="../js/FillCanvas.js"></script>
	</body>
</html>

后台

function main()
{
	// Retrieve <canvas> element,
	var canvas = document.getElementById('webgl');
	var gl = getWebGLContext(canvas);
	if(!gl)
	{
		console.log('Failed to get the rendering context for WebGL');
		return ;
	}
	// Set clear color
	gl.clearColor(0.0, 0.0, 0.0, 1.0);
	// Clear <canvas>
	gl.clear(gl.COLOR_BUFFER_BIT);
}

获取canvas的数据上下文并传给gl

clearColo语句起到set的作用，需要和clear语句联合使用

gl.clear(gl.COLOR_BUFFER_BIT) 指定刷新颜色缓冲区时所用的颜色

clear语句相比填充背景画布高效省力

着色器的使用

着色器类型

顶点着色器(Vertexshader)用来描述顶点特性（如位置、颜色等）的程序，通常是二维或者三维图形的端点或者焦点。

片元着色器(Fragmentshader)进行逐片处理如光照的程序，可以理解为像素（图像的单元）。

类型

变量名

描述

vec4

gl_Position

表示顶点位置

float

gl_PointSize

表示顶点的尺寸（像素数）

vec4是一个齐次坐标(x, y, z,w)即为(x/w, y/w, z/w），由此齐次坐标有规模不变性，还可以表示无穷远处的点。齐次坐标就是将一个原本是n维的向量用一个n+1维向量来表示。

DrawPoint

// Vertexshader program
var VSHADER_SOURCE =
  'void main() {\n' +
  ' gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // Set the vertexcoordinates of the point
  ' gl_PointSize = 50.0;\n' +                    // Set the point size
  '}\n';

//Fragment shader program
var FSHADER_SOURCE =
  'void main() {\n' +
  ' gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);\n' + // Set the point color
  '}\n';

function main()
{
	// Retrieve <canvas> element,
	var canvas = document.getElementById('webgl');
	
	var gl = getWebGLContext(canvas);
	if(!gl)
	{
		console.log('Failed to get the rendering context for WebGL');
		return ;
	}
	//Initialize shaders
	if (!initShad

最低0.47元/天解锁文章

IICheny

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
WebGL实现简单的图像绘制与变换总结

DrawRectangle前台HTML<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Draw a blue rectangle</title> </head> <body onload="main()"...
复制链接

扫一扫