baobao
3/9/2018 - 10:31 AM

[webgl]uniform変数と行列使用

[webgl]uniform変数と行列使用

uniform_matrix.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
<title>uniform_matrix</title>
<script src="minMatrix.js"></script>
<script src="uniform_matrix.js"></script>
<script id="vs" type="x-shader/x-vertex">
attribute vec3 pos;
attribute vec4 color;
uniform mat4 mvpMatrix;
varying vec4 vColor;
void main ()
{
	vColor = color;
	gl_Position = mvpMatrix * vec4(pos, 1.0);
}
</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>
uniform_matrix.js
content_copyfile_download
/**
 * uniform変数と行列計算
 */
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);
	}
	else{
		console.log(gl.getParameterInfoLog(prog));
		return;
	}
	
	var attrList = [];
	var strideList = [];
	var uniformList = [];
	
	attrList[0] = gl.getAttribLocation(prog, "pos");
	attrList[1] = gl.getAttribLocation(prog, "color");
	strideList[0] = 3;
	strideList[1] = 4;
	uniformList[0] = gl.getUniformLocation(prog, "mvpMatrix");
	
	// attribute position
	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);
	var posData = [
		0, 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);
	
	// 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,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);
	
	// uniform mvpMatrix
	var m = new matIV();
	
	var mMatrix = m.identity(m.create());
	var vMatrix = m.identity(m.create());
	var pMatrix = m.identity(m.create());
	var vpMatrix = m.identity(m.create());
	var mvpMatrix = m.identity(m.create());
	
	m.lookAt(
		[0,0,-5],
		[0,0,0],
		[0,1,0],
		vMatrix
	);
	m.perspective(
		90,
		1,
		0,
		10,
		pMatrix
	);
	m.multiply(pMatrix, vMatrix, vpMatrix);
	
	var count = 0;
	var speed = 0.05;
	var posY = 0;
	function draw()
	{
		gl.clearColor(0,0,0,1);
		gl.clear(gl.COLOR_BUFFER_BIT);
		// 上下を行ったり来たりするアニメーション
		if (posY > 1)
		{
			speed *= -1;
			count = 0;
		}
		else if (posY < -2)
		{
			speed *= -1;
			count = 0;
		}
		posY += speed;
		
		m.identity(mMatrix);
		m.translate(mMatrix, [0, posY, 0, 1],mMatrix);
		m.multiply(vpMatrix, mMatrix, mvpMatrix);
		// uniform mat4へデータのデータを更新する
		gl.uniformMatrix4fv(uniformList[0], false, mMatrix);
		gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);	
		setTimeout(draw, 1000/30);
	}
	draw();
};