在支持HTML5的浏览器上运行WebGL程序的方法

互联网
春天来了！你看，融化的冰水把小溪弄醒了。 "丁粳、丁粳 "，它就像大自然的神奇歌手，唱着清脆悦耳的歌，向前奔流……

前提条件和预期结果

目前只有少数的浏览器支持 WebGL ，请看我的另外一篇文章：Can I use WebGL?.

下面的例子是在 Windows 下的 Chrome 16/23 以及 Android 下的 Firefox 17 进行测试。如果你使用的是非兼容浏览器访问则会弹出一个警告。

图1：包含 Hello world 文本的动画的 WebGL 立方体
在兼容 HTML5 的浏览器上，你将会看到如下图所示的带动画效果的立方体：

图2: 示例运行的屏幕截图


该代码基于 Lighting in WebGL - How to simulate lighting effects in your WebGL context - 非常感谢这篇好代码教程。在该实例初始运行时，动画的立方体是通过一个静态的 Bitmap 图形对象渲染的。

下面的代码演示如何在程序中动态的渲染文本：

XML/HTML Code复制内容到剪贴板
  1. //TODO#1Newmethodtocreateatexture
  2. functioncreateCubeTexture(text){
  3. ...
  4. }

在这里使用 gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); 是非常重要的，用来确保写文本时不会前后颠倒。剩下的就很容易理解了：

XML/HTML Code复制内容到剪贴板
  1. //TODO#2Assignthecreatedtexturefordisplay
  2. cubeTexture=createCubeTexture("HelloWorld!");

源码

// File #1: webgl-demo.htm

XML/HTML Code复制内容到剪贴板
  1. <html>
  2. <head>
  3. <title>WebGL-HelloWorld!</title>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
  5. <scriptsrc="sylvester.js"type="text/javascript"></script>
  6. <scriptsrc="glUtils.js"type="text/javascript"></script>
  7. <scriptsrc="webgl-demo.js"type="text/javascript"></script>
  9. <!--Fragmentshaderprogram-->
  10. <scriptid="shader-fs"type="x-shader/x-fragment">
  11. varyinghighpvec2vTextureCoord;
  12. varyinghighpvec3vLighting;
  14. uniformsampler2DuSampler;
  16. voidmain(void){
  17. highpvec4texelColor=texture2D(uSampler,vec2(vTextureCoord.s,vTextureCoord.t));
  19. gl_FragColor=vec4(texelColor.rgb*vLighting,texelColor.a);
  20. }
  21. </script>
  23. <!--Vertexshaderprogram-->
  24. <scriptid="shader-vs"type="x-shader/x-vertex">
  25. attributehighpvec3aVertexNormal;
  26. attributehighpvec3aVertexPosition;
  27. attributehighpvec2aTextureCoord;
  29. uniformhighpmat4uNormalMatrix;
  30. uniformhighpmat4uMVMatrix;
  31. uniformhighpmat4uPMatrix;
  33. varyinghighpvec2vTextureCoord;
  34. varyinghighpvec3vLighting;
  36. voidmain(void){
  37. gl_Position=uPMatrix*uMVMatrix*vec4(aVertexPosition,1.0);
  38. vTextureCoord=aTextureCoord;
  40. //Applylightingeffect
  42. highpvec3ambientLight=vec3(0.6,0.6,0.6);
  43. highpvec3directionalLightColor=vec3(0.5,0.5,0.75);
  44. highpvec3directionalVector=vec3(0.85,0.8,0.75);
  45. highpvec4transformedNormal=uNormalMatrix*vec4(aVertexNormal,1.0);
  47. highpfloatdirectional=max(dot(transformedNormal.xyz,directionalVector),0.0);
  48. vLighting=ambientLight+(directionalLightColor*directional);
  49. }
  50. </script>
  51. </head>
  53. <bodyonload="start()">
  54. <canvasid="glcanvas"width="640"height="480">
  55. Yourbrowserdoesn'tappeartosupporttheHTML5<code><canvas></code>element.
  56. </canvas>
  57. </body>
  58. </html>

// File #02: webgl-demo.js

XML/HTML Code复制内容到剪贴板
  1. varcanvas;
  2. vargl;
  4. varcubeVerticesBuffer;
  5. varcubeVerticesTextureCoordBuffer;
  6. varcubeVerticesIndexBuffer;
  7. varcubeVerticesIndexBuffer;
  8. varcubeRotation=0.0;
  9. varlastCubeUpdateTime=0;
  11. varcubeImage;
  12. varcubeTexture;
  14. varmvMatrix;
  15. varshaderProgram;
  16. varvertexPositionAttribute;
  17. varvertexNormalAttribute;
  18. vartextureCoordAttribute;
  19. varperspectiveMatrix;
  21. //
  22. //start
  23. //
  24. //Calledwhenthecanvasiscreatedtogettheballrolling.
  25. //
  26. functionstart(){
  27. canvas=document.getElementById("glcanvas");
  29. initWebGL(canvas);//InitializetheGLcontext
  31. //OnlycontinueifWebGLisavailableandworking
  33. if(gl){
  34. gl.clearColor(0.0,0.0,0.0,1.0);//Cleartoblack,fullyopaque
  35. gl.clearDepth(1.0);//Cleareverything
  36. gl.enable(gl.DEPTH_TEST);//Enabledepthtesting
  37. gl.depthFunc(gl.LEQUAL);//Nearthingsobscurefarthings
  39. //Initializetheshaders;thisiswhereallthelightingforthe
  40. //verticesandsoforthisestablished.
  42. initShaders();
  44. //Here'swherewecalltheroutinethatbuildsalltheobjects
  45. //we'llbedrawing.
  47. initBuffers();
  49. //Next,loadandsetupthetextureswe'llbeusing.
  51. //TODO#2Start
  52. cubeTexture=createCubeTexture("HelloWorld!");
  53. //TODO#2End
  55. //Setuptodrawthesceneperiodically.
  57. setInterval(drawScene,15);
  58. }
  59. }
  61. //
  62. //initWebGL
  63. //
  64. //InitializeWebGL,returningtheGLcontextornullif
  65. //WebGLisn'tavailableorcouldnotbeinitialized.
  66. //
  67. functioninitWebGL(){
  68. gl=null;
  70. try{
  71. gl=canvas.getContext("experimental-webgl");
  72. }
  73. catch(e){
  74. }
  76. //Ifwedon'thaveaGLcontext,giveupnow
  78. if(!gl){
  79. alert("UnabletoinitializeWebGL.Yourbrowsermaynotsupportit.");
  80. }
  81. }
  83. //
  84. //initBuffers
  85. //
  86. //Initializethebufferswe'llneed.Forthisdemo,wejusthave
  87. //oneobject--asimpletwo-dimensionalcube.
  88. //
  89. functioninitBuffers(){
  91. //Createabufferforthecube'svertices.
  93. cubeVerticesBuffer=gl.createBuffer();
  95. //SelectthecubeVerticesBufferastheonetoapplyvertex
  96. //operationstofromhereout.
  98. gl.bindBuffer(gl.ARRAY_BUFFER,cubeVerticesBuffer);
  100. //Nowcreateanarrayofverticesforthecube.
  102. varvertices=[
  103. //Frontface
  104. -1.0,-1.0,1.0,
  105. 1.0,-1.0,1.0,
  106. 1.0,1.0,1.0,
  107. -1.0,1.0,1.0,
  109. //Backface
  110. -1.0,-1.0,-1.0,
  111. -1.0,1.0,-1.0,
  112. 1.0,1.0,-1.0,
  113. 1.0,-1.0,-1.0,
  115. //Topface
  116. -1.0,1.0,-1.0,
  117. -1.0,1.0,1.0,
  118. 1.0,1.0,1.0,
  119. 1.0,1.0,-1.0,
  121. //Bottomface
  122. -1.0,-1.0,-1.0,
  123. 1.0,-1.0,-1.0,
  124. 1.0,-1.0,1.0,
  125. -1.0,-1.0,1.0,
  127. //Rightface
  128. 1.0,-1.0,-1.0,
  129. 1.0,1.0,-1.0,
  130. 1.0,1.0,1.0,
  131. 1.0,-1.0,1.0,
  133. //Leftface
  134. -1.0,-1.0,-1.0,
  135. -1.0,-1.0,1.0,
  136. -1.0,1.0,1.0,
  137. -1.0,1.0,-1.0
  138. ];
  140. //NowpassthelistofverticesintoWebGLtobuildtheshape.We
  141. //dothisbycreatingaFloat32ArrayfromtheJavaScriptarray,
  142. //thenuseittofillthecurrentvertexbuffer.
  144. gl.bufferData(gl.ARRAY_BUFFER,newFloat32Array(vertices),gl.STATIC_DRAW);
  146. //Setupthenormalsforthevertices,sothatwecancomputelighting.
  148. cubeVerticesNormalBuffer=gl.createBuffer();
  149. gl.bindBuffer(gl.ARRAY_BUFFER,cubeVerticesNormalBuffer);
  151. varvertexNormals=[
  152. //Front
  153. 0.0,0.0,1.0,
  154. 0.0,0.0,1.0,
  155. 0.0,0.0,1.0,
  156. 0.0,0.0,1.0,
  158. //Back
  159. 0.0,0.0,-1.0,
  160. 0.0,0.0,-1.0,
  161. 0.0,0.0,-1.0,
  162. 0.0,0.0,-1.0,
  164. //Top
  165. 0.0,1.0,0.0,
  166. 0.0,1.0,0.0,
  167. 0.0,1.0,0.0,
  168. 0.0,1.0,0.0,
  170. //Bottom
  171. 0.0,-1.0,0.0,
  172. 0.0,-1.0,0.0,
  173. 0.0,-1.0,0.0,
  174. 0.0,-1.0,0.0,
  176. //Right
  177. 1.0,0.0,0.0,
  178. 1.0,0.0,0.0,
  179. 1.0,0.0,0.0,
  180. 1.0,0.0,0.0,
  182. //Left
  183. -1.0,0.0,0.0,
  184. -1.0,0.0,0.0,
  185. -1.0,0.0,0.0,
  186. -1.0,0.0,0.0
  187. ];
  189. gl.bufferData(gl.ARRAY_BUFFER,newFloat32Array(vertexNormals),
  190. gl.STATIC_DRAW);
  192. //Mapthetextureontothecube'sfaces.
  194. cubeVerticesTextureCoordBuffer=gl.createBuffer();
  195. gl.bindBuffer(gl.ARRAY_BUFFER,cubeVerticesTextureCoordBuffer);
  197. vartextureCoordinates=[
  198. //Front
  199. 0.0,0.0,
  200. 1.0,0.0,
  201. 1.0,1.0,
  202. 0.0,1.0,
  203. //Back
  204. 0.0,0.0,
  205. 1.0,0.0,
  206. 1.0,1.0,
  207. 0.0,1.0,
  208. //Top
  209. 0.0,0.0,
  210. 1.0,0.0,
  211. 1.0,1.0,
  212. 0.0,1.0,
  213. //Bottom
  214. 0.0,0.0,
  215. 1.0,0.0,
  216. 1.0,1.0,
  217. 0.0,1.0,
  218. //Right
  219. 0.0,0.0,
  220. 1.0,0.0,
  221. 1.0,1.0,
  222. 0.0,1.0,
  223. //Left
  224. 0.0,0.0,
  225. 1.0,0.0,
  226. 1.0,1.0,
  227. 0.0,1.0
  228. ];
  230. gl.bufferData(gl.ARRAY_BUFFER,newFloat32Array(textureCoordinates),
  231. gl.STATIC_DRAW);
  233. //Buildtheelementarraybuffer;thisspecifiestheindices
  234. //intothevertexarrayforeachface'svertices.
  236. cubeVerticesIndexBuffer=gl.createBuffer();
  237. gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,cubeVerticesIndexBuffer);
  239. //Thisarraydefineseachfaceastwotriangles,usingthe
  240. //indicesintothevertexarraytospecifyeachtriangle's
  241. //position.
  243. varcubeVertexIndices=[
  244. 0,1,2,0,2,3,//front
  245. 4,5,6,4,6,7,//back
  246. 8,9,10,8,10,11,//top
  247. 12,13,14,12,14,15,//bottom
  248. 16,17,18,16,18,19,//right
  249. 20,21,22,20,22,23//left
  250. ]
  252. //NowsendtheelementarraytoGL
  254. gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
  255. newUint16Array(cubeVertexIndices),gl.STATIC_DRAW);
  256. }
  258. //
  259. //initTextures
  260. //
  261. //Initializethetextureswe'llbeusing,theninitiatealoadof
  262. //thetextureimages.ThehandleTextureLoaded()callbackwillfinish
  263. //thejob;itgetscalledeachtimeatexturefinishesloading.
  264. //
  265. //TODO#1Start
  266. functioncreateCubeTexture(text){
  268. //createahiddencanvastodrawthetexture
  269. varcanvas=document.createElement('canvas');
  270. canvas.id="hiddenCanvas";
  271. canvas.width=512;
  272. canvas.height=512;
  273. canvas.style.display="none";
  274. varbody=document.getElementsByTagName("body")[0];
  275. body.appendChild(canvas);
  277. //drawtexture
  278. varcubeImage=document.getElementById('hiddenCanvas');
  279. varctx=cubeImage.getContext('2d');
  280. ctx.beginPath();
  281. ctx.rect(0,0,ctx.canvas.width,ctx.canvas.height);
  282. ctx.fillStyle='white';
  283. ctx.fill();
  284. ctx.fillStyle='black';
  285. ctx.font="65pxArial";
  286. ctx.textAlign='center';
  287. ctx.fillText(text,ctx.canvas.width/2,ctx.canvas.height/2);
  288. ctx.restore();
  290. //createnewtexture
  291. vartexture=gl.createTexture();
  292. gl.bindTexture(gl.TEXTURE_2D,texture);
  293. gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.LINEAR);
  294. gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR_MIPMAP_NEAREST);
  295. gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,true);
  296. handleTextureLoaded(cubeImage,texture)
  298. returntexture;
  299. }
  300. //TODO#1End
  302. functionhandleTextureLoaded(image,texture){
  303. gl.bindTexture(gl.TEXTURE_2D,texture);
  304. gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,image);
  305. gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.LINEAR);
  306. gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR_MIPMAP_NEAREST);
  307. gl.generateMipmap(gl.TEXTURE_2D);
  308. gl.bindTexture(gl.TEXTURE_2D,null);
  309. }
  311. //
  312. //drawScene
  313. //
  314. //Drawthescene.
  315. //
  316. functiondrawScene(){
  317. //Clearthecanvasbeforewestartdrawingonit.
  319. gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
  321. //Establishtheperspectivewithwhichwewanttoviewthe
  322. //scene.Ourfieldofviewis45degrees,withawidth/height
  323. //ratioof640:480,andweonlywanttoseeobjectsbetween0.1units
  324. //and100unitsawayfromthecamera.
  326. perspectiveMatrix=makePerspective(45,640.0/480.0,0.1,100.0);
  328. //Setthedrawingpositiontothe"identity"point,whichis
  329. //thecenterofthescene.
  331. loadIdentity();
  333. //Nowmovethedrawingpositionabittowherewewanttostart
  334. //drawingthecube.
  336. mvTranslate([0.0,0.0,-6.0]);
  338. //Savethecurrentmatrix,thenrotatebeforewedraw.
  340. mvPushMatrix();
  341. mvRotate(cubeRotation,[1,0,1]);
  343. //Drawthecubebybindingthearraybuffertothecube'svertices
  344. //array,settingattributes,andpushingittoGL.
  346. gl.bindBuffer(gl.ARRAY_BUFFER,cubeVerticesBuffer);
  347. gl.vertexAttribPointer(vertexPositionAttribute,3,gl.FLOAT,false,0,0);
  349. //Setthetexturecoordinatesattributeforthevertices.
  351. gl.bindBuffer(gl.ARRAY_BUFFER,cubeVerticesTextureCoordBuffer);
  352. gl.vertexAttribPointer(textureCoordAttribute,2,gl.FLOAT,false,0,0);
  354. //Bindthenormalsbuffertotheshaderattribute.
  356. gl.bindBuffer(gl.ARRAY_BUFFER,cubeVerticesNormalBuffer);
  357. gl.vertexAttribPointer(vertexNormalAttribute,3,gl.FLOAT,false,0,0);
  359. //Specifythetexturetomapontothefaces.
  361. gl.activeTexture(gl.TEXTURE0);
  362. gl.bindTexture(gl.TEXTURE_2D,cubeTexture);
  363. gl.uniform1i(gl.getUniformLocation(shaderProgram,"uSampler"),0);
  365. //Drawthecube.
  367. gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,cubeVerticesIndexBuffer);
  368. setMatrixUniforms();
  369. gl.drawElements(gl.TRIANGLES,36,gl.UNSIGNED_SHORT,0);
  371. //Restoretheoriginalmatrix
  373. mvPopMatrix();
  375. //Updatetherotationforthenextdraw,ifit'stimetodoso.
  377. varcurrentTime=(newDate).getTime();
  378. if(lastCubeUpdateTime){
  379. vardelta=currentTime-lastCubeUpdateTime;
  381. cubeRotation+=(30*delta)/1000.0;
  382. }
  384. lastCubeUpdateTime=currentTime;
  385. }
  387. //
  388. //initShaders
  389. //
  390. //Initializetheshaders,soWebGLknowshowtolightourscene.
  391. //
  392. functioninitShaders(){
  393. varfragmentShader=getShader(gl,"shader-fs");
  394. varvertexShader=getShader(gl,"shader-vs");
  396. //Createtheshaderprogram
  398. shaderProgram=gl.createProgram();
  399. gl.attachShader(shaderProgram,vertexShader);
  400. gl.attachShader(shaderProgram,fragmentShader);
  401. gl.linkProgram(shaderProgram);
  403. //Ifcreatingtheshaderprogramfailed,alert
  405. if(!gl.getProgramParameter(shaderProgram,gl.LINK_STATUS)){
  406. alert("Unabletoinitializetheshaderprogram.");
  407. }
  409. gl.useProgram(shaderProgram);
  411. vertexPositionAttribute=gl.getAttribLocation(shaderProgram,"aVertexPosition");
  412. gl.enableVertexAttribArray(vertexPositionAttribute);
  414. textureCoordAttribute=gl.getAttribLocation(shaderProgram,"aTextureCoord");
  415. gl.enableVertexAttribArray(textureCoordAttribute);
  417. vertexNormalAttribute=gl.getAttribLocation(shaderProgram,"aVertexNormal");
  418. gl.enableVertexAttribArray(vertexNormalAttribute);
  419. }
  421. //
  422. //getShader
  423. //
  424. //Loadsashaderprogrambyscouringthecurrentdocument,
  425. //lookingforascriptwiththespecifiedID.
  426. //
  427. functiongetShader(gl,id){
  428. varshaderScript=document.getElementById(id);
  430. //Didn'tfindanelementwiththespecifiedID;abort.
  432. if(!shaderScript){
  433. returnnull;
  434. }
  436. //Walkthroughthesourceelement'schildren,buildingthe
  437. //shadersourcestring.
  439. vartheSource="";
  440. varcurrentChild=shaderScript.firstChild;
  442. while(currentChild){
  443. if(currentChild.nodeType==3){
  444. theSource+=currentChild.textContent;
  445. }
  447. currentChildcurrentChild=currentChild.nextSibling;
  448. }
  450. //Nowfigureoutwhattypeofshaderscriptwehave,
  451. //basedonitsMIMEtype.
  453. varshader;
  455. if(shaderScript.type=="x-shader/x-fragment"){
  456. shader=gl.createShader(gl.FRAGMENT_SHADER);
  457. }elseif(shaderScript.type=="x-shader/x-vertex"){
  458. shader=gl.createShader(gl.VERTEX_SHADER);
  459. }else{
  460. returnnull;//Unknownshadertype
  461. }
  463. //Sendthesourcetotheshaderobject
  465. gl.shaderSource(shader,theSource);
  467. //Compiletheshaderprogram
  469. gl.compileShader(shader);
  471. //Seeifitcompiledsuccessfully
  473. if(!gl.getShaderParameter(shader,gl.COMPILE_STATUS)){
  474. alert("Anerroroccurredcompilingtheshaders:"+gl.getShaderInfoLog(shader));
  475. returnnull;
  476. }
  478. returnshader;
  479. }
  481. //
  482. //Matrixutilityfunctions
  483. //
  485. functionloadIdentity(){
  486. mvMatrix=Matrix.I(4);
  487. }
  489. functionmultMatrix(m){
  490. mvMatrixmvMatrix=mvMatrix.x(m);
  491. }
  493. functionmvTranslate(v){
  494. multMatrix(Matrix.Translation($V([v[0],v[1],v[2]])).ensure4x4());
  495. }
  497. functionsetMatrixUniforms(){
  498. varpUniform=gl.getUniformLocation(shaderProgram,"uPMatrix");
  499. gl.uniformMatrix4fv(pUniform,false,newFloat32Array(perspectiveMatrix.flatten()));
  501. varmvUniform=gl.getUniformLocation(shaderProgram,"uMVMatrix");
  502. gl.uniformMatrix4fv(mvUniform,false,newFloat32Array(mvMatrix.flatten()));
  504. varnormalMatrix=mvMatrix.inverse();
  505. normalMatrixnormalMatrix=normalMatrix.transpose();
  506. varnUniform=gl.getUniformLocation(shaderProgram,"uNormalMatrix");
  507. gl.uniformMatrix4fv(nUniform,false,newFloat32Array(normalMatrix.flatten()));
  508. }
  510. varmvMatrixStack=[];
  512. functionmvPushMatrix(m){
  513. if(m){
  514. mvMatrixStack.push(m.dup());
  515. mmvMatrix=m.dup();
  516. }else{
  517. mvMatrixStack.push(mvMatrix.dup());
  518. }
  519. }
  521. functionmvPopMatrix(){
  522. if(!mvMatrixStack.length){
  523. throw("Can'tpopfromanemptymatrixstack.");
  524. }
  526. mvMatrix=mvMatrixStack.pop();
  527. returnmvMatrix;
  528. }
  530. functionmvRotate(angle,v){
  531. varinRadians=angle*Math.PI/180.0;
  533. varm=Matrix.Rotation(inRadians,$V([v[0],v[1],v[2]])).ensure4x4();
  534. multMatrix(m);
  535. }

本文在支持HTML5的浏览器上运行WebGL程序的方法到此结束。幻想者头脑里只有空中楼阁，实干家胸中才有摩天大厦。小编再次感谢大家对我们的支持！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例