如何在 as3/away3d 中设置 360 度视频投影以保持叠加

Posted 2023-02-18

【中文标题】如何在 as3/away3d 中设置 360 度视频投影以保持叠加

【英文标题】：how to setup a 360 video projection in as3/away3d that will keep overlays straight

【发布时间】：2016-01-02 13:54:34

【问题描述】：

我正在尝试构建一个 360 度视频播放器，它的行为或多或少类似于 Youtube 的桌面 360 度播放器。我不是 3D 专家，但我已经设法用我在网上找到的代码构建了一些东西。我为此使用 Away3D 2.5.2。

我遇到的问题是我的客户在视频上粘贴了一些图形叠加层。这些覆盖层必须保持笔直，至少在垂直侧。虽然 Youtube 的播放器成功地保持这些直线 - 请参阅此处：https://www.youtube.com/watch?v=59MVhZWlKgQ - 我自己的播放器会稍微弯曲垂直线 - 请参阅此处：http://www.ysection.com/saar/360a/

视频本身在这里： http://www.ysection.com/saar/360a/360test2-injected.mp4

*此视频只是此问题的示例。我在 YouTube 上找到了它，但我没有使用它的权利

正如您在这些屏幕截图中所见，Youtube 的播放器在视频中应用了一些补偿性“鱼眼”失真（请参阅边缘），有助于保持线条笔直。

两个播放器播放相同的视频，即 4096x2048 equirectangular 视频。

以下是该问题关注的主要代码：

这就是我设置相机的方式：

camera = new HoverCamera3D();
camera.steps = 1;
camera.zoom = 15;
camera.focus = 25;
camera.minTiltAngle = -90;
camera.maxTiltAngle = 90;
camera.panAngle = 270;
camera.tiltAngle = 0;

这是材质设置：

video = new Video(2880,1440);
vBitmap = new BitmapData(2880,1440);
skyMaterial = new BitmapMaterial(vBitmap);
skyMaterial.smooth = true;

这是 3D 对象设置：

skysphere = new Sphere();
skysphere.material = skyMaterial;
skysphere.radius = 2800;
skysphere.rotationX = 180;
skysphere.segmentsW = 40;
skysphere.segmentsH = 36;
skysphere.scale(-1);
scene.addChild(skysphere);

这就是我在输入框上的内容：

vBitmap.draw(video,null,null,null,null,true);
if (move) 
    camera.panAngle = 0.3 * (lastMouseX - this.mouseX) + lastPanAngle;
    camera.tiltAngle = 0.3 * (lastMouseY - this.mouseY) + lastTiltAngle;

// hack
camera.panAngle = camera.panAngle+0.001-0.002*int(hackSwitch);
hackSwitch = !hackSwitch;
camera.hover();  
view.render();

你们对如何让我的播放器表现得像 Youtube 一样有什么建议吗？

谢谢， 萨尔

【参考方案1】：

我需要稍后再详细查看，但乍一看：

YouTube 似乎正在将视频映射到带盖圆柱体的内部（即，摄像头固定在“胶囊”内部的 0,0,0 处）。如果您向上/向下平移覆盖层朝向屏幕边缘，则覆盖层垂直线保持笔直，当然在平移量上倾斜，但笔直而不是凹入。由于您可以向上/向下平移 180 度，如果您在导体的脚下向下平移，您会看到线条会聚，就像映射到球体一样，但在 0 度平移时，您正在查看映射到圆柱体的垂直“壁”，因此覆盖的垂直线不会失真。

不要将 3d 映射到 Away3d 中的球体基元，而是尝试使用 away3d.primitives.CapsuleGeometry 作为快速技巧。

注意：Google 可以通过客户 webgl 着色器真正实现真正的“直线透镜”，或者可能只是映射到直线网格（再次映射为胶囊形状？）但每个水平线之间的距离不均匀段来提供直线的外观和感觉，但我没有看过 js 代码。

注意：对 YouTube 播放器的快速测试，在地板和天花板附近绘制一些方形叠加层，然后播放它并向上或向下平移以查看失真开始的位置。更好的是，只需在视频上覆盖覆盖整个垂直高度和整个水平宽度的网格线（即像砖墙），您就可以通过平移“映射”他们使用的原始对象类型当其中一条线偏离中心旋转 0、45 和 90 度时向上和向下（再次，我假设它会显示一个带有球冠的圆柱体或一个直线立方体或一个具有基于日规/等量的顶点几何形状的球体）。

【讨论】：

非常感谢您的详细回答。我自己想到了 Capsule，但需要使用没有 CapsuleGeometry 的 Away3d 2.5.2（以支持 FP9）。不过，我会试试你的笔记。再次感谢

啊，我没有考虑 Away3d 版本...真的很旧... :-/ 但是只需获取 CapsuleGeometry 的 4.x 源代码，应该能够使其在 2 中工作.x..

Thanx RobertN，但 4.x 和 2.x 相距太远，不能只放入 CapsuleGeometry，因为它使用不同的函数和变量 - AbstractPrimitive 与 PrimitiveBase，buildPrimitive() 与 buildGeometry(target :CompactSubGeometry) 等...无论如何，客户端可以使用我当前的版本，所以我暂停了这方面的工作，但如果以及何时可以进行完整修复，我会在此处更新。再次感谢！