Tony Parisi provides an introduction and crash course on WebGL. The document outlines an agenda that includes introductions to WebGL, creating basic programs, graphics, animation, interaction, integrating 2D and 3D, WebGL in production, and building a racing game. It provides code examples and discusses concepts like Three.js, loading models, particle systems, and sound. The document serves as an overview and tutorial for getting started with WebGL.
Even though widget libraries for GWT exist, it’s sometimes necessary to create a widget on your own. Widget creation will confront you with challenges like GWT specifics or the way browsers work.
Participants will learn how to compose existing widgets as well as creating new ones based on DOM elements. As it is important to know how browsers behave, topics like DOM API, reflows and event propagation will be explained. But there are also GWT specific aspects, like important interfaces and classes or how to prevent code injection.
Making Games in WebGL - Aro Wierzbowski & Tomasz SzepczyńskiGrand Parade Poland
Have you ever dreamed about playing your beloved video games anywhere you want? Without the need to install anything? Just opening your web browser and jumping right into the action? With WebGL now your dreams can become reality! During the presentation we will talk about basics of WebGL and game development allowing you to start exploring and experimenting with this technology by yourself!
Presentation from Lunch&Learn prepared by Aro Wierzbowski & Tomasz Szepczyński (Grand Parade).
Портируем существующее Web-приложение в виртуальную реальность / Денис Радин ...Ontico
РИТ++ 2017, Frontend Сonf
Зал Мумбаи, 5 июня, 17:00
Тезисы:
http://frontendconf.ru/2017/abstracts/2478.html
Виртуальная реальность - мощный тренд, который до текущего момента обходил стороной веб-разработчиков. Данный доклад о том, как интегрировать существующие Web-приложения в миры виртуальной реальности, предоставляя вашим пользователям новые возможности и UX, а себе дозу фана.
Должны ли мы использовать CSS или WebGL для проброса приложения в VR?
Какие решения доступны на текущий момент, и каких ошибок стоит остерегаться?
Почему HTML так же хорош для разработки VR-интерфейсов, как и для обычного, плоского Web?
Как веб-разработчик может быть частью VR-революции?
Web Components mit Polymer und AngularJS 1.xPatrickHillert
The talk was held in Mainz at the JAX on April 21, 2016 The language is german.
„Software is eating the world“ und das moderne Web hat sicherlich einen sehr großen Anteil daran. Wie könnte aber die nächste Evolutionsstufe im Web aussehen? Ein Kandidat sind hier die Web Components, die einen sehr einfachen Einstieg in die komponentenbasierte Strukturierung von Webanwendungen bieten. Hierbei können auch einzelne Komponenten in bestehende Anwendungen integriert und nachgerüstet werden, ohne dabei das Entwickler-Know-how im konkreten Framework zu verlieren. In diesem Vortrag wird zunächst ein Überblick über den aktuellen Status quo von Web Components gegeben und anschließend beispielhaft gezeigt, wie sich Komponenten in eine bestehende AngularJS-Anwendung integrieren lassen.
Ein Ausblick auf Tooling und kommende Features rundet den Vortrag ab.
Even though widget libraries for GWT exist, it’s sometimes necessary to create a widget on your own. Widget creation will confront you with challenges like GWT specifics or the way browsers work.
Participants will learn how to compose existing widgets as well as creating new ones based on DOM elements. As it is important to know how browsers behave, topics like DOM API, reflows and event propagation will be explained. But there are also GWT specific aspects, like important interfaces and classes or how to prevent code injection.
Making Games in WebGL - Aro Wierzbowski & Tomasz SzepczyńskiGrand Parade Poland
Have you ever dreamed about playing your beloved video games anywhere you want? Without the need to install anything? Just opening your web browser and jumping right into the action? With WebGL now your dreams can become reality! During the presentation we will talk about basics of WebGL and game development allowing you to start exploring and experimenting with this technology by yourself!
Presentation from Lunch&Learn prepared by Aro Wierzbowski & Tomasz Szepczyński (Grand Parade).
Портируем существующее Web-приложение в виртуальную реальность / Денис Радин ...Ontico
РИТ++ 2017, Frontend Сonf
Зал Мумбаи, 5 июня, 17:00
Тезисы:
http://frontendconf.ru/2017/abstracts/2478.html
Виртуальная реальность - мощный тренд, который до текущего момента обходил стороной веб-разработчиков. Данный доклад о том, как интегрировать существующие Web-приложения в миры виртуальной реальности, предоставляя вашим пользователям новые возможности и UX, а себе дозу фана.
Должны ли мы использовать CSS или WebGL для проброса приложения в VR?
Какие решения доступны на текущий момент, и каких ошибок стоит остерегаться?
Почему HTML так же хорош для разработки VR-интерфейсов, как и для обычного, плоского Web?
Как веб-разработчик может быть частью VR-революции?
Web Components mit Polymer und AngularJS 1.xPatrickHillert
The talk was held in Mainz at the JAX on April 21, 2016 The language is german.
„Software is eating the world“ und das moderne Web hat sicherlich einen sehr großen Anteil daran. Wie könnte aber die nächste Evolutionsstufe im Web aussehen? Ein Kandidat sind hier die Web Components, die einen sehr einfachen Einstieg in die komponentenbasierte Strukturierung von Webanwendungen bieten. Hierbei können auch einzelne Komponenten in bestehende Anwendungen integriert und nachgerüstet werden, ohne dabei das Entwickler-Know-how im konkreten Framework zu verlieren. In diesem Vortrag wird zunächst ein Überblick über den aktuellen Status quo von Web Components gegeben und anschließend beispielhaft gezeigt, wie sich Komponenten in eine bestehende AngularJS-Anwendung integrieren lassen.
Ein Ausblick auf Tooling und kommende Features rundet den Vortrag ab.
Sara Harkousse - "Web Components: It's all rainbows and unicorns! Is it?"IT Event
Web components are a tale of four w3c specifications. They are a hot topic now. We’ve all seen big headlines, for instance, “The Web Components revolution”, “Web Components are a game changer”, “A Tectonic Shift for Web Development”, … and so many others. They are certainly exciting and promising, nevertheless, there are some factors holding them back such as performance issues and lack of browser support. Some features seems to be more hassle than they’re worth. In this talk you’ll examine web components from a pragmatic stand point. So if you want to start using web components in production, come to learn what features can you use today. Actually, despite the still short browser support, some of web components features seems to be the best choice to start with . The assessment you’ll learn is the reflection of my personal research and work on my spare time and also feedbacks from my co-workers.
Grails is an advanced web application development framework focused on rapid prototyping. It uses the Groovy language and runs on a standard JVM. This presentation will provide a hands-on introduction to using Grails and then provides examples of Grails applications. Grails is based upon a plugin architecture and several significant plugins will be described, such as the Spring Security plugin for web authentication and authorization.
This talk is geared towards users of jQuery plugins who are looking to pick the best plugins and plugin authors who would like a holistic review of existing jQuery plugins and what things to consider when making your own plugins. Marketing tactics and approaches to spreading the word about your plugin will also be discussed.
Building complex browser-based applications in Java 8 (GWT in 2016?)
The presentation contains a lot of references (link icons) but unfortunatelly, SlideShare imported the presentation in 90% correct. For the fully working presentation please consider using the link below: https://docs.google.com/presentation/d/1sDoNivyEb2lR6GMrmXsepO6fOR0QsYua7m-R8RR4DC4/edit?usp=sharing
The Google Drive presentation is also the most current one (occasionally updated).
The new polymer ecosystem makes really easy to share UI components between developers. Let's GWT take advantage of the JS ecosystem to create amazing UIs.
GWTcon Florence 2015
What Web Developers Need to Know to Develop Windows 8 AppsDoris Chen
You already have a Web app on the Internet and want to reach customers with a new, targeted experience on Windows 8. Come get practical guidance and best practices on how to reuse your Web assets. Come dive into the specifics of this exciting platform and see how you can use your Web skills to build deeply-integrated Windows apps.
◦You’ll discover how this mirrors or differs from traditional Web programming and how to harness the rich capabilities of Windows 8 through JavaScript and the Windows Runtime.
◦You'll learn practical techniques on how to access a web service, how to work with camera, and how to make live tiles, etc.
◦Expect a lot of code and demo.
This session will jump start you with everything you need to know to start building Windows 8 apps with the skills you already have.
Scalable Front-end Development with Vue.JSGalih Pratama
Are you sure your app is secure enough? Do you want to scale your app to the next level? Come and join us for the Bandung JS Meetup #11. Save the date!
Tuesday, March 27th 2018
Location : Bandung Creative Hub (Aula lt 5)
Jl Laswi No 7, Kacapiring- Bandung
We will have presentations by:
1. Galih Pratama - Head Front-end, Crowde.co on "Scalable Web Development by Vue.js"
2. Yahya Fadhlulloh - CTO, Crowde.co on "JS flaw Hackers Love to Abuse"
collective.amberjack is a plone based tool to create interactive tutorial.
These are the slides presented during this talk: http://ploneconference2010.blip.tv/file/4317469/
Ten practical ways to improve front-end performanceAndrew Rota
Conference talk presented at PHP South Coast 2017. Ten concrete ways to improve web performance, split between quick tactical wins and longer-term overarching strategies.
Sara Harkousse - "Web Components: It's all rainbows and unicorns! Is it?"IT Event
Web components are a tale of four w3c specifications. They are a hot topic now. We’ve all seen big headlines, for instance, “The Web Components revolution”, “Web Components are a game changer”, “A Tectonic Shift for Web Development”, … and so many others. They are certainly exciting and promising, nevertheless, there are some factors holding them back such as performance issues and lack of browser support. Some features seems to be more hassle than they’re worth. In this talk you’ll examine web components from a pragmatic stand point. So if you want to start using web components in production, come to learn what features can you use today. Actually, despite the still short browser support, some of web components features seems to be the best choice to start with . The assessment you’ll learn is the reflection of my personal research and work on my spare time and also feedbacks from my co-workers.
Grails is an advanced web application development framework focused on rapid prototyping. It uses the Groovy language and runs on a standard JVM. This presentation will provide a hands-on introduction to using Grails and then provides examples of Grails applications. Grails is based upon a plugin architecture and several significant plugins will be described, such as the Spring Security plugin for web authentication and authorization.
This talk is geared towards users of jQuery plugins who are looking to pick the best plugins and plugin authors who would like a holistic review of existing jQuery plugins and what things to consider when making your own plugins. Marketing tactics and approaches to spreading the word about your plugin will also be discussed.
Building complex browser-based applications in Java 8 (GWT in 2016?)
The presentation contains a lot of references (link icons) but unfortunatelly, SlideShare imported the presentation in 90% correct. For the fully working presentation please consider using the link below: https://docs.google.com/presentation/d/1sDoNivyEb2lR6GMrmXsepO6fOR0QsYua7m-R8RR4DC4/edit?usp=sharing
The Google Drive presentation is also the most current one (occasionally updated).
The new polymer ecosystem makes really easy to share UI components between developers. Let's GWT take advantage of the JS ecosystem to create amazing UIs.
GWTcon Florence 2015
What Web Developers Need to Know to Develop Windows 8 AppsDoris Chen
You already have a Web app on the Internet and want to reach customers with a new, targeted experience on Windows 8. Come get practical guidance and best practices on how to reuse your Web assets. Come dive into the specifics of this exciting platform and see how you can use your Web skills to build deeply-integrated Windows apps.
◦You’ll discover how this mirrors or differs from traditional Web programming and how to harness the rich capabilities of Windows 8 through JavaScript and the Windows Runtime.
◦You'll learn practical techniques on how to access a web service, how to work with camera, and how to make live tiles, etc.
◦Expect a lot of code and demo.
This session will jump start you with everything you need to know to start building Windows 8 apps with the skills you already have.
Scalable Front-end Development with Vue.JSGalih Pratama
Are you sure your app is secure enough? Do you want to scale your app to the next level? Come and join us for the Bandung JS Meetup #11. Save the date!
Tuesday, March 27th 2018
Location : Bandung Creative Hub (Aula lt 5)
Jl Laswi No 7, Kacapiring- Bandung
We will have presentations by:
1. Galih Pratama - Head Front-end, Crowde.co on "Scalable Web Development by Vue.js"
2. Yahya Fadhlulloh - CTO, Crowde.co on "JS flaw Hackers Love to Abuse"
collective.amberjack is a plone based tool to create interactive tutorial.
These are the slides presented during this talk: http://ploneconference2010.blip.tv/file/4317469/
Ten practical ways to improve front-end performanceAndrew Rota
Conference talk presented at PHP South Coast 2017. Ten concrete ways to improve web performance, split between quick tactical wins and longer-term overarching strategies.
Un libro muy interesante del artista del renacimiento alemán, Alberto Durero. Éste es un manuscrito escaneado del original, que nos muestra dibujos del artista, para sus investigaciones de la perspectiva, la matemática y la proporción, tan característicos de los artistas de la época.
The Technion Library as a physical environment - July 2012Dalia Dolev
A lecture by Dalia Dolev, the Elyachar Central Library director, givven at "The Physical Library in the Digital Age" conference, taken place at Haifa University, on July 10th 2012.
a billion desktops - check.
mobile support turned on by default - check.
Microsoft on board - check.
engines, tools, killer apps – check.
it's GO time.
My look at the WebGL landscape circa late 2013, presented at the GamesJS Meetup September 30th 2013. http://www.meetup.com/gamesjs/events/140781742/
Debugging War Stories & Strategies to Survive on RejectJS 2014Johannes Weber
Imagine you’ve received a bug report from your favourite app. It happened on a complex system and you wouldn’t actually know what each part is doing. In this case, the first defense is trying to reproduce it with enabled DevTools. Either you know how to fix it immediately or you waste a lot of time with solving it without success. Have you ever experienced one of these bugs? Trying to fix them for hours without any result? It sucks and simply wastes too much precious time.
This talk is going to dive deep into advanced debugging JavaScript apps. We talk about the most powerful strategies and less known techniques in order to be more effective in fixing THE problem.
Modern JavaScript, HTML5 and CSS3 techniques and examples. There’s an endless amount of materials available around these topics so naturally this set doesn’t cover everything there is to know. Instead this is more like a summary of good techniques and practices I’ve encountered while doing web software development.
MeasureCamp IX (London) - 10 JavaScript Concepts for web analystsSimo Ahava
Here's my list of 10 JavaScript (related) concepts that I think all web analysts should understand at least on a basic level. A solid grasp of JavaScript is a base requirement for anyone working with the web browser.
HTML5DevConf 2013 (October): WebGL is a game changer!Iker Jamardo
WebGL is getting everywhere. The recent announcement from Microsoft that Internet Explorer is finally supporting WebGL is just another example of the importance that this technology is getting among web technologies. For the first time, web developers can access complex graphics features that were only available for native game development. But, what are the real advantages of WebGL over other web based games development technologies? What are the different game engines that support it? Is WebGL ready for cross-platform game development? Can only 3D games benefit from WebGL? All these questions and more will be answered in this talk full of code snippets and useful tips that will try to show that the web environment (and specially WebGL) can be great for developing successful games, and could become in a real game changer.
Face the Future: Computing in an Augmented WorldTony Parisi
My Keynote Talk from AWE 2017. http://www.augmentedworldexpo.com/
Pairs best with transcript: https://medium.com/@tonyparisi/face-the-future-58ed3b63d91
Slides for my talk on The Future of Virtual Reality at the Tech In Motion Silicon Valley Meetup on August 20th, 2014. http://www.meetup.com/TechinMotionSiliconValley/events/195316252/
The Browser As Console - HTML5 and WebGL for Game DevelopmentTony Parisi
Slides from my talk at April 24, 2014 Tales of JavaScript Meetup: HTML5 & WebGL Game Evolution and Development http://www.meetup.com/talesofjavascript/events/177380702/
2. About Me
Serial entrepreneur
Founder, stealth web startup
Consulting architect and CTO
Web3D Co-Creator, VRML and X3D
Author
Contact Information
tparisi@gmail.com
Skype: auradeluxe
http://twitter.com/auradeluxe http://www.ton
yparisi.com/
WebGL Book Code
https://github.com/tparisi/WebGLBook
Get the Book!
Amazon
http://www.amazon.com/dp/144932357X
O’Reilly Books
http://shop.oreilly.com/product/0636920024729.do
Skybox Engine
https://github.com/tparisi/Skybox
3. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
Agenda
1. An Introduction to WebGL
2. Your First WebGL Program
3. Graphics
4. Animation
5. Interaction
6. Integrating 2D and 3D
7. WebGL in Production
8. Your First WebGL Game
5. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
The New 3D API Standard
OpenGL ES™ in a browser
JavaScript API bindings
Supported in nearly all modern browsers and many mobile
devices
Shipped since early 2011
…and it’s Awesome.
6. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
WebGL - A Technical Definition
WebGL is a royalty-free, cross-platform API that brings OpenGL
ES 2.0 to the web as a 3D drawing context within HTML, exposed
as low-level Document Object Model interfaces. It uses the
OpenGL shading language, GLSL ES, and can be cleanly
combined with other web content that is layered on top or
underneath the 3D content. It is ideally suited for dynamic 3D web
applications in the JavaScript programming language, and will be
fully integrated in leading web browsers.
http://www.khronos.org/webgl/
7. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
Deconstructing WebGL
WebGL is an API
No file format, no DOM
Uses new kind of Canvas element drawing context
WebGL is based on OpenGL ES 2.0
It’s what’s in your phone
WebGL combines with other web content
Integrates seamlessly with other stuff on the page
WebGL is built for dynamic web applications
Runtime is the web browser, resources are URLs
WebGL is cross-platform
WebGL is royalty-free
8. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
The Anatomy of a WebGL
Application
Create a Canvas element
Obtain a drawing context
Initialize the viewport
Create one or more buffers
Create one or more matrices
Create one or more shaders
Initialize the shaders
Draw one or more primitives
Code
Chapter 1/Example 1-1.html
10. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
Three.js – A JavaScript 3D Engine
Represents WebGL at a high level using standard 3D graphics
concepts
Feature Rich – math, graphics, animation, interaction, file
loaders
Object-oriented
Renders to 3D WebGL or 2D standard Canvas
Fast, robust, well-maintained
Chock full of examples
o Not a game engine
o Not an application framework
https://github.com/mrdoob/three.js/
12. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
A Real Example
13. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
Using a Light to Shade the Scene
// Create a directional light to show off the object
var light = new
THREE.DirectionalLight( 0xffffff, 1.5);
light.position.set(0, 0, 1);
scene.add( light );
14. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
Creating a Shaded, Texture-
Mapped Cube
// Create a shaded, texture-mapped cube and add it to the scene
// First, create the texture map
var mapUrl = "../images/molumen_small_funny_angry_monster.jpg";
var map = THREE.ImageUtils.loadTexture(mapUrl);
// Now, create a Phong material to show shading; pass in the map
var material = new THREE.MeshPhongMaterial({ map: map });
// Create the cube geometry
var geometry = new THREE.CubeGeometry(1, 1, 1);
// And put the geometry and material together into a mesh
cube = new THREE.Mesh(geometry, material);
15. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
Rotating the Object
// Turn it toward the scene, or we won't see the cube shape!
cube.rotation.x = Math.PI / 5;
cube.rotation.y = Math.PI / 5;
16. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
The Run Loop and
requestAnimationFrame()
function run()
{
// Render the scene
renderer.render( scene, camera );
// Spin the cube for next frame
if (animating)
{
cube.rotation.y -= 0.01;
}
// Ask for another frame
requestAnimationFrame(run);
}
17. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
Handling the Mouse
function addMouseHandler()
{
var dom = renderer.domElement;
dom.addEventListener( 'mouseup', onMouseUp,
false);
}
function onMouseUp (event)
{
event.preventDefault();
animating = !animating;
}
19. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
Let’s Build a Solar System
Meshes: built-in primitives
and custom geometry
Lighting, materials and
textures
Transform hierarchy
Points and lines
Shaders
25. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
Hit Detection, Picking and
Projection
WebGL has no built-in hit
detection
Three.js has hit detection helper
– it does the inverse of 3D->2D
projection to find object under the
mouse
27. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
Implementing Dragging
PlaneDragger class
Uses THREE.Projector to find hit point in scene
Pick against invisible plane geometry
Use Tween with drag to make UI feel more natural and
intuitive
28. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
Camera-Based Interaction
Trackball Controls for Model
Viewing
First-Person Controls for Scene
Navigation
30. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
WebGL’s Secret Weapon
WebGL is a royalty-free, cross-platform API that brings OpenGL ES 2.0 to the web
as a 3D drawing context within HTML, exposed as low-level Document Object
Model interfaces. It uses the OpenGL shading language, GLSL ES, and can be
cleanly combined with other web content that is layered on top or
underneath the 3D content. It is ideally suited for dynamic 3D web applications
in the JavaScript programming language, and will be fully integrated in leading
web browsers.
Breaks down window boundaries
2D overlaid on 3D
3D overlaid on 2D
Canvas2D as a texture
Video as a texture
The ultimate mashup technology
31. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
Combining Dynamic HTML and
WebGL
32. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
Creating Dynamic Textures with
Canvas 2D and HTML5 Video
33. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
Rendering Dynamically Generated
3D Text
34. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
WebGL for Ultimate Mashups
36. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
Engine Choices
Open Source rendering engines/frameworks
Three.js
CubicVR
SceneGL
GLGE
Game engines
Free/Open Source – Gladius, KickJS, Skybox
Licensed/Pay Models – PlayCanvas, Goo, Turbulenz
Roll your own?
37. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
Loading 3D Content
WebGL has no built-in file format
Three.js loads several types
COLLADA (XML-based standard)
Three.js JSON format
Three.js binary format
Three.js JSON scene format
38. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
Art Paths
Export COLLADA from Maya, 3dsMax
Export Wavefront OBJ art from blender;
convert OBJ to Three.js
New JSON-based COLLADA format
under development (‘glTF’)
FBX converters under development
python <path-to-
three.js>/utils/exporters/convert_
obj_three.py -i alien2.obj -o
alien2.js
39. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
Browser Realities
Detecting WebGL support in your browser
var canvas = document.createElement("canvas");
var gl = null;
var msg = "Your browser does not support WebGL.";
try
{
gl = canvas.getContext("experimental-webgl");
}
catch (e)
{
msg = "Error creating WebGL Context!: " + e.toString();
}
if (!gl)
{
throw new Error(msg);
}
41. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
Let’s Build a Racing Game
Camera, Character and Control prototype
Art direction study
Model previewer
Particle system lab
Sound lab
42. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
Camera, Character and Control
The “Gray Box” Prototype
43. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
Keyboard Controls
Keyboard handling is DOM-based, like any Web app
Sim.App defines key codes (see
http://www.javascripter.net/faq/keycodes.htm )
/* key codes
37: left
38: up
39: right
40: down
*/
Sim.KeyCodes = {};
Sim.KeyCodes.KEY_LEFT = 37;
Sim.KeyCodes.KEY_UP = 38;
Sim.KeyCodes.KEY_RIGHT = 39;
Sim.KeyCodes.KEY_DOWN = 40;
Game object defines onKeyUp(), onKeyDown(), passes it to
Player object
44. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
Updating the Camera
Player.prototype.updateCamera = function()
{
var camerapos = new THREE.Vector3(Player.CAMERA_OFFSET_X,
Player.CAMERA_OFFSET_Y, Player.CAMERA_OFFSET_Z);
camerapos.addSelf(this.object3D.position);
this.camera.position.copy(camerapos);
this.camera.lookAt(this.object3D.position);
// Rotate particle system to view-aligned to avoid nasty alpha sorting
artifacts
if (this.exhaust1)
{
this.exhaust1.object3D.rotation.x = this.camera.rotation.x;
}
if (this.exhaust2)
{
this.exhaust2.object3D.rotation.x = this.camera.rotation.x;
}
}
45. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
Collision Detection
RacingGame.prototype.testCollision = function()
{
var playerpos = this.player.object3D.position;
if (playerpos.x > (Environment.ROAD_WIDTH / 2 - (Car.CAR_WIDTH/2)))
{
this.player.bounce();
this.player.object3D.position.x -= 1;
}
if (playerpos.x < -(Environment.ROAD_WIDTH / 2 - (Car.CAR_WIDTH/2)))
{
this.player.bounce();
this.player.object3D.position.x += 1;
}
var i, len = this.cars.length;
for (i = 0; i < len; i++)
{
var carpos = this.cars[i].object3D.position;
var dist = playerpos.distanceTo(carpos);
if (dist < RacingGame.COLLIDE_RADIUS)
{
this.crash(this.cars[i]);
break;
}
}
}
46. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
Art Direction
The Art Direction Study
47. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
The Heads-Up Display
WebGL’s 2D/3D integration in action
Open source speedometer widget by Marcello Barnaba
Fully configurable
All HTML5, CSS, JavaScript!
https://github.com/vjt/canvas-speedometer
48. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
A Model Previewer
Models from Turbosquid
Previewer to get sizes,
inspect normals, get model
stats
Overall, Tools and
Exporters Still Primitive
49. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
Building a Particle System
The Particle System Lab
Three.js has a basic built-in
particle system
But It’s very basic: No
emitters or physics models
You have to animate it all
yourself
50. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
Adding Sound
The Sound Lab
Use new <audio>
Element
Fairly well supported in
browsers
Other APIs (Moz,
Chrome) not supported
uniformly
51. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
Putting It All Together
52. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
The State of the Union
WebGL is a stable, open, free standard for 3D graphics in your
browser
OpenGL ES under the hood (It’s what’s running on your phone and
tablet)
Support by most browsers on desktop, laptop, mobile
Strong standards group maintaining it (www.khronos.org)
Low-level API
Many libraries available
Open-source scene rendering
Game engines just coming online
Production capability is still very crude
Tools and frameworks are young and evolving
Export from pro tools lacking
53. WebGL: A Crash Course
February 7, 2013
http://www.tonyparisi.com/
Where To Go From Here
WebGL development – not easy; but not rocket science
Small feature set with huge capabilities
This talk is the tip of a deep iceberg
Three.js is one of many frameworks
Look around, or build your own
The possibilities are limitless!