基于 WebGL 的 360°街景

[ChiChou]

今天搞到了几张我们学校的全景图，闲得蛋疼改了个仿Google街景的东西~

Live DEMO（不保证以后没有变动，代码以GitHub为准）：

http://chichou.0ginr.com/app/ujs-campus-view

截图

https://raw.githubusercontent.com/ChiChou/UJSCampusView/remote/UJSCampusView.png

基于WEBGL，Safari需要手动开启，IE11和以上版本才支持哦。

源代码放在GitHub

https://github.com/ChiChou/UJSCampusView

想替换成自己的图片，或者二次开发的，请参考下面的内容~

因为跨域问题，直接用file:///协议打开index.htm是无法看到图片的。请用python -m SimpleHTTPServer运行一个静态站点。

图片要求

场景图片使用鱼眼镜头拍摄，若要达到最佳效果，需要满足宽高比为 2:1。目前使用的规格为3200x1600像素。如果不能满足 2:1 的比例，调整到天空和地面等极端视角时将出现黑边现象。

浏览器要求

目前最新版Chrome，Opera，Firefox 和 IE11 都支持 WEBGL。对于低版本的浏览器嘛，为了保证自己的体验，还是赶紧升级吧！

交互

支持键盘方向键（上下左右）导航
支持鼠标拖动视角
支持鼠标滚轮放大/缩小
支持按钮点击控制视角

编程接口

初始化

var streetView = street('viewport').view('img/scene.jpg');

切换贴图 streetView.toggle('img/new/path/to/texture.jpg')

镜头相关

拉近 streetView.zoomIn()
拉远 streetView.zoomOut()
左移 streetView.panLeft()
右移 streetView.panRight()

[l0wkey]

反人类的鼠标拖动方向...

[liaa]

网站乱码了...
反人类的鼠标拖动方向...

[ChiChou]

@l0wkey 不会吧，难道我的习惯比较奇葩= =

[200]

看见0ginr才发现是吃粥同学 = =

[ChiChou]

@liaa 脑抽了，忘了改成utf8

[ChiChou]

@200 = =

[ChiChou]

@liaa 把streetView.js里233和234行的第一个+改成-就可以反过来了~~可能是个人习惯不同~ = =

[loading]

有用，感谢

[jingwentian]

感谢分享

[lanstonpeng]

- animate这个run loop开销太大了，为什么不在mousemove的时候处理
- 后续可以尝试实现正方体模型，球形even better

[ChiChou]

@lanstonpeng 那不是loop，是WEGBL渲染帧时生成插值的一个辅助回调函数，本来就是这样设计的。js是单线程的，不可能用run loop好嘛～～

[lanstonpeng]

@ChiChou 为什么不是呢，rAF这个anmiate函数了，你在animate里面console一点东西出来看看吧

[ChiChou]

@lanstonpeng 的确在不停地调用这个函数，但是本质不是循环，而是消息队列。跟timer和loop的区别是，在系统资源不够的情况下，浏览器是会丢弃一些帧（降低函数的调用频率）。全世界的WebGL程序都在用这个模式，本来就是这样设计的啊。如果光处理mousemove就无法实现插值动画，只能在拖动的时候硬邦邦地跟着鼠标移动。

[lwjef]

点开来居然是江苏大学！惊！

[lanstonpeng]

@ChiChou 可能我表述得不清，应该说在街景停止转动的时候，animate函数中某些开销大的部分就不需要运行了(如render),等在需要render的时候(如键盘，鼠标拖动等)将一个flag打开，可以重新进入render 那个code block那里;
关于run loop 方面我确实是说错了,大家的context可能不一致,happy coding~

[lincanbin]

资源消耗真有够大的……
我的旧电脑根本跑不动

[ChiChou]

@lanstonpeng 优化是有做的余地，但是恐怕前后差别不大~具体怎么样还得跑一下基准测试。打算再加一些功能之后再考虑优化的事情。我之前做另一个WebGL的工具，最大的瓶颈不是运算速度，而是凶残的内存占用。因为这个函数调用频率很快，每次只申请一丁点内存都会导致内存居高不下，GC非常频繁。

[ChiChou]

@lincanbin 我看了下内存占用还行吧……我以前做过另一个更凶残的，内存占用飙到500M

[no13bus]

不错。

[no13bus]

做的好的话可以用到楼盘展示