[WebGL入门]二十,绘制立体模型(圆环体)

翻译 2014年08月15日 21:25:38

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正。


本次的demo的运行结果

立体的模型

这次稍微喘口气,开始绘制立体模型。
这里说的[喘口气]是指本次的文章中没有出现任何新的技术知识点。只是利用到现在为止所介绍过的内容,来绘制一个立体的圆环体。
到现在为止,只绘制了三角形和四边形,当然,在三维空间中绘制简单的多边形也没什么不对,但是缺点儿说服力。这次绘制一个圆环体,体验一下像样的3D绘图。
要说圆环体的定义的话,不太好解释,其实就是一个跟“甜甜圈”一样形状的模型(lufy:什么?不知道“甜甜圈”?科普一下甜甜圈百科)。准备圆环体模型数据的时候,需要使用正弦和余弦来计算三维空间中顶点的位置。
具体的话,首先在距离原点开始一定距离R的地方开始画一个圆。

如上图,是三维空间的一个横切面。
接着,以Y轴为中心,像圆规一样旋转,不断的添加顶点。

如上图所示的效果,旋转一周的话,就能定义出“甜甜圈”形状的顶点了,这次用程序来模拟一下。


圆环体的顶点数据的生成

新建一个函数来生成圆环体的模型数据。
可以把它想象成将一个管子形状的模型做成一个轮子。指定了原点到管子的中心的距离以及管子自身的粗细(半径)的话,就可以生成圆环体了。而且,形成管子的顶点越多,绘制圆环体的曲线就会越圆滑。这次新建的函数,接受这些参数,然后返回生成的模型的顶点属性数组。
>生成圆环体模型数据的函数
function torus(row, column, irad, orad){
    var pos = new Array(), col = new Array(), idx = new Array();
    for(var i = 0; i <= row; i++){
        var r = Math.PI * 2 / row * i;
        var rr = Math.cos(r);
        var ry = Math.sin(r);
        for(var ii = 0; ii <= column; ii++){
            var tr = Math.PI * 2 / column * ii;
            var tx = (rr * irad + orad) * Math.cos(tr);
            var ty = ry * irad;
            var tz = (rr * irad + orad) * Math.sin(tr);
            pos.push(tx, ty, tz);
            var tc = hsva(360 / column * ii, 1, 1, 1);
            col.push(tc[0], tc[1], tc[2], tc[3]);
        }
    }
    for(i = 0; i < row; i++){
        for(ii = 0; ii < column; ii++){
            r = (column + 1) * i + ii;
            idx.push(r, r + column + 1, r + 1);
            idx.push(r + column + 1, r + column + 2, r + 1);
        }
    }
    return [pos, col, idx];
}
这个torus函数,一共接收四个参数。
第一个参数,是将管子分割成多少份,这个数值越大,生成的圆环体就越圆滑,数值太小的话,就会出现棱角。
第二个参数,是构成这个管子的圆是多少个顶点,数值越大,管子就越接近一个圆的形状,太小的话,这个圆就有棱角了。
第三个参数,是生成这个管子的半径。
第四个参数,是原点到管子中心的距离。


HSV色彩模式到RGB色彩模式的转换

生成圆环体的模型数据的函数中,还使用了另一个函数,就是将返回值赋给变量tc的函数hsva。
这次的demo,圆环体中使用HSV色彩模式。HSV是一种和RGB不同的表示颜色的方法,使用颜色的[ 色调 = Hue ]・[ 饱和度 = Saturation ]・[ 亮度 = Value ]来表示颜色。
使用RGB来指定颜色是很麻烦的,使用HSV的话就非常简单了,这次的demo,内置了一个从HSV到RGB之间颜色转换的函数,这样就可以给圆环体添加一个漂亮的彩虹颜色了。
>HSV转换到RGB的函数
function hsva(h, s, v, a){
    if(s > 1 || v > 1 || a > 1){return;}
    var th = h % 360;
    var i = Math.floor(th / 60);
    var f = th / 60 - i;
    var m = v * (1 - s);
    var n = v * (1 - s * f);
    var k = v * (1 - s * (1 - f));
    var color = new Array();
    if(!s > 0 && !s < 0){
        color.push(v, v, v, a); 
    } else {
        var r = new Array(v, n, m, m, k, v);
        var g = new Array(k, v, v, n, m, m);
        var b = new Array(m, m, k, v, v, n);
        color.push(r[i], g[i], b[i], a);
    }
    return color;
}
这个函数为了表示HSV的颜色,接收四个参数,第四个参数是透明度,这个函数中就是将颜色转换为RGBA然后返回结果。
HSV中,色调的范围是0 ~ 360,函数中为了防止出错添加了超过这个数值的处理。但是,需要注意的是,饱和度和亮度如果传入的值不正确,就不能返回正确的结果了,饱和度,亮度和透明度的取值范围是 0 ~ 1。
生成圆环体的函数,以及HSV转换到RGB的函数,函数内部的代码就不做详细的说明了,想了解的朋友,可以自己看一下。


总结

这次,并没有对WebGL相关的新技术进行说明,这一点运行一下demo就能知道了,果然,比起绘制简单的板状的多边形来说,像圆环体这样的立体模型绘制起来更有意思吧。
demo中使用的着色器和HTML跟以前并没有变化,javascript相关部分,也只是添加了一个生成圆环体的函数和一个HSV转换的函数,没有什么特别的变更点。
demo中绘制的圆环体,会沿着Y轴和Z轴进行旋转,使用了七彩颜色,看起来应该挺赏心悦目的吧。demo的链接在文章的最下面。


下次,会介绍一下简单的光源。

绘制立体模型(圆环体)

http://wgld.org/s/sample_008/


转载请注明:转自lufy_legend的博客http://blog.csdn.net/lufy_legend

55 WebGL加载三维模型

案例查看地址:点击这里迄今为止,示例程序都是在代码中显式定位三维模型的顶点坐标,并保存在Float32Array类型的数组中。然而,大部分三维程序都是从模型文件中读取三维模型的顶点坐标和颜色数据,而模...
  • qq_30100043
  • qq_30100043
  • 2017-06-30 10:44:42
  • 2723

WebGL之旅(十六) 层级模型

层次模型是指用一颗“有向树”的数据结构来表示表示各类实体以及实体间的联系,树中每一个节点代表一个记录类型,树状结构表示实体型之间的联系。——百度百科 在变换时,父节点的变换会待着子节点一起,而子节点的...
  • xufeng0991
  • xufeng0991
  • 2017-07-30 22:51:00
  • 381

数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇

《数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇》一文让读者了解了 HT 的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT 构建例如...
  • u013161495
  • u013161495
  • 2016-08-26 03:01:15
  • 6473

[WebGL入门]十六,绘制多个模型

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

使用WebGL绘制地球

使用WebGL来绘制地球,使绘制出来的地球坐标满足我们正常思维,以便进行下一步分析...
  • u011294404
  • u011294404
  • 2016-11-26 13:38:30
  • 2295

WebGl 球面计算公式

概要 以下所涉及到的数学模型包括: WebGl 的球体模型构建WebGl 场景交互时视角变换的方法WebGl 中 3D 空间的点在二维平面上的投影360 度播放器的视频流的处理 以上是全景播放器...
  • ab7936573
  • ab7936573
  • 2017-06-13 11:45:56
  • 786

three.js第三篇【简单画线】

今天简单给大家演示一下,如何绘制线条: 代码示意:                                                  // 老三样...
  • doupi520
  • doupi520
  • 2016-12-29 11:22:14
  • 4533

WebGL 绘制Line的bug(一)

熟悉WebGL的同学都知道,WebGL绘制模式有点、线、面三种;通过点的绘制可以实现粒子系统等,通过线可以绘制一些连线关系;面就强大了,通过面,我们可以绘制我们想绘制的所有的三维对象。 一切看起来都...
  • twaver
  • twaver
  • 2017-07-21 14:00:11
  • 363

WebGl学习入门心得

原文章发布在自己博客:http://aircloud.10000h.top/45写在前面想写这篇文章想好久了,这半年在学校的课程中,自己最认真学习的就是图形学这门课程的内容,当然主要是因为自己想要研究...
  • ul646691993
  • ul646691993
  • 2017-01-25 23:50:44
  • 2909

WebGL自学课程(16):WebGlobe实现的基本算法原理

WebGlobe(http://blog.csdn.net/sunqunsunqun/article/details/9119735)能够加载多种切片地图服务,并将其以正确的形式显示出来,本博文将阐述...
  • sunqunsunqun
  • sunqunsunqun
  • 2013-06-23 15:41:44
  • 6435
收藏助手
不良信息举报
您举报文章:[WebGL入门]二十,绘制立体模型(圆环体)
举报原因:
原因补充:

(最多只允许输入30个字)