先直接看成果

以上為展示影片，既然說是webgl了，當然可以直接用瀏覽器連

測試網址

但是如果有碰到瀏覽器不支援就先抱歉了，因為我還沒處理到這塊。

今天的工作就是處理星星的部分。

因為之前的星星都只在一個固定的方向，當地球開始旋轉了之後，星星就不見了。

有想過說，用dynamic buffer的形式，一旋轉就重新計算星星的位置，但是從螢幕上的點反投影的計算

一直都怪怪的！ 於是乾脆想別的方法，就是在xz平面的八個方位（東 西 南 北 東南 西南 西北 東北）都貼上一片星星，

這樣看起來就是會被星星圍繞的！

所以首先一開始的 點坐標buufer，材質坐標buffer，繪圖所以buffer都全部改成陣列

var
starFieldVerticeBuffer = [],
starFieldIndexBuffer = [],
starFieldTextureCordBuffer = []

然後將setupStarField包裝成一個函式

function setupStarFieldBuffer(normal,xvec,yvec)
{
	var number = 100;
	var group = 5;
	var center = [0,0,-1]; 
	var radius = 0.2;
	var depth = 50.0;
	
	var starField = new StarField(normal,group,number,center,radius,depth,xvec,yvec);
	starField.buildField();
	
	var starfieldVerticeArray =  starField.starFieldQuadArray;// starField.starFieldQuadArray;
	var starfieldVerticeIndiceArray = starField.starFieldIndiceArrayForPlane;// starField.starFieldIndiceArray;

	vertexBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(starfieldVerticeArray), gl.STATIC_DRAW);		
	starFieldVerticeBuffer.push(vertexBuffer);
	
	var indexBuffer = [];

	for(var i=0;i<starfieldVerticeIndiceArray.length;i++){

		indexBuffer[i] = gl.createBuffer();
		indexBuffer[i].number_vertex_points = starfieldVerticeIndiceArray[i].length;
		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer[i]);
		gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(starfieldVerticeIndiceArray[i]), gl.STATIC_DRAW);		
	}
	starFieldIndexBuffer.push(indexBuffer);
	
	textureCordBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER,textureCordBuffer);
	gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(starField.starFieldTextureCordArray),gl.STATIC_DRAW);
	starFieldTextureCordBuffer.push(textureCordBuffer);
}

輸入的參數就是法向量，以及法向量所代表的那個平面的兩個正交的向量。

然後setupBuffer中加入

function setupDynamicBuffers(){
	// star field
	var normals=[];
	normals.push([0,0,-1]);
	normals.push([0,0,1]);
	normals.push([1,0,0]);
	normals.push([-1,0,0]);
	normals.push([1,0,1]);
	normals.push([1,0,-1]);
	normals.push([-1,0,1]);
	normals.push([-1,0,-1]);
	// xvec,yvec
	
	var xvecs=[];
	xvecs.push([1,0,0]);
	xvecs.push([1,0,0]);
	xvecs.push([0,0,1]);
	xvecs.push([0,0,1]);
	xvecs.push([1,0,-1]);
	xvecs.push([1,0,1]);
	xvecs.push([1,0,1]);
	xvecs.push([1,0,-1]);

	var yvecs=[];
	yvecs.push([0,1,0]);
	yvecs.push([0,1,0]);
	yvecs.push([0,1,0]);
	yvecs.push([0,1,0]);
	yvecs.push([0,1,0]);
	yvecs.push([0,1,0]);
	yvecs.push([0,1,0]);
	yvecs.push([0,1,0]);

	for(var i=0;i<8;i++){
		setupStarFieldBuffer(normals[i],xvecs[i],yvecs[i]);
	}
}

分別設定八個方位的星星坐標系

然後一樣把星星的繪圖函式包起來

function drawStarfield(vertexBuffer,indiceBufferArray,texturecordBuffer)
{
	 vertexPositionAttribute = gl.getAttribLocation(glProgram, "aVertexPosition");
	 gl.enableVertexAttribArray(vertexPositionAttribute);
	 
	gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
	gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
	
	vertexTexCoordAttribute = gl.getAttribLocation(glProgram, "aTextureCoord");
    gl.enableVertexAttribArray(vertexTexCoordAttribute);

	gl.bindBuffer(gl.ARRAY_BUFFER,texturecordBuffer);
	gl.vertexAttribPointer(vertexTexCoordAttribute, 2, gl.FLOAT, false, 0, 0);
	
	glProgram.textureSwitch = gl.getUniformLocation(glProgram,"textureSwitch"); 
	
	for(var i=0;i<STAR_TEXTURE_5;i++){
		 
		gl.bindTexture(gl.TEXTURE_2D, texture[i]);
		gl.uniform1i(glProgram.textureSwitch,i+1);
		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indiceBufferArray[i]);  
		gl.drawElements(gl.TRIANGLES, indiceBufferArray[i].number_vertex_points, gl.UNSIGNED_SHORT, 0);

	}
	
}

輸入的函式就是繪圖所需要的那三個buffer（位置，材質，索引）

最後在drawScene函式中，把星星畫出來即可

  var length = starFieldTextureCordBuffer.length;
    for(var i=0;i<length;i++){
    	drawStarfield(starFieldVerticeBuffer[i],starFieldIndexBuffer[i],starFieldTextureCordBuffer[i] );
    }

如此一來就大功告成囉～～

明天就可以加入FB登入，截取資訊的要素！