SlideShare a Scribd company logo

Webgl para JavaScripters

G
G

Webgl para JavaScripters

1 of 42
Download to read offline
WebGL para JavaScripters



                  Luz Caballero
Luz Caballero - @gerbille

        Web Opener
Agenda
• Que es WebGL?
• Para qué se puede usar?
• Cómo funciona?
• Lo que hay que saber para empezar
• Un poco de código
Qué es WebGL ?
OpenGL   OpenGL ES   WebGL
desktop   mobile

Recommended

Leaving Flatland: getting started with WebGL
Leaving Flatland: getting started with WebGLLeaving Flatland: getting started with WebGL
Leaving Flatland: getting started with WebGLgerbille
 
5 tips for your HTML5 games
5 tips for your HTML5 games5 tips for your HTML5 games
5 tips for your HTML5 gamesErnesto Jiménez
 
3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]
3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]
3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]JavaScript Meetup HCMC
 
AngularJS $Provide Service
AngularJS $Provide ServiceAngularJS $Provide Service
AngularJS $Provide ServiceEyal Vardi
 
AngularJS Services
AngularJS ServicesAngularJS Services
AngularJS ServicesEyal Vardi
 
Barcamp GoogleMaps - praktické ukázky kódu
Barcamp GoogleMaps - praktické ukázky kóduBarcamp GoogleMaps - praktické ukázky kódu
Barcamp GoogleMaps - praktické ukázky kóduMilos Lenoch
 
The Canvas Tag
The Canvas TagThe Canvas Tag
The Canvas TagDave Ross
 

More Related Content

What's hot

AngularJS Routing
AngularJS RoutingAngularJS Routing
AngularJS RoutingEyal Vardi
 
Object-Oriented Javascript
Object-Oriented JavascriptObject-Oriented Javascript
Object-Oriented Javascriptkvangork
 
Integrating Angular js & three.js
Integrating Angular js & three.jsIntegrating Angular js & three.js
Integrating Angular js & three.jsJosh Staples
 
Javascript is your (Auto)mate
Javascript is your (Auto)mateJavascript is your (Auto)mate
Javascript is your (Auto)mateCodemotion
 
The next step, part 2
The next step, part 2The next step, part 2
The next step, part 2Pat Cavit
 
Developing Web Graphics with WebGL
Developing Web Graphics with WebGLDeveloping Web Graphics with WebGL
Developing Web Graphics with WebGLTony Parisi
 
Shibuya.js Lightning Talks
Shibuya.js Lightning TalksShibuya.js Lightning Talks
Shibuya.js Lightning Talksjeresig
 
AngularJS Compile Process
AngularJS Compile ProcessAngularJS Compile Process
AngularJS Compile ProcessEyal Vardi
 
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...Sencha
 
Dion Almaer & Ben Galbraith - Build Once, Deploy Everywhere
Dion Almaer & Ben Galbraith - Build Once, Deploy EverywhereDion Almaer & Ben Galbraith - Build Once, Deploy Everywhere
Dion Almaer & Ben Galbraith - Build Once, Deploy EverywhereCarsonified Team
 
AngularJS Animations
AngularJS AnimationsAngularJS Animations
AngularJS AnimationsEyal Vardi
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with WingsRemy Sharp
 
(ARC307) Infrastructure as Code | AWS re:Invent 2014
(ARC307) Infrastructure as Code | AWS re:Invent 2014(ARC307) Infrastructure as Code | AWS re:Invent 2014
(ARC307) Infrastructure as Code | AWS re:Invent 2014Amazon Web Services
 
Taming that client side mess with Backbone.js
Taming that client side mess with Backbone.jsTaming that client side mess with Backbone.js
Taming that client side mess with Backbone.jsJarod Ferguson
 
How Kris Writes Symfony Apps
How Kris Writes Symfony AppsHow Kris Writes Symfony Apps
How Kris Writes Symfony AppsKris Wallsmith
 
Processing and Processing.js
Processing and Processing.jsProcessing and Processing.js
Processing and Processing.jsjeresig
 
CQRS and Event Sourcing in a Symfony application
CQRS and Event Sourcing in a Symfony applicationCQRS and Event Sourcing in a Symfony application
CQRS and Event Sourcing in a Symfony applicationSamuel ROZE
 

What's hot (20)

AngularJS Routing
AngularJS RoutingAngularJS Routing
AngularJS Routing
 
Object-Oriented Javascript
Object-Oriented JavascriptObject-Oriented Javascript
Object-Oriented Javascript
 
Integrating Angular js & three.js
Integrating Angular js & three.jsIntegrating Angular js & three.js
Integrating Angular js & three.js
 
Javascript is your (Auto)mate
Javascript is your (Auto)mateJavascript is your (Auto)mate
Javascript is your (Auto)mate
 
The next step, part 2
The next step, part 2The next step, part 2
The next step, part 2
 
Developing Web Graphics with WebGL
Developing Web Graphics with WebGLDeveloping Web Graphics with WebGL
Developing Web Graphics with WebGL
 
Shibuya.js Lightning Talks
Shibuya.js Lightning TalksShibuya.js Lightning Talks
Shibuya.js Lightning Talks
 
AngularJS Compile Process
AngularJS Compile ProcessAngularJS Compile Process
AngularJS Compile Process
 
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
 
Dion Almaer & Ben Galbraith - Build Once, Deploy Everywhere
Dion Almaer & Ben Galbraith - Build Once, Deploy EverywhereDion Almaer & Ben Galbraith - Build Once, Deploy Everywhere
Dion Almaer & Ben Galbraith - Build Once, Deploy Everywhere
 
Cyclejs introduction
Cyclejs introductionCyclejs introduction
Cyclejs introduction
 
AngularJS Animations
AngularJS AnimationsAngularJS Animations
AngularJS Animations
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings
 
jQuery: Events, Animation, Ajax
jQuery: Events, Animation, AjaxjQuery: Events, Animation, Ajax
jQuery: Events, Animation, Ajax
 
What's new in iOS9
What's new in iOS9What's new in iOS9
What's new in iOS9
 
(ARC307) Infrastructure as Code | AWS re:Invent 2014
(ARC307) Infrastructure as Code | AWS re:Invent 2014(ARC307) Infrastructure as Code | AWS re:Invent 2014
(ARC307) Infrastructure as Code | AWS re:Invent 2014
 
Taming that client side mess with Backbone.js
Taming that client side mess with Backbone.jsTaming that client side mess with Backbone.js
Taming that client side mess with Backbone.js
 
How Kris Writes Symfony Apps
How Kris Writes Symfony AppsHow Kris Writes Symfony Apps
How Kris Writes Symfony Apps
 
Processing and Processing.js
Processing and Processing.jsProcessing and Processing.js
Processing and Processing.js
 
CQRS and Event Sourcing in a Symfony application
CQRS and Event Sourcing in a Symfony applicationCQRS and Event Sourcing in a Symfony application
CQRS and Event Sourcing in a Symfony application
 

Viewers also liked

творчество братьев леннен
творчество братьев леннентворчество братьев леннен
творчество братьев ленненandry2517
 
Des interfaces futuristes utilisant des APIs web
Des interfaces futuristes utilisant des APIs webDes interfaces futuristes utilisant des APIs web
Des interfaces futuristes utilisant des APIs webgerbille
 
Speed in the Opera mobile browsers
Speed in the Opera mobile browsersSpeed in the Opera mobile browsers
Speed in the Opera mobile browsersgerbille
 
Speed in the Opera mobile browsers
Speed in the Opera mobile browsersSpeed in the Opera mobile browsers
Speed in the Opera mobile browsersgerbille
 
Growth model 2,5% de sodio
Growth model 2,5% de sodioGrowth model 2,5% de sodio
Growth model 2,5% de sodioDiana Raimondo
 
Growth model con 0,5% de sodio
Growth model  con 0,5% de sodioGrowth model  con 0,5% de sodio
Growth model con 0,5% de sodioDiana Raimondo
 
What's new in the Opera mobile browsers
What's new in the Opera mobile browsersWhat's new in the Opera mobile browsers
What's new in the Opera mobile browsersgerbille
 
Device dis(orientation)?
Device dis(orientation)?Device dis(orientation)?
Device dis(orientation)?gerbille
 

Viewers also liked (8)

творчество братьев леннен
творчество братьев леннентворчество братьев леннен
творчество братьев леннен
 
Des interfaces futuristes utilisant des APIs web
Des interfaces futuristes utilisant des APIs webDes interfaces futuristes utilisant des APIs web
Des interfaces futuristes utilisant des APIs web
 
Speed in the Opera mobile browsers
Speed in the Opera mobile browsersSpeed in the Opera mobile browsers
Speed in the Opera mobile browsers
 
Speed in the Opera mobile browsers
Speed in the Opera mobile browsersSpeed in the Opera mobile browsers
Speed in the Opera mobile browsers
 
Growth model 2,5% de sodio
Growth model 2,5% de sodioGrowth model 2,5% de sodio
Growth model 2,5% de sodio
 
Growth model con 0,5% de sodio
Growth model  con 0,5% de sodioGrowth model  con 0,5% de sodio
Growth model con 0,5% de sodio
 
What's new in the Opera mobile browsers
What's new in the Opera mobile browsersWhat's new in the Opera mobile browsers
What's new in the Opera mobile browsers
 
Device dis(orientation)?
Device dis(orientation)?Device dis(orientation)?
Device dis(orientation)?
 

Similar to Webgl para JavaScripters

JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJSJavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJSphilogb
 
JavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de DatosJavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de Datosphilogb
 
SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)Oswald Campesato
 
How to build a html5 websites.v1
How to build a html5 websites.v1How to build a html5 websites.v1
How to build a html5 websites.v1Bitla Software
 
Writing Maintainable JavaScript
Writing Maintainable JavaScriptWriting Maintainable JavaScript
Writing Maintainable JavaScriptAndrew Dupont
 
HTML5 for the Silverlight Guy
HTML5 for the Silverlight GuyHTML5 for the Silverlight Guy
HTML5 for the Silverlight GuyDavid Padbury
 
From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014
From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014
From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014Verold
 
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreHTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreRemy Sharp
 
Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React Robert DeLuca
 
Creating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todayCreating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todaygerbille
 
HTML5 & The Open Web - at Nackademin
HTML5 & The Open Web -  at NackademinHTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web - at NackademinRobert Nyman
 
WebGL: GPU acceleration for the open web
WebGL: GPU acceleration for the open webWebGL: GPU acceleration for the open web
WebGL: GPU acceleration for the open webpjcozzi
 
Non Conventional Android Programming (English)
Non Conventional Android Programming (English)Non Conventional Android Programming (English)
Non Conventional Android Programming (English)Davide Cerbo
 
Non Conventional Android Programming En
Non Conventional Android Programming EnNon Conventional Android Programming En
Non Conventional Android Programming Enguest9bcef2f
 
Future of Web Apps: Google Gears
Future of Web Apps: Google GearsFuture of Web Apps: Google Gears
Future of Web Apps: Google Gearsdion
 

Similar to Webgl para JavaScripters (20)

Intro to HTML5
Intro to HTML5Intro to HTML5
Intro to HTML5
 
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJSJavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
 
JavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de DatosJavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de Datos
 
Svcc 2013-d3
Svcc 2013-d3Svcc 2013-d3
Svcc 2013-d3
 
SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)
 
Fact, Fiction, and FP
Fact, Fiction, and FPFact, Fiction, and FP
Fact, Fiction, and FP
 
WebXR if X = how?
WebXR if X = how?WebXR if X = how?
WebXR if X = how?
 
How to build a html5 websites.v1
How to build a html5 websites.v1How to build a html5 websites.v1
How to build a html5 websites.v1
 
Writing Maintainable JavaScript
Writing Maintainable JavaScriptWriting Maintainable JavaScript
Writing Maintainable JavaScript
 
HTML5 for the Silverlight Guy
HTML5 for the Silverlight GuyHTML5 for the Silverlight Guy
HTML5 for the Silverlight Guy
 
From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014
From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014
From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014
 
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreHTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
 
Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React
 
Creating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todayCreating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of today
 
HTML5 & The Open Web - at Nackademin
HTML5 & The Open Web -  at NackademinHTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web - at Nackademin
 
WebGL: GPU acceleration for the open web
WebGL: GPU acceleration for the open webWebGL: GPU acceleration for the open web
WebGL: GPU acceleration for the open web
 
Non Conventional Android Programming (English)
Non Conventional Android Programming (English)Non Conventional Android Programming (English)
Non Conventional Android Programming (English)
 
Non Conventional Android Programming En
Non Conventional Android Programming EnNon Conventional Android Programming En
Non Conventional Android Programming En
 
Future of Web Apps: Google Gears
Future of Web Apps: Google GearsFuture of Web Apps: Google Gears
Future of Web Apps: Google Gears
 
mobl
moblmobl
mobl
 

Recently uploaded

zigbee motion sensor user manual NAS-PD07B2.pdf
zigbee motion sensor user manual NAS-PD07B2.pdfzigbee motion sensor user manual NAS-PD07B2.pdf
zigbee motion sensor user manual NAS-PD07B2.pdfDomotica daVinci
 
Azure Migration Guide for IT Professionals
Azure Migration Guide for IT ProfessionalsAzure Migration Guide for IT Professionals
Azure Migration Guide for IT ProfessionalsChristine Shepherd
 
Quinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdf
Quinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdfQuinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdf
Quinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdfDomotica daVinci
 
Z-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdf
Z-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdfZ-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdf
Z-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdfDomotica daVinci
 
2024 February Patch Tuesday
2024 February Patch Tuesday2024 February Patch Tuesday
2024 February Patch TuesdayIvanti
 
Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?
Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?
Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?GleecusTechlabs1
 
Manual Eurotronic Thermostatic Valve Comry Z-Wave
Manual Eurotronic Thermostatic Valve Comry Z-WaveManual Eurotronic Thermostatic Valve Comry Z-Wave
Manual Eurotronic Thermostatic Valve Comry Z-WaveDomotica daVinci
 
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptx
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptxEvolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptx
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptxKyle Willson
 
M.Aathiraju Self Intro.docx-AD21001_____
M.Aathiraju Self Intro.docx-AD21001_____M.Aathiraju Self Intro.docx-AD21001_____
M.Aathiraju Self Intro.docx-AD21001_____Aathiraju
 
Traffic Signboard Classification with Voice alert to the driver.pptx
Traffic Signboard Classification with Voice alert to the driver.pptxTraffic Signboard Classification with Voice alert to the driver.pptx
Traffic Signboard Classification with Voice alert to the driver.pptxharimaxwell0712
 
Zi-Stick UBS Dongle ZIgbee from Aeotec manual
Zi-Stick UBS Dongle ZIgbee from  Aeotec manualZi-Stick UBS Dongle ZIgbee from  Aeotec manual
Zi-Stick UBS Dongle ZIgbee from Aeotec manualDomotica daVinci
 
Navigating the Never Normal Strategies for Portfolio Leaders
Navigating the Never Normal Strategies for Portfolio LeadersNavigating the Never Normal Strategies for Portfolio Leaders
Navigating the Never Normal Strategies for Portfolio LeadersOnePlan Solutions
 
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdfLLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdfThomas Poetter
 
A Comprehensive Theoretical Overview of Self-Driving Car Technology
A Comprehensive Theoretical Overview of Self-Driving Car TechnologyA Comprehensive Theoretical Overview of Self-Driving Car Technology
A Comprehensive Theoretical Overview of Self-Driving Car TechnologyKumar Bipin
 
CIRCLE geometry lesson 2nd quarter grade 10
CIRCLE geometry lesson 2nd quarter  grade 10CIRCLE geometry lesson 2nd quarter  grade 10
CIRCLE geometry lesson 2nd quarter grade 10RicFernandez4
 
AUGMENTED REALITY (AR) IN DAILY LIFE: EXPANDING BEYOND GAMING
AUGMENTED REALITY (AR) IN DAILY LIFE: EXPANDING BEYOND GAMINGAUGMENTED REALITY (AR) IN DAILY LIFE: EXPANDING BEYOND GAMING
AUGMENTED REALITY (AR) IN DAILY LIFE: EXPANDING BEYOND GAMINGLiveplex
 
GDSC MMCOE - ML Campaign
GDSC MMCOE - ML CampaignGDSC MMCOE - ML Campaign
GDSC MMCOE - ML CampaignLavesh Akhadkar
 
AWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user groupAWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user groupAWS Chicago
 

Recently uploaded (20)

zigbee motion sensor user manual NAS-PD07B2.pdf
zigbee motion sensor user manual NAS-PD07B2.pdfzigbee motion sensor user manual NAS-PD07B2.pdf
zigbee motion sensor user manual NAS-PD07B2.pdf
 
Azure Migration Guide for IT Professionals
Azure Migration Guide for IT ProfessionalsAzure Migration Guide for IT Professionals
Azure Migration Guide for IT Professionals
 
GTA 6.pdf
GTA 6.pdfGTA 6.pdf
GTA 6.pdf
 
Quinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdf
Quinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdfQuinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdf
Quinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdf
 
Z-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdf
Z-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdfZ-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdf
Z-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdf
 
2024 February Patch Tuesday
2024 February Patch Tuesday2024 February Patch Tuesday
2024 February Patch Tuesday
 
Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?
Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?
Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?
 
5 Tech Trend to Notice in ESG Landscape- 47Billion
5 Tech Trend to Notice in ESG Landscape- 47Billion5 Tech Trend to Notice in ESG Landscape- 47Billion
5 Tech Trend to Notice in ESG Landscape- 47Billion
 
Manual Eurotronic Thermostatic Valve Comry Z-Wave
Manual Eurotronic Thermostatic Valve Comry Z-WaveManual Eurotronic Thermostatic Valve Comry Z-Wave
Manual Eurotronic Thermostatic Valve Comry Z-Wave
 
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptx
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptxEvolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptx
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptx
 
M.Aathiraju Self Intro.docx-AD21001_____
M.Aathiraju Self Intro.docx-AD21001_____M.Aathiraju Self Intro.docx-AD21001_____
M.Aathiraju Self Intro.docx-AD21001_____
 
Traffic Signboard Classification with Voice alert to the driver.pptx
Traffic Signboard Classification with Voice alert to the driver.pptxTraffic Signboard Classification with Voice alert to the driver.pptx
Traffic Signboard Classification with Voice alert to the driver.pptx
 
Zi-Stick UBS Dongle ZIgbee from Aeotec manual
Zi-Stick UBS Dongle ZIgbee from  Aeotec manualZi-Stick UBS Dongle ZIgbee from  Aeotec manual
Zi-Stick UBS Dongle ZIgbee from Aeotec manual
 
Navigating the Never Normal Strategies for Portfolio Leaders
Navigating the Never Normal Strategies for Portfolio LeadersNavigating the Never Normal Strategies for Portfolio Leaders
Navigating the Never Normal Strategies for Portfolio Leaders
 
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdfLLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
 
A Comprehensive Theoretical Overview of Self-Driving Car Technology
A Comprehensive Theoretical Overview of Self-Driving Car TechnologyA Comprehensive Theoretical Overview of Self-Driving Car Technology
A Comprehensive Theoretical Overview of Self-Driving Car Technology
 
CIRCLE geometry lesson 2nd quarter grade 10
CIRCLE geometry lesson 2nd quarter  grade 10CIRCLE geometry lesson 2nd quarter  grade 10
CIRCLE geometry lesson 2nd quarter grade 10
 
AUGMENTED REALITY (AR) IN DAILY LIFE: EXPANDING BEYOND GAMING
AUGMENTED REALITY (AR) IN DAILY LIFE: EXPANDING BEYOND GAMINGAUGMENTED REALITY (AR) IN DAILY LIFE: EXPANDING BEYOND GAMING
AUGMENTED REALITY (AR) IN DAILY LIFE: EXPANDING BEYOND GAMING
 
GDSC MMCOE - ML Campaign
GDSC MMCOE - ML CampaignGDSC MMCOE - ML Campaign
GDSC MMCOE - ML Campaign
 
AWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user groupAWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user group
 

Webgl para JavaScripters

  • 1. WebGL para JavaScripters Luz Caballero
  • 2. Luz Caballero - @gerbille Web Opener
  • 3. Agenda • Que es WebGL? • Para qué se puede usar? • Cómo funciona? • Lo que hay que saber para empezar • Un poco de código
  • 5. OpenGL OpenGL ES WebGL
  • 6. desktop mobile
  • 7. <canvas id=‘c’ width=‘100’ height=‘100’></canvas> document.getElementById(‘c’).getContext(‘webgl’)
  • 8. Para qué se puede usar?
  • 9. Visualización de datos • Creative coding • Arte • Environments de diseño 3D • Videos de música • Graficación de funciones matemáticas • Modelado de objectos y espacios 3D • Creación de texturas • Simulaciones físicas • ...procesamiento rápido de cualquier tipo de datos
  • 12. arte
  • 16. modelado de objetos y espacios 3D
  • 22. JavaScript WebGL JS API GPU (Compiled Program)
  • 23. JavaScript WebGL JS API GLSL API Vertex Shader GLSL API Fragment Shader
  • 24. Lo que hay que saber para empezar
  • 25. The 3D scene image source: http://computer.yourdictionary.com/graphics
  • 26. Choosing a library • Three.js • PhiloGL • GLGE • J3D • TDL • ...
  • 27. desktop mobile
  • 29. Un poco de código
  • 31. <!DOCTYPE html> <html>   <head>     <title>Learning WebGL lesson 11 in PhiloGL</title>     <link href="path/to/file.css" type="text/css" rel="stylesheet" media="screen" />     <script src="path/to/PhiloGL.js"></script>     <script src="path/to/index.js"></script>   </head>            <body onload="webGLStart();">     <canvas id="lesson11-canvas" width="500" height="500"></canvas>     <!-- more html elements here... -->   </body> </html>
  • 32. function webGLStart() {   var pos, $ = function(d) { return document.getElementById(d); };        //Create moon   var moon = new PhiloGL.O3D.Sphere({     nlat: 30,     nlong: 30,     radius: 2,     textures: 'moon.gif'   });
  • 33.   //Create application   PhiloGL('lesson11-canvas', {     camera: {       position: {         x: 0, y: 0, z: -7       }     },     textures: {       src: ['moon.gif'],       parameters: [{         name: 'TEXTURE_MAG_FILTER',         value: 'LINEAR'       }, {         name: 'TEXTURE_MIN_FILTER',         value: 'LINEAR_MIPMAP_NEAREST',         generateMipmap: true       }]     },     events: {       onDragStart: function(e) {         pos = {           x: e.x,           y: e.y         };       },       onDragMove: function(e) {         var z = this.camera.position.z,         sign = Math.abs(z) / z;         moon.rotation.y += -(pos.x - e.x) / 100;         moon.rotation.x += sign * (pos.y - e.y) / 100;         moon.update();         pos.x = e.x;         pos.y = e.y;       },       onMouseWheel: function(e) {         e.stop();         var camera = this.camera;         camera.position.z += e.wheel;         camera.update();       }     },
  • 34.     onError: function() {       alert("There was an error creating the app.");     },     onLoad: function(app) {       //Unpack app properties       var gl = app.gl,       program = app.program,       scene = app.scene,       canvas = app.canvas,       camera = app.camera;       //get light config from forms     lighting = $('lighting'),     ambient = {       r: $('ambientR'),       g: $('ambientG'),       b: $('ambientB')     },     direction = {       x: $('lightDirectionX'),       y: $('lightDirectionY'),       z: $('lightDirectionZ'),       r: $('directionalR'),       g: $('directionalG'),       b: $('directionalB')     };     //Basic gl setup     gl.clearColor(0.0, 0.0, 0.0, 1.0);     gl.clearDepth(1.0);     gl.enable(gl.DEPTH_TEST);     gl.depthFunc(gl.LEQUAL);     gl.viewport(0, 0, canvas.width, canvas.height);
  • 35. //Add object to the scene     scene.add(moon);          //Draw the scene     draw();             function draw() {       //clear the screen       gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);       //Setup lighting       var lights = scene.config.lights;       lights.enable = lighting.checked;       lights.ambient = {         r: +ambient.r.value,         g: +ambient.g.value,         b: +ambient.b.value       };       lights.directional = {         color: {           r: +direction.r.value,           g: +direction.g.value,           b: +direction.b.value         },         direction: {           x: +direction.x.value,           y: +direction.y.value,           z: +direction.z.value         }       };          //render moon       scene.render();       //Animate       Fx.requestAnimationFrame(draw);       }     }   }); }
  • 37. <script>      if ( ! Detector.webgl ) Detector.addGetWebGLMessage(); var SCREEN_WIDTH = window.innerWidth; var SCREEN_HEIGHT = window.innerHeight; var FLOOR = 0; var container; var camera, scene; var webglRenderer; var zmesh, geometry; var mouseX = 0, mouseY = 0; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; document.addEventListener( 'mousemove', onDocumentMouseMove, false ); init(); animate();
  • 38. function init() {   container = document.createElement( 'div' );   document.body.appendChild( container );                // camera   camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );   camera.position.z = 75;                // scene   scene = new THREE.Scene();   // lights   var ambient = new THREE.AmbientLight( 0xffffff );   scene.add( ambient );                // more lights   var directionalLight = new THREE.DirectionalLight( 0xffeedd );   directionalLight.position.set( 0, -70, 100 ).normalize();   scene.add( directionalLight ); }
  • 39. // renderer webglRenderer = new THREE.WebGLRenderer(); webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT ); webglRenderer.domElement.style.position = "relative"; container.appendChild( webglRenderer.domElement ); // loader var loader = new THREE.JSONLoader(), loader.load( { model: "obj/church/church.js", callback: createScene } );                                           function createScene( geometry ) {   zmesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );   zmesh.position.set( 0, 16, 0 );   zmesh.scale.set( 1, 1, 1 );   scene.add( zmesh ); } function onDocumentMouseMove(event) {   mouseX = ( event.clientX - windowHalfX );   mouseY = ( event.clientY - windowHalfY ); }
  • 40. function animate() {   requestAnimationFrame( animate );   render(); } function render() {   zmesh.rotation.set(-mouseY/500 + 1, -mouseX/200, 0);   webglRenderer.render( scene, camera ); } </script>                                         
  • 41. Resources • An Introduction to WebGL @ dev.Opera • PhiloGL • PhiloGL tutorial • WebGL w/o a library @ dev.Opera • Porting 3D models to WebGL @ dev.Opera • News and resources @ the Learning WebGL blog • WebGL w/o a library @ Learning WebGL • Three.js • Three.js tutorial • WebGL FAQ • The Khronos WebGL forum • WebGL-dev mailing list