现在学习也不晚

WebGL，是一项用来在网页上绘制和渲染复杂三维图形（3D图形），并允许用户与之进行交互的技术。优势：1.WebGL内嵌在浏览器中，不需要安装插件和库就可以直接在浏览器当中使用，最大优势。2.WebGL直接使用文本编辑器就可以去开发，不需要搭建开发环境。3.轻松跨平台，只要有浏览器就可以打开WebGL。4.WebGL的技术规范继承自免费和开源的OpenGL标准，而后者在计算机图

Document 你的浏览器不支持WebGL，请更换新的浏览器 function main() { //首先获取到canvas的dom对象 var canvas = document.getElementById("canvas"); //获取到WebGL的上下文 var gl = canvas.get

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> Document 你的浏览器不支持WebGL，请更换新的浏览器 funct

WebGL不同于canvas 2D的绘图方式，WebGL需要去调用OpenGL的接口的着色器去绘图。所以，我们需要学习WebGL的着色器进行绘图。WebGL的着色器分为两种：1.顶点着色器（Vertex shader）：顶点着色器是用来描述顶点特性（如位置、颜色等）的程序。顶点（Vertex）是指二维或三维空间中的一个点，比如二维或三维图形的端点或交点。2.片元着色器（Fragment shade...

初始化着色器函数initShaders()被定义在了cuon.util.js中使用：initShaders(gl, vshader, fshader);参数：gl  指定渲染的上下文vshader  指定顶点着色器程序代码(字符串)fshader  指定片元着色器程序代码（字符串）返回值：true  初始化着色器成功false  初始化着色器失败顶点

由于WebGL处理的是三维图形，所以它使用的是三维坐标系统（笛卡尔坐标系），具有x轴、y轴、z轴。三维坐标系统很容易理解，因为我们的世界也是三维的：具有宽度、高度和长度。在坐标系统中，轴的方向非常重要。WebGL采用的是右手坐标系，因为可以用右手来表示。如图：默认情况下WebGL和canvas的对应关系。canvas的中心点就是WebGL的(0.0,0.0,0.0)

我们将位置信息从javascript程序中传给顶点着色器。有两种方式可以做到这点：attribute变量和uniform变量attribute变量传输的是与顶点相关的数据uniform变量传输的是对于所有顶点都相同（或与顶点无法）的数据。思路：1.在顶点着色器中，声明attribute变量。2.将attribute变量赋值给gl_Position变量。3.向attribute变量传输数据。示例：案...

案例查看地址：点击这里&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0

上一节通过点击绘制点，这一节接着上一节来修改颜色，到这一节关于点的就写完了。案例查看地址：点击这里&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-widt

前面的方法只能绘制一个点，而不能绘制多个顶点组成的图形，比如三角形、矩形和立方体，像那些方法我们需要一次性的将图形的顶点全部传入顶点着色器，然后才能把图形画出来。WebGL提供了一种很方便的机制，就是缓冲区对象，它可以一次性向着色器传入多个顶点的数据。缓冲区对象是WebGL系统中的一块内存区域，我们可以一次性地向缓冲区对象中填充大量的顶点数据，然后将这些数据保存在其中，供顶点着色器使用。案例查看地...

案例查看地址：点击这里&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0

案例查看地址：点击这里&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0

案例查看地址：点击这里相对于平移来说，WebGL的选择就复杂一些，能够旋转，首先你要指明：1.旋转轴：你要指明通过哪个轴进行旋转2.旋转方向：逆时针还是顺时针旋转3.旋转的角度如下图这种，逆时针选择通过z轴旋转，为正旋转。那我们怎么通过这些所知的内容，求出旋转后的顶点的坐标呢？p和p'是老点的位置和新点的位置，r是距离原点的距离，α是p点距离x轴的角度，β是选中的角度。...

具体操作，wasd键控制缩放，上下左右键控制图形的位置，图形自动旋转。案例查看地址：点击这里&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width,

今天我更新一个一个比较简单的方法设置矩阵，就是使用教程里面封装好的矩阵库，就可以很简单的实现矩阵转换了。案例查看地址：点击这里&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="wid

案例查看地址：点击这里&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0

案例查看地址：点击这里&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0

这个由于博主没有成功，不知道是什么原因，所以这一节，就当时存档，以后再改案例查看地址：点击这里问题解决了，主要就是片元着色器里面没有声明浮点数的精度，才无法显示&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport"

案例查看地址：点击这里图形装配的任务：将孤立的顶点坐标装配成几何图形。几何图形的类别由gl.drwaArrays()函数的第一个参数决定的。光栅化过程的任务：将装配好的几何图片转化为片元。gl_Position实际上是几何图形装配阶段的输入数据。几何图形装配过程又被称为图元装配过程，因为被装配出的基本图形（点，线，面）又被称为图元。顶点着色器和片元着色器之间的图形装配与光栅化的过程，如下图：在光栅...

案例查看地址：点击这里WebGL中纹理的限制WebGL中的纹理需要注意一点，所使用的图片数据的大小必须是2的阶乘，横竖的像素长度大小必须是32x32，128x128等2的阶乘的形式。当然，做一些处理的话，不是2的阶乘的图片数据也是可以用的，但是基本上作为纹理使用的图像数据的大小必须是2的阶乘。另外，看一下普通的网页就能感觉到，网页上的图片数据的读取是要花一点时间的，在进行纹理转换的话，必须是在图片...

案例查看地址：点击这里为了更好的对纹理相关的内容的理解，我们修改上一节的案例进行更加深入的了解。接下来，我们将76行的纹理坐标进行了修改： var verticesSizes = new Float32Array([ //四个顶点的位置和纹理数据 -0.5,0.5,-0.3,1.7, -0.5,-0.5,-0.3...

案例查看地址：点击这里&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

首先将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