摘要：
到目前为止，通过CAD绘制3D模型，将模型数据输出到txt文件中，这些数据都是浮点型，其中包括每个点的x、y、z坐标和每条线的起点和终点。导入txt文件，读取其中的数据，通过自定义算法对数据进行处理，还原每一条线，展示出3D模型，设置可以进行操作的滚动条，可以对图形进行放大、缩小和旋转，并且通过点击 阅读全文
摘要：
通过操作模型坐标变换矩阵，实现了多个模型的移动，旋转和放大缩小。但是，渲染的依然是简单的三角形，是个构造及其简单的模型。但是实际中，用WebGL来绘制一个简单的三角形的机会是很少见的。至少是个四角多边形吧，通常会是更复杂的模型。伴随着模型的复杂化，顶点的个数也会大幅度增加，越是精密圆滑的模型，所需要 阅读全文
摘要：
3D世界只有三种运动方式：移动、旋转、放大缩小。 使用setTimeout函数可以实现反复的循环处理，那么具体的做法是怎样的呢？setTimeout函数的第一个参数是调用的函数，第二个参数是需要经过多长时间(毫秒)后调用这个函数。如果第一个参数指定为当前所运行的函数的话，那么就可以实现持续循环了。 阅读全文
摘要：
在3DMAX，MAYA等软件（这是一些三维编辑软件）中，可以制作出3D模型。这些模型可用于室内设计，三维影视，三维游戏等领域。 3D模型由顶点(vertex)组成，顶点之间连成三角形或四边形（在一个平面上）,多个三角形或者四边形就能够组成复杂的立体模型. 如下图所示： 上图就是一辆汽车的3D模型（立 阅读全文
摘要：
three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。 阅读全文
摘要：
与上一节相比这一节相当做了些整合和整理，目的是提高了读写效率和减少代码量，就是做了优化。这里我们只需要在顶点着色器中定义一个用于从js传递参数的变量u_MvcMatrix一看就知道是uniform变量而且是可4*4矩阵，然后再js中 new四个矩阵变量分别是mvcMatrix是几个矩阵 变量相乘后的 阅读全文
摘要：
第六章讲的是一些GL的一些语法，前面已经涉及，学习时直接跳过，来看第七章，第七章是真正意义的三维立体的出现，其实图形绘制方法是差不多的，就是Z坐标此时不再为0，所以很容易能构造出一些立体图形，但是立体图形涉及了一些其它概念。 正射投影：就是没有那种越远越小的效果，立体感没有那么强。 其中涉及的知识有 阅读全文
摘要：
这次主要是对纹理的进一步讲解，我们很多时候需要将现实中已有 的图片在网页中展示出来而不是去创造图片，通过纹理 我们可以将光栅化的图形和图片纹理形成映射并且将图片在图形 中显示出来。基本过程与前几章一致，在着色器中主要是添加了一个取样器的变量作用是从纹理单元中取出图形在不同坐标的片元上显示出来，这里先 阅读全文
摘要：
前几次对图形图形内部多是 以纯色填充，但是现实中已经有许多好的图片了我们没必要一点点画，这一章就是将图片以纹理的形式加载到片元中，主要过程如下，首先是定义点的坐标的attribute变量用于在javascript中 赋值，接下来定义varying 的vec2的变量用于将纹理坐标从顶点着色器传给片元着 阅读全文