SlideShare a Scribd company logo

WebGL - создание 3D графики в браузере

•Download as PPTX, PDF•
•
Студия Атвинта
Студия Атвинта

Доклад WebGL - создание 3D графики в браузере

Technology
1 of 23
WebGL Докладчик: Константин
3D
Из чего состоит 3D
Видеокарты
Видеокарты
Шейдеры
Нам понадобится Canvas JavaScript WebGL
Структура HTML документа
JS файл
Шейдеры на практике
Немного добавим картинки
Инициализируем буфер
Отрисовка сцены
Загрузка шейдеров
Что может получиться в итоге
Конфигуратор обуви http://www.madeinme.es
Демонстрация машины http://examples.viscircle.com/VWPolo/index.html
Поддержка браузерами
3D Редакторы Autodesk 3ds Max Autodesk Maya SketchUp Blender
Полезные ссылки https://www.blend4web.com https://developer.mozilla.org/ru/docs/Web/API/WebGL_API https://www.khronos.org/webgl http://webglreport.com

Recommended

nw.js введение в кросс-платформенные десктопные приложения на javascript (mo...
nw.js введение в кросс-платформенные десктопные приложения на javascript (mo...nw.js введение в кросс-платформенные десктопные приложения на javascript (mo...
nw.js введение в кросс-платформенные десктопные приложения на javascript (mo...Kirill Danilov
 
Bootstrap3 basics
Bootstrap3 basicsBootstrap3 basics
Bootstrap3 basicsDevOWL Meetup
 
Trainspotting Transporting: RabbitMQ, Akka.NET, Rx, MVI, Cycle.js
Trainspotting Transporting: RabbitMQ, Akka.NET, Rx, MVI, Cycle.jsTrainspotting Transporting: RabbitMQ, Akka.NET, Rx, MVI, Cycle.js
Trainspotting Transporting: RabbitMQ, Akka.NET, Rx, MVI, Cycle.jsDevOWL Meetup
 
MVC in JavaScript
MVC in JavaScriptMVC in JavaScript
MVC in JavaScriptAlexander Tarasyuk
 
Desktop app based on node js and html5
Desktop app based on node js and html5Desktop app based on node js and html5
Desktop app based on node js and html5Provectus
 
"nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", ...
"nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", ..."nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", ...
"nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", ...MoscowJS
 
#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил Реенко
#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил Реенко#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил Реенко
#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил РеенкоJSib
 
Lviv Euro Drupal Camp 2015_Как подружить дизайнеров и Drupal-разработчиков
Lviv Euro Drupal Camp 2015_Как подружить дизайнеров и Drupal-разработчиковLviv Euro Drupal Camp 2015_Как подружить дизайнеров и Drupal-разработчиков
Lviv Euro Drupal Camp 2015_Как подружить дизайнеров и Drupal-разработчиковdeWeb
 

Recommended

nw.js введение в кросс-платформенные десктопные приложения на javascript (mo...
nw.js введение в кросс-платформенные десктопные приложения на javascript (mo...nw.js введение в кросс-платформенные десктопные приложения на javascript (mo...
nw.js введение в кросс-платформенные десктопные приложения на javascript (mo...Kirill Danilov
 
Bootstrap3 basics
Bootstrap3 basicsBootstrap3 basics
Bootstrap3 basicsDevOWL Meetup
 
Trainspotting Transporting: RabbitMQ, Akka.NET, Rx, MVI, Cycle.js
Trainspotting Transporting: RabbitMQ, Akka.NET, Rx, MVI, Cycle.jsTrainspotting Transporting: RabbitMQ, Akka.NET, Rx, MVI, Cycle.js
Trainspotting Transporting: RabbitMQ, Akka.NET, Rx, MVI, Cycle.jsDevOWL Meetup
 
MVC in JavaScript
MVC in JavaScriptMVC in JavaScript
MVC in JavaScriptAlexander Tarasyuk
 
Desktop app based on node js and html5
Desktop app based on node js and html5Desktop app based on node js and html5
Desktop app based on node js and html5Provectus
 
"nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", ...
"nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", ..."nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", ...
"nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", ...MoscowJS
 
#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил Реенко
#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил Реенко#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил Реенко
#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил РеенкоJSib
 
Lviv Euro Drupal Camp 2015_Как подружить дизайнеров и Drupal-разработчиков
Lviv Euro Drupal Camp 2015_Как подружить дизайнеров и Drupal-разработчиковLviv Euro Drupal Camp 2015_Как подружить дизайнеров и Drupal-разработчиков
Lviv Euro Drupal Camp 2015_Как подружить дизайнеров и Drupal-разработчиковdeWeb
 
SubmitJS: Vue.js - make frontend developement great again. Andrii Grachov
SubmitJS: Vue.js - make frontend developement great again. Andrii GrachovSubmitJS: Vue.js - make frontend developement great again. Andrii Grachov
SubmitJS: Vue.js - make frontend developement great again. Andrii GrachovBinary Studio
 
Secr15 разработка кросс платформенных десктоп приложений nw.js
Secr15 разработка кросс платформенных десктоп приложений nw.jsSecr15 разработка кросс платформенных десктоп приложений nw.js
Secr15 разработка кросс платформенных десктоп приложений nw.jsKirill Danilov
 
Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)
Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)
Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)Ontico
 
МАПО 2013 Лекция 03 Программирование Blockly
МАПО 2013 Лекция 03 Программирование BlocklyМАПО 2013 Лекция 03 Программирование Blockly
МАПО 2013 Лекция 03 Программирование BlocklyОлег Гудаев
 
Основы HTML - шесть лет спустя
Основы HTML - шесть лет спустяОсновы HTML - шесть лет спустя
Основы HTML - шесть лет спустяAlexander Babich
 
МАПО 2013 Лекция 04 Фабрика Blockly
МАПО 2013 Лекция 04 Фабрика BlocklyМАПО 2013 Лекция 04 Фабрика Blockly
МАПО 2013 Лекция 04 Фабрика BlocklyОлег Гудаев
 
Lime.JS
Lime.JSLime.JS
Lime.JSPavlo Iuriichuk
 
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...Ontico
 
Юлія Снітко — Як подружити дизайнерів і Drupal розробників. Досвід ефективної...
Юлія Снітко — Як подружити дизайнерів і Drupal розробників. Досвід ефективної...Юлія Снітко — Як подружити дизайнерів і Drupal розробників. Досвід ефективної...
Юлія Снітко — Як подружити дизайнерів і Drupal розробників. Досвід ефективної...LEDC 2016
 
«Android Data Binding». Вадим Котов
«Android Data Binding». Вадим Котов«Android Data Binding». Вадим Котов
«Android Data Binding». Вадим КотовDataArt
 
Web app syncronizations, Sockets, tricks and hacks
Web app syncronizations, Sockets, tricks and hacks Web app syncronizations, Sockets, tricks and hacks
Web app syncronizations, Sockets, tricks and hacks Egor Malkevich
 
Игорь Лабутин «Продвинутое использование NuGet и MSBuild»
Игорь Лабутин «Продвинутое использование NuGet и MSBuild»Игорь Лабутин «Продвинутое использование NuGet и MSBuild»
Игорь Лабутин «Продвинутое использование NuGet и MSBuild»SpbDotNet Community
 
Ruby gui
Ruby guiRuby gui
Ruby guiAlexander Kirillov
 
Cacoo
CacooCacoo
CacooKaterina Gruzdeva
 
Mobile Web Apps development essentials
Mobile Web Apps development essentialsMobile Web Apps development essentials
Mobile Web Apps development essentialsPavlo Iuriichuk
 
Ember start-zero
Ember start-zeroEmber start-zero
Ember start-zeroArtem Suschev
 
Unity: WebGL и IL2CPP — будущее скриптинга в Unity»
Unity: WebGL и IL2CPP — будущее скриптинга в Unity»Unity: WebGL и IL2CPP — будущее скриптинга в Unity»
Unity: WebGL и IL2CPP — будущее скриптинга в Unity»DevGAMM Conference
 
Будущее WordPress (SPB, 2014)
Будущее WordPress (SPB, 2014)Будущее WordPress (SPB, 2014)
Будущее WordPress (SPB, 2014)Konstantin Kovshenin
 
«Cg&vfx в кинематографе и рекламе» 30 мая г. харьков
«Cg&vfx в кинематографе и рекламе» 30 мая г. харьков«Cg&vfx в кинематографе и рекламе» 30 мая г. харьков
«Cg&vfx в кинематографе и рекламе» 30 мая г. харьковRebel Film TV
 
Алексей Исайченко
Алексей ИсайченкоАлексей Исайченко
Алексей Исайченкоapps4allru
 
Autodesk 3ds max
Autodesk 3ds maxAutodesk 3ds max
Autodesk 3ds maxSergey Borisov
 
Инфографика
ИнфографикаИнфографика
ИнфографикаLazat Takyrbashova
 

More Related Content

What's hot

SubmitJS: Vue.js - make frontend developement great again. Andrii Grachov
SubmitJS: Vue.js - make frontend developement great again. Andrii GrachovSubmitJS: Vue.js - make frontend developement great again. Andrii Grachov
SubmitJS: Vue.js - make frontend developement great again. Andrii GrachovBinary Studio
 
Secr15 разработка кросс платформенных десктоп приложений nw.js
Secr15 разработка кросс платформенных десктоп приложений nw.jsSecr15 разработка кросс платформенных десктоп приложений nw.js
Secr15 разработка кросс платформенных десктоп приложений nw.jsKirill Danilov
 
Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)
Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)
Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)Ontico
 
МАПО 2013 Лекция 03 Программирование Blockly
МАПО 2013 Лекция 03 Программирование BlocklyМАПО 2013 Лекция 03 Программирование Blockly
МАПО 2013 Лекция 03 Программирование BlocklyОлег Гудаев
 
Основы HTML - шесть лет спустя
Основы HTML - шесть лет спустяОсновы HTML - шесть лет спустя
Основы HTML - шесть лет спустяAlexander Babich
 
МАПО 2013 Лекция 04 Фабрика Blockly
МАПО 2013 Лекция 04 Фабрика BlocklyМАПО 2013 Лекция 04 Фабрика Blockly
МАПО 2013 Лекция 04 Фабрика BlocklyОлег Гудаев
 
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...Ontico
 
Юлія Снітко — Як подружити дизайнерів і Drupal розробників. Досвід ефективної...
Юлія Снітко — Як подружити дизайнерів і Drupal розробників. Досвід ефективної...Юлія Снітко — Як подружити дизайнерів і Drupal розробників. Досвід ефективної...
Юлія Снітко — Як подружити дизайнерів і Drupal розробників. Досвід ефективної...LEDC 2016
 
«Android Data Binding». Вадим Котов
«Android Data Binding». Вадим Котов«Android Data Binding». Вадим Котов
«Android Data Binding». Вадим КотовDataArt
 
Web app syncronizations, Sockets, tricks and hacks
Web app syncronizations, Sockets, tricks and hacks Web app syncronizations, Sockets, tricks and hacks
Web app syncronizations, Sockets, tricks and hacks Egor Malkevich
 
Игорь Лабутин «Продвинутое использование NuGet и MSBuild»
Игорь Лабутин «Продвинутое использование NuGet и MSBuild»Игорь Лабутин «Продвинутое использование NuGet и MSBuild»
Игорь Лабутин «Продвинутое использование NuGet и MSBuild»SpbDotNet Community
 
Mobile Web Apps development essentials
Mobile Web Apps development essentialsMobile Web Apps development essentials
Mobile Web Apps development essentialsPavlo Iuriichuk
 
Unity: WebGL и IL2CPP — будущее скриптинга в Unity»
Unity: WebGL и IL2CPP — будущее скриптинга в Unity»Unity: WebGL и IL2CPP — будущее скриптинга в Unity»
Unity: WebGL и IL2CPP — будущее скриптинга в Unity»DevGAMM Conference
 
Будущее WordPress (SPB, 2014)
Будущее WordPress (SPB, 2014)Будущее WordPress (SPB, 2014)
Будущее WordPress (SPB, 2014)Konstantin Kovshenin
 

What's hot (18)

SubmitJS: Vue.js - make frontend developement great again. Andrii Grachov
SubmitJS: Vue.js - make frontend developement great again. Andrii GrachovSubmitJS: Vue.js - make frontend developement great again. Andrii Grachov
SubmitJS: Vue.js - make frontend developement great again. Andrii Grachov
 
Secr15 разработка кросс платформенных десктоп приложений nw.js
Secr15 разработка кросс платформенных десктоп приложений nw.jsSecr15 разработка кросс платформенных десктоп приложений nw.js
Secr15 разработка кросс платформенных десктоп приложений nw.js
 
Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)
Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)
Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)
 
МАПО 2013 Лекция 03 Программирование Blockly
МАПО 2013 Лекция 03 Программирование BlocklyМАПО 2013 Лекция 03 Программирование Blockly
МАПО 2013 Лекция 03 Программирование Blockly
 
Основы HTML - шесть лет спустя
Основы HTML - шесть лет спустяОсновы HTML - шесть лет спустя
Основы HTML - шесть лет спустя
 
МАПО 2013 Лекция 04 Фабрика Blockly
МАПО 2013 Лекция 04 Фабрика BlocklyМАПО 2013 Лекция 04 Фабрика Blockly
МАПО 2013 Лекция 04 Фабрика Blockly
 
Lime.JS
Lime.JSLime.JS
Lime.JS
 
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...
 
Юлія Снітко — Як подружити дизайнерів і Drupal розробників. Досвід ефективної...
Юлія Снітко — Як подружити дизайнерів і Drupal розробників. Досвід ефективної...Юлія Снітко — Як подружити дизайнерів і Drupal розробників. Досвід ефективної...
Юлія Снітко — Як подружити дизайнерів і Drupal розробників. Досвід ефективної...
 
«Android Data Binding». Вадим Котов
«Android Data Binding». Вадим Котов«Android Data Binding». Вадим Котов
«Android Data Binding». Вадим Котов
 
Web app syncronizations, Sockets, tricks and hacks
Web app syncronizations, Sockets, tricks and hacks Web app syncronizations, Sockets, tricks and hacks
Web app syncronizations, Sockets, tricks and hacks
 
Игорь Лабутин «Продвинутое использование NuGet и MSBuild»
Игорь Лабутин «Продвинутое использование NuGet и MSBuild»Игорь Лабутин «Продвинутое использование NuGet и MSBuild»
Игорь Лабутин «Продвинутое использование NuGet и MSBuild»
 
Ruby gui
Ruby guiRuby gui
Ruby gui
 
Cacoo
CacooCacoo
Cacoo
 
Mobile Web Apps development essentials
Mobile Web Apps development essentialsMobile Web Apps development essentials
Mobile Web Apps development essentials
 
Ember start-zero
Ember start-zeroEmber start-zero
Ember start-zero
 
Unity: WebGL и IL2CPP — будущее скриптинга в Unity»
Unity: WebGL и IL2CPP — будущее скриптинга в Unity»Unity: WebGL и IL2CPP — будущее скриптинга в Unity»
Unity: WebGL и IL2CPP — будущее скриптинга в Unity»
 
Будущее WordPress (SPB, 2014)
Будущее WordPress (SPB, 2014)Будущее WordPress (SPB, 2014)
Будущее WordPress (SPB, 2014)
 

Viewers also liked

«Cg&vfx в кинематографе и рекламе» 30 мая г. харьков
«Cg&vfx в кинематографе и рекламе» 30 мая г. харьков«Cg&vfx в кинематографе и рекламе» 30 мая г. харьков
«Cg&vfx в кинематографе и рекламе» 30 мая г. харьковRebel Film TV
 
Алексей Исайченко
Алексей ИсайченкоАлексей Исайченко
Алексей Исайченкоapps4allru
 
пособие Inventor
пособие Inventorпособие Inventor
пособие Inventortatiana720
 
AU 2015: Autodesk Revit - волшебный инструмент для архитектуры, дизайна и рек...
AU 2015: Autodesk Revit - волшебный инструмент для архитектуры, дизайна и рек...AU 2015: Autodesk Revit - волшебный инструмент для архитектуры, дизайна и рек...
AU 2015: Autodesk Revit - волшебный инструмент для архитектуры, дизайна и рек...Alexander Vysotskiy
 
3д моделирование и 3д-печать
3д моделирование и 3д-печать3д моделирование и 3д-печать
3д моделирование и 3д-печатьAnton Moiseev
 
OpenSCAD: трёхмерное моделирование для школьников и программистов
OpenSCAD: трёхмерное моделирование для школьников и программистовOpenSCAD: трёхмерное моделирование для школьников и программистов
OpenSCAD: трёхмерное моделирование для школьников и программистовAnton Moiseev
 
3 D Maya Introduction
3 D Maya Introduction3 D Maya Introduction
3 D Maya Introductiontsshivshankar
 
WebGL - It's GO Time
WebGL - It's GO TimeWebGL - It's GO Time
WebGL - It's GO TimeTony Parisi
 

Viewers also liked (11)

«Cg&vfx в кинематографе и рекламе» 30 мая г. харьков
«Cg&vfx в кинематографе и рекламе» 30 мая г. харьков«Cg&vfx в кинематографе и рекламе» 30 мая г. харьков
«Cg&vfx в кинематографе и рекламе» 30 мая г. харьков
 
Алексей Исайченко
Алексей ИсайченкоАлексей Исайченко
Алексей Исайченко
 
Autodesk 3ds max
Autodesk 3ds maxAutodesk 3ds max
Autodesk 3ds max
 
Инфографика
ИнфографикаИнфографика
Инфографика
 
пособие Inventor
пособие Inventorпособие Inventor
пособие Inventor
 
AU 2015: Autodesk Revit - волшебный инструмент для архитектуры, дизайна и рек...
AU 2015: Autodesk Revit - волшебный инструмент для архитектуры, дизайна и рек...AU 2015: Autodesk Revit - волшебный инструмент для архитектуры, дизайна и рек...
AU 2015: Autodesk Revit - волшебный инструмент для архитектуры, дизайна и рек...
 
3д моделирование и 3д-печать
3д моделирование и 3д-печать3д моделирование и 3д-печать
3д моделирование и 3д-печать
 
OpenSCAD: трёхмерное моделирование для школьников и программистов
OpenSCAD: трёхмерное моделирование для школьников и программистовOpenSCAD: трёхмерное моделирование для школьников и программистов
OpenSCAD: трёхмерное моделирование для школьников и программистов
 
3 D Maya Introduction
3 D Maya Introduction3 D Maya Introduction
3 D Maya Introduction
 
Intro to maya
Intro to mayaIntro to maya
Intro to maya
 
WebGL - It's GO Time
WebGL - It's GO TimeWebGL - It's GO Time
WebGL - It's GO Time
 

WebGL - создание 3D графики в браузере