webgl （原生）基础入门指南【一】 - SegmentFault 思否

也行你已经有threejs或其他3d场景开发框架的使用经验，却不知道webgl原生到底 ... getContext("experimental-webgl"); } catch(e) {} // 如果没有GL ... 注册登录问答专栏课程招聘活动发现✓使用“Bing”搜本站使用“Google”搜本站使用“百度”搜本站站内搜索注册登录首页专栏html文章详情3webgl（原生）基础入门指南【一】安安发布于2017-04-12 来看这篇文章的同学一定是被近来的3D场景效果所震撼，抱着‘这TM怎么做的！’的来心态来学习webgl的吧。

也行你已经有threejs或其他3d场景开发框架的使用经验，却不知道webgl原生到底怎么写。

本系列将从最简单最基础的原生API入手，手把手教你写webgl 准备webgl上下文 同二维场景一样，我们需要一个画布来绘制，在html中建立一个canvas元素。

代码如下： //index.html

start()函数将会在文档加载完成之后被调用。

它的任务是设置WebGL上下文并开始渲染内容。

//index.js functionstart(){ varcanvas=document.getElementById("main"); //初始化WebGL上下文 vargl=initWebGL(canvas); //开始渲染 ...... } functioninitWebGL(canvas){ //创建全局变量 vargl=null; try{ //尝试获取标准上下文，如果失败，回退到试验性上下文 gl=canvas.getContext("webgl")||canvas.getContext("experimental-webgl"); } catch(e){} //如果没有GL上下文，马上放弃 if(!gl){ alert("WebGL初始化失败，可能是因为您的浏览器不支持。

"); gl=null; } returngl; } getContext('context参数')返回参数支持的上下文，如果参数无效，则返回null。

我们在画二维canvas的时候才用的是.getContext('2d')，返回CanvasRenderingContext2D对象;三维却并不是想当然的'3d'而是canvas.getContext("webgl")或者canvas.getContext("experimental-webgl")，返回一个WebGLRenderingContext对象。

不同的浏览器内核支持的参数不同，具体如下： 清屏clearColor 画过canvas的亲应该都会使用一个颜色填充来清理帧画面。

webgl同意需要这样一个清理函数在绘制下一画面的时候。

webgl才用rgba的四色系统来定义颜色。

与我们平时所用的颜色系统不一样的是，RGBA四个分量使用0.0~0.1之间的数值来表示。

前三个分量表示三原色的饱和度，最后一个表示不透明度。

值得一提的是，webgl计算都是才用浮点计算，所以数值一般1写为1.0,数值0写为0.0 这里我们需要进行四个初始化步骤 设置清除颜色(蓝色，不透明) gl.clearColor(0.0,1.0,1.0,1.0); 深度清理 gl.clearDepth(1.0); 开启“深度测试”,Z-缓存 gl.enable(gl.DEPTH_TEST); 设置深度测试，近的物体遮挡远的物体 gl.depthFunc(gl.LEQUAL); 清理画布的时候调用gl.clear(gl.COLOR_BUFFER_BIT);来清理画布。

这样我们便准好了一个webgl的画布可以开始绘图了。

demo地址：http://codepen.io/leanneCC/pe... webglcanvashtml3d阅读5.7k更新于2017-04-12赞3收藏7分享本作品系原创，采用《署名-非商业性使用-禁止演绎4.0国际》许可协议安安基于web的可视化开发，让数据变得直观，有趣，有价值！56声望18粉丝关注作者0条评论得票最新提交评论安安基于web的可视化开发，让数据变得直观，有趣，有价值！56声望18粉丝关注作者文章目录跟随宣传栏▲37