博客专栏  >  前端   >  WebGL入门

WebGL入门

细致讲解WebGL的入门过程

关注
133 已关注
32篇博文
  • [WebGL入门]三十二,四元数和minMatrixb.js

    这次结合实际应用,来继续了解一下。将三维空间中的坐标变换为四元数,然后进行旋转处理。 虽说,本次用来解说的demo,即使不使用四元数也能轻易的实现,但是使用了四元数之后,会更加的直观一些。 对于四元数...

    2017-08-29 09:15
    876
  • [WebGL入门]三十一,Quaternions(四元数)

    D编程的世界中,数学的知识是非常重要的。最具代表的就是矩阵了,不知道矩阵的话,就没办法进行坐标变换了。而其他的,向量的知识,内积・外积这些也都是不可缺少的。的确是非常烦人。 那么,这次的标题是四元数。...

    2017-08-23 11:43
    642
  • [WebGL入门]三十,混合系数

    混色是将颜色和颜色混合处理的总称,在WebGL中主要是指源颜色和目标颜色这两种颜色的混合。源颜色是即将要绘制的颜色,目标颜色是已经绘制的颜色,源颜色如何处理,目标颜色如何处理,这些都可以单独进行设置。...

    2017-08-23 09:04
    548
  • [WebGL入门]二十九,透明混色

    所谓混色,就是刚才叙述的那样,把颜色混合在一起。那么用来混合的颜色是什么颜色呢?顶点的颜色?还是纹理的颜色?答案既不是顶点颜色也不是纹理 颜色。而是源颜色(即将要绘制的颜色)和目标颜色(已经绘制的颜色...

    2017-08-18 23:58
    1044
  • [WebGL入门]二十八,纹理参数

    为了进一步提升纹理的渲染质量,来介绍一下纹理参数。通过控制纹理参数,可以很好的提升模型的渲染质量,虽然会有些比较难理解的地方,这些可以以后再考虑。 那么,WebGL中的纹理参数到底是什么呢?现在就从这...

    2017-08-16 21:34
    572
  • [WebGL入门]二十七,多纹理

    多纹理进行渲染的时候应该注意的是,指定正确的纹理单位进行数据的处理,这就足够了。 其他的细节,主要是activeTexture函数和uniform1i函数的使用方法,这几个不出错的话,之后就可以在着色...

    2014-10-19 01:06
    7989
  • [WebGL入门]二十六,纹理绘图

    在片段着色器中对光进行计算,阴影,亮点等效果都非常的漂亮,3D场景的真实度大幅度提升。并且能和顶点颜色一起使用,理解了前面讲解的内容之后,就应该能进行比较高质量的3D渲染了。 这一次,来看高级一点的纹...

    2014-10-18 18:04
    10150
  • [WebGL入门]二十五,点光源的光照

    用点光源的光照,概念基本上和平行光源一样。根据获取光向量和顶点的法线及视点向量的内积来添加阴影。和平行光源的不同之处,简单的说就是光向量是否是一个固定值。点光源使用的是模型坐标变换后的顶点的位置和光源...

    2014-10-13 00:22
    5995
  • [WebGL入门]二十四,补色着色

    这一次分别说了高氏着色和补色着色两种着色,高氏着色的优点是计算量比较低,而和补色着色相比的话,渲染效果不太自然。 补色着色正好相反,计算量很高,但是渲染效果非常完美。 到底选择那种方法,取决于模型的顶...

    2014-10-11 21:55
    4933
  • [WebGL入门]二十三,反射光的光照效果

    与目前为止所涉及到的算法相比,今天的算法也不算难,就是,计算从光源发出的光向量和视线向量之间的半向量,然后与面法线向量求内积,所以相对的负荷也不大。但是,这只是在一定程度上模拟了反射光的效果,并不是非...

    2014-10-06 21:47
    7605
  • [WebGL入门]二十二,从环境光源发出的光

    环境光,模拟了自然界的光的漫反射,弥补了平行光源的缺点。一般,这两种光会同时使用。只使用环境光的话,无法表现出模型的凹凸,只使用平行光源的话,阴影过于严重无法分清模型的轮廓。 3D模拟中的扩散光的代表...

    2014-09-06 00:52
    5535
  • [WebGL入门]二十一,从平行光源发出的光

    写的太长了,果然,就算是简单点说,关于光的处理也需要很长的描述。 重点是,3D渲染中没有办法完全模拟现实中的光,只是大致是那么回事而已。 完全模拟自然界的物理学的话,计算量是非常大的,所以代替这些的就...

    2014-08-28 23:40
    7483
  • [WebGL入门]二十,绘制立体模型(圆环体)

    这次,并没有对WebGL相关的新技术进行说明,这一点运行一下demo就能知道了,果然,比起绘制简单的板状的多边形来说,像圆环体这样的立体模型绘制起来更有意思吧。 demo中使用的着色器和HTML跟以前...

    2014-08-15 21:25
    8835
  • [WebGL入门]十九,遮挡剔除和深度测试

    这次,介绍了遮挡剔除和深度测试,无论那一个都是使用enable函数来设置有效,使用disable函数来设置无效。enable和disable这两个函数的参数是一致的,根据传入的参数不同,可以设定各种属...

    2014-08-15 01:37
    7552
  • [WebGL入门]十八,利用索引缓存来绘图

    使用索引缓存IBO,既可以节约数据,又能够提高渲染顶点的效率,而且,模型越复杂影响越大,这是程序员非常乐意看到的。 索引缓存和顶点缓存一样,可以使用纯粹的一维数组来生成,生成的IBO进行绑定后就可以使...

    2014-08-14 01:21
    6635
  • [WebGL入门]十七,递归处理和移动・旋转・缩放

    这次利用递归处理实现了持续循环,并介绍了模型坐标变换矩阵的移动,旋转和放大缩小等处理。以后,动态的demo会越来越多,这次介绍的持续循环也会被更多的用到。 匿名函数或者普通的函数的递归可能是个稍微难理...

    2014-08-13 00:16
    7520
  • [WebGL入门]十六,绘制多个模型

    这次操作的是模型坐标变换矩阵,介绍了重复利用VBO,视图和投影坐标变换矩阵,进行多个模型的绘制的方法。 绘制很多个简单的模型,图形的时候,像这次的做法一样,可以使处理变的简洁一些,避免写很多多余的代码...

    2014-08-11 00:21
    7671
  • [WebGL入门]十五,为多边形涂抹颜色(顶点颜色的指定)

    与上一篇的内容相比的变更点。主要就是着色器和VBO周围的处理有了些小变化。如果再给顶点增加其他新的属性的话,就依葫芦画瓢,像本次的内容一样,按照同样的步骤,再重复一遍就可以了,这样就可以给顶点自由的添...

    2014-08-09 22:56
    6270
  • [WebGL入门]十四,绘制多边形

    其实这次的代码绘制的只是一个简单的三角形。只是这样,却写了这么长的代码,所以才说3D开发是比较难的。 但是,个人认为,即使这样,和DirectX相比较的话,已经相当简单,简练了。 单从开发环境上来说,...

    2014-08-08 23:10
    11229
  • [WebGL入门]十三,minMatrix.js和坐标变换矩阵

    这次介绍了一下本网站的矩阵计算的库minMatrix.js的基本的使用方法,和坐标变换矩阵的顺序。 minMatrix.js通过一个叫做matIV的对象来对矩阵进行操作,各种方法的具体内容,现在不明白...

    2014-08-07 23:15
    9702

img博客搬家
img撰写博客
img发布 Chat
img专家申请
img意见反馈
img返回顶部