上面的代码主要分为初始化立方体的着色器对象，初始化相关缓存，然后绘制立方体，可以说在Opengl中，如果用着色器来画，过程也是差不多的，在Opengl里，已经没有固定管线的一些功能如InterleavedArrays来指定是顶点还是法线或是纹理了，统一用vertexAttribPointer来传递应用程序与着色器之间的数据。在前面 MD2桢动画实现里面后面的参数传递改进版也有相关应用。
相应着立方体着色器主要代码如下：
立方体着色器实现：
<script type="x-shader/x-fragment"> 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); } </script> <script type="x-shader/x-vertex"> 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; } </script>
着色器中，已经没有ftransform()功能可供调用，要自己传递如模型，视图，透视矩阵，在这里，模型是以原点为中心来绘画，意思模型视图矩阵也就是视图矩阵，所以屏幕位置的计算只需要视图和透视矩阵。在片断着色器中，x,y是从顶点着色器中的纹理坐标传递过来，相应过程6.28*8.0,相当于8个360度，用于控制立方体上的方块显示，而tex2是着色器中的顶点映射[0,1]的值，分别给立方体的六面分别设置不同的意思，然后用二个矢量的乘积来混合这二种颜色显示，gl_FragColor = vec4(tex2,1.0) * vec4(sign(cos(x)+cos(y)))。
在显示球体之前，应该先生成当前环境的立方体绘图，在这里使用FBO，先生成桢缓存和立方体绘理，并关联，然后以原点为中心，分别向上下左右前右绘图，然后利用桢缓冲分别输出到立方体上的六个面，主要代码如下：
FBO与立方体纹理：
function InitFBOCube() { // WebGLFramebuffer fboBuffer = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, fboBuffer); fboBuffer.width = 512; fboBuffer.height = 512; cubeTexID = gl.createTexture(); gl.bindTexture(gl.TEXTURE_CUBE_MAP, cubeTexID); gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.LINEAR); for (var i = 0; i < targets.length; i++) { gl.texImage2D(targets[i], 0, gl.RGBA, fboBuffer.width, fboBuffer.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); } gl.bindFramebuffer(gl.FRAMEBUFFER, null); } function RenderFBO() { gl.disable(gl.DEPTH_TEST); gl.viewport(0, 0, fboBuffer.width, fboBuffer.height); gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.bindFramebuffer(gl.FRAMEBUFFER, fboBuffer); for (var i = 0; i < targets.length; i++) { gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, targets[i], cubeTexID, null); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); } mat4.perspective(pMatrix, 45, fboBuffer.width / fboBuffer.height, 0.1, 100.0); for (var i = 0; i < targets.length; i++) { gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, targets[i], cubeTexID, null); var lookat = vec3.create(); var up = vec3.create(); up[1] = 1.0; if (i == 0) { lookat[0] = -1.0; } else if (i == 1) { lookat[0] = 1.0; } else if (i == 2) { lookat[1] = -1.0; up[0] = 1.0; } else if (i == 3) { lookat[1] = 1.0; up[0] = 1.0; } else if (i == 4) { lookat[2] == -1.0; } else if (i == 5) { lookat[2] = 1.0; } else { } //vec3.fromValues(0.0, 0.0, 0.0) vMatrix = mat4.create(); mat4.lookAt(vMatrix, vec3.fromValues(0.0, 0.0, 0.0), lookat, up); //mat4.scale(vMatrix, vMatrix, vec3.fromValues(-1.0, -1.0, -1.0)); //mat4.translate(vMatrix, vMatrix, spherePos); RenderCube(); } gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.enable(gl.DEPTH_TEST); }