javascript [webgl的]四角形メッシュ描画

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript [webgl的]四角形メッシュ描画相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
<title>SquireMesh</title>
<script src="minMatrix.js"></script>
<script src="square.js"></script>
<script id="vs" type="x-shader/x-vertex">
attribute vec3 pos;
attribute vec4 color;
varying vec4 vColor;
void main()
{
	vColor = color;
	gl_Position = vec4(pos, 1);
}
</script>
<script id="fs" type="x-shader/x-fragment">
precision mediump float;
varying vec4 vColor;
void main()
{
	gl_FragColor = vColor;
}
</script>
</head>
<body><canvas id="canvas"></canvas></body>
</html>

/**
 * 四角形メッシュをIndexBufferを利用して描画する
 */
window.onload = function()
{
	console.log("===== Entry =====");
	var canvas = document.getElementById('canvas');
	canvas.width = canvas.height = 300;
	var gl = canvas.getContext('webgl');
	
	var vs = gl.createShader(gl.VERTEX_SHADER);
	var fs = gl.createShader(gl.FRAGMENT_SHADER);
	gl.shaderSource(vs, document.getElementById('vs').text);
	gl.shaderSource(fs, document.getElementById('fs').text);
	gl.compileShader(vs);
	gl.compileShader(fs);
	
	var prog = gl.createProgram();
	gl.attachShader(prog, vs);
	gl.attachShader(prog, fs);
	
	gl.linkProgram(prog);
	if (gl.getProgramParameter(prog, gl.LINK_STATUS))
	{
		gl.useProgram(prog);
	}
	
	var attrList = [];
	var strideList = [];
	attrList[0] = gl.getAttribLocation(prog, "pos");
	attrList[1] = gl.getAttribLocation(prog, "color");
	strideList[0] = 3;
	strideList[1] = 4;
	
	// attribute pos
	var posVbo = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, posVbo);
	gl.enableVertexAttribArray(attrList[0]);
	gl.vertexAttribPointer(attrList[0], strideList[0], gl.FLOAT, false, 0, 0);
	// 4頂点
	var posData = [
		-0.5, 0.5, 0,
		0.5, 0.5, 0,
		0.5, -0.5, 0,
		-0.5, -0.5, 0
	];
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(posData), gl.STATIC_DRAW);
	gl.bindBuffer(gl.ARRAY_BUFFER, null);
	
	// IBO
	var ibo = gl.createBuffer();
	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);
	var indexList = [
		0, 1, 3,
		3, 1, 2
	];
	gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Int16Array(indexList), gl.STATIC_DRAW);
	// IndexBufferはバインドした状態じゃないとdrawElementsが動かない
	//gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
	
	// attribute color
	var colorVbo = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, colorVbo);
	gl.enableVertexAttribArray(attrList[1]);
	gl.vertexAttribPointer(attrList[1], strideList[1], gl.FLOAT, false, 0, 0);
	var colorData = [
		1,1,1,1,
		1,0,0,1,
		0,1,0,1,
		0,0,1,1
	];
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colorData), gl.STATIC_DRAW);
	gl.bindBuffer(gl.ARRAY_BUFFER, null);
	
	// draw
	
	gl.clearColor(0,0,0,1);
	gl.clear(gl.COLOR_BUFFER_BIT);
	
	gl.drawElements(gl.TRIANGLES, indexList.length, gl.UNSIGNED_SHORT, 0);
};

以上是关于javascript [webgl的]四角形メッシュ描画的主要内容，如果未能解决你的问题，请参考以下文章

csharp UGUIで动的にメッシュを描画する

csharp 简易的なお絵かきメッシュの动的生成

ruby redirect_to的时のフラッシュメッセージ

WebGL-利用索引缓存来绘图

WebGL入门教程-webgl绘制三角形

webgl 三角形绘制