Webgl(Native)基础入门指南[1]

看到这篇文章的同学一定被最近的3D场景效果惊呆了，抱着'他妈的这是怎么做到的！’带着心态来学习webgl。没关系，你已经有使用threejs或其他3d场景开发框架的经验，但你不知道如何原生编写webgl。本系列将从最简单最基础的原生API入手，一步步教你写webgl。webgl上下文和二维场景是一样的。我们需要一个canvas来绘制，在html中创建一个canvas元素。代码如下：//index.htmlstart()函数将在文档加载后调用。它的工作是设置WebGL上下文并开始渲染内容。//index.jsfunctionstart(){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=空；}returngl;}getContext('contextparameter')返回参数支持的上下文，如果参数无效则返回null。我们只在绘制二维画布时使用.getContext('2d')，它返回的是CanvasRenderingContext2D对象；三维不是理所当然的，而是canvas.getContext("webgl")或canvas.getContext("experimental-webgl")，返回一个WebGLRenderingContext对象。不同的浏览器内核支持不同的参数，如下：clearscreenclearColor画过canvas的人都应该用colorfill来清框。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-cachegl.enable(gl.DEPTH_TEST);设置深度测试，近处的物体遮挡远处的物体gl.depthFunc(gl.LEQUAL);清洁画布时，调用gl.clear(gl.COLOR_BUFFER_BIT);清洁画布。这样我们就准备好了一个webgl画布，可以开始画图了。演示地址：http://codepen.io/leanneCC/pe...