关于webgl的大型应用

hyuan 发布于2019-08-21 11:47 / 315人阅读

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

概述

最近公司在做一个大型的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 配置

私有云专线服务关于物联网的应用 WebGL webgl.-canva h5 webrtc webgl

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

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

关于webgl的大型应用

摘要：概述最近公司在做一个大型的应用，总结如下建模软件建模自定义一套语义化的模型格式，并编写模型格式转化插件把建模软件的模型格式转成自定义格式。概述最近公司在做一个大型的webgl应用，总结如下: 1.建模软件建模(3d Max revit) 2.自定义一套语义化的模型格式，并编写模型格式转化插件,把建模软件的模型格式转成自定义格式。为什么要自定义语义化的模型格式呢？因为，现在浏览...

CHENGKANG 2019-08-05 11:35 评论0 收藏0
阿里云前端周刊 - 第 16 期

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

waruqi 2019-08-20 18:03 评论0 收藏0
在SAP UI中使用纯JavaScript显示产品主数据的3D模型视图

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

FingerLiu 2019-08-23 12:29 评论0 收藏0
WebGL 着色器偏导数dFdx和dFdy介绍

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

Hanks10100 2019-08-23 18:30 评论0 收藏0
打造最美HTML5 3D机房（MONO哥强势归来，第四季惊艳发布）

摘要：鹰眼上次的小机房功能已经基本完成了，客户对演示效果也非常满意。鹰眼看上去是这样子的上面的界面是同事给客户做的虚拟机开通配置的编辑界面，右下角的这块试图就是鹰眼缩略图。前言初次见面的朋友们大家好，简单自我介绍一下：我是Mono哥，性别男，爱好。。。编程，自从一年多前入了HTML5和WebGL的坑，就再也没有爬出来过，目前正在钻研3D机房以及相关的3D应用。这篇文章是打造最美3D机房系...

awesome23 2019-08-05 17:49 评论0 收藏0