1. Microsoft Developer Tour Технологическая экспедиция msdevtour.ru

2. Евгений Шкляр Эксперт по стратегическим технологиям, Microsoft v-evshkl@microsoft.com || vk.com/shkluar Работа с WebGL с использованием библиотеки Babylon.js

3. О чем это все? WebGL в современных браузерах Использование Babylon.JS Зачем, как и почему нам нужен движок для рендеринга сцен в реальном времени Демонстрации Нужно больше демонстраций! 3D-приложения в Windows Store Демо, игры и многое другое

4. «640K ought to be enough for anybody»

5. Цели Получить представление о разработке приложений на WebGL Познакомиться с базовыми возможностями Babylon.JS Научиться быстро создавать 3D-приложения для Windows Store на WebGL

6. WebGL JavaScript API На основе OpenGL ES 2.0 Стандарт от Khronos Group

7. Использование WebGL напрямую Нужно следить за всем, кроме рендеринга, то есть: Создавать геометрию и топологию Управлять ресурсами и текстурами Управлять Render Loop’ом Писать код шейдеров

8. Babylon.js это: Релиз в месяц 28 авторов 33 релиза 592 коммита 14000+ строк кода Более 120 файлов кода Более 250 форков 1.3GB примеров 640 KB

9. Babylon.js Движок на основе WebGL Весит 640 килобайт Для подключения хватит двух строк кода

10. Как использовать Babylon.JS? Open source project (Available on Github) http://www.babylonjs.com https://github.com/babylonjs/babylon.js Подключить один файл для начала работы Чтобы запустить движок: var engine = new BABYLON.Engine(canvas, true);

11. Как использовать Babylon.JS? ВСЕ СЛОЖНЫЕ ШТУКИ СТАНОВЯТСЯ ПРОСТЫМИ УПРАВЛЕНИЕ РЕНДЕРОМ В ОДНУ СТРОКУ: var scene = new BABYLON.Scene(engine); var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, -10), scene); var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 100, 100), scene); var sphere = BABYLON.Mesh.createSphere("Sphere", 16, 3, scene); engine.runRenderLoop(function() { scene.render(); });

12. Complete scene graph with lights, cameras, materials and meshes Collisions engine Physics engine Scene picking Antialiasing Animations engine Audio engine Particles Systems Sprites and 2D layers Optimizations egngines: Frustum clippin Sub-meshes clipping Hardware scaling Selection octrees Offline mode via IndexedDB Incremental loading Binary compressed format Hardware accelerated instances Level of details (LOD) Automatic scene optimizer Debug layer to help you optimize and debug scenes Standard material is a per pixel material that supports: Diffuse lightning and texture Ambient lightning and texture Specular lightning Up to 4 lights Custom materials Custom shaders Skybox Vertex color Bones Procedural textures Special FX Fog Billboarding Fullscreen mode Post-processes (blur, refraction, black'n'white, fxaa, customs...) Multi-views Textures: Render target textures Dynamic textures (canvas) Video textures Compressed (DDS) textures TGA textures А что он может?

13. Что нужно? Базовая комплектация Свежий браузер + Visual Studio Babylon.JS Playground http://www.babylonjs-playground.com/

14. BABYLON.JS Meshes Sphere Box Plane Cylinder Torus TorusKnot Lines

15. Ground & Ground From HeightMap + =

16. Освещение в BABYLON.JS HemisphericLight PointLightSpotLight DirectionalLight

17. Microsoft Developer Tour #MSDevTour DEMO Babylon.JS “Hello World”

18. Microsoft Developer Tour #MSDevTour DEMO Babylon.JS Playground http://www.babylonjs-playground.com/#

19. Microsoft Developer Tour #MSDevTour DEMO Babylon.JS Blender Export

20. Microsoft Developer Tour #MSDevTour DEMO Babylon.JS Sandbox

21. Microsoft Developer Tour #MSDevTour DEMO Сборка WebGL-проекта под Windows Store

22. Microsoft Developer Tour Технологическая экспедиция #msdevtour

23. ©2015 Microsoft Corporation. All rights reserved. Microsoft, Windows, Office, Azure, System Center, Dynamics and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.