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

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

WebGLRenderingContext 2 var cubeVBO;//Cube buffer ID 3 var sphereVBO;//球体VBO 4 var sphereEBO;//球体EBO 5 var cubeTexID;//立方体纹理ID 6 var fboBuffer;//桢缓存对象 7 var glCubeProgram;//立方体着色器应用 8 var glSphereProgram;//球体着色器应用 9 10 var fboWidth = 512;//桢缓存绑定纹理宽度 11 var fboHeight = 512;//桢缓存绑定纹理高度 12 var targets;//立方体贴图六个方向 13 14 var pMatrix = mat4.create();//透视矩阵 15 var vMatrix = mat4.create();//视图矩阵 16 var eyePos = vec3.fromValues(0.0, 1.0, 0.0);//眼睛位置 17 var eyeLookat = vec3.fromValues(0.0, -0.0, 0.0);//眼睛方向 18 var spherePos = vec3.fromValues(0.0, -0.0, 0.0);//球体位置 19 var canvanName; 20 21 function webGLStart(cName) { 22 canvanName = cName; 23 InitWebGL(); 24 InitCubeShader(); 25 InitSphereShader(); 26 InitCubeBuffer(); 27 InitSphereBuffer(); 28 InitFBOCube(); 29 //RenderFBO(); 30 gl.clearColor(0.0, 0.0, 0.0, 1.0); 31 gl.enable(gl.DEPTH_TEST); 32 tick(); 33 } 34 35 function InitWebGL() { 36 //var canvas = document.getElementById(canvanName); 37 InitGL(canvanName); 38 } 39 40 function InitGL(canvas) { 41 try { 42 //WebGLRenderingContext 43 gl = canvas.getContext("experimental-webgl"); 44 gl.viewportWidth = canvas.width; 45 gl.viewportHeight = canvas.height; 46 47 targets = [gl.TEXTURE_CUBE_MAP_POSITIVE_X, 48 gl.TEXTURE_CUBE_MAP_NEGATIVE_X, 49 gl.TEXTURE_CUBE_MAP_POSITIVE_Y, 50 gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, 51 gl.TEXTURE_CUBE_MAP_POSITIVE_Z, 52 gl.TEXTURE_CUBE_MAP_NEGATIVE_Z]; 53 } catch (e) { } 54 if (!gl) { alert("你的浏览器不支持WebGL"); } 55 }