随笔分类 - WebGL
摘要：1.如何实现雾化 实现雾化的方式由多种，这里使用最简单的一种：线性雾化（linear fog）。在线性雾化中，某一点的雾化程度取决于它与视点之间的距离，距离越远雾化程度越高。线性雾化有起点和终点，起点表示开始雾化之处，终点表示完全雾化之处两点之间某一点的雾化程度与该点与视点的距离呈线性关系。比终点更远的点完全雾化了，即完全看不见了。 某一点雾化的程度可以被定义为雾化因子（fog f...
阅读全文
摘要：1.纹理坐标 纹理坐标是纹理图像上的坐标，通过纹理坐标可以在纹理图像上获取纹理颜色。WebGL系统中的纹理坐标系统是二维的，如图所示。为了将纹理坐标和广泛使用的x、y坐标区分开来，WebGL使用s和t命名纹理坐标（st坐标系统）。 纹理图像的四个角坐标为左下角（0.0，0.0），右下角（1.0,0.0），右上角（1.0， 1.0）和左上角（0.0， 1.0）。纹理坐标很通用，因为...
阅读全文
摘要：1.requestAnimationFrame(func) 请求浏览器在将来某时刻回调函数func以完成重绘。requestAnimationFrame()成功的一个关键是确定你在执行其他用户diamante之前就请求了下一帧，这对异常处理非常重要。如果你在动画回调函数中驱动你的整个3D应用，而代码在请求下一帧之前产生了一个异常，你的整个应用就会挂掉。如果你在做其他事情之前请求下一帧，那么...
阅读全文
摘要：1.编译GLSL ES代码，创建和初始化着色器供WebGL使用。这些过程一般分为7个步骤： 创建着色器对象（gl.createShader()）; 向着色器对象中填充着色器程序的源代码（gl.shaderSource()）； 编译着色器（gl.compileShander()）; 创建程序对象（gl.createProgram()）; 为程序对象分配着色器（...
阅读全文
摘要：1.着色（shading） 在三维图形学术语“着色”的真正含义就是，根据光照条件重建“物体各表面明暗不一的效果”的过程。明白着色过程，需要考虑两件事： 1.发出光线的光源类型。 2.物体表面如何反射光线。 2.光源类型 真实世界中的光主要有两种，平行光（directional light），类似于自
阅读全文
摘要：1.观察目标点和上方向 为了确定观察者的状态，你需要获取两项信息：视点，即观察者的位置；观察目标点（look-at point），即被观察目标所在的点，它可以用来确定视线。此外，因为我们需要把观察到的景象绘制到屏幕上，还需要知道上方向（up direction）。有了这三项信息，就可以确定观察者的状态了。 视点：观察者所在的三维空间中位置，视线的起点。视点坐标一般用(eyeX, ...
阅读全文
摘要：1.类型转换内置函数 转换/函数/描述 转换为整形数/int(float)/将浮点数的小数部分删去，转换为整形数（比如，将3.14转换为3） 转换为整形数/intl(bool)/true被转换为1，false被转换为0 转换为浮点数/float(int)/将整形数转换为浮点数（比如，将8转换为8.0） 转换为浮点数/float(bool)/true被转换为1...
阅读全文
摘要：Matrix4是由>作者写的提供WebGL的4*4矩阵操作的方法库，简化我们编写的代码。源代码共享地址，点击链接：Matrix4源代码。 下面罗列了Matrix4库的所有方法： 1.setIdentity() 将Matrix4实例初始化为单位阵 2.setTranslate(x, y, z) 将Matrix4实例设置为平移变换矩阵，...
阅读全文
摘要：1.三角函数 坐标轴采用右手法则，沿Z轴的逆时针方向为正角度，假设原始点为p(x,y,z),a是X轴旋转到点p的角度，r是从原始点到p点的距离。用这两个变量计算出点p的坐标，等式如下： x = rcos a; y = rsin a; 类似的可以使用r,a,b(p旋转的角度)来表示p'的坐标: x' = r cos(a + b); y' = r sin(a + b); 利用三...
阅读全文
摘要：1.使用缓冲区对象向顶点着色器传入多个顶点的数据，需要遵循以下五个步骤： 1.1 创建缓冲区对象（gl.createBuffer()）。 1.2 绑定缓冲区对象（gl.bindBuffer()）。 1.3 将数据写入缓冲区对象（gl.bufferData()）。 1.4 将缓冲区对象分配给一个att
阅读全文
摘要：1.清空绘图区 清空绘图区是使用指定的背景颜色填充canvas，使用gl.clearColor设置背景色。gl.clearColor(red, green, blue, alpha)。openGL的颜色取值返回是0-1。 调用gl.clear()函数，用clearColor指定的背景色清空绘图区域。gl.clear(g.COLOR_BUFFRE_BIT)，清理绘图区域实际上在清理颜...
阅读全文
