Facebook 3D照片电视电影小迷妹 TVco.cn

3D-фотографииFacebookизнутри：шейдерыпараллакса。

ВпоследниенесколькомесяцевFacebookзаполонили3D -фотографии 。 Есливамнедовелосьихувидеть，тообъясню：3D-фотографии – этоизображениявнутрипоста，которыеплавноменяютперспективуприскроллингестраницыиликогдаперемещаешьпониммышь。

3D-месяцевдопоявленияэтойфункцииFacebookтестировалпохожуюфункциюс3D-моделями。 Хотяможнолегкопонять，как的Facebookможетрендерить3D-моделииповорачиватьихвсоответствииспозициеймыши，с3D-фотографиямиситуацияможетбытьнестольинтуитивнопонятной。

Техника，которуюиспользуетFacebookдлясозданиятрёхмерностидвухмерныхизображений， Внёмприменяетсяоптическоеявлениеподназванием «параллакс» 。

Чтотакоепараллакс？

超级马里奥（Super Mario），тоточнознаете，чтотакоепараллакс。 ХотяМариобежитсоднойскоростью，кажется，чтодалёкиеобъектынафонедвижутсямедленнее（см。

Этотэффектсоздаётиллюзиютого，чтонекоторыеэлементы，напримергорыиоблака，расположеныда。 Онэффективенпотому，чтонашмозгдляоценкирасстояниядодалёкихобъектовиспользеепараллад

Параллакскаксдвиг。

Есливамзнакомалинейнаяалгебра，товывевовевовероятнознаете，насколькосложнойинетривиааоьтотетб Поэтомуестьгораздоболеепростойспособпониманияпараллакса，длякоторогонетребуетсеничего，

Давайтепредставим，чтомысмотримнакуб（см。ниже）。 Еслимыточновыровненыотносительноегоцентра，топередняяизадняягранибудутвыгледтл .тоиестьперспектива 。

Однакочтопроизойдёт，еслимысдвинемкамерувниз，илиподнимемкубвверх？ Применивтежепринципы，мысможемувидеть，чтопередняяизадняягранисместилисиотносетельно。 Ещёинтереснеето，чтоонисдвинулисьотносительнодругдруга。 Задняягрань，находящаясядальшеотнас，какбудтосдвинуласьменьше。

Еслимыхотимвычислитиэтихвершинкубавинон Однаконасамомделеэтонеобязательно。 Еслиперемещениекамерыдостаточномало，томыможемаппроксимироватьсмещениевершинсевинвх

Единственное，чтонамнужноопределить—этомасштаб。 ЕслимысдвинемсянаXметроввправо，тодолжноказаться，чтообъект或Yметрахотнатнатнатнатнатнасствон。 ЕслиXостаётсянебольшим， параллаксстановитсязадачейлинейнойинтерполяции ，анетригонометрии。 Посути，этоозначает，чтомыможемсимулироватьнебольшие3D-поворотысдвигомпикселейвзависимо

Генерируемкартыглубин。

超级马里奥（Super Mario），Facebook上的чтоделаттПосвоемупринципуто。 Длязаданнойкартинкиопределённыепикселисмещаютсявнаправлениидвижениянаоснованиирасстояни。 Длясоздания3D-фотографииFacebookтребуетсятолькосамофотоикарта，сообщающая，какдалекоеходится。 Такаякартаимеетвполнеожидаемоеназвание— « картаглубин» 。 Взависимостиотконтекстаеётакженазывают картойвысот 。

Салетафотографиюдовольнопросто，ногенерацияправильнойкартыглубин—гораздоболеесложнаяза。 Всовременныхустройствахиспользуютсяразличныетехники。 Чащевсегоиспользуютдвекамеры; каждаяделатснимокодногоитогожеобъекта，носнемногоотличающейсяперспективой。 Тотжепринциписпользуетсявстереоскопическомзрении， Наизображениинижепоказано，какiPhone 7以前的版本。

Подробностивыполнениятакойреконструкцииописанывстатье即时3D摄影技术，在представленнойПитеромХедмаооменнемоннемон中

Послесозданиякачественнойкартыглубинсимуляциятрёхмерностистановитсяпочтитривиальнойзадаче。 Реальноеограничениеэтойтехникизаключаетсявтом，чтодажееслиможновоссоздатьгрубую3D-модель，внейотсутствуетинформацияотом，какрендеритьчасти，невидимыенаисходномфото。 Наданныймоментэтупроблемуневозможнорешить，ипоэтомувидимыена3D-фотограоиееене

Мыпознакомилисьсконцепцией3D-фотографийивкратцерассказалиотом， Вовторойчастимыузнаем，кактежесамыетехникиможноиспользоватьдляреализациооренти

2. 2.Шейдерыпараллаксаикартыглубин。

.аблоншейдера。

Еслимыхотимвоссоздать3D-фотографииFacebookспомощьюшейдера，тосначаладолжныопредолотоетат Таккакэтотэффектлучшев2и-изображениями，тологичнобудетреализеаее 精灵Sprite Renderer ，которыйможноиспользовать，Создадимшейдер 。

Хотятакойшейдерможносоздатьснуля，частопредпочтительнееначинатьсготовогошаблона。 Лучшевсегоначатьдвигатьсявперёд，скопировавужеимеющийся扩散着色器спрайтов，которыйисеротоль Ксожалению，движокнепоставляйтсясфайлом 着色器 ，которыйможноредактироватьсамому。

Unityтобыполучитьего，统一下载存档искачатьпакет 内置着色器 （см。ниже）дляиспользуемойвариверивере。

Послеизвлеченияпакетаможнопросмотретьисходныйкодвсехшейдеров，поставляемыхсUnity。子对象Sprites-Diffuse.shader上的Интересующийнаснаходится ，

Изображения。

Второйаспект，которыйнужноформализовать—этоимеющиесяунасданные。 Представим，чтоунасестьиизображение，котороемыхотиманимировать，иегокартаглубин。 Последняябудетчёрно-белымизображением，

ИспользованныевэтомтуториалеизображениявзятыизпроектаPickle catДеннисаХотсона，иэто，безсом

Связаннаясэтимизображениемкартавысототражаетрасстояниекошачьеймордыоткамеры。

Легкозаметить，насколькохорошихрезультатовможнодобитьсястакойпростойкартойглубин。 Этозначит，чтонесложносоздаватьсобственныекартыглубиндляужесуществующихизображений。

Свойства。

Теперь，когдаунасестьвсересурсы，можноприступатькнаписаниюкодашейдерапараллакса。 Еслимыимпортируемосновноеизображениекакспрайт， _MainTex 。 Однаконамнужносделатьтак，чтобышейдерубыладоступнакартаглубин。 _HeightTex中的_HeightTex 。 Янамереннорешилненазыватьего _DepthTex ，чтобынеперепутатьстекстуройглубин（этопохожаяконцепция统一，используемаядлярендерингакартыглубинсцены）。

_Scale 。

Эиии/ ENDCG

Теперьвсёготово，имыможемприступатькнаписаниюкода，которыйбудетвыполнятьсмещение。

Первыйшаг-этосэмплированиезначенияизкартыглубин，котороеможновыполнитьспомощьюфункци。 Таккак_HeightTex —图库照片，мыможемпростовзятьеканалкрасногоиотброситьосталь。 Полученноезначениеизмеряетрасстояниевнекихпроизвольныхединицахоттекущегопикселядокам。

Значениеглубинынаходитсявинтервалеот0до1，номырастянемегодоинтервалаот−1до+1。 Этопозволяетобеспечитьиположительный（белыйцвет），иотрицательный（чёрныйцвет）параллакс。

Теория。

Длясимуляцииэффектапараллаксанаэтомэтапенамнужноиспользоватьинформациюоглубинаедлясдв。 Чемближепиксель，темсильнееегонужносдвигать。 Этотпроцессобъяснённапоказаннойнижесхеме。 Красныйпиксельизисходногоизображениявсоответствиисинформациейизкартыглубиндолженсм Аналогично，синийпиксельдолженсместитьсянадвапикселявправо。

Хотьтеоретическиэтодолжносработать，нетпростыхспособовдляреализацииэтоговшейдере。 Всёделовтом，чтошейдерпосвоемупринципуможетменятьтолькоцветтекущегопикселя。 Привыполнениикодашейдераондолженотрисовыватьнаэкранеопределённыйпиксель; мынеможемпростосдвинутьэтотпиксельвдругоеместоилиизменитьцветсоседнего。 Этоограничениелокальностиобеспечиваеточеньэффективнуюпараллельнуюработу шейдеров ，нонепозволяетнамреализовыватьвсевозможныеэффекты，которыебылибытривиальнымиприусловииналичияпроизвольного доступадлязаписиккаждомупикселювизображении 。

Еслимыхотимбытьточными，тонамнужносэмплироватькартуглубинвсехсоседнихпикселей，чтобывыяснить，какойизнихдолжен（еслидолжен）сдвинутьсявтекущуюпозицию。 Есливодномитомжеместедолжныоказатьсянесколькопикселей，томыможемусреднитьихвлияни。 Хотятакаясистемаработаетиобеспечиваетнаилучшийвозможныйрезультат，онаявляетсячрезвычайнонеэффективнойипотенциальновсотниразболеемедленной，чемисходный漫着色器，скоторогомыначинали。

Наилучшейальтернативойбудетследующеерешение：мыполучаемглубинутекущегопикселяизкарты затем，еслимыдолжнысдвинутьеговправо， тозаменяемтекущийцветнапиксельслева （см。изобрае）。 Здесьмыдопускаем，чтоеслинужнодвигатьпиксельвправо，

Легкоувидеть，чтоэтовсеголишьмалозатратнаяаппроксимациятого，чегомыхотелидостичьнасамо。 Темнеменее，онаоказываетсяоченьэффективной，потомучтокартыглубинобычнооказываютсяплав。