资讯专栏INFORMATION COLUMN

关于webgl的大型应用

hyuan / 486人阅读

摘要:概述最近公司在做一个大型的应用,总结如下建模软件建模自定义一套语义化的模型格式,并编写模型格式转化插件把建模软件的模型格式转成自定义格式。

概述

最近公司在做一个大型的webgl应用,总结如下:

1.建模软件建模(3d Max revit)

2.自定义一套 语义化的模型格式,并编写模型格式转化插件,把建模软件的模型格式转成自定义格式。

为什么要自定义语义化的模型格式呢?

因为,现在浏览器的性能很尴尬说好不好,说差不差。得优化啊!
比如:模型里带了描述数据,指这单个模型的 长宽高 自定义数据等。这些数据往往是比较庞大的,而且每一个小模型都有,不可能随着模型加载到 浏览器上去。那么就得把模型数据,与几何数据分离。模型数据放数据库,几何数据保留,并且做一定优化,比如只存 原几何体的基础信息,通过变换得到 类似的几何体
(很多场景下,有很多相同的 长方体,在模型格式中 可以 只存一个,其他的 copy出来)

3.浏览器性能有限,不能直接加载过大的模型文件,(太大了一直loading用户也受不了)就得 自己写 切割模型 的小工具,把大的模型,切成一个一个的小模型,按需加载,或者分布加载。

4.编写展现层对webgl的交互操作 封装,推荐库 Three.js babylon.js cannon.js xeogl.js
各有强处这里就不做说明了。

5.后端提供 api 点击某个模型,返回对应的模型数据。

综上所述 webgl 的应用就是

1.webgl 展现层 封装基础 交互 操作等.

2.webgl 服务层
1).提供用户上传模型
2).自动转换模型且模型数据与几何数据分离
3).自动把大模型切割成小模型
4). 提供api

todoList

1.完成 webgl server
2.完善 webgl 展现层 各种交互操作

暂时就想到这些,下面自己写的一个小的demo 慢慢完善。。。
https://github.com/shinseed/T...

使用

1.npm install || yarn install

2.npm run dev

3.超级玛丽 模式操作 w、a、s、d 空格 (只做了向下的碰撞检测)

SloceJson 使用

1.model 文件夹为原始模型文件

2.output 切割完后的模型文件

3.终端进入 该目录 node sliceJson.js

文档目录

1.src 源码

2.sliceJson 把大的模型文件切割成小模型

3.static 静态资源

4.config webpack 配置

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/87122.html

相关文章

  • 阿里云前端周刊 - 第 16 期

    摘要:或许,它还终将改变用户对移动的期待。通过一个场景实例了解前端处理大数据的无限可能随着前端的飞速发展,在浏览器端完成复杂的计算,支配并处理大量数据已经屡见不鲜。 推荐 1. 神经网络入门 http://www.ruanyifeng.com/blo... 眼下最热门的技术,绝对是人工智能,人工智能的底层模型是神经网络(neural network)。许多复杂的应用(比如模式识别、自动控制)...

    waruqi 评论0 收藏0
  • 在SAP UI中使用纯JavaScript显示产品主数据3D模型视图

    摘要:以为例,在产品主数据的页面工具栏上新增了一个按钮,点击之后,会显示一个弹出窗口,在浏览器里利用调用本地安装的应用,显示该产品主数据的视图。本文介绍的是另一种用纯编程来以方式显示产品主数据的解决方案。 在Jerry写这篇文章时,通过Google才知道,SAP其实是有自己的3D模型视图显示解决方案的。 showImg(https://segmentfault.com/img/remote/...

    FingerLiu 评论0 收藏0
  • WebGL 着色器偏导数dFdx和dFdy介绍

    摘要:偏导数函数可以用于片元着色器中的任何变量。偏导数和用于计算纹理的一些列的子图,每个子图都比前一个的尺寸缩小了倍。在纹理取样过程中使用偏导数来选择最佳的级数。 本文适合对webgl、计算机图形学、前端可视化感兴趣的读者。 偏导数函数(HLSL中的ddx和ddy,GLSL中的dFdx和dFdy)是片元着色器中的一个用于计算任何变量基于屏幕空间坐标的变化率的指令(函数)。在WebGL中,使用...

    Hanks10100 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<