香港六马会开奖结果-六合彩特码资料-本港台最快开奖直播

[2019]让您放心游戏,提供六合彩特码资料最丰厚回馈!,本港台最快开奖直播是为您电脑安全以及资金安全的考虑,所以说压实向感受娱乐首先应该进下载时必不可少的。

WebGL技术储备指南
分类:操作系统

WebGL技能储备指南

2015/12/22 · HTML5 · 1 评论 · WebGL

初藳出处: 淘宝前端团队(FED)- 叶斋   

图片 1

WebGL 是 HTML 5 草案的生意盎然有些,能够使得 Canvas 渲染三个维度场景。WebGL 固然尚未有普遍应用,但极具潜在的力量和设想空间。本文是自己上学 WebGL 时梳理知识系统的产物,花点时间整理出来与大家饮鸩止渴。

示例

WebGL 很酷,有以下 demos 为证:

追寻奥兹国
赛车游戏
泛舟的男孩(Goo Engine Demo)

本文的对象

正文的意料读者是:面生图形学,熟谙前端,希望了然或系统学习 WebGL 的同学。

正文不是 WebGL 的概述性小说,亦非完整详细的 WebGL 教程。本文只期望成为意气风发篇供 WebGL 初读书人使用的纲要。

Canvas

熟识 Canvas 的同班都驾驭,Canvas 绘图先要获取绘图上下文:

JavaScript

var context = canvas.getContext('2d');

1
var context = canvas.getContext('2d');

context上调用各类函数绘制图形,比方:

JavaScript

// 绘制左上角为(0,0),右下角为(50, 50)的矩形 context.fillRect(0, 0, 50, 50);

1
2
// 绘制左上角为(0,0),右下角为(50, 50)的矩形
context.fillRect(0, 0, 50, 50);

WebGL 同样要求获得绘图上下文:

JavaScript

var gl = canvas.getContext('webgl'); // 或 experimental-webgl

1
var gl = canvas.getContext('webgl'); // 或 experimental-webgl

但是接下去,假设想画一个矩形的话,就没那样简单了。实际上,Canvas 是浏览器封装好的贰个制图遭逢,在实际开展绘图操作时,浏览器依旧须求调用 OpenGL API。而 WebGL API 差相当的少便是 OpenGL API 未经封装,直接套了大器晚成层壳。

Canvas 的更加多学问,能够参照:

  • JS 权威指南的 21.4 节或 JS 高档程序设计中的 15 章
  • W3CSchool
  • 阮意气风发峰的 Canvas 教程

矩阵转换

三个维度模型,从文件中读出来,到绘制在 Canvas 中,经历了累累坐标转变。

风姿洒脱经有贰个最简便的模型:三角形,四个终端分别为(-1,-1,0),(1,-1,0),(0,1,0)。那多个数据是从文件中读出来的,是三角形最早阶的坐标(局地坐标)。如下图所示,左手坐标系。

图片 2

模型平日不会放在场景的原点,如若三角形的原点位于(0,0,-1)处,没有转动或缩放,多个极点分别为(-1,-1,-1),(1,-1,-1),(0,1,-1),即世界坐标。

图片 3

制图三维场景必需内定贰个观看者,若是观望者位于(0,0,1)处並且看向三角形,那么四个极点相对于观望者的坐标为(-1,-1,-2),(1,-1,-2),(0,1,-2),即视图坐标。

图片 4

观看者的眸子是贰个点(那是看破投影的前提),水平视角和垂直视角都以90度,视线范围(目力所及)为[0,2]在Z轴上,观望者能够看出的区域是三个四棱台体。

图片 5

将四棱台体映射为专门的学问立方(CCV,中央为原点,边长为2,边与坐标轴平行)。顶点在 CCV 中的坐标,离它提起底在 Canvas 中的坐标已经很临近了,假使把 CCV 的前表面看成 Canvas,那么最后三角形就画在图中灰绿三角形的职位。

图片 6

上述转变是用矩阵来开展的。

有的坐标 –(模型调换)-> 世界坐标 –(视图调换)-> 视图坐标 –(投影转变)–> CCV 坐标。

以(0,1,0)为例,它的齐次向量为(0,0,1,1),上述转换的意味经过能够是:

图片 7

上边多少个矩阵依次是看破投影矩阵,视图矩阵,模型矩阵。四个矩阵的值分别决定于:观看者的观念和视界间距,观看者在世界中的状态(地点和偏向),模型在世界中的状态(地点和方向)。总结的结果是(0,1,1,2),化成齐次坐标是(0,0.5,0.5,1),就是其一点在CCV中的坐标,那么(0,0.5)正是在Canvas中的坐标(感觉Canvas 大旨为原点,长度宽度都为2)。

地方出现的(0,0,1,1)是(0,0,1)的齐次向量。齐次向量(x,y,z,w)能够象征三个维度向量(x,y,z)加入矩阵运算,通俗地说,w 分量为 1 时表示地点,w 分量为 0 时表示位移。

WebGL 没有提供任何有关上述调换的体制,开拓者必要亲自计算顶点的 CCV 坐标。

有关坐标转换的越来越多内容,能够参见:

  • Computer图形学中的5-7章
  • 改动矩阵@维基百科
  • 透视投影详解

比较复杂的是模型转换中的绕狂妄轴旋转(平常用四元数生成矩阵)和投影调换(上边的例证都没收涉及到)。

有关绕狂妄轴旋转和四元数,能够参见:

  • 四元数@维基百科
  • 一个老外对四元数公式的表明

有关齐次向量的越来越多内容,能够参照他事他说加以考察。

  • 微型计算机图形学的5.2节
  • 齐次坐标@维基百科

着色器和光栅化

在 WebGL 中,开垦者是透过着色器来成功上述调换的。着色器是运维在显卡中的程序,以 GLSL 语言编写,开辟者需求将着色器的源码以字符串的款式传给 WebGL 上下文的连锁函数。

着色器有二种,顶点着色器和片元(像素)着色器,它们成对现身。顶点着色器职务是接到顶点的片段坐标,输出 CCV 坐标。CCV 坐标经过光栅化,转变为逐像素的数码,传给片元着色器。片元着色器的天职是规定每种片元的水彩。

极限着色器接收的是 attribute 变量,是逐顶点的数目。顶点着色器输出 varying 变量,也是逐顶点的。逐顶点的 varying 变量数据经过光栅化,成为逐片元的 varying 变量数据,输入片元着色器,片元着色器输出的结果就能够显得在 Canvas 上。

图片 8

着色器功效比比较多,上述只是基本成效。大多数璀璨的功效都以凭仗着色器的。假诺你对着色器完全没有概念,能够试着明亮下黄金年代节 hello world 程序中的着色器再纪念一下本节。

关于更加多着色器的文化,能够参照:

  • GLSL@维基百科
  • WebGL@MSDN

程序

那风流罗曼蒂克节解释绘制上述现象(三角形)的 WebGL 程序。点以此链接,查看源代码,试图领悟一下。这段代码出自WebGL Programming Guide,小编作了部分改变以适应本文内容。假如黄金时代切平常,你看看的应该是上面这样:

图片 9

解说几点(借使在此以前不打听 WebGL ,多半会对上面包车型大巴代码纠葛,无碍):

  1. 字符串 VSHADER_SOURCE 和 FSHADER_SOURCE 是终端着色器和片元着色器的源码。能够将着色器精通为有一定输入和出口格式的次第。开荒者须要事先编写好着色器,再依照一定格式着色器发送绘图命令。
  2. Part2 将着色器源码编写翻译为 program 对象:先分别编写翻译顶点着色器和片元着色器,然后连接两个。若是编写翻译源码错误,不会报 JS 错误,但足以透过别的API(如gl.getShaderInfo等)获取编写翻译状态音讯(成功与否,如若出错的错误新闻)。
JavaScript

// 顶点着色器 var vshader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vshader, VSHADER_SOURCE);
gl.compileShader(vshader); // 同样新建 fshader var program =
gl.createProgram(); gl.attachShader(program, vshader);
gl.attachShader(program, fshader); gl.linkProgram(program);

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f14b3a671c960813930-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f14b3a671c960813930-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f14b3a671c960813930-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f14b3a671c960813930-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f14b3a671c960813930-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f14b3a671c960813930-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f14b3a671c960813930-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f14b3a671c960813930-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f14b3a671c960813930-9">
9
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f14b3a671c960813930-1" class="crayon-line">
// 顶点着色器
</div>
<div id="crayon-5b8f14b3a671c960813930-2" class="crayon-line crayon-striped-line">
var vshader = gl.createShader(gl.VERTEX_SHADER);
</div>
<div id="crayon-5b8f14b3a671c960813930-3" class="crayon-line">
gl.shaderSource(vshader, VSHADER_SOURCE);
</div>
<div id="crayon-5b8f14b3a671c960813930-4" class="crayon-line crayon-striped-line">
gl.compileShader(vshader);
</div>
<div id="crayon-5b8f14b3a671c960813930-5" class="crayon-line">
// 同样新建 fshader
</div>
<div id="crayon-5b8f14b3a671c960813930-6" class="crayon-line crayon-striped-line">
var program = gl.createProgram();
</div>
<div id="crayon-5b8f14b3a671c960813930-7" class="crayon-line">
gl.attachShader(program, vshader);
</div>
<div id="crayon-5b8f14b3a671c960813930-8" class="crayon-line crayon-striped-line">
gl.attachShader(program, fshader);
</div>
<div id="crayon-5b8f14b3a671c960813930-9" class="crayon-line">
gl.linkProgram(program);
</div>
</div></td>
</tr>
</tbody>
</table>
  1. program 对象要求钦定使用它,才方可向着色器传数据并绘制。复杂的主次经常常有多个program 对 象,(绘制每龙精虎猛帧时)通过切换 program 对象绘制场景中的不一致功用。
JavaScript

gl.useProgram(program);

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f14b3a6720232020477-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f14b3a6720232020477-1" class="crayon-line">
gl.useProgram(program);
</div>
</div></td>
</tr>
</tbody>
</table>
  1. Part3 向正在利用的着色器传入数据,包涵逐顶点的 attribute 变量和全局的 uniform 变量。向着色器传入数据必得运用 ArrayBuffer,并不是常规的 JS 数组。
JavaScript

var varray = new Float32Array([-1, -1, 0, 1, -1, 0, 0, 1, 0])

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f14b3a6723482450329-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f14b3a6723482450329-1" class="crayon-line">
var varray = new Float32Array([-1, -1, 0, 1, -1, 0, 0, 1, 0])
</div>
</div></td>
</tr>
</tbody>
</table>
  1. WebGL API 对 ArrayBuffer 的操作(填充缓冲区,传入着色器,绘制等)都以因此 gl.AEscortRAY_BUFFE奇骏实行的。在 WebGL 系统中又比比较多类似的情事。
JavaScript

// 只有将 vbuffer 绑定到 gl.ARRAY_BUFFER,才可以填充数据
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer); // 这里的意思是,向“绑定到
gl.ARRAY_BUFFER”的缓冲区中填充数据 gl.bufferData(gl.ARRAY_BUFFER,
varray, gl.STATIC_DRAW); // 获取 a_Position
变量在着色器程序中的位置,参考顶点着色器源码 var aloc =
gl.getAttribLocation(program, 'a_Position'); // 将 gl.ARRAY_BUFFER
中的数据传入 aloc 表示的变量,即 a_Position
gl.vertexAttribPointer(aloc, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aloc);

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f14b3a6727492492738-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f14b3a6727492492738-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f14b3a6727492492738-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f14b3a6727492492738-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f14b3a6727492492738-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f14b3a6727492492738-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f14b3a6727492492738-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f14b3a6727492492738-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f14b3a6727492492738-9">
9
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f14b3a6727492492738-1" class="crayon-line">
// 只有将 vbuffer 绑定到 gl.ARRAY_BUFFER,才可以填充数据
</div>
<div id="crayon-5b8f14b3a6727492492738-2" class="crayon-line crayon-striped-line">
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
</div>
<div id="crayon-5b8f14b3a6727492492738-3" class="crayon-line">
// 这里的意思是,向“绑定到 gl.ARRAY_BUFFER”的缓冲区中填充数据
</div>
<div id="crayon-5b8f14b3a6727492492738-4" class="crayon-line crayon-striped-line">
gl.bufferData(gl.ARRAY_BUFFER, varray, gl.STATIC_DRAW);
</div>
<div id="crayon-5b8f14b3a6727492492738-5" class="crayon-line">
// 获取 a_Position 变量在着色器程序中的位置,参考顶点着色器源码
</div>
<div id="crayon-5b8f14b3a6727492492738-6" class="crayon-line crayon-striped-line">
var aloc = gl.getAttribLocation(program, 'a_Position');
</div>
<div id="crayon-5b8f14b3a6727492492738-7" class="crayon-line">
// 将 gl.ARRAY_BUFFER 中的数据传入 aloc 表示的变量,即 a_Position
</div>
<div id="crayon-5b8f14b3a6727492492738-8" class="crayon-line crayon-striped-line">
gl.vertexAttribPointer(aloc, 3, gl.FLOAT, false, 0, 0);
</div>
<div id="crayon-5b8f14b3a6727492492738-9" class="crayon-line">
gl.enableVertexAttribArray(aloc);
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 向着色器传入矩阵时,是按列存款和储蓄的。能够相比较一下 mmatrix 和矩阵转变意气风发节中的模型矩阵(第 3 个)。
  2. 终点着色器计算出的 gl_Position 就是 CCV 中的坐标,举例最上面的终端(浅紫)的 gl_Position 化成齐次坐标就是(0,0.5,0.5,1)。
  3. 向终极着色器传入的只是多少个终端的水彩值,而三角形表面的颜料渐变是由那三个颜色值内插出的。光栅化不仅仅会对 gl_Position 进行,还有也许会对 varying 变量插值。
  4. gl.drawArrays()方法使得缓冲区进行绘图,gl.T汉兰达IANGLES 钦点绘制三角形,也足以退换参数绘制点、折线等等。

有关 ArrayBuffer 的详细消息,能够参照他事他说加以考察:

  • ArrayBuffer@MDN
  • 阮风姿浪漫峰的 ArrayBuffer 介绍
  • 张鑫旭的 ArrayBuffer 介绍

有关 gl.T普拉多IANGLES 等此外绘制方式,能够参见下边那张图或那篇博文。

图片 10

纵深检查测量检验

当五个外表重叠时,前面包车型客车模子会遮盖后边的模型。举个例子其一事例,绘制了四个交叉的三角形( varray 和 carray 的长短变为 18,gl.drawArrays 最终一个参数变为 6)。为了轻松,那一个事例去掉了矩阵转变进度,直接向着色器传入 CCV 坐标。

图片 11

图片 12

终极着色器给出了 6 个顶峰的 gl_Position ,经过光栅化,片元着色器得到了 2X 个片元(假如 X 为各样三角形的像素个数),各类片元都离散的 x,y 坐标值,还大概有 z 值。x,y 坐标便是三角形在 Canvas 上的坐标,但万意气风发有三个有着一样 x,y 坐标的片元同期现身,那么 WebGL 就能够取 z 坐标值一点都不大的那么些片元。

在深度检查评定在此之前,必需在绘制前拉开一个常量。不然,WebGL 就能够遵照在 varray 中定义的顺序绘制了,前边的会覆盖前边的。

JavaScript

gl.enable(gl.DEPTH_TEST);

1
gl.enable(gl.DEPTH_TEST);

事实上,WebGL 的逻辑是那样的:依次拍卖片元,要是渲染缓冲区(这里正是Canvas 了)的不行与当下片元对应的像素还还没绘制时,就把片元的颜料画到渲染缓冲区对应像素里,同期把片元的 z 值缓存在另三个深度缓冲区的同样地点;假若当前缓冲区的照望像素已经绘制过了,就去查看深度缓冲区中对应地点的 z 值,要是当前片元 z 值小,就重绘,不然就扬弃当前片元。

WebGL 的那套逻辑,对领会蒙版(前面会聊到)有一日千里部分帮忙。

顶点索引

gl.drawArrays()是比照顶点的相继绘制的,而 gl.drawElements()能够令着色器以叁个索引数组为顺序绘制顶点。举个例子其一事例。

图片 13

此处画了三个三角形,但只用了 5 个极点,有三个终极被多个三角共用。那时急需创建索引数组,数组的各样成分表示顶点的索引值。将数组填充至gl.ELEMENT_ARRAY,然后调用 gl.drawElements()。

JavaScript

var iarray = new Uint8Array([0,1,2,2,3,4]); var ibuffer = gl.createBuffer(gl.ARRAY_BUFFER, ibuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, iarray, gl.STATIC_DRAW);

1
2
3
4
var iarray = new Uint8Array([0,1,2,2,3,4]);
var ibuffer = gl.createBuffer(gl.ARRAY_BUFFER, ibuffer);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, iarray, gl.STATIC_DRAW);

纹理

attribute 变量不仅可以够传递顶点的坐标,还能传递别的任何逐顶点的数据。举例HelloTriangle 程序把单个顶点的颜色传入了 a_Color,片元着色器收到 v_Color 后直接赋给 gl_FragmentColor,就决定了颜色。

attribute 变量还足以支持绘制纹理。绘制纹理的基本原理是,为每一种终端钦点多少个纹理坐标(在(0,0)与(1,1,)的长方形中),然后传入纹理对象。片元着色器得到的是对应片元的内插后的纹路坐标,就应用那一个纹理坐标去纹理对象上取颜色,再画到片元上。内插后的纹路坐标很恐怕不正好对应纹理上的有个别像素,而是在几个像素之间(因为普通的图形纹理也是离散),那时或许会透过周边多少个像素的加权平均算出该像素的值(具体有多少种分化格局,能够参谋)。

比如以那一件事例。

图片 14

纹理对象和缓冲区目的很周边:使用 gl 的 API 函数创设,要求绑定至常量 gl.APAJERORAY_BUFFER 和 gl.TEXTURE_2D ,都由此常量对象向当中填入图像和数量。差异的是,纹理对象在绑定期还亟需激活七个纹理单元(此处的gl.TEXTURE0),而 WebGL 系统辅助的纹路单元个数是很单薄的(日常为 8 个)。

JavaScript

var texture = gl.createTexture(); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, texture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, textureImage); var sloc = gl.getUniformLocation(program, 'u_Sampler'); gl.uniform1i(sloc, 0);

1
2
3
4
5
6
7
8
var texture = gl.createTexture();
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, textureImage);
var sloc = gl.getUniformLocation(program, 'u_Sampler');
gl.uniform1i(sloc, 0);

片元着色器内申明了 sampler2D 类型的 uniform 变量,通过texture2D函数取样。

JavaScript

precision mediump float; uniform sampler2D u_Sampler; varying vec2 v_TexCoord; void main() { gl_FragColor = texture2D(u_Sampler, v_TexCoord); };

1
2
3
4
5
6
precision mediump float;
uniform sampler2D u_Sampler;
varying vec2 v_TexCoord;
void main() {
  gl_FragColor = texture2D(u_Sampler, v_TexCoord);
};

掺杂与蒙版

透明效果是用混合机制完结的。混合机制与深度检查评定类似,也时有产生在筹算向有些已填写的像素填充颜色时。深度检查测验通过相比较z值来分明像素的颜色,而掺杂机制会将二种颜色混合。举个例子以那件事例。

图片 15

错落的逐个是依据绘制的依次举行的,要是绘制的次第有转移,混合的结果常常也不如。假如模型既有非透明表面又有晶莹剔透表面,绘制透明表面时张开蒙版,其指标是锁定深度缓冲区,因为半晶莹剔透物体前面的实体还是能看出的,假如不这么做,半透明物体前面包车型大巴实体将会被深度检查实验机制排除。

张开混合的代码如下。gl.blendFunc措施钦命了混合的点子,这里的意思是,使用源(待混合)颜色的 α 值乘以源颜色,加上 1-[源颜色的 α]乘以目的颜色。

JavaScript

gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

1
2
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

所谓 α 值,正是颜色的第 4 个轻重。

JavaScript

var carray = new Float32Array([ 1,0,0,0.7,1,0,0,0.7,1,0,0,0.7, 0,0,1,0.4,0,0,1,0.4,0,0,1,0.4 ]);

1
2
3
4
var carray = new Float32Array([
  1,0,0,0.7,1,0,0,0.7,1,0,0,0.7,
  0,0,1,0.4,0,0,1,0.4,0,0,1,0.4
  ]);

浏览器的WebGL系统

WebGL 系统依次组成都部队分在既定准绳下互匹合营。稍作梳理如下。

图片 16

那张图比较随便,箭头上的文字表示 API,箭头方向大概表现了数据的流淌方向,不必深究。

光照

WebGL 未有为光照提供别的内置的情势,需求开荒者在着色器中落到实处光照算法。

只可是有颜色的,模型也可以有颜色的。在光照下,最终物体显示的颜色是双方一齐效能的结果。

兑现光照的艺术是:将光照的数额(点光源的职位,平行光的方向,以至光的水彩和强度)作为 uniform 变量传入着色器中,将物体表面各种顶点处的法线作为 attribute 变量传入着色器,坚决守住光照法则,修定最后片元彰显的水彩。

光照又分为逐顶点的和逐片元的,两个的分别是,将法线光线交角因素位居顶点着色器初级中学结业生升学考试虑可能放在片元着色器初级中学结业生升学考试虑。逐片元光照更是跃然纸上,二个Infiniti的例证是:

图片 17

此刻,点光源在相距八个外表较近处,表面中心 A 处较亮,四周较暗。不过在逐顶点光照下,表面包车型客车颜色(的震慑因子)是由顶点内插出来的,所以表面中心也会比较暗。而逐片元光照直接使用片元的岗位和法线计算与点光源的交角,由此表面宗旨会相比较亮。

复杂模型

复杂模型只怕有满含子模型,子模型或然与父模型有相对运动。举个例子开着雨刮器的小车,雨刮器的世界坐标是受父模型小车,和本身的情事共同决定的。若要总括雨刮器某顶点的地点,须求用雨刮器相对汽车的模子矩阵乘上海汽车公司股份有限权利公司车的模子矩阵,再乘以顶点的后生可畏部分坐标。

复杂模型大概有这一个外界,恐怕每一种表面使用的着色器就分裂。平时将模型拆解为组,使用同一着色器的表面为大器晚成组,先绘制同生机勃勃组中的内容,然后切换着色器。每一遍切换着色器都要双重将缓冲区中的数据分配给着色器中相应变量。

动画

动画片的法规就是全速地擦除和重绘。常用的艺术是闻名遐尔的 requestAnimationFrame 。不熟稔的同校,能够参考正美的牵线。

WebGL库

近年来最盛行的 WebGL 库是 ThreeJS,很有力,官网,代码。

调治工具

正如早熟的 WebGL 调节和测验工具是WebGL Inspector。

网络财富和书本

斯洛伐克语的有关 WebGL 的资源有为数不菲,包蕴:

  • learning webgl
  • WebGL@MDN
  • WebGL Cheat Sheet

境内最先的 WebGL 教程是由郝稼力翻译的,放在 hiwebgl 上,近日 hiwebgl 已经关门,但教程还足以在这里找到。郝稼力近期营业着Lao3D。

境内曾经出版的 WebGL 书籍有:

  • WebGL入门指南:其实是一本讲 ThreeJS 的书
  • WebGL高端编制程序:还不易的一本
  • WebGL编制程序指南:拾壹分可相信的完美教程

谈起底再混合一点私货吧。读书时期自个儿曾花了小半年岁月翻译了一本WebGL的书,也正是地点的第 3 本。那本书真的优质可信,网络种种课程里相当多没说清楚的事物,这本书说得很明白,并且还提供了龙精虎猛份很完整的API文书档案。翻译那本书的历程也使自己获益良多。假若有同学愿意系统学一下 WebGL 的,建议购买一本(文青提议买英文版)。

1 赞 2 收藏 1 评论

图片 18

本文由香港六马会开奖结果发布于操作系统,转载请注明出处:WebGL技术储备指南

上一篇:连不上网 下一篇:没有了
猜你喜欢
热门排行
精彩图文