WebGL 探秘 (1) - 送码网

2-1510291500300-L.jpg

人类是无利不起早，有时候我们总是避讳不谈利益而谈理想和最求，但是相对这些都没有利益驱动做一件事更靠谱。要知道一个简单道理就是利益是人类进步的原动力，是一切行动的原动力和目的。区块链也是建立承认利益的基础上的，由于犯错成本太高所以才不会破坏。

有用我们才会去学习，在开始之前我们需要明确我们学习的目的。所以先看一看学习了 webGL 我们会得到哪些利益，直白地说就是可观薪酬，获取被仰慕的眼神，我们还要什么这些就够了。先看看 webGL 的应用吧。

商业上 WebGL 应用

人体结构 zygotebody
body-browser-webgl-01.jpg
web 游戏
RCR_WebGL_02.jpeg.e4a8168569202aa419c42c8d84a2e4d6.jpeg
建筑体现
151203_wbgl_clipping_new.png
大数据可视化
物理展现

WebGL 定义

WebGL 是一项利用 javascript API 来呈现 3D 电脑图形的技术，与之前通过浏览器外挂程序不同，WegGL 是只要要编写网页代码即可以实现 3D 图像的展现。

WebGL 是基于 OpenGL ES 2.0 提供了 3D 图像的程序界面。
现在 html5 Canvas 支持 webGL 的功能。

什么是 OpenGL ES(OpenGL for Embedded Systems)

是 OpenGL 三维图像 API 的子集，针对手机、PDA 和游戏机等嵌入式设施而设计的。

什么是 OpenGL

OpenGL（全写Open Graphics Library）是指定义了一个跨编程语言、跨平台的编程接口规格的专业的图形程序接口。

为什么是 WebGL 而不是 canvas 和 SVG

与 canvas 和 SVG 不同的是 WebGL 通过 webGL javascript API 连接 javascript 和 GPU 进行编程。GPU 绘图的渲染工作大部分在 GPU 上完成，减少浏览器的压力，从而提供了性能。所以使用 WebGL 是要在浏览器端进行 3D 渲染和大数据可视化唯一的选择。

检查 webGL 支持度

访问这个网站 https://get.webgl.org 可以?检查浏览器能否支持 WegGL

假如浏览器不支持 webGL ，此网站会建议您安装支持 WebGL 的浏览器
假如浏览器支持 webGL ，还是无法启用 webGL 那可能是由于您网卡不支持 webGL，这的多老网卡呀，也可能与显卡的驱动有关系。

还有可能 webGL 不好用的情况是浏览器支持 webGL，显卡也没有问题，那么我们就需要检查浏览器的设置，这里先以 Chrome 浏览器为例

chrome 浏览器有关 webGL 的设置
1. 在浏览器地址栏输入 chrome://flags
2. Ctrl+F 开启搜索栏，在搜索栏输入 "rendering list" 后找到 "overwrite rendering list" 而后将 enable 修改为 disable，这样就会对不受支持的系统设定为启用 GPU 加速解决功能。

webGL 开发流程

1.搭建环境

检查浏览器能否支持 html5 特性，对于 webGL 的开发人员所有工作都是在 canvas

<canvas id="game-surface">        浏览器不支持 html5</canvas>

给 canvas 指定宽度和高度，我们所有的工作都在这个窗口内完成。

<canvas id="game-surface" width="800" height="600">        浏览器不支持 html5    </canvas>    <br/>    <i>Demo webGL</i>

创立 app.js 而后在 html 中引入 app.js 同时在 onload 方法加载 InitDemo() 方法

<body onload="InitDemo()">    <canvas id="game-surface" width="800" height="600">        浏览器不支持 html5    </canvas>    <br/>    <i>Demo webGL</i>    <script src="app.js"></script></body>

我们首先在 InitDemo 方法中打印一句话，看看能否被执行到

function InitDemo(){    console.log(111)}

获取 webGL 对象，canvas 通过提供 context 来作为一个接口供开发者使用这个接口来对 canvas 进行绘制。如何传入 2d 可以获取绘制2D 图形的 context。chrome 和 firefox 可以通过 webgl 获取 webGL 的 context，而 IE 需要通过传入 experimental-webgl 来获取 webgl。说道这里还有少量小故事，微软开始是不支持 webgl，宣称起因是 webgl 的安全性存在问题，其实微软是存在少量私心的，由于 openGL 是与微软的directX 是同一类型产品，但是最近大势所趋微软的浏览器也不得不支持 webGL。

function InitDemo(){    var canvas = document.getElementById("game-surface");    var gl = canvas.getContext('webgl');    if(!gl){        gl = canvas.getContext('experimental-webgl');    }    if(!gl){        alert("您的不支持 webGL")    }}

通过 gl.viewport 我们的 webGL 在 canvas 绘制相对的窗口的尺寸。每次绘制图片前我们都需要清空一下画布。会调用 clear 方法来清除画布。

canvas.width = window.innerWidth;    canvas.height = window.innerWidth;    gl.viewport(0,0,window.innerWidth,window.innerHeight)

    gl.clearColor(0.75,0.85,0.8,1.0)    gl.clear();

app.js:14 Uncaught TypeError: Failed to execute 'clear' on 'WebGLRenderingContext': 1 argument required, but only 0 present.

color buffer
depth buffer

gl.clearColor(0.75,0.85,0.8,1.0);    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

这里做练习我们就两个 gl.COLOR_BUFFER_BIT 和 gl.DEPTH_BUFFER_BIT 都定义了。