webgl支持的3d格式(webgl 3d模型)

如何将3d模型数据转换为webgl能支持的json格式

你好，Three 本身就带啊，使用很简单。

three.js有插件可以将3d模型转为three.js能支持的json格式

您也可以向我们团队发出请求，会有更专业的人来为您解答。

如果我的回答没能帮助您，请继续追问。

Unity5 WebGL试用手记，网页3D的时代何时来临

Unity5正式版发布已经一个多月，相信有很多人特别关注它的WebGL导出功能。其实WebGL并不是一个新东西，早在2012年，各大浏览器已经陆

续开始支持WebGL了，一些基于WebGL的3D引擎如Three.js也相继出现，不过无论是完善程度还是使用门槛，都无法与传统引擎相比，所以多数

团队对WebGL还是保持着理性的观望态度。

我在2004年的时候就曾把自己的3D引擎封装到IE的ActiveX中。可惜用户对浏览器插件是非

常反感的，这严重地阻碍着网页3D的发展。虽然在这期间，一些3D页游通过浏览器插件取得了不错的成绩，但我一直认为那跟端游没有什么区别，想玩游戏的人

是不会介意下载客户端的，而网页3D的用途也绝不仅仅是游戏。

直到最近，各大浏览器厂商纷纷宣布，未来不再支持浏览器插件的安装，Unity方面也声称WebGL将取代WebPlayer和Flash成为发布到网页的唯一途径，这是否预示着网页3D的时代终于来临还言之尚早，但至少在技术上，曾经难以逾越的鸿沟已悄然消失。

去年，我的团队接了一个项目，做一个类似91家居的模拟装修软件。当时就是想做有端的，用的Unity4.x。后来看到居然在线的DIY系统用WebGL实现的还不错，就想把产品升级到Unity5并尝试一下WebGL导出功能，毕竟这样的软件还是做到网页里更适合。

目前Unity5的WebGL平台还只是一个体验版本（Preview），功能尚未完全且存在一些问题，在这里分享一些我们在项目的移植过程中积累到的经验，供大家参考借鉴。

一：js效率

这个是我之前最担心的。我们的产品得益于PhysX的超强效率，实现了动态场景的快速烘焙（间接光预运算），编码成js之后，PhysX的效率究竟如何？实验结果如下：

两个场景在不同平台下的烘焙时间。单位（秒）

两个场景的烘焙结果

Firefox的运行效率还算令人满意。我们知道Unity使用的是Mozilla提出的asm.js来提升js的运行效率，而目前其他浏览器还未针对asm.js进行优化，不过这是迟早的事。而且除了烘焙功能之外，其他功能在不同的浏览器上看不到太大的性能差距。

二：js程序包尺寸

这个我也比较担心。如果内容无法在页面载入之后立刻呈现，用户会失掉耐心从而关闭页面。把所有优化选项设置好之后，我们的产品导出的程序包尺寸如下（压缩后）：

主程序（项目名.jsgz）：5.1M

内存初始化包（项目名.html.memgz）：2.7M

内置资源（项目名.datagz）：1M

不

得不说还是很大。内置资源中字体占了很大的比重，将来可以把全部界面做到网页里，这样就可以使用浏览器字体，这个还好说，主程序包是把Unity的整个

Runtime加上我们自己的代码全部编译到一起所以才那么大。关于这个我给Unity团队写了好几封信，问他们有没有可能不要把一些从未用到的模块编进

去，他们表示会考虑但由于耦合度等原因难度应该不小。内存初始化包我不是很了解，可能是asm.js必备的东西，希望Unity推出WebGL正式版的时

候这个问题能得到改善吧。

输出的项目包含Release和Compressed两个文件夹，只需保留Compressed就可以了，生成的.htaccess文件会将地址自动转向到这个压缩版本的程序包，并为HTTP请求加上一个压缩Header，浏览器下载完成后会自动解压。

三：移动平台

这

是很多人关心的问题。作为HTML5的一部分，WebGL理应可以运行在所有平台不是吗？不过事实就是目前WebGL在移动平台被支持的并不好，想进微信

就更是难上加难。对此我们的方案是为用户创建的每一个样板间保存一系列360度全景图，分享到微信之后可以漫游，但不能编辑。想想这样的方案似乎也很合

理，手机那么小的屏幕实在不适合做复杂的三维编辑工作。等移动平台完全支持WebGL之后，会有更适合手机的3D应用出来。

四：图形接口适配

Unity5

终于支持了DeferredShading，之前的只能叫DeferredLighting。不过在目前的WebGL

1.0上还是不能用，还是只能用Deferred Lighting。我们知道WebGL 1.0对应的是OpenGL ES

2.0，而WebGL2.0对应的是OpenGL ES

3.0，所以项目适配到WebGL平台，与适配到移动平台基本上是一样的。WebGL2.0的标准刚刚制定完成，支持的浏览器不知何时能推出，所以目前的

适配工作，是以WebGL1.0为目标平台的。除了不能用MRT之外，我们需要把3D

Texture以2D切片拼接的方式实现，还有DepthTexture要手动Encode到RGBA格式，这些工作太熟悉了，好像10年前就在做，不禁

感叹实时3D这些年发展得真慢，除了游戏之外好像真的没有什么太好的应用。

五：材质与全局光照

Unity5新的材质系统，可调的参数并不

多，所以还是用我们原来自己的，也是统一材质。新加的ReflectionProbe感觉很初级，就是世界坐标的一个AABB，都不能旋转，其实

BPCEM（Box Projected

CubemapEnvironmentMapping）是可以旋转的，不过还是不能处理复杂户型，矩形边界以外的地方反射错得都很离谱。我们的反射方案是

在BPCEM的基础上，加了一点点光线跟踪，虽然还存在一些问题，不过效果我已经很满意了，最重要的是，它的帧数比SSR（ScreenSpace

Reflection）高得多。

改进后的反射方案

由

于样板间都是用户自行创建，我们没办法使用Unity自带的烘焙系统（Enlighten），而且传统的烘焙方法生成的Lightmap容量太大，根本不

适合网络应用。我们自己的烘焙系统，是将3D空间划分成128x16x128的方格，然后用一个3DTexture保存每个方格的光照信息，再通过自定义

渲染路径将3D Lightmap加进去。

六：编辑器集成管理后台

管理后台要实现模型的管理和上传功能，于是索性将它做到

UnityEditor中。在这里，我们可以对模型进行减面（CruncherPlugin），材质调整，对模型对应的商品进行命名，分类，定价，最后导

出Assetbundle并上传。Unity强大的编辑器API使这一切变得非常容易。

模拟装修平台只是网页3D的一个应用举例，随着WebGL不断的规范和成熟，会有越来越多非游戏类的，有实用价值的应用涌现出来。最后放上我们的演示地址：

由于只是WebGL的实验，所以只放出一个场景漫游，没有编辑功能，操作是鼠标左右键拖动加上滚轮缩放。载入和烘焙很慢，请尽量不要用IE或移动端访问，如果有弹出错误，请忽略。

WebAR ｜ 关于WebGL标准

AIRX三次方??帮助年轻人获得适应未来社会的新技术能力

?专注 AR+VR+Unity+Unreal+CV+AI方向

WebGL是HTML5 canvas元素的扩展，现已广泛用于开发需要3D可视化的Web应用程序。它是一种3D图形API，基于OpenGL ES 2.0。为了简化开发，市面上有一些流行的基于WebGL的框架：

Three.js：Three.js是一个基于JavaScript的库，它以低复杂度在Web浏览器上创建3D内容，是轻量级的，可以在HTML5 canvas，SVG和WebGL的帮助下执行渲染。

Scene.js：Scene.js是基于WebGL的库，它使用JavaScript在Web浏览器上进行3D可视化。它与Three.js不同，因为它旨在快速呈现大量可单独拾取的对象。此功能使该库可用于工程和数据可视化应用程序。

谁开发了WebGL？一位名叫Vladimir Vukicevic的美裔塞尔维亚软件工程师完成了基础工作，并领导了WebGL的创建。在2007年，Vladimir开始为HTML文档的Canvas元素开发OpenGL原型。2011年3月，Kronos Group创建了WebGL。

主流浏览器（例如Google Chrome，Mozilla Firefox，Safari和Opera）都支持它，有些浏览器（例如Internet Explorer 11）并不完全支持WebGL。此外，WebGL是一种低级API，因为它被设计为直接与图形卡进行交互。因此，具有低图形卡内存的设备可能会带来严重的性能问题。

1、WebGL与OpenGL之间的主要区别

WebGL基于OpenGL ES，它缺少常规OpenGL具有的许多功能，例如仅支持顶点和片段着色器。OpenGL具有WebGL所不具备的功能，例如几何体着色器，曲面细分着色器和计算着色器。

WebGL主要用于浏览器。OpenGL确实需要本机驱动程序，并且主要用于安装软件。

WebGL用于Web应用程序，而OpenGL用于许多视频游戏。

WebGL更易于学习和开发应用程序。如果你熟悉WebGL，则可以轻松学习OpenGL。

在WebGL中，它可以使用2D纹理来伪造3D纹理。在OpenGL中，不需要这样做，因为它具有很多功能，例如几何体和着色器。

在WebGL中，从一开始就被迫学习使用着色器和缓冲区。在OpenGL中，并非如此。

WebGL具有较少的功能，因此学习曲线较少。OpenGL具有更大的学习曲线，因为它具有包括WebGL在内的许多功能。

WebGL基于OpenGL ES 2，而不是纯OpenGL。OpenGL ES是OpenGL的子集。OpenGL ES具有较少的功能，并且对用户来说非常简单。OpenGL具有很多功能并且难以使用。

2、桌面浏览器支持情况

Google Chrome浏览器 ：自2011年2月发布第9版以来，所有具有图形卡且驱动程序已更新的平台均已启用WebGL 1.0。在Windows上，默认情况下，Chrome使用ANGLE（几乎本机图形层引擎）渲染器来翻译OpenGL ES Direct X 9.0c或11.0，具有更好的驱动程序支持。在Linux和Mac OS X上，默认渲染器为OpenGL，但是也可以将OpenGL强制为Windows上的渲染器。自2013年9月以来，Chrome还拥有更新的Direct3D 11渲染器，但需要更新的图形卡。

Mozilla Firefox浏览器 ：从4.0版开始，所有具有图形卡且驱动程序已更新的平台均已启用WebGL 1.0。自2013年以来，Firefox还通过ANGLE在Windows平台上使用DirectX。

Safari：在OS X Mountain Lion，Mac OS X Lion和Mac OS X Snow Leopard上的Safari 5.1上安装的Safari 6.0和更高版本实现了对WebGL 1.0的支持，在Safari 8.0之前默认情况下已禁用。Safari 12版（在macOS Mojave中可用）具有对WebGL 2.0的支持，目前作为“实验”功能。

Opera ：WebGL 1.0已在Opera 11和Opera 12中实现，但在2014年默认情况下已禁用。Opera43+支持WebGL 2.0。

Internet Explorer — Internet Explorer部分支持WebGL 1.0。最初，它没有通过大多数正式的WebGL一致性测试，但后来Microsoft发布了一些更新。最新的0.94 WebGL引擎目前已通过Khronos测试的约97％。也可以使用第三方插件（例如IE WebGL）将WebGL支持手动添加到Internet Explorer的早期版本中。

Microsoft Edge：最初的稳定版本支持WebGL 0.95版（上下文名称：“ experimental-WebGL”），以及从GLSL到HLSL转译器的开源GLSL。版本10240+支持WebGL 1.0作为前缀。在将来的版本中，WebGL 2.0被计划为中等优先级。

3、手机浏览器支持情况

BlackBerry 10:从OS 10.00版开始，WebGL 1.0可用于BlackBerry设备。

BlackBerry PlayBook:WebGL 1.0可通过WebWorks和PlayBook OS 2.00中的浏览器获得

Android浏览器 :基本上不受支持，但是在固件升级后，索尼爱立信Xperia系列的Android智能手机具有WebGL功能。三星智能手机还启用了WebGL（已在Galaxy SII（4.1.2）和Galaxy Note 8.0（4.2）上进行了验证）。Google Chrome支持此功能，该功能已取代了许多手机中的Android浏览器（但不是新的标准Android浏览器）。

Internet Explorer : Windows Phone 8.x（11+）上提供了WebGL 1.0

移动版Firefox:从Firefox 4开始，WebGL 1.0就可用于Android和MeeGo设备。

Google Chrome浏览器:WebGL 1.0自Google Chrome 25起可用于Android设备，自30版本起默认启用。

Maemo :在诺基亚N900中，从PR1.2固件更新开始，可在库存的microB浏览器中使用WebGL 1.0。

MeeGo:“ Web”不支持WebGL 1.0。但是，可以通过Firefox使用它。

Microsoft Edge:Windows 10 Mobile上提供了Prefixed WebGL 1.0。

Opera Mobile :Opera Mobile 12支持WebGL 1.0（仅适用于Android）。

Sailfish操作系统:默认的Sailfish浏览器支持WebGL 1.0。

Tizen:支持WebGL 1.0。

iOS:WebGL 1.0在iOS 8中可用于移动Safari。

参考链接：

webgl和css3的3d有什么不同

webgl可以用js调用openGL的，比如cs、极品飞车之类的游戏你应该知道，很多游戏都是openGL的，真正类似3D软件那种3D，里面有X,Y,Z轴向，构成一个立体空间，然后你可以放入一个人物、汽车或其他3D模型，上贴图，打灯光，游戏引擎实时渲染出带有凹凸、置换、颜色、漫射、反射、大气雾效、深景等通道组成成的游戏画面，openGL与3D软件渲染大原理是一样的，只是渲染精度没3D软件做图或做电影那么高，渲染算法和导入的3D模型面数、贴图大小什么的在openGL下都有限制，要保证游戏在主流的家庭电脑硬件上不卡。

css只有X，Y两个轴向，只能构成一个平面，不能构成一个真正的立体空间，你看到的网上css做的3D立方体的例子原理类似：ps里面你画三个正方形平面色块，通过拉伸、透视等方法变形把三个正方形拼成一个立体正方形盒子的三个面，这个是视觉上的欺骗，只能拼凑出简单的立体形状，css并没有在一个3D空间内生成带三个轴向的物体，也没办法通过css导入真正的3D模型来个转一圈之类的，你想用纯css做个3D机器猫就不行了。

webgl和three.js中应用的文件有哪些，表示的是什么？

webgl是HTML5中提出的新技术，是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，关于它的教程可以看看hiwebgl。目前兼容性堪忧

three.js是以webgl为基础的库，封装了一些3D渲染需求中重要的工具方法与渲染循环。它的教程同样可以在hiwebgl里面找到。

three.js之于webgl，类似于windows版本的虚幻引擎之于D3D。当然，虚幻引擎的能力范围比three.js大得多。d3.js跟上面两者没有关系。