3 D графика в Silverlight 5 beta
description
Transcript of 3 D графика в Silverlight 5 beta
![Page 1: 3 D графика в Silverlight 5 beta](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815f14550346895dcdddd1/html5/thumbnails/1.jpg)
![Page 2: 3 D графика в Silverlight 5 beta](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815f14550346895dcdddd1/html5/thumbnails/2.jpg)
Microsoft TechDayshttp://www.techdays.ru
3D графика в Silverlight 5 beta
Виталий ДильмухаметовOogway software
![Page 3: 3 D графика в Silverlight 5 beta](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815f14550346895dcdddd1/html5/thumbnails/3.jpg)
Microsoft TechDayshttp://www.techdays.ru
Основы 3D3 координаты точки – (X,Y,Z)В Silverlight 5 – правосторонняя система координатВектор – задаёт направление и скорость движения
Z
Y
X
K(xk,yk,zk
)
A(xa,ya,za)
B(xb,yb,zb
)
C(xc,yc,zc
)
![Page 4: 3 D графика в Silverlight 5 beta](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815f14550346895dcdddd1/html5/thumbnails/4.jpg)
Microsoft TechDayshttp://www.techdays.ru
Основы 3DМодель состоит из полигоновТочка – вершина (vertex)Несколько граней – сетка (mesh)
Вершины
Контуры
Грани Полигоны Поверхности
![Page 5: 3 D графика в Silverlight 5 beta](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815f14550346895dcdddd1/html5/thumbnails/5.jpg)
Microsoft TechDayshttp://www.techdays.ru
Матрицы в 3DИмеют вид 4x4Матрица мира:
ПеремещениеВращениеМасштаб
Матрица вида:Управление камерой
Матрица проекции:Настройка проекции 3D на экран
![Page 6: 3 D графика в Silverlight 5 beta](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815f14550346895dcdddd1/html5/thumbnails/6.jpg)
Microsoft TechDayshttp://www.techdays.ru
Матрицы в 3DПреобразование модели (координат вершин)
Пространство модели
Пространство мира
Пространство вида
Пространство
проекцииПространство экрана
Матрица мира
Матрица вида
Матрица проекции
Область отображени
я
![Page 7: 3 D графика в Silverlight 5 beta](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815f14550346895dcdddd1/html5/thumbnails/7.jpg)
Microsoft TechDayshttp://www.techdays.ru
3D в Silverlight 5Основа – элемент управления DrawingSurface
Отрисовка силами GPUHLSL шейдеры версии 2.0API из XNAВстроенные эффекты (не в beta)
Библиотека XNA Math Helper
![Page 8: 3 D графика в Silverlight 5 beta](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815f14550346895dcdddd1/html5/thumbnails/8.jpg)
Microsoft TechDayshttp://www.techdays.ru
Процесс отрисовкиВершинный
шейдерПиксельный
шейдер
• Буфер вершин• Буфер индексов вершин• Матрицы
преобразования• Положение/тип
источника света
• Текстуры
![Page 9: 3 D графика в Silverlight 5 beta](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815f14550346895dcdddd1/html5/thumbnails/9.jpg)
Microsoft TechDayshttp://www.techdays.ru
ШейдерыДля написания используется HLSL
Компиляция при помощи FXC из DirectX SDKИспользуется версия 2.0 (поддержка в очень большом спектре GPU)
Вершинные шейдерыРабота с данными вершин
Пиксельные шейдерыОбработка точек результирующего изображения
![Page 10: 3 D графика в Silverlight 5 beta](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815f14550346895dcdddd1/html5/thumbnails/10.jpg)
Шаг 1: Включение 3D
Добавить в HTML:
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" ...> <param name="EnableGPUAcceleration" value="true" />
</object>
![Page 11: 3 D графика в Silverlight 5 beta](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815f14550346895dcdddd1/html5/thumbnails/11.jpg)
Шаг 2: DrawingSurface
Добавить в XAML-разметку:
<Grid x:Name="LayoutRoot" Background="Black"> <DrawingSurface Draw="OnDraw" /></Grid>
![Page 12: 3 D графика в Silverlight 5 beta](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815f14550346895dcdddd1/html5/thumbnails/12.jpg)
Шаг 3: Отрисовка
Обработчик OnDraw()public void OnDraw(Object sender, DrawEventArgs args){ // Очистка поверхности args.GraphicsDevice.Clear(...);
// Собственно отрисовка args.GraphicsDevice.DrawPrimitives(...);
// Объявить о необходимости обновить поверхность // За этим вызовом следует генерирование Draw ещё раз args.InvalidateSurface();}
![Page 13: 3 D графика в Silverlight 5 beta](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815f14550346895dcdddd1/html5/thumbnails/13.jpg)
Microsoft TechDayshttp://www.techdays.ru
Простое приложение с 3D-графикой
Демо
![Page 14: 3 D графика в Silverlight 5 beta](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815f14550346895dcdddd1/html5/thumbnails/14.jpg)
Microsoft TechDayshttp://www.techdays.ru
Важные моментыВ приложениях c 3D:
UI потокПоток отрисовки 3D (в нём выполняется обработчик Draw)
Из потока отрисовки нельзя обращаться к DependencyProperty!
Использование промежуточной модели данных, блокировки и кэширования
Анимация в 3D – посредством матричных преобразований
![Page 15: 3 D графика в Silverlight 5 beta](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815f14550346895dcdddd1/html5/thumbnails/15.jpg)
Microsoft TechDayshttp://www.techdays.ru
Важные моментыСоздание ресурсов (текстур, шейдеров и пр.) – вне обработчика Draw
Для исключения задержек при отрисовкеИспользование GraphicsDeviceManager.Current.GraphicsDevice
Поддержка смешивания цветовSilverlight использует BGRA, XNA – RGBA!
Проверка доступности 3D:GraphicsDeviceManager.Current.RenderMode Событие RenderModeChanged у GraphicsDeviceManager
![Page 16: 3 D графика в Silverlight 5 beta](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815f14550346895dcdddd1/html5/thumbnails/16.jpg)
Microsoft TechDayshttp://www.techdays.ru
Немного о будущемНе войдёт в релиз 5 версии:
Content pipeline и работа с моделямиОбработка ввода3D звукПользовательские эффектыСредства упрощения создания игр
![Page 17: 3 D графика в Silverlight 5 beta](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815f14550346895dcdddd1/html5/thumbnails/17.jpg)
Microsoft TechDayshttp://www.techdays.ru
Немного о будущемНе вошло в beta и будет добавлено:
Эффекты (BasicEffect, SkinnedEffect, Environment Map и др.)АнтиалиасингРисование на текстуре (render target texture)Управление устройствамиДоп. параметры для DrawingSurface
![Page 18: 3 D графика в Silverlight 5 beta](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815f14550346895dcdddd1/html5/thumbnails/18.jpg)
Microsoft TechDayshttp://www.techdays.ru
BabylonГрафический движокОбнаружение столкновенийBasicEffect – освещение и отражение светаАвторы: David Catuhe, Michel Rousseau
URL: http://code.msdn.microsoft.com/Babylon-3D-engine-f0404ace
![Page 19: 3 D графика в Silverlight 5 beta](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815f14550346895dcdddd1/html5/thumbnails/19.jpg)
Microsoft TechDayshttp://www.techdays.ru
3D HousebuilderЧастичная поддержка COLLADAТрансляция 2D координат мыши в 3DMIP-текстурированиеАвторы: Archetype, Inc. (http://www.archetype-inc.com/)URL: http://code.msdn.microsoft.com/3D-Housebuilder-demo-from-def4af04
![Page 20: 3 D графика в Silverlight 5 beta](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815f14550346895dcdddd1/html5/thumbnails/20.jpg)
Microsoft TechDayshttp://www.techdays.ru
Silverlight 3D Model Importer Импорт моделей
из популярных форматов с помощью XNAАнимированные моделиОсвещение и текстуры
Автор: Simon FerquelURL: http://sl3dmi.codeplex.com/
![Page 21: 3 D графика в Silverlight 5 beta](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815f14550346895dcdddd1/html5/thumbnails/21.jpg)
Microsoft TechDayshttp://www.techdays.ru
BalderЕсть alpha-версия под Silverlight 5 betahttp://balder.codeplex.com/
![Page 22: 3 D графика в Silverlight 5 beta](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815f14550346895dcdddd1/html5/thumbnails/22.jpg)
Microsoft TechDayshttp://www.techdays.ru
Примеры с MIX11Набор исходных кодов с демонстраций MIX11, посвященных 3D в Silverlight 5 betaВсе ссылки в блоге Aaron Oneal:
http://aarononeal.info/?p=125
![Page 23: 3 D графика в Silverlight 5 beta](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815f14550346895dcdddd1/html5/thumbnails/23.jpg)
Microsoft TechDayshttp://www.techdays.ru
Полезные вещиИнструменты
Autodesk FBX Converter 2012NVidia FX ComposerMicrosoft DirectX SDK
Материалыhttp://xnadev.ruhttp://create.msdn.com
![Page 24: 3 D графика в Silverlight 5 beta](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815f14550346895dcdddd1/html5/thumbnails/24.jpg)