24小时热门版块排行榜     新春论文润色,领200元京东卡

查看: 0  |  回复: 0

Tian_fu

新虫 (初入文坛)

[交流] 使用WebGL技术进行后处理结果显示

利用Javascript编写的WebGL第三方库,可以用来创建各种三维场景,包括摄像机,光影,材质等对象。

首先准备工作先创建一个canvas标签(图形的显示都在这个上面),并引用相应的库函数。

<script src="js/loaders/VTKLoader.js"></script>

要想利用WebGL渲染任何东西,都必需三个元素:1.场景2.相机3.渲染器。然后我们就可以用相机来渲染场景。其中相机分为两种:正交相机和透视相机,我们经常使用的是透视相机,因为更接近人眼的观察效果,近大远小。正交相机一般会在建模软件中使用,不会因为投影改变物体比例。在库中创建相机使用new PerspectiveCamera(fov, aspectratio, near, far);第一个参数指定视口大小,第二个是宽高比,一般是屏幕大小的宽高比,第三、四个参数代表近、远裁剪面,场景里的物体在近、远裁剪面之间才能被显示,否则,会被裁剪掉。

var scene = new Scene();
var camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10 );
camera.position.z = 0.2;
var renderer = new WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
scene.add( camera );

接下来我们就可以加载模型了,加载VTK类型的模型我们可以直接使用库提供的加载器VTKLoader()。该加载器的load方法的第一个参数为vtk模型的路径,第二个参数相当于回调函数,参数geometry,是模型的几何信息,比如顶点,包围盒等等,然后通过center的方法,计算模型的中心位置,并重新设置中心位置为坐标原点,使模型能够显示在浏览器的正中央。有些模型是自身不带法向量的,所以需要使用computeVertexNormals()计算法向量。然后将模型的geometry(几何信息)与material(材质)相关联,获得mesh(模型网格),再把mesh放到场景里。

var material = new MeshLambertMaterial( { color: 0xffffff, side: DoubleSide } );
var loader = new VTKLoader();
loader.load( "models/vtk/post.vtk", function ( geometry ) {
    geometry.center();
    geometry.computeVertexNormals();
    var mesh = new Mesh( geometry, material );
    scene.add( mesh );
} );


还剩下最后一步,也是最重要的一步,开启渲染循环,让渲染器开始渲染场景

function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}
animate();

然后vtk模型就加载出来了。

使用WebGL技术进行后处理结果显示



使用WebGL技术进行后处理结果显示-1



利用WebGL技术,同时也可以通过解析模型获取模型数据,将CAD的数据转换成库能够识别的数据,并对数据轻量化,优化渲染,能够加载大型的模型。比如解析UG模型数据,加载轻量化模型。同时,结合相关网站应用可以开发出各类3D网页应用。我们公司开发的在线水泵设计工具AIPump、在线风机设计工具AIFan就是利用了该项技术,有兴趣的朋友可以进行在线使用哦。手机、平板都可以访问。http://www.rhotheta.cn/goods.html

使用WebGL技术进行后处理结果显示-2



使用WebGL技术进行后处理结果显示-3

回复此楼

» 猜你喜欢

» 本主题相关商家推荐: (我也要在这里推广)

南京天洑软件有限公司成立于2011年5月20日,总部位于南京。 公司主要产品包括各行业通用软件CAESES、AIPOD;叶轮机械专用软件AIPump、AIFan、AIBlade、TCFD;船
已阅   回复此楼   关注TA 给TA发消息 送TA红花 TA的回帖
相关版块跳转 我要订阅楼主 Tian_fu 的主题更新
最具人气热帖推荐 [查看全部] 作者 回/看 最后发表
[土木建筑] 关于污水厂二沉池除臭问题 +3 小飞虫Sky 2019-02-14 4/200 2019-02-21 15:17 by dfiveking
[农林] 考研初试成绩316分,政治58分,英语49分,数学116分,生理生化94分,求调剂 +3 lisiyu33 2019-02-17 3/150 2019-02-21 15:10 by ardcf修身
[留学DIY] 申请UQ的phd,等offer中, 有一起的小伙伴吗? +4 讨厌流浪猫 2019-02-18 14/700 2019-02-21 10:31 by 讨厌流浪猫
[考研] 415求调剂 +9 lffcufe 2019-02-20 19/950 2019-02-20 22:07 by 2645693422
[基金申请] 青年基金项目参与者在哪里写?是在研究基础那里列各个参与者信息吗? 4+3 lin_2018 2019-02-18 16/800 2019-02-20 21:37 by apple2216
[论文投稿] 计算机专刊 +3 论文张默 2019-02-19 3/150 2019-02-20 17:50 by nanfang868
[职场人生] 做研发好还是做生产工程师有出路呢? +10 一场秋雪 2019-02-17 20/1000 2019-02-20 08:42 by hadesqq
[考研] 计算机专硕343求调剂 +4 西城林夕 2019-02-19 4/200 2019-02-20 06:42 by cln116
[考研] 286求调剂 +8 冰魄凝萱 2019-02-16 14/700 2019-02-19 19:49 by 943830880
[考研] 354浙大药学求调剂 +3 hope2019 2019-02-17 3/150 2019-02-19 12:27 by 嗯哼1
[高分子] 聚合物分子量的测定方法 30+4 Enernity。 2019-02-16 4/200 2019-02-18 16:39 by 龙猫测
[考研] 二战选择 +4 ?二噁英 2019-02-15 6/300 2019-02-18 16:14 by nmgmts
[考研] 本科华理一志愿华科软工初试350分求调剂 +5 Sakura233 2019-02-17 11/550 2019-02-18 14:58 by Sakura233
[硕博家园] 论文发表求经验 +5 Lee小咖 2019-02-17 10/500 2019-02-18 09:26 by Lee小咖
[考研] 412应用统计求调剂 +9 Anplrin 2019-02-17 12/600 2019-02-18 08:19 by 云云2017
[考研] 402求调剂 +3 方染1996 2019-02-17 6/300 2019-02-17 02:24 by 理查一世
[考研] 初试报考应用心理学求调试 +4 彩彩彩点 2019-02-16 4/200 2019-02-16 23:45 by 啊啊啊正啊
[考研] 368求调剂 +4 18772958184 2019-02-16 4/200 2019-02-16 17:48 by andyguan
[考研] 19首战求调剂 +3 佳佳西米露 2019-02-16 5/250 2019-02-16 10:12 by 佳佳西米露
[公派出国] 想要突破的心从未如此强烈 +3 123麦穗123 2019-02-15 3/150 2019-02-15 15:32 by Celinekele
信息提示
请填处理意见