2021-01-29 WebGL Beginner‘s Guide 学习笔记

最新推荐文章于 2024-05-09 22:40:26 发布

Zackberg

最新推荐文章于 2024-05-09 22:40:26 发布

阅读量180

点赞数 1

文章标签： webgl

本文链接：https://blog.csdn.net/weixin_46177681/article/details/113407550

版权

【WebGL】学习笔记（一）

实现 ”屏幕中央绘制蓝色三角形“ 的WebGL代码

<!DOCTYPE html>
<html>
<head>
	<title>try3</title>
</head>
<body>
	<canvas id="Acanvas" style="border:10px solid #191970;" width="300" height="300"></canvas>
	<script style="text/javascript">
		//1.获取上下文环境
		var canvas = document.getElementById("Acanvas");
		var gl = canvas.getContext('webgl');
		//2.初始化画布信息
		gl.viewport(0,0,canvas.width,canvas.height);
		gl.clearColor(0.9,0.9,0.99,1);
		gl.clear(gl.COLOR_BUFFER_BIT);
		//3.创建着色器
		var vs = gl.createShader(gl.VERTEX_SHADER);
		var vs_code = `
			attribute vec4 pos;
			void main(){
				gl_Position = pos;
			}
		`;
		gl.shaderSource(vs, vs_code);
		gl.compileShader(vs);

		var fs = gl.createShader(gl.FRAGMENT_SHADER);
		var fs_code = `
			precision highp float;
			uniform vec4 color;
			void main(){
				gl_FragColor = color;
			}
		`;
		gl.shaderSource(fs, fs_code);
		gl.compileShader(fs);

		//4.创建着色器程序
		var prg = gl.createProgram();
		gl.attachShader(prg,vs);
		gl.attachShader(prg,fs);
		gl.linkProgram(prg);
		gl.useProgram(prg);
		//（4）预准备信息
		var posLocation = gl.getAttribLocation(prg,'pos');
		gl.enableVertexAttribArray(posLocation);
		var ucolorLocation = gl.getUniformLocation(prg,'color');
		//5.顶点、索引数组
		var vertex = new Float32Array([
			-0.5,-0.4,0,
			0,0.4,0,
			0.5,-0.4,0
			]);

		var index = new Uint8Array([0,1,2]);
		//6.创建缓冲区
		var vs_buffer = gl.createBuffer();
		gl.bindBuffer(gl.ARRAY_BUFFER, vs_buffer);
		gl.bufferData(gl.ARRAY_BUFFER, vertex, gl.STATIC_DRAW);
		gl.vertexAttribPointer(gl.posLocation, 3, gl.FLOAT, false, 0, 0);

		var fs_buffer = gl.createBuffer();
		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, fs_buffer);
		gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, index, gl.STATIC_DRAW);
		gl.uniform4fv(ucolorLocation,[0.5,0.5,0.7,1]);
		//7.渲染
		gl.drawElements(gl.TRIANGLES,index.length,gl.UNSIGNED_BYTE,0);	//**是unsigned_byte!!
	</script>
</body>
</html>