女王控的博客

前端

164 篇文章

WebGL 理论基础——二维

WebGL 二维平移 平移就是普通意义的“移动”物体。这里有个例子基于前一个例子。首先我们来定义一些变量存储矩形的平移,宽,高和颜色。 然后定义一个方法重绘所有东西,我们可以在更新变换之后调用这个方法。 在下方的例子中,我添加了一对滑块,当它们值改变时会更新 和 并且调用 drawScene 方法。拖动滑块来平移矩形。 到目前为止还不错!但是想象一下如果对一个更复杂的图形做类似操作怎么办。 假设我们想绘制一个由六个三角形组成的 ‘F… »

WebGL 理论基础——纹理

WebGL 三维纹理 在 WebGL 中如何使用纹理?你可能会从二维图像处理的文章中得到启发,如果我们讲的再深入一点可能更好理解。 首先需要调整着色器以便使用纹理,这里是顶点着色器的修改部分,我们需要传递纹理坐标,在这个例子中直接将它们传到片断着色器中。 在片断着色器中声明一个 sampler2D 类型的全局变量,可以让我们引用一个纹理,然后使用从顶点着色器传入的纹理坐标调用 texture2D 方法,在纹理上找到对应的颜色。 我们需要设置纹理坐标 F 如你所见,我们将图像映射到 F… »

WebGL 理论基础——光照

WebGL 三维方向光源 实施光照的方式有很多种,最简单的可能就是方向光源了。 方向光是指光照均匀地来自某一个方向,晴朗天气下的太阳经常被当作方向光源,它距离太远所以光线被看作是平行的照到地面上。 计算方向光非常简单,将方向光的方向和面的朝向点乘就可以得到两个方向的余弦值。 这有个例子 随意拖动其中的点,如果两点方向刚好相反,点乘结果则为 -1,如果方向相同结果为 1。 这有什么用呢?如果将三维物体的朝向和光的方向点乘,结果为 1 则物体朝向和光照方向相同,为 -… »

WebGL 理论基础——三维

WebGL 三维正射投影 上一篇文章概述了二维矩阵的工作原理,我们讲到了如何平移,旋转,缩放甚至从像素空间投影到裁剪空间,并且将这些操作通过一个矩阵实现,做三维只需要再迈出一小步。 二维例子中的二维点 (x, y) 与 3x3 的矩阵相乘,在三维中我们需要三维点 (x, y, z) 与 4x4 的矩阵相乘。 让我们将上个例子改成三维的,这里会继续使用 F,但是这次是三维的 ‘F’ 。 首先需要修改顶点着色器以支持三维处理,这是原顶点着色器 这是新着色器 它甚至变简单了!在二维中我们提供 x… »

0%