博客专栏  >  Web前端   >  WebGL入门

WebGL入门

细致讲解WebGL的入门过程

关注
79 已关注
27篇博文
  • [WebGL入门]二十七,多纹理

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    2014-08-07 23:15
    8223
  • [WebGL入门]十二,模型数据和顶点属性

    顶点中的属性是由程序员来自由添加的,需要的VBO的个数就是添加的属性个数。 顶点属性的各个数据,使用纯粹的一维数组,当然,数组的元素个数要根据想要绘制的顶点个数来定义。 生成VBO的时候,首先要把缓存...

    2014-08-06 22:20
    6677
  • [WebGL入门]十一,着色器的编译和连接

    HTML代码中引入必要的javascript文件,以及描述着色器的代码。 准备了着色器的编译函数和连接着色器的程序对象相关的函数。每个函数中都有是否进行了正确处理的判断。 下次,准备好顶点数据,也就...

    2014-08-06 00:28
    9512
  • [WebGL入门]十,矩阵计算和外部库

    从长远来看,真正进行非常复杂的处理时,矩阵的知识还是不能缺少的。但是,要提前把这些都理解是很苦难的。所以,先熟练使用外部库,等能够熟练进行3D开发之后,再逐步了解这些知识是比较理想的。 使用外部库的时...

    2014-08-04 22:28
    6618
  • [WebGL入门]九,顶点缓存的基础

    顶点里添加怎样的情报,程序员是可以自由决定的,DirectX中有一种叫做[灵活顶点格式]的机制,WebGL中顶点格式是没有的,程序员必须自己处理所有的顶点情报。 只需要添加你想要添加的顶点信息的VBO...

    2014-08-03 09:30
    6952
  • [WebGL入门]八,着色器的说明和基础

    顶点着色器和片段着色器,都可以通过GLSL来书写,基本上它们算是一个组合。着色器的内部,必须要定义一个main函数,在这个函数里面添加自己的处理。而且,要从WebGL一侧向着色器传递数据的时候,需要用...

    2014-08-02 11:24
    9475

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