Зацени пару моих эффектов на флэше
 

1) http://dump.ru/files/p/p413735508
Это простенький симулятор танка.

Сперва рисуете препятсвия для танка (они похожи на кишки:))
Потом жмете Enter и появится танк. Управление стрелками если кликать мышкой то он будет стрелять, попробуйте пострелять в препятсвия.
Если зажать Shift и двигать мышкой то будет меняться освещение (Bump Mapping)

2) Bump and Parallax mappings:
http://dump.ru/files/p/p379236660
http://dump.ru/files/p/p345676263

Все делал сам:)

PS: Перезалил - Сорри за первые ссылки, на будущие буду проверять))

Хостинг выдает чтото типо

FUCK OFF
Hacked by voron & Mystical NeO (axel we not forgot you!)

ГыГЫГЫ )) Перевыложи

Понравился "рельеф".

Танк прикольный, но кривоватый. Рельеф хорош)
Про чайник - видно проглядывает 3д. Это несколько картинок+битмап дата или настоящее 3д? Если настоящее, то верти его по настоящему, а то как то...
П.С. ошибся разделом.

mikleb, всё понравилось, классно, но раздел не тот явно.

Есть вопрос к тем кто разбирается в АС - возможно ли рендерить муви-клип в битмап-дату с последующей обработкой массива(или что там получается?), и какой от этого будет прирост в отличие от встроенных непрограммных эффектов наложения?

Altrenativa =) Тоже сделал свой примерчик.

прикольно

интересно с рельефом :)

Забавно.Это 3d модели?

Тут нигде нету 3д, это все паралкс и бамп мэппинги. Код для рельефа или чайника пара строчек:)

и 2 картинки)

3 : карта нормалей, карта высот, и цветовая карта

если сделать стратегию или аркаду с графикой, как в примере - рельеф, думаю можно ухватить немалый кусок.

2Ostgur
Я уже думал над этим, но тут куча минусов:
1)вид должен быть чисто с верху
2)если какая та часть рельефа слишком резко выступает, ту будут заметны глюки паралкса.
3) не очень понятно как присабачить бампмэппинг- в играх обычно освещение юзером не меняется.
3) паралакс тормазной, и быстрее его сделать на флэше не возможно

А вообще я щас пишу гонки где игрок может менять ландшафт кучей способов:)

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

Круто выглядит, можно исходник попросить?

2MoHaX
Конечно:) - этож совсем просто сделать:

Бамп мэппинг:
карта нормалей - normalMap:BitmapData
карта освещенности - resMap:BitmapData
a - массив который задает матрицу преобразования цвета
направляющие вектор лучей света (они все параллельны): lightX,lightY,lightZ этот вектор должен быть направлен от плоскости

Паралакс :
resMap - уже нарисованная картинка с цветом и освещением
heightMap - карта высот
cameraX, cameraY, cameraZ - направляющией вектор под которым смотрят на картинку (тоже должен быть направлен от плоскости картинки)

Я кстати еще придумал как делать бамп с произвольным освещением а не тока параллельным:)

мой флеш что то не хочет играть данное, ни в браузере ни стандалон

И мой :(

Наверно глупый вопрос:), может у вас обоих старый плеер стоит?

У меня тоже танк не играет. FP9

2Ekzi
В танке если ничего не делать должен быть белый экран, вы точно читали описание?

Офигенно круто!!! Подскажи, где можно почитать, чтобы так же научиться делать. А то твой код не пойму без теории...

2Волгоградец
Выше я написал как это делать. Вообще сперва это сделали альтернатива но они никому не хотят говорить как это делать. Потом я почитал в википедии про паралаксы и бамп мэппинги и сделал:)

Могу рассказать и теорию если интересно:)

Интересно ).

Бамп мэппинг:
(n, v) - скалярное произведение вектора n на v
Есть поверхность, и надо узнать степень освещенности каждой ее точки.

Степень освещенности точки поверхности = (n,v)
n - нормаль к поверхности в этой точке
v - анти-направляющий (т.е. направлен в противоположную сторону) вектор света который падает в эту точку.

Так как |n| =1 и |v|=1 и угол между n и v острый то 0 < (n,v)<=1 т.е степень освещенности это число от 0 до 1.

Теперь как хранить нормали:
Удобно хранить их в виде картинки, где цвет каждого пикселя будет кодировать нормаль к поверхности в данном пикселе (точке).
Каждая компонента вектора нормали это вещественное число от -1 до 1,
а каждая компонента вектора цвета (R,G,B) это целое число от 0 до 255.
Т.е нужно отрезок [-1,1] перевести в отрезок [0,255], это проще всего сделать линейным преобразованием. Поэтому если в данном пикселе нормаль к поверхности (x,y,z), то в карте нормалей цвет данного пикселя будет R=x*128+128, G=y*128+128, B=z*128+128. И обратно x=R/128-1, y=G/128-1, z=B/128-1.

Теперь нужно научится получать степень освещенности (обозначим ее S) произвольного пикселя по цвету данного пикселя в карте нормалей (обозначим его (R,G,B), а нормаль в этом пикселе (x,y,z)), и анти-направляющему вектору света в этом пикселе ( обозначим его (vx,vy,vz). S по определению = (n,v) = x*vx+y*vy+z*vz = (R/128-1)*vx+(G/128-1)*vy+(B/128-1)*vz = R*(vx/128)+G*(vy/128)+B*(vz/128)-(vx+vy+vz)

Карта освещенности это чернобелая картинка где цвет каждого пикселя = (R=S*256, G=S*256, B=S*256) (для каждого пикселя своё S)

Видно что вектор (S*256,S*256,S*256) ЛИНЕЙНО выражается через вектор цвета карты нормалей (R,G,B) , а именно:
(S*256,S*256,S*256) = ((2*vx) * R + (2*vy) * G + (2*vz) * B - 256*(vx+vy+vz), то же самое, то же самое)
Запишем матрицу этого линейного преобразования в массив a, только надо учти что alpha не меняется. Эта матрица будет одинаковой для каждого пикселя потому что у нас - параллельное освещение и (vx,vy,vz) постоянный для каждого пикселя. И применим к карте нормалей фильтр ColorMatrixFilter с этой матрицей который как раз и делает линейные преобразования над цветом каждого пикселя картинки.

Спасибо. Попробую разобраться.

mikleb, кстати, parallax mapping вроде и тени поддерживает, не пробовал делать?

2 neelts
Это смотря какой параллакс, тут совсем простенький - один вызов дисплесментмапфильтра. Я думал как реализовать параллакс с перекрываниями (со слоями), но понял что это не реально т.к. будет порядка 6*(число слоев) вызовов фильтров и наложений еще больше. Еще думал как сделать параллакс с более точной интерполяцией, но тут нужно делить цвет каждого пикселя на число которое соответсвует этому пикселю это тока через блендмод и палитру можно быстро сделать, но будут очень большие погрешности, поэтому решил не писать:)
Так что более крутой параллакс у меня не получается сделать, а тени и подавно

Все, я разобрался как пользоваться! Классная штука!

Блин, а я не разобрался - слишком сложно... Вот объясни мне пожалуйста несколько вещей:
- что значит параллельное освещение (оно ж вроде и в обычной жизни параллельное - допустим от солнышка)???
- получается там не одна картинка, а несколько - с тенями и без; и перемещая мышь прозрачность одной картинки уменьшается, а другая наоборот усиливается (можно глянуть как выглядят исходные картинки)???
- почему там получается матрица, если освещенность выражается одним линейным уравнением, где по сути нет неизвестных???

2Волгоградец
>> что значит параллельное освещение (оно ж вроде и в обычной жизни параллельное - допустим от солнышка)???
Да так и есть, но например освещение от фонарика не параллельное там лучи выходят почти из одной точки. (параллельное значит, что направляющие вектора всех световых лучей одинаковые).

>> получается там не одна картинка, а несколько - с тенями и без; и перемещая мышь прозрачность одной картинки уменьшается, а другая наоборот >>усиливается (можно глянуть как выглядят исходные картинки)???
Первая картинка карта освещенности должна обновляться как тока юзер двинет мышкой (юзер двигает мышкой меняется направляющей вектор света ну и соответственно матрица). Вторая картинка это цветовая карта она не меняется - цвета пикселя в ней не учитывают освещения (то есть как если бы анти-направляющей вектор света = нормали в каждом пикселе). Потом просто рисуешь одну по верх другой с blendmode = BlendMode.MULTIPLY. (прозрачность нигде не используется)
пример карты нормалей: http://up.li.ru/?id=352348;1.PNG
пример карты высот: http://up.li.ru/files/2008/04/28/352350.PNG;2.PNG
пример цветовой карты: http://up.li.ru/files/2008/04/28/352353.PNG;3.PNG

>> почему там получается матрица, если освещенность выражается одним линейным уравнением, где по сути нет неизвестных???
Освещенность выражается 4-мя линейными уравнениями (т.к. вектор 4х мерный - RGBA) просто три из них одинаковые (за исключением переменной после знака = ) а одно выглядит как alpha = alpha

Так... У тебя карта освещенности == карта нормалей, т.е. это одно и то же? (И почему тогда она меняется, если нормаль всегда одинаковая для данной поверхности - меняется только угол падения света...) Откуда ты ее взял, т.е. как узнал что такие цвета должны быть - от голубого до малинового?
С картой высот понятно - это черно-белая картинка с разной яркостью пикселов.
Цветовая карта тоже вродя понятно - это цвет объекта, как будно он одинаково освещен со всех сторон.
Что значит И как ее рисовать, если она уже уже нарисована???

P.S.: меня, если честно, поразили твои эффекты - весь день читаю про bump mapping и parallax - но все не то... Не объясняет никто как сделать 2D bump mapping.

Карта освещенности != карте нормалей. Карта освещенности должна заново расчитываться при изменении вектора света.
Карту нормалей как и карту высот можно отрендерить в 3ds max например, а можно программно попиксельно расчитать по карте высот (но будет долго и будут небольшие погрешности, я пробовал так делать когда писал генератор ландшафта).
Рисуешь в смысле делаешь так : (карта освещенности ). draw ((цветовая карта), null, null, BlendMode.MULTIPLY);
И карта освещенности станет итоговой картинкой.

Все понятно. По идее можно обойтись и двухмерными редакторами, только будет долго и с погрешностью, я так понял. А так в принципе для любого случая подойдет та матрица, что ты описал... Спасибо, что поделился ).
И еще вопрос: карта освещенности рассчитывается для каждого пиксела отдельно, следовательно при большой картинке будут тормоза. Но на твоем "рельефе" я не заметил тормозов...

2Волгоградец
Карта освещенности - расчитывается 1 раз при изменении вектора света :) (это карта освещенности каждого пикселя)

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