WebGL绘制四边形

最新推荐文章于 2024-03-21 20:19:47 发布

11_bb

最新推荐文章于 2024-03-21 20:19:47 发布

阅读量136

点赞数

分类专栏： WebGL 文章标签： webgl javascript 前端

本文链接：https://blog.csdn.net/bb_111/article/details/127174232

版权

WebGL 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

WebGL绘制四边形

1.html部分

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<title>Chapter 1. First WebGL Demo</title>
		<!-- 顶点着色器和片元着色器代码 -->
		<script id="vertex-shader" type="x-shader/x-vertex">
			attribute vec4 vPosition;
		
			void main(){
				gl_Position = vPosition;
			}
		</script>
		<script id="fragment-shader" type="x-shader/x-fragment">
			precision mediump float;
			varying vec4 fColor;
			void main(){
				gl_FragColor = vec4( 1.0, 1.0, 0.0, 1.0 );
			}
		</script>
		<!-- 一组相关的JS库 -->
		<script type="text/javascript" src="../js/common/webgl-utils.js"></script>
		<script type="text/javascript" src="../js/common/initShaders.js"></script>
		<script type="text/javascript" src="../js/common/glMatrix-0.9.5.min.js"></script>
		<!-- 绘制三角形的JS代码 -->
		<script type="text/javascript" src="../js/ch01/triangle.js"></script>
	</head>
	<body>
		<canvas id="triangle-canvas" style="border:none;" width="500" height="500"></canvas>
	</body>
</html>

2.js文件夹

（包含ch01文件夹和common文件夹）

ch01文件夹下

1.triangle.js

"use strict";

var gl;
var points;

window.onload = function init(){
	var canvas = document.getElementById( "triangle-canvas" );
	gl = WebGLUtils.setupWebGL( canvas );
	if( !gl ){
		alert( "WebGL isn't available" );
	}

	// Three Vertices
	var vertices = [
		-1.0, -1.0, 
		-1.0,  1.0, 
		 1.0, -1.0, 
		-1.0,  1.0, 
		 1.0, -1.0,
		 1.0,1.0,
		/*0.0, -1.0,
		 1.0, -1.0,
		 1.0,  1.0,
		 0.0, -1.0,
		 1.0,  1.0,
		 0.0,  1.0*/
		 /*-0.5, -0.5,
		 0.0, 0.5,
		 0.5, -0.5*/
	];

	// Configure WebGL
	gl.viewport( 0, 0, canvas.width, canvas.height );
	gl.clearColor( 1.0, 1.0, 1.0, 1.0 );

	// Load shaders and initialize attribute buffers
	var program = initShaders( gl, "vertex-shader", "fragment-shader" );
	gl.useProgram( program );

	// Load the data into the GPU
	var bufferId = gl.createBuffer();
	gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );
	gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( vertices ), gl.STATIC_DRAW );

	// Associate external shader variables with data buffer
	var vPosition = gl.getAttribLocation( program, "vPosition" );
	gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 );
	gl.enableVertexAttribArray( vPosition );

	render();
}

function render(){
	gl.clear( gl.COLOR_BUFFER_BIT );
	//gl.drawArrays( gl.TRIANGLE_FAN, 0, 4 );
	gl.drawArrays( gl.TRIANGLES, 0, 6 );
	//gl.drawArrays( gl.TRIANGLE_FANS, 3, 6 );
}