WebGL自学笔记第一天

tech2025-09-02 56

WebGL初识

免费、开放的OpenGL代替微软的Direct3D专门用于嵌入式、智能手机、游戏机这一类的OpenGL ES: 衍生于OpenGL是OpenGL的子类移除许多无用的旧特性 WebGL是在OpenGL ES2.0基础上衍生而来的OpenGL2.0引入了可编程着色器方法(programmable shader functions)，该特性也被OpenGL ES 2.0继承，而这成为WebGL 1.0 标准的核心部分。书外扩展：目前的为WebGL 2.0版本，基于OpenGL ES 3.0，引入了许多扩展，大部分浏览器已经支持，ios预计今年(2020年)会支持。

WebGL入门

canvas标签(画布)

HTML5引入

WebGL可以在上面绘制三维图形

绘制二维图形的步骤

获取元素向该元素请求二维图形的“绘图上下文”在绘图上下文上调用相应的绘图函数，以绘制二维图形。

代码演示 h5代码推荐各位使用HBuilderX智能提示比较齐全，写代码舒服极了~

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Dra a blue rectangle (canvas version)</title> </head>  <body onload="main()">  <canvas id="example" width="400" height="400"> Please user a browser that supports "canvas" </canvas>  <script src="DrawRectangle.js"></script> </body> </html> function main(){ // 找到canvas元素，很像cc.find啊 var canvas = document.getElementById('example') if(!canvas) { return; } // 绘制2d var ctx = canvas.getContext('2d'); // 这里给canvas加入颜色，canvas本身是透明的，跟CCC的canvas还是有点不一样 // 这里的透明度是0到1.0之间，网上有说0-255的注意下 ctx.fillStyle = 'rgba(0, 0, 255, 1)'; // 填充区域原点在左上角与cocos坐标系区分 ctx.fillRect(120, 10, 150, 150); }

根据上述理论，编写代码后，效果如下

WebGL程序

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Clear cnavas</title> </head> <body onload="main()"> <canvas id="webgl" width="400" height="400"> Please user the browser supporting "canvas" </canvas> <script src="../lib/webgl-utils.js"></script> <script src="../lib/webgl-debug.js"></script> <script src="../lib/cuon-utils.js"></script> <script src="HelloCanvas.js"></script> </body> </html> function main(){ var canvas = document.getElementById('webgl'); var gl = getWebGLContext(canvas); if(!gl) { console.log('Failed to get the rendering context for WebGL'); return; } // 设置背景色 // 除非下一次调用clearColor，否则背景色会一直常驻WebGL系统 gl.clearColor(0.0, 0.0, 0.0, 1.0); // 清空绘图区【实际是清空颜色缓冲区】 // 清除方式就是用上面的背景色擦除已经绘制的内容 // gl.COLOR_BUFFER_BIT 指定颜色缓存 // gl.DEPTH_BUFFER_BIT 指定深度缓冲区 // gl.STENCIL_BUFFER_BIT 指定模板缓冲区 gl.clear(gl.COLOR_BUFFER_BIT); }

相关demo可以在我的公众号【xyzzlky】中回复【WebGL】获取

最新回复(0)