7
июня
1

Genie. Эффект Джина с использованием PixelBlender.

by admin
genieTest

Недавно в блоге “Флэш-потрошителя” я нашел интересную ссылку в блоге ViValution, о том как создать эффект genie на сильверлайте с помощью пиксельных шейдеров.

Я посмотрел и загорелся идеей сделать этот эффект на As3 c помощью PixelBlender.

Идеология создания шейдера на HLSL оказалась практически такая же как и у ПикселБлендера, поэтому все оказалось сравнительно не сложно.

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

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

Применять его в AS можно например так:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
loader = new URLLoader();
loader.dataFormat=URLLoaderDataFormat.BINARY;
loader.addEventListener(Event.COMPLETE, loadCompleteHandler);
loader.load(new URLRequest("genie3.pbj"));
pBtn.addEventListener(MouseEvent.CLICK, onClick);

function onClick(e:MouseEvent) {
    if (! timer.running) {
        timer.reset(),timer.start();
    } else {
        timer.stop();
    }
    isFade=! isFade;
}

function onTimer(e:TimerEvent) {
    if (isFade) {
        t = timer.currentCount/count;
    } else {
        t = (count - timer.currentCount)/ count;
    }
    shader.data.time.value=[t];
    gen.filters=[shFilter];
    gen.alpha=1-t;
}

function loadCompleteHandler(event:Event):void {
    shader.byteCode=loader.data;
    shader.data.height.value=[gen.height];
    shader.data.width.value=[gen.width];
    shader.data.lampPosition.value=[gen.width/2];
    shFilter=new ShaderFilter(shader);
    gen.filters=[shFilter];
}

Мой вариант несколько проще чем исходный, я не стал отображать лампу и делать ее перемещаемой как в исходном примере. У меня окно сворачивается только вниз.

По ссылке ниже можно посмотреть что получилось:

genieTest

Что касается кнопочки с надписью Test Effect то она тоже использует шейдер, но об этом мы поговорим как-нибудь в другой раз.

Enjoyed reading this post?
Subscribe to the RSS feed and have all new posts delivered straight to you.
1 Comment:
  1. Vasya 2 Апр, 2010

    ……

    Подписался на RSS …

Post your comment


Celadon theme by the Themes Boutique