2017年06月_暮志未晚NAN

12月 11月 10月 09月 08月 07月 06月 05月 04月 03月 02月 01月

原创 55 WebGL加载三维模型

案例查看地址：点击这里迄今为止，示例程序都是在代码中显式定位三维模型的顶点坐标，并保存在Float32Array类型的数组中。然而，大部分三维程序都是从模型文件中读取三维模型的顶点坐标和颜色数据，而模型文件是有三维建模软件生成的。程序需要从模型文件中读取数据，并保存在之前使用的那些数组和缓冲区中。具体地，程序需要：（1）准备Float32Array类型的数组vertices，从文件中读取模型的顶点...

2017-06-30 10:44:42 18390 5

原创 54 WebGL实现阴影效果

案例查看地址：点击这里实现阴影的基本思想是：太阳看不见阴影。如果在光源处放置以为观察者，其视线方向与光线一致，那么观察者也看不到阴影。他看到的每一处都在光的照射下，而那些背后的，他没有看到的物体则处在阴影中。这里，我们需要用到光源与物体之间的距离（实际上也就是物体在光源坐标系下的深度z值）来决定物体是否可见。如图所示，同一条光线上有两个点P1和P2，由于P2的z值大于P1，所以P2在阴影中。我们需...

2017-06-27 13:54:33 5761 1

原创 53 WebGL将渲染图形贴到另一个物体上面

案例查看地址：点击这里WebGL的另一项强大的技术，使用WebGL渲染三维图形，然后将渲染结果作为纹理贴到另一个三维物体上去。实际上，把渲染结果作为纹理使用，就是动态地生成图像，而不是向服务器请求加载外部图像。在纹理图像被贴上图形之前，我们还可以对其做一些额外的处理，比如生成如动态模糊或景深效果。帧缓冲区对象和渲染缓冲区对象在默认情况下，WebGL在颜色缓冲区中进行绘图，在开启隐藏面消除功能时，还...

2017-06-25 13:34:45 3279

原创 52 WebGL不使用任何方法绘制矩形

案例查看地址：点击这里由于上一个项目需要使用多个程序对象，而突然发现自己使用了好长时间的教程内置的方法，缺没有独立的写过相关的方法。故今天自己手动写了一个最原生的矩形。也发现了很多自己的不足，希望自己继续努力。案例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...

2017-06-22 00:46:01 1018

原创 51 WebGL切换着色器

到目前为止，以前的程序都是用了一个着色器（顶点着色器和片元着色器），如果一个着色器就能绘制出场景中所有的物体，那就没有问题。然而事实是，对不同物体经常需要使用不同的着色器来绘制，每个着色器中可能有非常复杂的逻辑以实现各种不同的效果。我们可以准备多个着色器，然后根据需要来切换使用它们。实现切换着色器为了切换着色器，需要先创建多个着色器程序对象，然后再进行绘制前选择使用的程序对象。以前在...

2017-06-20 22:41:39 3055 3

原创 50 WebGL透明与不透明物体共存

案例查看地址：点击这里上一章里面说过，如果我们是绘制的立方体图形，在里面加入了相关的代码，不会起作用。而且还是普通的立方体效果。如果我们把：gl.enable(gl.DEPTH_TEST);这一行注销掉，就实现了效果。关闭隐藏面消除功能只是一个粗暴的解决方案，并不能满足实际的需求。在绘制三维场景时，场景中往往既有不透明的物体，也有半透明的物体。如果关闭隐藏面消除功能，那些不透明物体的前后关系就乱套...

2017-06-20 02:17:02 3148

原创 49 WebGL绘制透明的图形

案例查看地址：点击这里颜色中的 α 分量，（即RGBA中的A，alpha）控制着颜色的透明度。如果一个物体的颜色的α分量值为0.5，该物体为半透明，透过它可以看到该物体背后的其他物体。如果物体颜色的α分量值为0，那么它就是完全透明的，我们将完全看不到它。在这一节的示例程序中，随着α分量的降低，整个绘图区域会逐渐成为白色，以为在默认的情况下，α混合不仅影响绘制的物体，也会影响背景色，最后你看到的白色...

2017-06-19 18:14:18 5512 1

翻译 html5的陀螺仪

获取移动设备的陀螺仪，需要知道陀螺仪包含什么。我们可以让document监听deviceorientation 来获取相关的数据，里面包括3个值 alpha、beta和gamma。这三个值分别代表：（1）alpha：移动设备水平放置时，绕z轴旋转的角度，数值为0度到360度。（2）beta：移动设备水平放置时，绕X轴旋转的角度，数值为-180度到180度。

2017-06-16 11:25:43 12613 2

原创 48 WebGL绘制圆形的点

案例查看地址：点击这里为了绘制一个圆点，我们需要将原先的方点“削”成圆形的。在以前的时候说过，顶点着色器和片元着色器之间发生了光栅化过程，一个顶点被光栅化为了多个片元，每一个片元都会经过片元着色器的处理。如果直接进行绘制，画出的就是方形的点；而如果在片元着色器中稍微作改动，只绘制圆圈以内的片元，这样就可以绘制出圆形的点了。为了将矩形削成圆形，需要知道每个片元在光栅化过程中的坐标。在之前的示例程序中...

2017-06-15 22:55:51 2319

原创 47 WebGL雾化（大气效果）

案例查看地址：点击这里在三维图形学中，术语雾化（fog）用来描述远处的物体看上去较为模糊的现象。在现实中，任何介质中的物体都可能表现出雾化现象，比如水下的物体。如何实现雾化：实现雾化的方式有很多种，这里使用最简单的一种：线性雾化（linear fog）。在线性雾化中，某一点的雾化程度取决于它与视点之间的距离，距离越远雾化程度越高。线性雾化有起点和终点，起点表示开始雾化之处，终点表示完全雾化之处，两...

2017-06-15 18:05:42 3461

原创 46 WebGL网页上显示三维物体

案例查看地址：点击这里想要把三维物体显示到网页上面，很简单，只要会css，懂得盒子模型，定位，就可以在网页上面随意放置模型，控制canvas位置就可以。这次的案例直接body添加了一个背景，然后看到的效果就是这样的，一个立方体在网页上面旋转。实现这个效果也只是将背景修改成了全透明，也就是将gl.clearColor()方法里面传入的第四个值改为0.0 。就达到了效果。<!DOCTYPE ht...

2017-06-15 16:08:38 5719 1

原创 45 WebGL在页面上添加hud显示

案例查看地址：点击这里平视显示器（head up display）简称HUD，最早用于飞机驾驶。平视显示器将一些重要信息投射到飞机驾驶舱前方的一块玻璃上，飞行员能够将外界的影像和这些重要的信息融合在一起，而不用频繁低头观察仪表盘。三维图形程序，尤其是游戏，也经常在三维场景中叠加文本或二维图形信息，以达到HUD的效果。思路：（1）html中添加两个标签，一个用于显示模型的，另一个获取getConte...

2017-06-15 15:35:00 1967 1

原创 44 WebGL通过点击获取到点击面的下标

案例查看地址：点击这里 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalab

2017-06-15 00:44:56 1461

原创 43 WebGL绘制一个自动旋转的立方体盒子，点击获取点击位置颜色

案例查看地址：点击这里<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=n

2017-06-14 16:52:25 1634

原创 42 WebGL的插件Matrix插件的相关方法

Matrix4是由>作者写的提供WebGL的4*4矩阵操作的方法库，简化我们编写的代码。下面罗列了Matrix4库的所有方法： 1.setIdentity() 将Matrix4实例初始化为单位阵 2.setTranslate(x, y, z) 将Matrix4实例设置为平移变换矩阵，在x轴上平移的距离为x，在y轴上平移的距离为y，在z轴上平移的距离为z

2017-06-14 09:48:21 894

原创 41 WebGL绘制一个具有交互的立方体

增加交互事件，鼠标拖拽立方体上下左右旋转，鼠标滚轮放大缩小立方体。案例查看地址：点击这里<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wi

2017-06-13 17:02:53 2673 2

原创 js 获得盒子距离窗口的距离的集合的函数dom.getboundingclientrect()

rectObject = object.getBoundingClientRect();返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合。DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了 width

2017-06-13 14:17:15 4720

原创 40 WebGL着色器和着色器程序对象：initShader()函数的内部流程

首先将initShaders()函数的相关代码贴出：/** * Create a program object and make current * @param gl GL context * @param vshader a vertex shader program (string) * @param fshader a fragment shader program (stri

2017-06-12 14:52:44 2745

原创使用http-server零配置在本地开启http服务器

在很多情况下，需要在本地开启http服务器来测试。所以就需要一个简单的省事好用的http服务器。以前的时候，都是使用php的本地环境，但是，自从学了nodejs，发现了http-server好东西。不用配置直接在当前文件夹内打开cmd，就能够使用，简单易用，轻松方便。简介：http-server是一个简单的零配置命令行http服务器。它对于生产使用来说是足够强大的，但它的测试，本地

2017-06-12 14:21:31 41638 1

原创 39 WebGL着色器和着色器程序对象：initShader()函数的作用

这一节，我们研究一下以前一直使用的辅助函数initShader()。之前教程当中故意把这个函数中留到最后讲解，是为了确保学习initShaders()函数中的复杂细节时，对WebGL已经有了比较深入的了解。掌握这一部分内容不是必须的，直接使用initShaders()函数也能够编写出相当不错的WebGL程序。initShaders()函数的作用是，编译GLSL ES代码，创建和初始化着色器

2017-06-12 11:20:45 3101

原创 38 WebGL针对单独的顶点坐标绘制组成模型

案例查看地址：点击这里这一节和上一节绘制的模型是一模一样的效果，就是区别是这一节，对每个模型都定义了单独的一组顶点数据，并存储在了一个单独的缓存区中。通常，一个部件的顶点数据包括坐标、法向量、索引值等，但是这里的每个部件都是立方体，所以你可以让各部件共享法向量和索引值，而仅仅为各个部件单独定义顶点坐标。<!DOCTYPE html><html lang="en">&lt...

2017-06-11 23:07:19 1204 1

原创 37 WebGL多个模型组成一个复杂的模型

案例查看地址：点击这里<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=n

2017-06-10 23:14:33 3100

原创 36 WebGL两个简单模型组合成一个具有交互效果的模型

案例查看地址：点击这里首先需要说一下需求，通过需求进行代码的书写。需要绘制两个立柱，然后两个立柱是连接在一起的具有，模仿两节胳膊，运行程序，用户可以使用左右方向键控制arm1（同时带动整条手臂）水平转动，使用上下方向键控制爱人m绕joint1关节垂直转动。下面是制作出来的案例，左右键，整个沿y轴旋转，上下键，沿joint1进行z轴旋转<!DOCTYPE html><html l...

2017-06-09 11:54:34 2160 2

转载 javascript的内存泄漏

一、什么是内存泄漏？程序的运行需要内存。只要程序提出要求，操作系统或者运行时（runtime）就必须供给内存。对于持续运行的服务进程（daemon），必须及时释放不再用到的内存。否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。不再用到的内存，没有及时释放，就叫做内存泄漏（memory leak）。有些语言（比如 C 语言）必须手动释放内存，程序员

2017-06-09 09:37:30 703

原创 35 WebGL物体的点光源的效果（逐片元处理光源光照效果）

上一节提到过，逐顶点和逐片元有区别，这一节先上图，看效果，下面两张图，大家应该很容易就分辨出区别案例查看地址：点击这里看上面的两张图，就会发现逐片元由于内插的效果，过渡的时候，会更加的柔和。案例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <m

2017-06-08 17:33:01 871

原创 34 WebGL物体的点光源的效果（逐顶点处理光源光照效果）

案例查看地址：点击这里前面我们学习了平行光源，环境光源，今天我们一起学习一下点光源下的物体的效果上面的效果就是通过点光源生成的阴影效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"

2017-06-08 16:43:55 2754

原创 33 WebGL运动中的物体的光照效果（逆转置矩阵）

案例查看地址：点击这里很多场景中，物体有可能会动，观察者的视角也很有可能会改变，我们必须考虑这种情况。首先，我们先看一下物体变动时，法向量的情况：~平移变换不会改变法向量，因为平移不会改变物体的方向。~旋转变换会改变法向量，因为旋转改变了物体的方向。~缩放变换对法向量的影响较为复杂。如你所见，最右侧的图显示了立方体先旋转了45度，再在y轴上拉伸至原来的2倍的情况。此时法向量改变了，因为表面的朝向改...

2017-06-08 11:42:10 2092

转载 js 通过event获取相关位置的属性

clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 screenX

2017-06-07 10:09:50 1906

原创 32 WebGL环境光下的漫反射光的计算

案例查看地址：点击这里现实生活中，我们看物体不单单有平行光（太阳光）和点光源的照射，还有环境光。所以，背面的颜色也不会达到和上一节一样黑的程度，也会有一定的变亮的效果，所以，这一节我们将环境光的漫反射加入进去，来使得物体看上去更加的逼真。根据上一节的案例，我们需要将环境反射光颜色计算出来，然后获取真实的颜色。首先我们使用：<环境反射光颜色>=<入射光颜色> x <表面...

2017-06-06 16:13:58 1277

原创 31 WebGL平行光下的漫反射光的计算

案例查看地址：点击这里通过上一节的介绍，我们可以知道，平行光下的漫反射光的颜色可以由一下式子得出：<漫反射光颜色>=<入射光颜色>x<表面基底色>x cos θ所以，我们要计算出来漫反射的光的颜色需要三项数据：（1）平行入射光的颜色（2）表面的基底色（3）入射光与表面形成的入射角 θ但是，我们没有办法直接就确定 θ值是多少，我们必须根据入射光的方向和物体表面的...

2017-06-05 16:59:43 1696

原创 30 WebGL光照的概念

光照原理：现实世界中的物体呗光纤照射时，会反射一部分光。只有当反射光纤进入你的眼睛时，你才能够看到物体并辨认出它的颜色。比如，白色的盒子会反射白光，当白光进入你的眼睛时，你才能看到盒子是白色的。在现实世界中，当光线照射到物体上时，发生了两个重要的现象：~根据光源和光线方向，物体不同表面的明暗程度变得不一致。在三维图形学中还原这种效果，就叫着色（shading）。~根据光源和光线方向

2017-06-05 10:42:44 2253 1

原创 29 WebGL绘制立方体并为立方体每个表面指定颜色

案例查看地址：点击这里顶点着色器进行的是逐顶点的计算，接收的是逐顶点的信息。如果我们要指定表面的颜色，需要将颜色定义给顶点。比如，我们要定义一个三角形为一种颜色，必须三个顶点的颜色都为一种颜色。但是你会发现，立方体的一个顶点会在三个面中被使用，定义了一种颜色肯定会对别的面造成影响。为了解决这个问题，我们需要创建多个具有相同顶点坐标的顶点（虽然这样会造成一些冗余）。此时的三角形列表，也就是顶点索引值...

2017-06-04 04:33:34 3435

原创 28 WebGL绘制立方体

案例查看地址：点击这里到现在为止，一直学的都是绘制一些简单的三角形。下面，我们将学习如何绘制如图所示的一个立方体，目标：如果按以前所学的知识，制作这个正方体就需要使用三角形两个拼一个矩形，最后拼出来六个正方形来组成这个立方体，由于绘制三角形需要重复调用顶点，虽然只需要8个顶点的位置，但是，绘制三角形的时候，却需要多次调用，所以给我们提供了一个gl.drawElements()函数的解决方案。使用该...

2017-06-02 17:54:28 8432 2

原创 27 WebGL的正确处理对象的前后关系

案例查看地址：点击这里正常的话，前面的图形挡住后面的图形，这是正常的人眼看到的效果，但是图形绘制出来，不会考虑这些前后关系什么的，只是会按照绘制的前后拜访而已。如果我们将前面案例的三角形最后面的和最前面的三角形的z轴调换一下，改成从前面的三角形开始绘制，就会出现这样的效果，太辣眼睛了！所以，我们需要方法处理掉这种问题。如何解决：我们需要通过gl.enable()方法开启相关的功能。通过这个方法：（...

2017-06-02 15:11:14 1849

原创 26 WebGL的透视投影矩阵

案例查看地址：点击这里上一章讲的盒状投影矩阵，主要用于精度需求度高的工业。而这一节的透视投影矩阵，更符合我们正常人的视觉，也是就近大远小的感觉。我们需要实现的效果就是同样大小的图形，距离视点越远，展现出来就越小，如图：上面案例图片的感觉就达到了近大远小的深度感，那我们如何定义透视投影可视空间：就像盒状可视空间那样，透视投影可视空间也有视点、视线、近裁剪面和远裁剪面，这样可视空间内的物体才会被现实，...

2017-06-02 12:03:13 3977

原创 25 WebGL的盒状可视投影

案例查看地址：点击这里在上一节的案例中，会发现在移动中的时候，会发现有时候再某些位置三角形的角会消失。原因就是我们没有指定可视范围，即实际观察得到的区域边界。WebGL通过对水平视角、垂直视角和可视深度等的限制，定义了可视空间（view volume）。有两类常用的可视空间：~长方体可视空间，也称为盒状空间，有正射投影（orthographic projection）产生。~四棱锥/金字塔可视空间...

2017-06-02 10:30:46 1350

原创 24 WebGL从指定视点观察旋转后的三角形

案例查看地址：点击这里举个例子，默认情况下视点在原点，实现沿着Z轴负方向进行观察。假如我们将视点移动到(0,0,1)，如图所示。这时，视点与被观察的三角形的距离增加了1.0个单位。实际上，如果我们使三角形沿Z轴负方向移动1.0个单位，也可以达到同样的的效果，因为这两种方法处理完后，两个点的位置之间的关系是一样的。“改变观察者的状态”与“对整个世界进行平移和旋转变换”，本质上是一样的，它们都可以用矩...

2017-06-01 17:14:57 1370

原创 23 WebGL的视点和视线

案例查看地址：点击这里强烈建议大家再往后看的时候，把本人更新的GLSL ES语言相关的内容先查看一遍，然后再继续本内容及以后内容的学习。这一节往后，我们就开始接触3d相关的信息了，所以，今天，先接触一下跟3d有关的概念。视点：观察者所处的位置称为视点。从视点出发沿着观察方向的射线称作视线。坐标用(eyeX,eyeY,eyeZ)表示。观察目标点：被观察目标所在的点，它可以用来确定视线。坐标用(atX...

2017-06-01 15:15:06 2715