位置: IT常识 - 正文
推荐整理分享浅识WebGL和Three.js(webgl1.0),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:webgl1.0,webgl1和2的区别,webgl和threejs区别,webgl和threejs区别,webgl和web,webgl和three.js,webgl和webgpu,webgl和threejs区别,内容如对您有帮助,希望把文章链接给更多的朋友!
想必各位看官大大都了解过,进行3D图形渲染,主要依赖显卡(GPU)为我们提供强大的运算支持。GPU也像不同CPU架构具备不同的指令集一样,不同的显卡厂商也为不同的GPU型号提供了不同的底层指令逻辑,所支持的能力也不尽相同。为了简化方便图形应用开发和硬件适配的工作量,诞生了一些可以让不同应用方便调用的图形库,用以抹平底层硬件实现的差异,例如OpenGL、 Direct3D、Vulkan......
基本概念WebGL(Web Graphics Library,Web图形库), 是一个JavaScript API,可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形,而无需使用插件 。 WebGL通过引入一个与OpenGL ES 2.0非常一致的API来做到这一点,该API可以在HTML5 元素中使用。 这种一致性使API可以利用用户设备提供的硬件图形加速。通过这些接口,开发者可以直接跟GPU进行通信。
目前支持 WebGL 的浏览器有:Firefox 4+, Google Chrome 9+, Opera 12+, Safari5.1+, Internet Explorer 11+和Microsoft Edge build 10240+;然而, WebGL一些特性也需要用户的硬件设备支持。
WebGL 2 API引入了对大部分的OpenGL ES 3.0功能集的支持; 它是通过WebGL2RenderingContext界面提供的。
WebGL 程序分为 2 部分:
使用 Javascript 编写的运行在CPU的程序使用 GLSL 编写的运行在GPU的着色器程序着色器程序接收CPU传过来的数据,并进行一定处理,最终渲染成丰富多彩的应用样式。
3D坐标系WebGL 3D坐标系渲染流程WebGL 能绘制的基本图元只有 3 种,分别是点、线段、三角形,对应了物理世界中的点线面。所有复杂的图形或者立方体,都是先用点组成基本结构,然后用三角形将这些点构成的平面填充起来,最后由多个平面组成几何体。
但现实情况是,如果想生成满足各种应用场景的复杂形状,几何结构会非常复杂,代码写起来也会非常复杂。这时候就会有看官会问了:那我写个🐱 啊?别着急哈,咱不是前端开发者嘛,所以肯定会有对前端友好的开发方式嘛~
Three.jsThree.js是基于原生WebGL封装运行的三维引擎,在所有WebGL引擎中,Three.js是国内文资料最多、使用最广泛的三维引擎。
github链接:github.com/mrdoob/thre…
Three.js官网:threejs.org/
Three.js文档:threejs.org/docs/index.…
Three.js示例:threejs.org/examples/#w…
Three.js应用既然Threejs是一款WebGL三维引擎,那么它可以用来做什么想必各位看官大大一定很关心。所以接下来内容会展示一些基于Three.js引擎或Three.js类似引擎开发的Web3D应用,以便大家了解~
物联网3D可视化物联网粮仓3D可视化案例:www.yanhuangxueyuan.com/3D/liangcan…
产品720在线预览玉镯产品在线预览案例:www.yanhuangxueyuan.com/3D/liangcan…
沙发在线预览沙发在线预览:app.xuanke3d.com/apps/trayto…
服装在线预览服装在线预览:suit.xuantech.cn/
洗衣机在线交互预览
洗衣机在线交互预览:cdn.weshape3d.com/hir001/1021…
数据可视化解析GeoJSON数据中国GDP数据可视化:www.yanhuangxueyuan.com/3D/geojsonC…
H5/微信小游戏非常火的微信小游戏跳一跳就是使用Three.js引擎开发的。 开发3D类的H5小游戏或者微信小游戏,Three.js引擎是非常好的选择。
通过Threejs开发的小游戏,可以直接部署在微信小程序或者web端,无需下载,方便传播,目前的生态非常和小游戏开发。
科教领域在科教领域通过3D方式展示特定的知识相比较图像更为直观。
科研平台-蛋白质结构可视化案例:www.rcsb.org/3d-view/2JE…
化学相关——分子结构可视化:www.yanhuangxueyuan.com/3D/fenzi/in…
地理天文相关——太阳系3D预览:www.yanhuangxueyuan.com/3D/solarSys…
机械领域机械模型在线预览demo:www.yanhuangxueyuan.com/3D/jixiezhu…
Onshape是一款机械领域的三维建模软件,如果熟悉Solidworks、UG等CAD软件,那么你可以把Onshape理解为云Solidworks。
WebVR对于现在比较火的VR、AR概念,WebGL技术的出现,也是一个好消息,如果你想预览一些VR内容,完全可以不下载一个VR相关的APP,通过threejs引擎实现VR内容发布,然后用户直接通过微信等社交方式推广,直接打开VR内容链接就可以观看。
VR与Web3D技术结合自然就衍生出来一个新的概念WebVR,也就是基于Web实现的VR内容。
家装室内设计相关室内设计作品展示案例:www.yanhuangxueyuan.com/3D/houseDes…
相关库下面表格列举了一些Three.js相关的开源库。
库功能PhysijsPhysijs是一款物理引擎,可以协助基于原生WebGL或使用three.js创建模拟物理现象,比如重力下落、物体碰撞等物理现stats.jsJavaScript性能监控器,同样也可以测试webgl的渲染性能dat.gui轻量级的icon形用户界面框架,可以用来控制Javascript的变量,比如WebGL中一个物体的尺寸、颜色tween.js借助tween.js快速创建补间动画,可以非常方便的控制机械、游戏角色运动ThreeBSP可以作为three.js的插件,完成几何模型的布尔,各类三维建模软件基本都有布尔的概念react-three-fiberThreejs的React 渲染器。gltfjsx一个小型命令行工具,可将 GLTF 资产转换为上一篇:滑模控制理论(SMC)(滑模控制理论与应用研究pdf)
友情链接: 武汉网站建设