查看: 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 的主题更新
最具人气热帖推荐 [查看全部] 作者 回/看 最后发表
[基金申请] 本人简历没写硕士会被刷掉不? +11 liang8541 2019-06-23 15/750 2019-06-25 00:27 by xyq404
[教师之家] 父母不到60岁有多个子女的话,一般是跟着大城市的子女,还是跟着老家的子女 +15 淡如水2012 2019-06-18 15/750 2019-06-24 19:45 by 大白狼
[硕博家园] 山东高考分数线 +7 WendyO2 2019-06-24 7/350 2019-06-24 19:15 by yvpft00
[考研] 求研友 +8 懈怠乌拉拉 2019-06-23 8/400 2019-06-24 19:06 by hll610
[找工作] 工作和读博作何选择 +23 biedegouzi 2019-06-23 50/2500 2019-06-24 18:24 by 鸟鸟?
[教师之家] 硕士,陕西某高职任教,一年到手10w左右,怎么样?想读博 +17 贝赫拉米 2019-06-22 23/1150 2019-06-24 13:40 by caoli207
[考研] 天天学习,坐不住了 +12 淑萍521521 2019-06-20 24/1200 2019-06-23 22:53 by 淑萍521521
[论文投稿] 请问figure或graph的frame是指的啥呀?求教 50+6 dirkyoung 2019-06-20 10/500 2019-06-23 08:43 by qt211
[文学芳草园] 如果真的有树洞就好了 +4 hy19950429 2019-06-21 4/200 2019-06-22 23:27 by Pardon168
[硕博家园] 请问一下中国人民大学化学系的博士毕业一般是几年能达到毕业要求? +8 笨蛋谢 2019-06-19 13/650 2019-06-22 15:58 by yulan19992002
[基金申请] 打听到青长的消息了 +27 aloesnow 2019-06-19 35/1750 2019-06-22 09:34 by lqingh506
[硕博家园] 博士的锤子 (金币+2) +9 玄度 2019-06-19 14/700 2019-06-21 18:09 by 七里ˇ东风
[精细化工] 镀锌铝的钢板表面长灰黑色锈斑,用什么来去除清洗掉???? +3 lp9251 2019-06-20 6/300 2019-06-21 14:47 by jackieli李康
[论文投稿] Journal of biomedical nanotechnology是不是被踢出SCI了? +5 酷酷墨镜 2019-06-20 8/400 2019-06-21 13:36 by aioria111
[论文投稿] 今年2019年SCI影响因子IF更新时间 +7 残阳滴血 2019-06-18 18/900 2019-06-20 23:37 by Dr. Hsian
[论文投稿] 请问审稿意见说resubmit,但是主编最后结论是reject还有必要resubmit吗? 5+3 qfliu 2019-06-20 6/300 2019-06-20 16:16 by editsprings
[基金申请] 有人说收到青长答辩通知了 +10 aloesnow 2019-06-19 17/850 2019-06-20 10:34 by jiangy0122
[基金申请] 基金下来了吗? +4 江流儿 2019-06-19 4/200 2019-06-19 17:32 by cww8181
[论文投稿] 关于转投scientific reports +3 大宝0885 2019-06-18 6/300 2019-06-19 16:53 by kongwenping
[版块工场] 【早起签到贴】2019年6月18日(q q 48626260 进群申请:小木虫——您个人ID) +48 8475 2019-06-18 48/2400 2019-06-18 13:18 by iamluo
信息提示
请填处理意见