教你用webgl快速创建一个小世界,教你用3分钟快速解决忧虑

教你用webgl急迅成立二个小世界

2017/03/25 · HTML5 ·
AlloyTeam

原稿出处:
AlloyTeam   

Webgl的吸重力在于能够创设3个融洽的3D世界,但相相比较canvas2D来说,除了物体的位移旋转变换完全依靠矩阵增添了复杂度,就连生成叁个实体都变得很复杂。

怎样?!为何不用Threejs?Threejs等库确实能够非常的大程度的提升支付功用,而且各方面封装的不行棒,不过不引进初学者直接重视Threejs,最佳是把webgl各方面都学会,再去拥抱Three等相关库。

上篇矩阵入门中牵线了矩阵的基本知识,让咱们探听到了基本的仿射变换矩阵,能够对实体举行活动旋转等生成,而那篇小说将教我们速生三个实体,并且结合变换矩阵在实体在你的世界里动起来。

注:本文适合稍微有点webgl基础的人同学,至少知道shader,知道怎么着画三个物体在webgl画布中

选定待用,修改转发已收获腾讯云授权

起用待用,修改转载已获得腾讯云授权

当您处在焦虑时,你能够学会问自个儿那多少个难题:

干什么说webgl生成物体麻烦

作者们先稍微相比较下中央图形的创建代码
矩形:
canvas2D

JavaScript

ctx1.rect(50, 50, 100, 100); ctx1.fill();

1
2
ctx1.rect(50, 50, 100, 100);
ctx1.fill();

webgl(shader和webgl环境代码忽略)

教你用webgl快速创建一个小世界,教你用3分钟快速解决忧虑。JavaScript

var aPo = [     -0.5, -0.5, 0,     0.5, -0.5, 0,     0.5, 0.5, 0,
    -0.5, 0.5, 0 ];   var aIndex = [0, 1, 2, 0, 2, 3];  
webgl.bindBuffer(webgl.ARRAY_BUFFER, webgl.createBuffer());
webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(aPo),
webgl.STATIC_DRAW); webgl.vertexAttribPointer(aPosition, 3,
webgl.FLOAT, false, 0, 0);   webgl.vertexAttrib3f(aColor, 0, 0, 0);  
webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, webgl.createBuffer());
webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, new Uint16Array(aIndex),
webgl.STATIC_DRAW);   webgl.drawElements(webgl.TRIANGLES, 6,
webgl.UNSIGNED_SHORT, 0);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var aPo = [
    -0.5, -0.5, 0,
    0.5, -0.5, 0,
    0.5, 0.5, 0,
    -0.5, 0.5, 0
];
 
var aIndex = [0, 1, 2, 0, 2, 3];
 
webgl.bindBuffer(webgl.ARRAY_BUFFER, webgl.createBuffer());
webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(aPo), webgl.STATIC_DRAW);
webgl.vertexAttribPointer(aPosition, 3, webgl.FLOAT, false, 0, 0);
 
webgl.vertexAttrib3f(aColor, 0, 0, 0);
 
webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, webgl.createBuffer());
webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, new Uint16Array(aIndex), webgl.STATIC_DRAW);
 
webgl.drawElements(webgl.TRIANGLES, 6, webgl.UNSIGNED_SHORT, 0);

全部代码地址:
结果:
图片 1

圆:
canvas2D

JavaScript

ctx1.arc(100, 100, 50, 0, Math.PI * 2, false); ctx1.fill();

1
2
ctx1.arc(100, 100, 50, 0, Math.PI * 2, false);
ctx1.fill();

webgl

JavaScript

var angle; var x, y; var aPo = [0, 0, 0]; var aIndex = []; var s =
1; for(var i = 1; i <= 36; i++) {     angle = Math.PI * 2 * (i /
36);     x = Math.cos(angle) * 0.5;     y = Math.sin(angle) * 0.5;  
    aPo.push(x, y, 0);       aIndex.push(0, s, s+1);       s++; }  
aIndex[aIndex.length – 1] = 1; // hack一下  
webgl.bindBuffer(webgl.ARRAY_BUFFER, webgl.createBuffer());
webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(aPo),
webgl.STATIC_DRAW); webgl.vertexAttribPointer(aPosition, 3,
webgl.FLOAT, false, 0, 0);   webgl.vertexAttrib3f(aColor, 0, 0, 0);  
webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, webgl.createBuffer());
webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, new Uint16Array(aIndex),
webgl.STATIC_DRAW);   webgl.drawElements(webgl.TRIANGLES,
aIndex.length, webgl.UNSIGNED_SHORT, 0);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var angle;
var x, y;
var aPo = [0, 0, 0];
var aIndex = [];
var s = 1;
for(var i = 1; i <= 36; i++) {
    angle = Math.PI * 2 * (i / 36);
    x = Math.cos(angle) * 0.5;
    y = Math.sin(angle) * 0.5;
 
    aPo.push(x, y, 0);
 
    aIndex.push(0, s, s+1);
 
    s++;
}
 
aIndex[aIndex.length – 1] = 1; // hack一下
 
webgl.bindBuffer(webgl.ARRAY_BUFFER, webgl.createBuffer());
webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(aPo), webgl.STATIC_DRAW);
webgl.vertexAttribPointer(aPosition, 3, webgl.FLOAT, false, 0, 0);
 
webgl.vertexAttrib3f(aColor, 0, 0, 0);
 
webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, webgl.createBuffer());
webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, new Uint16Array(aIndex), webgl.STATIC_DRAW);
 
webgl.drawElements(webgl.TRIANGLES, aIndex.length, webgl.UNSIGNED_SHORT, 0);

总体代码地址:
结果:
图片 2

小结:大家抛开shader中的代码和webgl初步化环境的代码,发现webgl比canvas贰D便是费力众多呀。光是二种为主图形就多了那样多行代码,抓其根本多的原因就是因为大家要求顶点新闻。简单如矩形大家得以平素写出它的终端,可是复杂一点的圆,大家还得用数学方法去变通,显著阻碍了人类文明的迈入。
相相比数学方法变通,尽管我们能一直得到顶点新闻那应该是最佳的,有未有高效的章程赢得极限新闻呢?
有,使用建立模型软件生成obj文件。

Obj文件简单的讲正是含有1个3D模型音讯的文本,那里音信包蕴:顶点、纹理、法线以及该3D模型中纹理所使用的贴图
下边这一个是叁个obj文件的地方:



壹.自家焦虑的是哪些?

简简单单分析一下那一个obj文件

图片 3
前两行看到#标志就清楚这几个是注释了,该obj文件是用blender导出的。Blender是一款很好用的建立模型软件,最器重的它是免费的!

图片 4
Mtllib(material library)指的是该obj文件所运用的材料库文件(.mtl)
单纯的obj生成的模型是白模的,它只含有纹理坐标的音信,但从没贴图,有纹理坐标也没用

图片 5
V 顶点vertex
Vt 贴图坐标点
Vn 顶点法线

图片 6
Usemtl 使用质感库文件中现实哪2个材料

图片 7
F是面,后边分别对应 顶点索引 / 纹理坐标索引 / 法线索引

此地超越5分之三也都以大家卓殊常用的属性了,还有一些此外的,那里就不多说,能够google搜一下,很多介绍很详细的稿子。
要是有了obj文件,那大家的办事也正是将obj文件导入,然后读取内容还要按行解析就足以了。
先放出最后的结果,二个模仿银系的3D文字效果。
在线地址查看:

在此地顺便说一下,2D文字是可以经过分析获得3D文字模型数据的,将文字写到canvas上之后读取像素,获取路径。大家那里未有使用该办法,因为即使那样辩驳上其余贰D文字都能转3D,仍可以做出像样input输入文字,3D展示的效应。不过本文是教我们连忙搭建四个小世界,所以大家依然利用blender去建立模型。

作者:TAT.vorshen

作者:TAT.vorshen

二.小编能接纳哪些行动来消除?

实际达成

Webgl的魅力在于能够创制三个融洽的3D世界,但相相比canvas贰D来说,除了物体的运动旋转变换完全重视矩阵增添了复杂度,就连生成三个物体都变得很复杂。

Webgl的魔力在于可以成立一个祥和的3D世界,但相相比canvas二D来说,除了物体的移动旋转变换完全依靠矩阵扩张了复杂度,就连生成多少个实体都变得很复杂。

3.自家主宰要使用的走动是怎么着?

相关文章