fc-vista: はじめてのWebGL

かなり前だがOpenGLを少し触ったことがあるので、そのWeb版のWebGLを試してみた。白い三角形を表示するだけど、さすがOpenGLでめちゃめちゃやることが多い。ただthree.jsやglMatrix.jsは甘えの思想のもと素のJavaScript/htmlで書いたのでサンプル的にはいいと思います。

	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<title>WebGL Sample</title>
	<meta charset="utf-8">
	<script type="text/javascript">
	var gl;
	var canvas;
	var shaderProgram;
	var vertexBuffer;

	function createGLContext(canvas){
	var context = null;
	context = canvas.getContext("webgl");
	if(context){
	context.viewportWidth = canvas.width;
	context.viewportHeight = canvas.height;
	} else {
	alert("Failed to create WebGL context");
	}
	return context;
	}

	function loadShader(type, shaderSource) {
	var shader = gl.createShader(type);
	gl.shaderSource(shader,shaderSource);
	gl.compileShader(shader);
	if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
	alert("Error compiling shader" + gl.getShaderInfoLog(shader));
	gl.deleteShader(shader);
	return null;
	}
	return shader;
	}

	function setupShaders(){

	var vertexShaderSource =
	"attribute vec3 aVertexPosition;\n" +
	"void main() {\n" +
	" gl_Position = vec4(aVertexPosition,1.0);\n" +
	"}\n";

	var fragmentShaderSource =
	"precision mediump float;\n" +
	"void main() {\n" +
	" gl_FragColor = vec4(1.0,1.0,1.0,1.0);\n" +
	"}\n";

	var vertexShader = loadShader(gl.VERTEX_SHADER, vertexShaderSource);
	var fragmentShader = loadShader(gl.FRAGMENT_SHADER, fragmentShaderSource);

	shaderProgram = gl.createProgram();
	gl.attachShader(shaderProgram,vertexShader);
	gl.attachShader(shaderProgram,fragmentShader);
	gl.linkProgram(shaderProgram);

	if(!gl.getProgramParameter(shaderProgram,gl.LINK_STATUS)){
	alert("Failed to setup shaders");
	}
	gl.useProgram(shaderProgram);
	shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram,"aVertexPosition");
	}

	function setupBuffers(){
	vertexBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
	var triangleVertices = [
	0.0, 0.5, 0.0,
	-0.5,-0.5, 0.0,
	0.5,-0.5, 0.0
	];
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices),gl.STATIC_DRAW);
	vertexBuffer.itemSize = 3;
	vertexBuffer.numberOfItems = 3;
	}

	function draw() {
	gl.viewport(0,0,gl.viewportWidth,gl.viewportHeight);
	gl.clear(gl.COLOR_BUFFER_BIT);
	gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
	gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
	gl.drawArrays(gl.TRIANGLES,0,vertexBuffer.numberOfItems);
	}

	function startup(){
	canvas = document.getElementById("myGLCanvas");
	gl = createGLContext(canvas);
	setupShaders();
	setupBuffers();
	gl.clearColor(0.0,0.0,0.0,1.0);
	draw();
	}
	</script>
	</head>
	<body onload="startup();">
	<canvas id="myGLCanvas" width="500" height="500"></canvas>
	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

fc-vista

2014年8月23日土曜日

はじめてのWebGL

0 件のコメント: