视差图转换为深度图公司_视差刻录：使用SVG将照片从2D转换为3D

视差图转换为深度图公司

Last week we talked about ZorroSVG, a tool for converting your chunky transparent PNG-32s into slim and flexible SVGs.

上周，我们讨论了ZorroSVG ，该工具可将您的透明透明PNG-32转换为纤薄而灵活的SVG。

That got me thinking.

那让我开始思考。

A few weeks earlier, I talked about the use of the Ken Burns effect in film and television.

几周前，我谈到了Ken Burns效应在影视中的使用。

Figure 1: The ‘Parallax Ken Burns’ effect (as a GIF)

图1：“视差Ken Burns”效果(作为GIF)

But there’s another similar, but slightly more sophisticated technique that pans and/or zooms different layers of a photograph at different rates to give the image a slightly 3D effect. Sometimes this is called a ‘Parallax-Ken Burns effect’, other times ‘The 2D to 3D Effect’, sometimes it’s the ‘2.5D Effect’. You might think of it as the ‘History Channel effect’ but it could just as easily be the ‘VH1: Behind the Music effect’.

但是还有另一种类似的技术，但是稍微复杂一些，可以以不同的速率平移和/或缩放照片的不同层，从而使图像具有3D效果。 有时将其称为“ 视差Ken Burns效果 ”，有时将其称为“ 2D到3D效果 ”，有时称为“ 2.5D效果 ”。 您可能会认为它是“ 历史频道效果 ”，但也很可能是“ VH1：音乐效果背后 ”。

This is a classic videographers trick, so all the tutorials you’ll find on Youtube for this effect are aimed at Adobe After Effects users.

这是经典的摄影师技巧，因此您可以在YouTube上找到有关该效果的所有教程，都是针对Adobe After Effects用户的。

But what if we could mimic the effect entirely inside a standalone SVG graphic?

但是，如果我们可以完全在独立的SVG图形中模拟效果呢？

That was the plan.

那是计划。

It didn’t quite work out that way (yet) but I thought it might be useful to share what I have so far. Let me be clear: this is a jumping-off point for people, rather than a finished production-ready product. I know it doesn’t work in Opera 3. ;)

这样还没有完全解决，但我认为分享到目前为止的内容可能会有用。 让我清楚一点 ：这是人们的出发点，而不是成品可投入生产的产品。 我知道它在Opera 3中不起作用。

I don’t want to get super code-heavy here, but you should be able to pick through the CodePen to understand the detail.

我不想在这里得到大量的超级代码，但是您应该可以通过CodePen来理解细节。

计划是…… ( The plan was to…)

1. Break down a photograph into three overlapping layers – front, middle, and background.
   将照片分为三个重叠的层-正面，中间和背景。
2. Convert those layers into SVGs using ZorroSVG.
   使用ZorroSVG将这些图层转换为SVG。
3. Manually re-combine those layers into a single multi-layered SVG
   手动将这些层重新组合为一个多层SVG

4. To use CSS animation inside that SVG to get the Parallax-Burns effect.

   要在该SVG中使用CSS动画以获取视差刻录效果。

第一次服用 ( First take)

照片 ( The Photograph)