Облако

Преж­де чем на­чать ра­боту над про­из­водс­твом на­шего но­вого сай­та, мы из­рядно по­ломали го­лову над тем, ка­ким об­ра­зом мож­но сов­местить кон­цепцию плат­формы, ори­ен­ти­рован­ной на прод­ви­жение на­шей сту­дии че­рез со­ци­аль­ные сер­ви­сы с не ме­нее зна­чимой иде­ей, приз­ванной под­черк­нуть пре­иму­щест­ва Об­ла­ка как сту­дии, ори­ен­ти­рован­ной на тех­но­логич­ность в сво­их про­ек­тах.

Бы­ло яс­но, что дос­тупность со­дер­жа­ния для на­иболь­ше­го ко­личест­ва поль­зо­вате­лей и при­мене­ние тех­но­логий, на­ходя­щих­ся на пе­ред­нем краю — ве­щи, все же, ма­ло со­чета­емые. По­луча­лось так, что ты ли­бо уты­ка­ешь­ся в кра­сивый, удоб­ный, но к со­жале­нию уже де­сят­ки раз пов­то­рен­ный фор­мат предс­тав­ле­ния ин­форма­ции в ви­де бло­гов, с под­держ­кой RSS, ли­бо ло­ма­ешь сте­ре­оти­пы с по­мощью Flash, но при этом от­ка­зыва­ешь ве­сомо­му кус­ку ауди­тории, в их же­лании при­об­щить­ся.

Ре­шение, в ито­ге, ро­дилось — ес­ли пос­мотреть на весь сайт сту­дии, как на ил­люст­ри­рован­ный жур­нал, то мож­но за­дать воп­рос — ка­кой имен­но ма­тери­ал это­го жур­на­ла ста­нет на­ибо­лее при­тяга­тель­ным и важ­ным для чи­тате­ля? Оче­вид­но, что этим ма­тери­алом мо­жет оп­ре­делен­ная статья, ко­торую для прос­то­ты мож­но наз­вать Те­мой но­мера. Вы­делив та­кую те­му, ко­торая к то­му же мо­жет ме­нять­ся из но­мера в но­мер, мы пришли к вы­воду, что это имен­но то не­дос­та­ющее зве­но, че­рез ко­торое мож­но осу­щест­вить связь со­ци­аль­но­го ка­нала ин­форма­ции с не­кото­рой тех­но­логи­чес­кой изю­мин­кой.

Даль­ше ос­та­валось сфор­ми­ровать тре­бова­ния к фор­ма­ту предс­тав­ле­ния этой те­мы. Стало понятно, что ре­шение долж­но бы­ло стать уни­вер­саль­ным, и лег­ко адап­ти­ру­емым к но­вым важ­ным ве­хам в жиз­ни сту­дии, и в то же вре­мя быть уни­каль­ным с точ­ки зре­ния тех­ни­чес­кой ре­али­зации. По­раз­мыслив над пе­реч­нем средств вы­рази­тель­нос­ти, мы при­шли к вы­воду, что нам не по­меша­ло бы вый­ти, на­конец, из при­выч­но­го плос­кост­но­го под­хо­да к ди­зай­ну в трех­мерное прост­ранс­тво. Так об­ла­ко об­ре­ло объ­ем.

Поиск формы

Дос­та­точ­но вре­мени уш­ло на по­иск фор­мы для на­шей но­вой вы­дум­ки. Мы пе­реры­вали флэш-бло­ги, рыс­ка­ли по фо­румам, от кор­ки до кор­ки про­лис­та­ли thefwa.com, за­тем со­бира­лись и раз за ра­зом отб­ра­сыва­ли ва­ри­ан­ты на­шей Те­мы сай­та.

Вре­мя не бы­ло пот­ра­чено да­ром, ведь в про­цес­се это­го от­бо­ра мы зна­читель­но раз­ви­ли собс­твен­ную ин­форми­рован­ность с точ­ки зре­ния но­вых трен­дов в ин­те­рак­тивном ди­зай­не. Че­го сто­ит хо­тя бы за­меч­атель­ная студия tha ltd. Чпо­канье c их wonder-wall.com еще дол­го раз­да­валось из раз­личных угол­ков сту­дии. До­воль­но ско­ро ста­ло по­нят­но, что на­иболь­ший ин­те­рес сре­ди поль­зо­вате­лей в та­ких при­ложе­ни­ях вы­зыва­ет сам про­цесс вза­имо­дей­ствия с ин­те­рак­тивным объ­ек­том. Че­рез это при­ходит ин­те­рес и к не­пос­редс­твен­но­му со­дер­жа­нию объ­ек­та. Воп­рос с со­дер­жа­ни­ем ре­шил­ся дос­та­точ­но быст­ро — те­ма долж­на бы­ла вклю­чать в се­бя изоб­ра­жения, текст и ви­део. Че­го уж там го­ворить, это дол­жен был быть не­боль­шой сайт внут­ри ос­новно­го сай­та.

Ког­да по­нима­ние по со­дер­жа­нию приш­ло к нам, за­дача све­лась к по­ис­ку са­мого объ­ек­та, ко­торый стал бы яко­рем поль­зо­ватель­ско­го вни­мания. Мы от­ра­бота­ли раз­личные ва­ри­ан­ты на­несе­ния цен­ных кру­пиц ин­форма­ции на раз­личные трех­мерные объ­ек­ты, па­рал­лель­но с этим при­дир­чи­во оце­нивая эс­те­тичес­кую и ком­по­зици­он­ную сос­тавля­ющую.

В ито­ге свет уви­дел фи­наль­ный ва­ри­ант объ­ек­та, предс­тав­ля­юще­го из се­бя куб с про­из­воль­но вы­тяну­тыми гра­нями, на ко­торые был на­несен кон­тент, а поль­зо­вате­лю да­валась воз­можность изу­чать его, вра­щая в трех­мерном прост­ранс­тве. Пос­коль­ку та­кое ре­шение со­от­ветс­тво­вало всем на­шим за­ранее оп­ре­делен­ным кри­тери­ям, мы по­няли — проб­ле­ма с фор­мой ре­шена.

Средства

Те­перь мо­ей за­дачей ста­ло про­ек­ти­рова­ние функ­ци­ональ­ной мо­дели Те­мы. Уни­вер­саль­ность, мо­дуль­ность, воз­можность быст­ро­го об­новле­ния ста­ли ос­новны­ми мо­тива­ми для ме­ня в этом про­цес­се. В пер­вую оче­редь, я раз­де­лил за­дачу на три ос­новных пунк­та: биз­нес-ло­гика, ин­терфейс гра­фичес­кий и ин­терфейс для ра­боты с внеш­ни­ми дан­ны­ми. За­тем, вспо­миная все свои прош­лые зат­рудне­ния с ре­али­заци­ей та­ких про­ек­тов, я пот­ра­тил зна­читель­ную часть вре­мени на соз­да­ние ди­аг­ра­мы сущ­ностей те­мы. Имея пе­ред гла­зами мо­дель, я, на­конец, смог дать оцен­ку по вре­мени и по тру­дозат­ра­там.

Диаграмма сущностей по проекту.

Что же в ито­ге у нас по­лучи­лось? За об­новле­ние ин­форма­ции в те­ме от­ве­чали бло­ки свя­зи с внеш­ни­ми дан­ны­ми. Об­мен ин­форма­ци­ей с сер­ве­ром осу­щест­влял­ся, ра­зуме­ет­ся, че­рез XML для ко­торо­го бы­ли раз­ра­бота­ны спе­цифи­кации по фор­ма­ту. За­тем по этим спе­цифи­каци­ям прог­раммист бэк-эн­да соз­даст не­об­хо­димые мо­дули для сты­ков­ки с CMS сай­та.

Я ре­шил раз­де­лить все дан­ные, с ко­торым долж­но бы­ло опе­риро­вать на­ше при­ложе­ние на сер­висные дан­ные (не­об­хо­димые для под­держа­ния ра­боты са­мой обо­лоч­ки те­мы) и ме­диа-дан­ные (в ко­торых и хра­нилась ин­форма­ция не­пос­редс­твен­но по каж­до­му вы­пус­ку). Сре­ди сер­висных дан­ных хра­нились па­рамет­ры ини­ци­али­зации сце­ны в Papervision, а так же на­бор дан­ных для кор­рект­ной ра­боты ос­новной трех­мерной конс­трук­ции те­мы (об этом бу­дет под­робно расс­ка­зано ни­же). Как из­вест­но, для ини­ци­али­зации трех­мерной сце­ны тре­бу­ют­ся нес­коль­ко ве­щей, ос­новны­ми из ко­торых яв­ля­ют­ся свет и ка­мера. Па­рамет­ры этих эле­мен­тов я вы­делил в от­дель­ный xml-файл, ко­торый то­же мо­жет из­ме­нять­ся в за­виси­мос­ти от на­ших бу­дущих пот­ребнос­тей. За­дав ба­зовые па­рамет­ры для ра­боты сце­ны я пе­решел к спе­цифи­каци­ям ме­диа-дан­ных.

От­талки­ва­ясь от ти­па кон­тента, ко­торый дол­жен был раз­местить­ся в те­ме, я раз­бил ме­диа-дан­ные на нес­коль­ко ти­повых бло­ков: текс­то­вой, ви­део и блок изоб­ра­жений. Все эти бло­ки мог­ли сво­бод­но ме­нять свой по­рядок, до­бав­лять­ся и уда­лять­ся. Текс­то­вой дол­жен был вклю­чать в се­бя дан­ные в фор­ма­те HTML, для бо­лее удоб­но­го ре­дак­ти­рова­ния и соз­да­ния раз­метки, ви­део — со­дер­жал в се­бе ан­но­тацию, а так же ссыл­ку на за­ранее соз­данный и заг­ру­жен­ный на сер­вер FLV файл, блок изоб­ра­жений дол­жен был со­дер­жать ссыл­ку на FLICKR (ко­торый был выб­ран ос­новной точ­кой хра­нения изоб­ра­жений на всем сай­те для уп­ро­щения расп­рос­тра­нения изоб­ра­жений в даль­ней­шем). По­мимо ме­диа-кон­тента в те­ме су­щест­во­вали ме­та-дан­ные для иден­ти­фика­ции в сис­те­ме уп­равле­ния кон­тентом, а так же ссыл­ка на кон­тей­нер аудио, для воз­можнос­ти про­иг­ры­вания зву­ка. Все эти дан­ные наш­ли свое мес­то xml-фай­ле ме­диа-кон­тента.

Пос­ле фор­ми­рова­ния спе­цифи­каций к спо­собу хра­нения дан­ных я мог пе­рей­ти к соз­да­нию конт­рол­ле­ра (так я на­зываю ос­новные AS3 клас­сы, от­ве­ча­ющие за спе­цифич­ные функ­ции в рам­ках при­ложе­ния) для об­ра­бот­ки XML. Ни­чего слож­но­го этот конт­рол­лер из се­бя не предс­тав­лял, от­дель­но мож­но упо­мянуть то что в пар­се­ре я ис­поль­зо­вал воз­можнос­ти рас­ши­рения E4X, для бо­лее быст­рой об­ра­бот­ки вет­вей заг­ру­жен­но­го XML. Пос­ле сво­ей ра­боты пар­сер фор­ми­ровал внут­ренний объ­ект, ко­торый хра­нил все важ­ные па­рамет­ры для ини­цали­зации сис­те­мы и ме­диа-кон­тент.
За­тем я сфо­куси­ровал­ся на конт­рол­ле­ре сце­ны, ко­торый дол­жен был уп­равлять про­цес­сом ге­нера­ции но­вой PV-сце­ны, эта за­дача так же не предс­тав­ля­ла слож­ности, пос­коль­ку анг­ло­языч­ный Ин­тернет на­сыщен мно­жест­вом при­меров ре­али­зации та­ких за­дач, а сам Papervision дос­та­точ­но хо­рошо до­кумен­ти­рован. По­мимо па­рамет­ров Papervision этот конт­рол­лер уп­равлял ра­ботой HUD (так я наз­вал всю со­вокуп­ность уп­равля­ющих эле­мен­тов, вхо­дящих в гра­фичес­кий ин­терфейс). По­кон­чив с эти­ми, на­ибо­лее прос­ты­ми ве­щами, я вплот­ную приб­ли­зил­ся к ос­новной глы­бе, ко­торая пу­гала ме­ня сво­ей комп­лек­сностью и не­из­вест­ностью.

Этой глы­бой был конт­рол­лер са­мой трех­мерной конс­трук­ции, удер­жи­ва­ющей кон­тент-бло­ки. Изу­чив мно­гочис­ленные ту­тори­алы и до­кумен­та­цию я по­нял, что на этом эта­пе за­дача раз­де­лилась на две сос­тавля­ющих. Пос­коль­ку про­цедур­ная ге­нера­ция конс­трук­ции предс­та­вилась мне де­лом бес­перс­пек­тивным я при­шел к вы­воду, что оп­ти­маль­ным ре­шени­ем соз­да­ния ге­омет­рии объ­ек­та яв­ля­ет­ся мо­дели­рова­ние его в сто­рон­нем трех­мерном ре­дак­то­ре. Cinema4D прек­расно по­дошел на эту роль. Вто­рой сос­тавля­ющей за­дачи яв­ля­лось соз­да­ние ко­да, ко­торый поз­во­лил бы им­порти­ровать мо­дель внутрь сце­ны изв­не, а так же кор­рект­но ее за­текс­ту­риро­вать и при­дать ин­те­рак­тивность.

Создание трехмерной модели

Не дол­го ду­мая мы отк­ры­ли ре­дак­тор и на­чали конс­тру­иро­вать мо­дель. Для то­го что­бы сок­ра­тить по­терю про­из­во­дитель­нос­ти бы­ло ре­шено ис­поль­зо­вать один ку­бичес­кий объ­ект, чьи гра­ни бы­ли рас­се­чены на нес­коль­ко сег­ментов. За­тем каж­дый сег­мент был вы­дав­лен с по­мощью инс­тру­мен­та extrude из по­верх­нос­ти гра­ни. Сег­менты бы­ли вы­дав­ле­ны в слу­чай­ном по­ряд­ке, для то­го что­бы при­дать мо­дели ин­те­рес в ви­зу­аль­ном пла­не. Пос­ле ут­верж­де­ния мо­дели важ­ным ша­гом ста­ло соз­да­ние кор­рект­ной текс­ту­ры, для на­несе­ния на ее по­верх­ность. Пос­коль­ку Papervision в те­кущем ви­де прак­ти­чес­ки не под­держи­ва­ет ди­нами­чес­кие те­ни (а те ре­шения, что су­щест­ву­ют ос­тавля­ют же­лать луч­ше­го с точ­ки зре­ния про­из­во­дитель­нос­ти) бы­ло ре­шено ис­поль­зо­вать хо­рошо из­вест­ную ме­тоди­ку «за­пека­ния» текс­тур. На сце­ну с на­шим объ­ек­том бы­ло по­меще­но нес­коль­ко ис­точни­ков све­та, в наст­рой­ках рен­де­рера пос­тавлен па­раметр прос­че­та гло­баль­но­го ос­ве­щения, и пос­ле нес­коль­ких проб­ных рен­де­ров бы­ла по­луче­на го­товая текс­ту­ра для им­порта во флэш-при­ложе­ние. Текс­ту­ра об­ла­дала дос­то­вер­ны­ми те­нями и мы мог­ли соз­дать ре­алис­тично ос­ве­щен­ный объ­ект пря­мо внут­ри сце­ны Papervision.

Для им­порта мо­дели внутрь при­ложе­ния был ис­поль­зо­ван фор­мат DAE, хра­нящий дан­ные о ге­омет­рии объ­ек­та в стан­дарт­ной схе­ме COLLADA. Cinema4D прек­расно поз­во­ля­ет де­лать та­кой экс­порт. Пос­ле то­го как к этой мо­дели был до­бав­лен файл с раз­верт­кой «за­печен­ной» текс­ту­ры, этап ра­боты с внеш­ним трех­мерным ре­дак­то­ром был за­кон­чен, ос­та­валось «вжи­вить» мо­дель в сце­ну.

Papervision по умол­ча­нию под­держи­вать им­порт раз­личных фор­ма­тов трех­мерных дан­ных, так что проб­лем с заг­рузкой не воз­никло. На­конец, на сце­не по­явил­ся пер­вый текс­ту­риро­ван­ный трех­мерный объ­ект.

Интерактивность

Од­на­ко, объ­ект не дол­жен был сто­ять на мес­те. Для ин­те­рак­тивной ани­мации объ­ек­та был ис­поль­зо­ван сво­бод­но дос­тупный класс TweenLite. С по­мощью не­го дос­та­точ­но лег­ко мож­но бы­ло соз­да­вать ани­мацию по па­рамет­ру. В на­шем слу­чае бы­ло не­об­хо­димо вра­щать фи­гуру пе­ред ка­мерой, де­монс­три­руя ее раз­личные гра­ни, на ко­торые за­тем долж­ны бы­ли быть под­ве­шены кон­тент-бло­ки. Проб­ле­ма ре­шилась че­рез раз­ме­щение EventListener-ов на дей­ствий поль­зо­вате­ля, со­вер­ша­емые ли­бо че­рез кноп­ки в ин­терфей­се, ли­бо че­рез кла­виши нап­равле­ний на кла­ви­ату­ре. Те­перь фи­гура мог­ла быть подв­лас­тна поль­зо­вате­лю.

Пре­одо­лев этот этап, я мог пе­рей­ти к конт­рол­ле­ру кон­тент-бло­ков. Имен­но этот конт­рол­лер ока­зал­ся «твер­дым ореш­ком». На пер­вый взгляд за­дача ка­залось дос­та­точ­но прос­той — по­мес­тить на гра­ни пря­мо­уголь­ные плос­кости, от­ве­ча­ющие на на­жатие на них кур­со­ром мы­ши, но слож­ности на­чались на эта­пе увяз­ки с ани­маци­ей конс­трук­ции в це­лом.
Спер­ва я по­пытал­ся соз­дать плос­кости про­цедур­ным спо­собом, что в ито­ге не увен­ча­лось ус­пе­хом, пос­коль­ку вы­чис­ле­ние край­них то­чек в ге­омет­рии им­порти­рован­ной мо­дели выз­ва­ло боль­шие зат­рудне­ния. Тог­да я ре­шил пой­ти уже ис­пы­тан­ным спо­собом и до­бавить их при по­мощи трех­мерно­го ре­дак­то­ра. По­лучи­лось, я смог соз­дать в сце­не мас­сив из от­дель­но рас­по­ложен­ных плос­костей в оп­ре­делен­ных ко­ор­ди­натах. До­бав­ле­ние ин­те­рак­тивной текс­ту­ры бы­ло де­лом тех­ни­ки, как и заг­рузка дан­ных из объ­ек­та, со­дер­жа­щего все ме­диа-бло­ки.

Итак, на трех­мерной сце­не су­щест­во­вала ос­новная трех­мерная конс­трук­ция, а так же на­бор плос­костей, ак­ти­виру­ющих де­монс­тра­цию поль­зо­вате­лю кон­тента. Тес­ти­руя по­лучен­ный про­межу­точ­ный ва­ри­ант, я поп­ро­бовал вра­щать его в раз­личных нап­равле­ни­ях. Тог­да и вып­лы­ла пер­вая проб­ле­ма — пос­коль­ку эле­мен­ты уп­равле­ния долж­ны бы­ли вра­щать трех­мерный объ­ект по че­тырем про­из­воль­ным нап­равле­ни­ям, а сам объ­ект мог вра­щать­ся толь­ко на 90 гра­дусов в каж­дую сто­рону в сво­ей сис­те­ме ко­ор­ди­нат, прос­тое при­мене­ние вра­щений объ­ек­та по той или иной оси соз­да­вало неп­редс­ка­зу­емое дви­жение, пос­ле нес­коль­ких та­ких опе­раций. Проб­ле­ма ре­шилась сле­ду­ющим об­ра­зом, бы­ли до­бав­ле­ны нес­коль­ко от­дель­ных пе­ремен­ных, от­ве­ча­ющих за кор­ректи­ров­ку нап­равле­ния вра­щения мо­дели в за­виси­мос­ти от на­жатой поль­зо­вате­лем кноп­ки. За­тем средс­тва­ми Papervision про­из­во­дилось ум­но­жение мат­ри­цы транс­фор­ма­ции объ­ек­та на мат­ри­цу вра­щения с уче­том кор­ректи­ру­ющих пе­ремен­ных, что поз­во­лило сде­лать вра­щение предс­ка­зу­емым и по­нят­ным. Но это бы­ла не единс­твен­ная проб­ле­ма.

Ис­тинную труд­ность предс­та­вило вот что. При вра­щении трех­мерной конс­трук­ции па­нели, со­дер­жа­щие кон­тент­ные плос­кости вра­щались вмес­те с ней. Пос­коль­ку вра­щение про­ис­хо­дил по раз­личным осям в ито­ге кон­тентые плос­кости ока­зыва­лись по­вер­ну­ты к поль­зо­вате­лю под про­из­воль­ны­ми уг­ла­ми. Нам же тре­бова­лось, что­бы все плос­кости всег­да сох­ра­няли ори­ен­та­цию ли­цом к поль­зо­вате­лю и «верх» со­дер­жа­щего­ся в них изоб­ра­жения всег­да дол­жен был быть ввер­ху по от­но­шению к поль­зо­вате­лю. До­воль­но мно­го вре­мени уш­ло на по­нима­ние то­го фак­та, что расс­чи­тать по­ложе­ние и по­воро­ты плос­костей в за­виси­мос­ти от вра­щения са­мого объ­ек­та прак­ти­чес­ки не воз­можно. Единс­твен­ным вы­ходом яви­лось соз­да­ние на­бора эта­лон­ных зна­чений мат­ри­цы транс­фор­ма­ции для каж­дой плос­кости. Для соз­да­ния этой мат­ри­цы бы­ла соз­да­на спе­ци­аль­ная функ­ция для ге­нера­ции XML-фай­ла, со­дер­жа­щего эта­лон­ные зна­чения для каж­дой из плос­костей. Эти дан­ные бы­ли за­тем заг­ру­жены об­ратно в сис­те­му. За­дача уп­рости­лась к оп­ре­деле­нию то­го или ино­го по­ложе­ния всей конс­трук­ции, а за­тем к прос­мотру и по­ис­ку эта­лон­но­го зна­чения и при­мене­ния его пос­ле­дова­тель­но на каж­дую ви­димую поль­зо­вате­лем плос­кость. Ре­шение этой проб­ле­мы за­няло боль­шую часть ра­боты над про­ек­том.

На этом эта­пе ос­новная за­дача бы­ла уже ре­шена, даль­ше ос­та­валось толь­ко сде­лать конт­рол­лер для уп­равле­ния прос­мотром кон­тента, что предс­тав­ля­ло из се­бя до­воль­но прос­тую ру­тин­ную за­дачу.

Те­перь имея на ру­ках уп­равля­емую трех­мерную сце­ну и ме­ханизм прос­мотра все­го об­новля­емо­го кон­тента мож­но бы­ло прис­ту­пить к улуч­ше­ни­ям и от­ладке ин­терфей­са, что за­няло дос­та­точ­но боль­шое ко­личест­во вре­мени.

На­конец, ког­да мы до­бились со­от­ветс­твия при­ложе­ния к ма­кету ос­та­лось толь­ко про­вес­ти тес­ти­рова­ние и осу­щест­вить при­вяз­ку к сис­те­ме уп­равле­ния кон­тентом.

Заключение

Та­ким об­ра­зом бы­ла раз­ра­бота­на от­но­ситель­но уни­вер­саль­ная плат­форма для де­монс­тра­ции раз­но­род­но­го кон­тента в рам­ках об­новле­ния те­мы сай­та. В про­цес­се ее соз­да­ния был ре­шен ряд дос­та­точ­но слож­ных тех­ни­чес­ких за­дач. Каж­дое из ре­шений этих проб­лем ста­ло бес­ценным опы­том для раз­ра­бот­чи­ков и средс­твом для оп­ти­миза­ции ра­боты в бу­дущем.