fc-vista: 少しましなWebGLサンプル

はじめてのWebGLのサンプルはindex.htmlにGLSLもJavaScriptもすべて詰め込んでしまっていたので、GLSLをHTMLに書いて、JavaScriptは切り分けるように書き直した。webgl-debug.jsはDebugging - WebGL Public Wikiの物を使えばいいです。

	<html>
	<head>
	<title>WebGL</title>
	<script src="script.js" type="text/javascript"></script>
	<script src="webgl-debug.js" type="text/javascript"></script>
	<script id="shader-vs" type="x-shader/x-vertex">
	attribute vec3 aVertexPosition;

	void main(){
	gl_Position = vec4(aVertexPosition, 1.0);
	}
	</script>
	<script id="shader-fs" type="x-shader/x-fragment">
	precision mediump float;

	void main(){
	gl_FragColor = vec4(1.0,1.0,1.0,1.0);
	}
	</script>
	</head>
	<body onload="startup();">
	<canvas id="myGLCanvas" width="500" height="500"></canvas>
	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

	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 loadShaderFromDOM(id){
	var shaderScript = document.getElementById(id);
	if(!shaderScript){
	return null;
	}

	var shaderSource = "";
	var currentChild = shaderScript.firstChild;
	while(currentChild){
	if(currentChild.nodeType == 3){
	shaderSource += currentChild.textContent;
	}
	currentChild = currentChild.nextSibling;
	}

	var shader;
	if(shaderScript.type == "x-shader/x-fragment"){
	shader = gl.createShader(gl.FRAGMENT_SHADER);
	}else if(shaderScript.type == "x-shader/x-vertex"){
	shader = gl.createShader(gl.VERTEX_SHADER);
	}else{
	return null;
	}

	gl.shaderSource(shader,shaderSource);
	gl.compileShader(shader);

	if(!gl.getShaderParameter(shader,gl.COMPILE_STATUS)){
	alert("Error compiling shader " + gl.getShaderInfoLog(shader));
	return null;
	}

	return shader;

	}

	function setupShaders(){
	var vertexShader = loadShaderFromDOM("shader-vs");
	var fragmentShader = loadShaderFromDOM("shader-fs");
	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);
	if(window.WebGLDebugUtils){
	gl = WebGLDebugUtils.makeDebugContext(gl);
	}
	setupShaders();
	setupBuffers();
	gl.clearColor(0.0,0.0,0.0,1.0);
	draw();
	}

view raw script.js hosted with ❤ by GitHub

fc-vista

2014年9月15日月曜日

少しましなWebGLサンプル

0 件のコメント: