`

支持无级缩放的360展示技术实现之一

 
阅读更多

两种技术路线

本节介绍展品360展示的两种技术路线,对比其特点。

一、定义即用途

 本文所讲的360展示是指用于产品或商品展示的Web浏览方式,它不是以下技术:

 360实景:例如谷歌街景,这种技术是观察点在固定点旋转,将拍摄的全景图实现Web互动。
360展示则是观察点固定不动,观察对象绕自身轴线旋转的过程。

360展示可用于虚拟博物馆的网上藏品展示,也可用于电商对自己产品的直观介绍。

无级缩放的360度展示,可使用户直观了解展品细节。所谓百闻不如一见、百文不如一图嘛!

 

要实现展品的360度无级缩放的Web展示,有两种技术实现思路:

其一:三维建模+实时渲染

其二:360度旋转拍摄+交互回放

 

二、三维建模+实施渲染

第一种思路在建模和展示都需要比较高的代价。

这种方式先用三维建模工具构建三维模型和场景,然后将其转为适合前端浏览器浏览的格式。在浏览器端,利用内置的webGL或通过专用插件(例如Unity)加载三维模型,响应用户的交互指令(切换视角、观察点),实时渲染出画面。

三维建模可以是三维扫描自动建模或者人工建模。它们最终的成果都是为了得到目标实体的带表面纹理贴图的三维模型数据。

人工建模指通过三维建模软件(3D Modeling Software),在参照实物照片、相关数据的基础上对实物的空间结构进行三维化复原,

并通过纹理贴图(Texture)使三维化数据具有贴近真实物体的质感与效果。

人工建模存在两个问题:

其一:当增加新的藏品,只有专业人士才能完成新藏品的建模工作。

其二:精细度低的模型可以获得流畅的交互体验,但难以获得藏品的真实观感;精细度高的模型可以逼近藏品真实观感,但需要用户终端具备较高的硬件运算能力。无法适应更广范围的互联网用户。

 

三维扫描则是通过设备完成多角度光学和距离采集,软件运算出目标对象表面的空间位置及纹理信息。

目前民用级别的扫描设备精度仍然差强人意,例如利用家用游戏机体感采集设备Kinect的X探测和光学感知,可以获得物体的三维模型。

访问地址:http://babylonplayground.azurewebsites.net/monkey.html

 

 

对三维建模方式的特点总结如下:

建模工具

3dMax、 Maya

浏览工具

Unity3D插件、WebGL

优点

效果连续、可自由漫游场景或以任意视角观察物体

缺点

对用户端显卡性能要求较高

要获得精致的细节、建模成本较高

 

三、实现思路之拍摄+回放

360Rotation 在技术实现上有点类似于360实景,所不同的是360实景是观察角度在转动,而360旋转则是:观察点和角度不动,让被观察对象旋转。

如果说360实景是用来表现观察点身处场景内的景象,360旋转则是观察点位于观察对象之外,让对象自身转动,呈现不同角度的外观。

两种技术都可以应用于博物馆展览,360实景适合展厅漫游,而360旋转则适合表现单件藏品。

 

通过转台+近距离高清拍摄,360旋转可以实现比现场更清晰的web展示,还有一点是现实展览做不到的——看背面。

这种方法不需要进行三维空间实体建模,只需要根据展示需求,拍摄一组精细影像,将这组影像进行批量预处理,之后辅以前后端的交互实现即可。

它的优势是加工成本低,浏览真实度最高,支持从各个角度以无级缩放的观察藏品,既可以展示藏品全貌,也可以展示藏品细节。

 

 

 

 

 

  • 大小: 82.1 KB
  • 大小: 178.2 KB
分享到:
评论

相关推荐

    360安全浏览器-网页无级缩放和网页自动填表.docx

    360安全浏览器则突破了这一限制,实现了网页的无级缩放,允许用户更加灵活地调整网页的视图大小。 实现网页无级缩放的方法多样。首先,用户在浏览网页时,可以按住Ctrl键,同时滚动鼠标滚轮,这样就能便捷地放大或...

    VB文本框文本字体的无级缩放源代码.rar

    "VB文本框文本字体的无级缩放源代码.rar"提供的压缩包就是这样一个示例,它演示了如何动态改变文本框内文本的字体大小,并提供了放大和缩小字体的按钮功能。 这个VB应用程序的核心在于响应按钮的点击事件,通过修改...

    图像缩放算法研究及其FPGA实现.pdf

    图像缩放是图像处理的核心技术之一,用于调整图像的大小,适应不同的显示需求。随着多媒体技术和集成电路的进步,硬件实现图像的无级缩放已经成为研究的重点。无级缩放指的是能够平滑地改变图像尺寸,而不会产生明显...

    商品展示 360度全景图-HTML5 Canvas 实现

    在IT领域,商品展示是电子商务网站中至关重要的一个环节,而360度全景图的引入则极大地提升了用户的在线购物体验。本项目基于HTML5的Canvas技术,实现了商品的360度全方位展示,适用于Chrome、Firefox以及IE9及以上...

    VB实现文本框文本字体的无级缩放

    内容索引:VB源码,字符处理,文本缩放,文本框 VB实现文本框文本字体的无级缩放,单击一次“字放大”则字体大小增加2磅,单击一次“字缩斜则字体大小缩小2磅,也可复原文本,可了解一些VB理论基础,教师可借此来引导...

    76.(leaflet篇)leaflet地图无级别缩放(移动端).zip

    本文将深入探讨Leaflet地图在移动端实现无级别缩放的技术细节及其优势。 首先,Leaflet地图的核心特性之一就是其优秀的性能和对各种屏幕尺寸的支持,这使得它成为移动应用的理想选择。在移动设备上,用户可能需要...

    photoView和viewPager的完美结合实现相册功能,支持收缩缩放,滑动到下一页上一页恢复默认大小

    photoView和viewPager的完美结合实现相册功能,支持收缩缩放,滑动到下一页上一页恢复默认大小

    基于自适应插值算法的视频图像缩放技术及其FPGA实现.pdf

    总体而言,基于自适应插值算法的视频图像缩放技术及其在FPGA上的实现,展示了如何结合先进的图像处理算法和高性能硬件平台,来达到实时图像处理的高效性和精确性。这对于实时视频监控、高清视频播放、远程医疗影像...

    易语言实现图片快速缩放和无损缩放源码

    "易语言实现图片快速缩放和无损缩放源码"是一个专为开发者提供的资源,旨在帮助他们利用易语言进行高效的图像缩放操作。易语言是一种中文编程语言,其目标是降低编程的难度,让更多的人能够参与到软件开发中来。 ...

    MATLAB图像缩放,matlab实现图像缩放,matlab

    在MATLAB中,图像缩放是一项基本的图像处理操作,用于改变图像的尺寸。它可以是等比例缩放,保持原始图像的宽高比,也可以是非等比例缩放,可能会改变图像的比例。本篇将深入探讨如何使用MATLAB实现这两种类型的图像...

    99%CSS3+1%JS实现缩放图片展示特效.rar

    在"99%CSS3+1%JS实现缩放图片展示特效"的项目中,开发者很可能是利用了上述技术的组合,创造出一种平滑且引人注目的图片展示方式。通过阅读同名博客,你可以更深入地了解每个步骤和具体实现细节,从而学习并应用到...

    Qt 图片缩放,支持滚轮和按键缩放

    通过以上技术,我们可以构建出一个功能完备的图片查看器,不仅支持滚轮和按键的缩放,还能方便地切换不同图片。在实际开发中,可能还需要考虑性能优化,例如,对于大图的高效显示和内存管理,以及用户界面的友好设计...

    Qt实现窗体缩放

    在本文中,我们将深入探讨如何使用Qt框架来实现窗体的动态缩放功能。Qt是一个强大的C++库,用于创建跨平台的图形用户界面(GUI)应用。它提供了丰富的API和工具,使得开发者能够轻松地设计和实现各种复杂的UI功能,...

    Qt 实现无边框窗口,支持缩放窗口大小

    在Qt框架中,创建一个无边框窗口并支持自定义缩放窗口大小是常见的需求,尤其是在设计具有现代感和简洁界面的应用程序时。Qt库提供了丰富的API和工具,使得开发者可以轻松实现这样的功能。以下是对这个主题的详细...

    qt实现图片缩放

    在Qt框架中,图片缩放是一项常见的图像处理任务,它涉及到图形用户界面(GUI)的开发,特别是当我们要展示或操作图像时。Qt提供了一系列的类和方法来帮助开发者实现这个功能。以下将详细介绍如何使用Qt来实现图片的...

    图像实时缩放的FPGA实现,二次线性插值的Verilog实现。

    在本文中,我们将深入探讨如何使用FPGA(Field-Programmable Gate Array)实现图像实时缩放,并专注于其中的关键技术——二次线性插值。这一技术在数字图像处理领域广泛应用,尤其是在需要高质量图像缩放的场合。...

    jQuery支持局部缩放图片放大镜插件.zip

    本文将详细介绍一个基于jQuery的局部缩放图片放大镜插件,它具有两种缩放模式——图片内部缩放和图片外部缩放,并且支持通过鼠标滚轮进行局部缩放。 首先,我们来看这个插件的核心功能。它允许用户在鼠标悬停在图片...

    360度展示代码,360度看车代码,360度看房代码,360度全景代码

    标签“360度全景”是指一种能够全方位展示场景的技术,通过拼接多张照片或视频,创造出一种可以自由旋转和缩放的视觉效果。“360度看车”和“360度看房”是这项技术的具体应用,让用户能够在购买或租赁之前,从各个...

    js实现鼠标滚轮控制图片缩放效果的方法

    在如今的网络应用中,经常会遇到需要实现用户通过鼠标滚轮控制页面元素缩放的场景,例如图片查看器、地图应用等。本文将详细介绍如何使用JavaScript来实现通过鼠标滚轮控制图片缩放效果的方法,其中将涉及...

    android点击查看大图,ViewPager实现左右滑动切换、缩放图片

    在Android开发中,有时我们需要为用户...以上就是使用`ViewPager`和手势操作实现Android查看大图并支持图片缩放的关键技术点。通过理解这些原理和实践,开发者可以轻松地在自己的应用中集成这一功能,提升用户体验。

Global site tag (gtag.js) - Google Analytics