WebGL 利用FBO完成立方体贴图。

这篇主要记录WebGL的一些基本要点，顺便也学习下如何使用FBO与环境贴图。先看下效果图(需要支持WebGL，Chrome,火狐，IE11)。

// precision mediump float;

varying vec3 normal;
varying vec3 tex1;
varying vec3 tex2;
void main( void )
{
float x = tex1.x * 6.28 * 8.0; //2兀 * 8
float y = tex1.y * 6.28 * 8.0; //2兀 * 8
//cos(x)= 8个 (1 -1 1)
gl_FragColor = vec4(tex2,1.0) * vec4(sign(cos(x)+cos(y))); //
//gl_FragColor = vec4(normal*vec3(0.5)+vec3(0.5), 1);
}
// ]]>// attribute vec3 a_position;
attribute vec3 a_normal;
attribute vec2 a_texCoord;

uniform mat4 view;
uniform mat4 perspective;
varying vec3 normal;
varying vec3 tex1;
varying vec3 tex2;
void main( void )
{
gl_Position = perspective * view * vec4(a_position,1.0);
normal = a_normal;
tex1 = vec3(a_texCoord,0.0);
tex2 = normalize(a_position)*0.5+0.5;
}
// ]]>// precision mediump float;

varying vec3 normal;
varying vec3 eyevec;
uniform samplerCube mapCube;
void main( void )
{
gl_FragColor = textureCube(mapCube, reflect(normalize(-eyevec), normalize(normal)));
}
// ]]>// attribute vec3 a_position;
attribute vec3 a_normal;

uniform mat4 model;
uniform mat4 view;
uniform mat4 perspective;
uniform vec3 eye;

varying vec3 normal;
varying vec3 eyevec;

void main( void )
{
gl_Position = perspective * view * model * vec4(a_position,1.0);
eyevec = -eye;// a_position.xyz;
normal = a_normal;
}
// ]]>// webGLStart(fboCanvas);
// ]]>

　　主要实现过程如下，先用FBO输出当前环境在立方体纹理中，再画出当前立方体，最后画球，并且把FBO关联的纹理贴在这个球面上。

　　开始WebGL时，最好有些OpenGL基础，在前面讲Obj完善与MD2时，大家可能已经发现了，因为着色器的添加使用，原来一些Opengl大部分API已经没有使用。WebGL就和这差不多，大部分功能是着色器完成主要功能，记录下主要过程，大家可以比较下前面的，看看是不是很像，为了熟悉WebGL基本功能，本文没有利用比较完善的框架，只是用到一个帮助计算矩阵的框架(gl-matrix.js).

　　和使用OpenGL一样，我们要初始化使用环境，提取一些全局使用量。相关代码如下：

1 function tick() {
2     Update();
3     OnDraw();
4     setTimeout(function () { tick() }, 15);
5 }
6 function OnDraw() {
7     //fbo rander CUBE_MAP
8     RenderFBO();
9     //element rander
10     gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
11     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
12     mat4.perspective(pMatrix, 45, gl.viewportWidth / gl.viewportHeight, 0.1, 200.0);
13     mat4.lookAt(vMatrix, eyePos, eyeLookat, vec3.fromValues(0.0, 1.0, 0.0));
14     RenderCube();
15     RenderSphere();
16 }
17
18 var lastTime = new Date().getTime();
19 function Update() {
20     var timeNow = new Date().getTime();
21     if (lastTime != 0) {
22         var elapsed = timeNow - lastTime;
23         //3000控制人眼的旋转速度。8控制人眼的远近
24         eyePos[0] = Math.cos(elapsed / 3000) * 8;
25         eyePos[2] = Math.sin(elapsed / 2000) * 8;
26
27         spherePos[0] = Math.cos(elapsed / 4000) * 3;
28         spherePos[2] = Math.cos(elapsed / 4000) * 3;
29     }
30
31 }

动画
　　在上面，每隔15毫秒调用一次Update与Draw函数，其中Update用于更新眼睛与球体位置，Draw绘画。

　　有二年没做网页上的开发，可能其中javascript的用法让大家见笑了，动态语言实在太自由了，反而不好写。

　　源代码

　　在新的一年的第一天，祝大家事事如意。