SlideShare una empresa de Scribd logo
1 de 30
Descargar para leer sin conexión
Tony Parisi
October, 2015
WebGL:
the next
generation
about me
http://www.tonyparisi.com 10/20/2015
CONTACT
tparisi@gmail.com
skype: auradeluxe
http://twitter.com/auradeluxe http://www.tonypa
risi.com/
http://www.learningwebgl.com/
GET THE BOOKS!
WebGL: Up and Running
http://www.amazon.com/dp/144932357X
Programming 3D Applications with HTML and WebGL
http://www.amazon.com/Programming-Applications-HTML5-WebGL-
Visualization/dp/1449362966
MEETUPS
http://www.meetup.com/WebGL-Developers-Meetup/
http://www.meetup.com/Web-VR/
BOOK CODE
https://github.com/tparisi/WebGLBook
https://github.com/tparisi/Programming3DApplications
GET GLAM
http://www.glamjs.org/
https://github.com/tparisi/glam/
WORK
http://www.wevr.com/
CREDS
Co-creator, VRML and X3D
agenda
 WebGL basics
 WebGL 2 – major upgrade to the standard
 WebVR – virtual reality in the browser, rendered with
WebGL
 glTF – web-friendly 3D file format for use with WebGL
10/20/2015http://www.tonyparisi.com
the 3D rendering standard
10/20/2015http://www.tonyparisi.com
3B seats.
Q.E.D.
WebGL is on all
desktop mobile
browsers
10/20/2015http://www.tonyparisi.com
https://www.youtube.com/watch?v=io5snCcQ0ss
http://www.floored.com/blog/2015/
webgl-real-time-physically-based-lighting
http://cabbi.bo/enough/
http://riskeverything.nike.com/
digital
marketing
games
architecture
art
10/20/2015http://www.tonyparisi.com
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.
 born in 2006 as Mozilla Canvas3D (V. Vukićević)
 joined by Opera, Apple, Google, renamed WebGL
 standardized by the Khronos Grouphttp://www.khronos.org/
how WebGL works
 it’s a JavaScript drawing API
 draw to a canvas element using a special context (“webgl”)
 low-level drawing – buffers, primitives, textures and shaders
 accelerated by graphics hardware (GPU)
 can draw 2D as well as 3D graphics
 just another z-ordered page element
 there is no file format; no markup language; no DOM.
 libraries and frameworks are key to fast ramp up and productive
development
http://www.tonyparisi.com 10/20/2015
the anatomy of a WebGL
application
1. create a <canvas> element
2. obtain a drawing context
3. initialize the viewport
4. create one or more buffers
5. create one or more matrices
6. create one or more shaders
7. initialize the shaders
8. draw one or more primitives
http://www.tonyparisi.com 10/20/2015
a simple example
10/20/2015http://www.tonyparisi.com
inspired by the lessons at
Learning WebGL
http://www.learningwebgl.com/
drawingfunction draw(gl, obj) {
// clear the background (with black)
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// set the shader to use
gl.useProgram(shaderProgram);
// connect up the shader parameters: vertex position, texture coordinate,
// projection/model matrices and texture
// set up the buffers
gl.bindBuffer(gl.ARRAY_BUFFER, obj.buffer);
gl.vertexAttribPointer(shaderVertexPositionAttribute, obj.vertSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, obj.texCoordBuffer);
gl.vertexAttribPointer(shaderTexCoordAttribute, obj.texCoordSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, obj.indices);
gl.uniformMatrix4fv(shaderProjectionMatrixUniform, false, projectionMatrix);
gl.uniformMatrix4fv(shaderModelViewMatrixUniform, false, modelViewMatrix);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, webGLTexture);
gl.uniform1i(shaderSamplerUniform, 0);
// draw the object
gl.drawElements(obj.primtype, obj.nIndices, gl.UNSIGNED_SHORT, 0);
}
clear the canvas
set the shader
set up buffers for
vertices and texture
coordinates
pass transform and
projection matrices
to the shader
set the texture and pass to the
shader
draw the object
http://www.tonyparisi.com 10/20/2015
(this part is key; no shader, no pixels!!!)
scary?
use a framework
10/20/2015http://www.tonyparisi.com
renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 45, canvas.width /
canvas.height, 1, 4000 );
scene.add(camera);
var mapUrl ="../images/webgl-logo-256.jpg“;
var map = THREE.ImageUtils.loadTexture(mapUrl );
var material = new THREE.MeshBasicMaterial ({ map: map });
var geometry = new THREE.CubeGeometry(2, 2, 2);
cube = new THREE.Mesh(geometry, material);
scene.add( cube );
represents WebGL at
a
high level using
standard
3D graphics concepts
can render to WebGL,
2D canvas, SVG and
CSS3
three.js: the most popular WebGL library
10/20/2015http://www.tonyparisi.com
major upgrade
based on OpenGL ES 3.0
https://www.youtube.com/watch?v=2v6iLpY7j5M
 promotes current WebGL extensions to full features
 multiple render targets, geometry instancing, vertex array objects, fragment
depth
 adds previously unsupported ES 3.0 features
 multisampled render buffers
 sampler objects
 uniform buffers
 3D textures
 profiling and debugging – sync objects, query objects
 some ES 3.0 features are not supported in WebGL 2
 mapped buffers, program binaries, drawRangeElements()
10/20/2015http://www.tonyparisi.com
deferred rendering example
10/20/2015http://www.tonyparisi.com
Excellent example in WebGL1… would be
even faster in V2!
http://marcinignac.com/blog/deferred-
rendering-explained/demo/
Color, Depth, and Normal buffers. (Images by astrofa, via Wikimedia Commons.)
this technique is already being used in WebGL 1 with huge performance hit – three or more
render targets. with multiple render targets you do the draw once instead of three or more
times…
10/20/2015http://www.tonyparisi.com
 Enable WebGL 2 in Firefox
https://wiki.mozilla.org/Platform/GFX/WebGL2
 Enabled WebGL 2 in Chrome (Canary Windows/OSX, Dev Channel
Linux)
Run from command line with --enable-unsafe-es3-apis
 Live Demo
http://toji.github.io/webgl2-particles/
development status
 Experimental WebVR API
 Head-Tracking and
Fullscreen VR Support
Now in Browser Builds!!!
(nightly/dev channels)
 No Big App Downloads
and Installs!!!
http://mozvr.github.io/webvr-spec/webvr.html
10/20/2015http://www.tonyparisi.com
WebVR:
virtual reality in the browser
Quake 3 WebVR demo, developed by Brandon
Jones of Google
http://media.tojicode.com/q3bsp/
the WebVR API (1)
Query for VR Device(s) For Rendering
10/20/2015http://www.tonyparisi.com
// polyfill
var getVRDevices = navigator.mozGetVRDevices /* FF */ ||
navigator.getVRDevices; /* webkit */
var self = this;
getVRDevices().then( gotVRDevices );
function gotVRDevices( devices ) {
var vrHMD;
var error;
for ( var i = 0; i < devices.length; ++i ) {
if ( devices[i] instanceof HMDVRDevice ) {
vrHMD = devices[i];
self._vrHMD = vrHMD;
if ( vrHMD.getEyeParameters ) {
self.left = vrHMD.getEyeParameters( "left" );
self.right = vrHMD.getEyeParameters( "right" );
}
break; // We keep the first we encounter
}
}
}
get left/right eye
(camera) information:
horizontal offset,
field of view.
we’ll use WebGL to render the
scene from two cameras
the WebVR API (2)
Go Fullscreen (VR Mode)
10/20/2015http://www.tonyparisi.com
var self = this;
var renderer = this._renderer;
var vrHMD = this._vrHMD;
var canvas = renderer.domElement;
var fullScreenChange =
canvas.mozRequestFullScreen? 'mozfullscreenchange' : 'webkitfullscreenchange';
document.addEventListener( fullScreenChange, onFullScreenChanged, false );
function onFullScreenChanged() {
if ( !document.mozFullScreenElement
&& !document.webkitFullScreenElement ) {
self.setFullScreen( false );
}
}
if ( canvas.mozRequestFullScreen ) {
canvas.mozRequestFullScreen( { vrDisplay: vrHMD } );
} else {
canvas.webkitRequestFullscreen( { vrDisplay: vrHMD } );
}
handle exiting fullscreen mode
request fullscreen mode
for this VR device
fullscreen mode requires a DOM element
the WebVR API (3)Head Tracking
10/20/2015http://www.tonyparisi.com
// polyfill
var getVRDevices = navigator.mozGetVRDevices /* FF */ ||
navigator.getVRDevices; /* webkit */
var self = this;
getVRDevices().then( gotVRDevices );
function gotVRDevices( devices ) {
var vrInput;
var error;
for ( var i = 0; i < devices.length; ++i ) {
if ( devices[i] instanceof PositionSensorVRDevice ) {
vrInput = devices[i]
self._vrInput = vrInput;
break; // We keep the first we encounter
}
}
}
…
// called once per tick from requestAnimationFrame()
var update = function() {
var vrState = this.getVRState();
if ( !vrState ) {
return;
}
// vrState.hmd.position contains three floats, x, y, z
setCameraPosition(vrState.hmd.position);
// vrState.hmd.rotation contains four floats, quaternion x,y,z,w
setCameraRotation(vrState.hmd.rotation);
};
initialization:
get head-tracking VR device
update camera to match HMD device
position and orientation
animation loop: query HMD device state
WebVR and mobile
 Google Cardboard Showcase
 Mobile Chrome http://g.co/chromevr
 two ways to implement
 for existing mobile browsers – render WebGL Side-by-Side stereo (no need
to query devices), existing fullscreen and browser DeviceOrientation API
 new WebVR API supported in betas of FF and Chrome
http://mozvr.com/downloads/
https://drive.google.com/folderview?id=0BzudLt22BqGRbW9WTHMtOWMzNjQ
10/20/2015http://www.tonyparisi.com
WebVR and three.js
Latest stable versions (r71 and up) include stereo rendering
and head tracking
10/20/2015http://www.tonyparisi.com
Code
https://github.com/tparisi/WebVR
Demo
http://tparisi.github.io/WebVR/examples/cube-oculus.html
simple examples for
WebVR and Cardboard
style can be found here
 runtime asset format for WebGL, OpenGL ES, and OpenGL applications
 compact representation for download efficiency
 loads quickly into memory
 JSON for scene structure and other high-level constructs
 GL native data types require no additional parsing
 full-featured
 3D constructs (hierarchy, cameras, lights, common materials, animation)
 Full support for shaders and arbitrary materials
 runtime-neutral
 Can be created and used by any tool, app or runtime
10/20/2015http://www.tonyparisi.com
gl Transmission Format
a “JPEG for 3D”
http://www.gltf.gl/
10/20/2015http://www.tonyparisi.com
"nodes": {
"LOD3sp": {
"children": [],
"matrix": [
// matrix data here
],
"meshes": [
"LOD3spShape-lib"
],
"name": "LOD3sp"
},
…
"meshes": {
"LOD3spShape-lib": {
"name": "LOD3spShape",
"primitives": [
{
"attributes": {
"NORMAL": "accessor_25",
"POSITION": "accessor_23",
"TEXCOORD_0": "accessor_27"
},
"indices": "accessor_21",
"material": "blinn3-fx",
"primitive": 4
}
]
}
},
the structure of a glTF file
"buffers": {
"duck": {
"byteLength": 102040,
"type": "arraybuffer",
"uri": "duck.bin"
}
},
meshes and other visual types
access low-level data
rich data e.g. vertices and animations stored in
binary files
scene structure defined as hierarchy of
nodes
10/20/2015http://www.tonyparisi.com
comparison : glTF vs
COLLADA file sizes
Size (Mb) Wine Rack
Super
Murdoch Virtual City Razer Rambler
glTF JSON + .bin 0.58 0.85 2.6 5.1 12.7
COLLADA (.dae) 0.79 1.8 5.5 7.5 31.6
% reduction 27% 53% 53% 32% 60%
0
5
10
15
20
25
30
35
40
45
50
Wine Rack Super Murdoch Virtual City Razer Rambler
COLLADA (.dae)
glTF JSON + .bin
comparison : glTF vs
COLLADA load times
0
1
2
3
4
5
6
7
Wine Rack Razer Virtual City Super
Murdoch
Rambler
COLLADA (.dae)
glTF
glTF w BufferGeometry
Wine Rack Razer Virtual City Super Murdoch Rambler
glTF w BufferGeometry 0.06 0.08 0.09 0.21 0.69
glTF 0.08 0.36 0.15 0.27 1.86
COLLADA (.dae) 0.18 1.34 1.05 0.55 3.88
%reduction 67% 94% 91% 62% 82%
10/20/2015http://www.tonyparisi.com
three.js Loader
https://github.com/mrdoob/three.js/
It’s the native format!
http://cesiumjs.org/
Babylon.js Loader (in development)
http://www.babylonjs.com/
collada2gltf converter
https://github.com/KhronosGroup/glTF
FBX to glTF Converter
(in development)
Drag and drop convertor coming
http://gltf.autodesk.io/
Online drag and drop COLLADA
to glTF converter
http://cesiumjs.org/convertmodel.html
PIPELINE TOOLS
adoption
WebGL ecosystem
10/20/2015http://www.tonyparisi.com
game engines/IDEs
Goo Engine
*http://www.gootechnologies.com/
Verold http://verold.com/ *
Turbulenz https://turbulenz.com/
PlayCanvas http://www.playcanvas.com/
Sketchfab https://sketchfab.com/
Unreal *https://www.unrealengine.com/
Unity * http://unity3d.com/#unity-5
scene graph libraries/page frameworks
Three.js
http://threejs.org/
SceneJS
http://scenejs.org/
BabylonJS
http://www.babylonjs.com/
GLAM
https://github.com/tparisi/glam
WebVR video players
eleVR
https://github.com/hawksley/eleVR-Web-Player
Littlstar
https://github.com/littlstar/slant-player
* not open source
Links
WebGL 2
 Browsers
https://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation
 Live Demo
http://toji.github.io/webgl2-particles/
 Specification
https://www.khronos.org/registry/webgl/specs/latest/2.0/#5
WebVR
 Browsers
Firefox http://mozvr.com/downloads/
Desktop Chrome https://drive.google.com/folderview?id=0BzudLt22BqGRbW9WTHMtOWMzNjQ
Mobile Chrome https://drive.google.com/folderview?id=0BzudLt22BqGRbW9WTHMtOWMzNjQ
 Showcases
http://mozvr.com/
http://vr.chromeexperiments.com/
 Mailing List
web-vr-discuss@mozilla.org
 Example Code
https://github.com/tparisi/WebVR
 Specification
http://mozvr.github.io/webvr-spec/webvr.html
glTF
 Project Page
http://www.gltf.gl/
10/20/2015http://www.tonyparisi.com
COMING November 2015
10/20/2015http://www.tonyparisi.com
Tony Parisi
October, 2015
WebGL:
the next
generation

Más contenido relacionado

La actualidad más candente

The Immersive Web
The Immersive WebThe Immersive Web
The Immersive WebTony Parisi
 
The Browser As Console - HTML5 and WebGL for Game Development
The Browser As Console - HTML5 and WebGL for Game DevelopmentThe Browser As Console - HTML5 and WebGL for Game Development
The Browser As Console - HTML5 and WebGL for Game DevelopmentTony Parisi
 
Powering the VR/AR Ecosystem 2017-01-17
Powering the VR/AR Ecosystem 2017-01-17Powering the VR/AR Ecosystem 2017-01-17
Powering the VR/AR Ecosystem 2017-01-17Tony Parisi
 
Getting Started in VR with JS
Getting Started in VR with JSGetting Started in VR with JS
Getting Started in VR with JSRudy Jahchan
 
2019.06.01 Konva.js 와 함께하는 canvas 2D 그래픽. 유튜브 썸네일 (미리보기 이미지) 제작툴 만들기
2019.06.01 Konva.js 와 함께하는 canvas 2D 그래픽. 유튜브 썸네일 (미리보기 이미지) 제작툴 만들기2019.06.01 Konva.js 와 함께하는 canvas 2D 그래픽. 유튜브 썸네일 (미리보기 이미지) 제작툴 만들기
2019.06.01 Konva.js 와 함께하는 canvas 2D 그래픽. 유튜브 썸네일 (미리보기 이미지) 제작툴 만들기JunHo Kim
 
WebGL Crash Course
WebGL Crash CourseWebGL Crash Course
WebGL Crash CourseTony Parisi
 
Accessibility in Canvas 3D
Accessibility in Canvas 3DAccessibility in Canvas 3D
Accessibility in Canvas 3DMartin Kliehm
 
Standards.Next: Canvas
Standards.Next: CanvasStandards.Next: Canvas
Standards.Next: CanvasMartin Kliehm
 
Javascript native OOP - 3 layers
Javascript native OOP - 3 layers Javascript native OOP - 3 layers
Javascript native OOP - 3 layers David Nguyen
 
Cardboard : Android 를 위한 저렴한 VR
Cardboard : Android 를 위한 저렴한 VRCardboard : Android 를 위한 저렴한 VR
Cardboard : Android 를 위한 저렴한 VRYoungbin Han
 
Practical guide for front-end development for django devs
Practical guide for front-end development for django devsPractical guide for front-end development for django devs
Practical guide for front-end development for django devsDavidson Fellipe
 
Best of the Web V. V
Best of the Web V. VBest of the Web V. V
Best of the Web V. VDavid Kapuler
 
Accessible Javascript with and without WAI ARIA
Accessible Javascript with and without WAI ARIAAccessible Javascript with and without WAI ARIA
Accessible Javascript with and without WAI ARIADirk Ginader
 
Interactive Vector-Graphics in the Browser
Interactive Vector-Graphics in the BrowserInteractive Vector-Graphics in the Browser
Interactive Vector-Graphics in the Browsertec
 
Level up your front-end skills- going beyond cold fusion’s ui tags
Level up your front-end skills- going beyond cold fusion’s ui tagsLevel up your front-end skills- going beyond cold fusion’s ui tags
Level up your front-end skills- going beyond cold fusion’s ui tagsColdFusionConference
 
Rapid Templating with Serve
Rapid Templating with ServeRapid Templating with Serve
Rapid Templating with ServeNathan Smith
 

La actualidad más candente (20)

The Immersive Web
The Immersive WebThe Immersive Web
The Immersive Web
 
The Browser As Console - HTML5 and WebGL for Game Development
The Browser As Console - HTML5 and WebGL for Game DevelopmentThe Browser As Console - HTML5 and WebGL for Game Development
The Browser As Console - HTML5 and WebGL for Game Development
 
Powering the VR/AR Ecosystem 2017-01-17
Powering the VR/AR Ecosystem 2017-01-17Powering the VR/AR Ecosystem 2017-01-17
Powering the VR/AR Ecosystem 2017-01-17
 
Getting Started in VR with JS
Getting Started in VR with JSGetting Started in VR with JS
Getting Started in VR with JS
 
2019.06.01 Konva.js 와 함께하는 canvas 2D 그래픽. 유튜브 썸네일 (미리보기 이미지) 제작툴 만들기
2019.06.01 Konva.js 와 함께하는 canvas 2D 그래픽. 유튜브 썸네일 (미리보기 이미지) 제작툴 만들기2019.06.01 Konva.js 와 함께하는 canvas 2D 그래픽. 유튜브 썸네일 (미리보기 이미지) 제작툴 만들기
2019.06.01 Konva.js 와 함께하는 canvas 2D 그래픽. 유튜브 썸네일 (미리보기 이미지) 제작툴 만들기
 
WebGL Crash Course
WebGL Crash CourseWebGL Crash Course
WebGL Crash Course
 
Accessibility in Canvas 3D
Accessibility in Canvas 3DAccessibility in Canvas 3D
Accessibility in Canvas 3D
 
Real solutions, no tricks
Real solutions, no tricksReal solutions, no tricks
Real solutions, no tricks
 
Standards.Next: Canvas
Standards.Next: CanvasStandards.Next: Canvas
Standards.Next: Canvas
 
Javascript native OOP - 3 layers
Javascript native OOP - 3 layers Javascript native OOP - 3 layers
Javascript native OOP - 3 layers
 
Cardboard : Android 를 위한 저렴한 VR
Cardboard : Android 를 위한 저렴한 VRCardboard : Android 를 위한 저렴한 VR
Cardboard : Android 를 위한 저렴한 VR
 
Practical guide for front-end development for django devs
Practical guide for front-end development for django devsPractical guide for front-end development for django devs
Practical guide for front-end development for django devs
 
Best of the Web V. V
Best of the Web V. VBest of the Web V. V
Best of the Web V. V
 
Accessible Javascript with and without WAI ARIA
Accessible Javascript with and without WAI ARIAAccessible Javascript with and without WAI ARIA
Accessible Javascript with and without WAI ARIA
 
wotxr-20190320rzr
wotxr-20190320rzrwotxr-20190320rzr
wotxr-20190320rzr
 
jQuery Ecosystem
jQuery EcosystemjQuery Ecosystem
jQuery Ecosystem
 
Interactive Vector-Graphics in the Browser
Interactive Vector-Graphics in the BrowserInteractive Vector-Graphics in the Browser
Interactive Vector-Graphics in the Browser
 
Discover design roulette critique 1
Discover  design roulette critique 1Discover  design roulette critique 1
Discover design roulette critique 1
 
Level up your front-end skills- going beyond cold fusion’s ui tags
Level up your front-end skills- going beyond cold fusion’s ui tagsLevel up your front-end skills- going beyond cold fusion’s ui tags
Level up your front-end skills- going beyond cold fusion’s ui tags
 
Rapid Templating with Serve
Rapid Templating with ServeRapid Templating with Serve
Rapid Templating with Serve
 

Destacado

Foundations of the Immersive Web
Foundations of the Immersive WebFoundations of the Immersive Web
Foundations of the Immersive WebTony Parisi
 
WebVR Ecosystem and API Update
WebVR Ecosystem and API UpdateWebVR Ecosystem and API Update
WebVR Ecosystem and API UpdateTony Parisi
 
[1A3]지금까지 상상한 표현의 한계를 넘자 WebGL
[1A3]지금까지 상상한 표현의 한계를 넘자 WebGL[1A3]지금까지 상상한 표현의 한계를 넘자 WebGL
[1A3]지금까지 상상한 표현의 한계를 넘자 WebGLNAVER D2
 
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!FITC
 
Developing Web Graphics with WebGL
Developing Web Graphics with WebGLDeveloping Web Graphics with WebGL
Developing Web Graphics with WebGLTony Parisi
 
The Coming Distribution War
The Coming Distribution WarThe Coming Distribution War
The Coming Distribution WarTony Parisi
 
Vrml, or There and Back Again
Vrml, or There and Back AgainVrml, or There and Back Again
Vrml, or There and Back AgainTony Parisi
 
ELD12: Badge Design
ELD12: Badge DesignELD12: Badge Design
ELD12: Badge Designhalavais
 
Bs webgl소모임002
Bs webgl소모임002Bs webgl소모임002
Bs webgl소모임002Seonki Paik
 
Integrating Angular js & three.js
Integrating Angular js & three.jsIntegrating Angular js & three.js
Integrating Angular js & three.jsJosh Staples
 
A-Frame: VR for Web Developers
A-Frame: VR for Web DevelopersA-Frame: VR for Web Developers
A-Frame: VR for Web DevelopersKevin Ngo
 
Bs webgl소모임001 uniform버전
Bs webgl소모임001 uniform버전Bs webgl소모임001 uniform버전
Bs webgl소모임001 uniform버전Seonki Paik
 
WebGL and three.js - Web 3D Graphics
WebGL and three.js - Web 3D Graphics WebGL and three.js - Web 3D Graphics
WebGL and three.js - Web 3D Graphics PSTechSerbia
 
개발자여! 스터디를 하자!
개발자여! 스터디를 하자!개발자여! 스터디를 하자!
개발자여! 스터디를 하자!changehee lee
 
Build the Virtual Reality Web with A-Frame
Build the Virtual Reality Web with A-FrameBuild the Virtual Reality Web with A-Frame
Build the Virtual Reality Web with A-FrameMozilla VR
 
The Power of WebGL - Hackeando sua GPU com JavaScript
The Power of WebGL - Hackeando sua GPU com JavaScriptThe Power of WebGL - Hackeando sua GPU com JavaScript
The Power of WebGL - Hackeando sua GPU com JavaScriptRaphael Amorim
 
쉽게 풀어보는 WebGL
쉽게 풀어보는 WebGL쉽게 풀어보는 WebGL
쉽게 풀어보는 WebGLMyung Woon Oh
 
Introduction to WebGL and WebVR
Introduction to WebGL and WebVRIntroduction to WebGL and WebVR
Introduction to WebGL and WebVRDaosheng Mu
 
The next frontier: WebGL and WebVR
The next frontier: WebGL and WebVRThe next frontier: WebGL and WebVR
The next frontier: WebGL and WebVRCodemotion
 

Destacado (20)

Foundations of the Immersive Web
Foundations of the Immersive WebFoundations of the Immersive Web
Foundations of the Immersive Web
 
WebVR Ecosystem and API Update
WebVR Ecosystem and API UpdateWebVR Ecosystem and API Update
WebVR Ecosystem and API Update
 
[1A3]지금까지 상상한 표현의 한계를 넘자 WebGL
[1A3]지금까지 상상한 표현의 한계를 넘자 WebGL[1A3]지금까지 상상한 표현의 한계를 넘자 WebGL
[1A3]지금까지 상상한 표현의 한계를 넘자 WebGL
 
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
 
Developing Web Graphics with WebGL
Developing Web Graphics with WebGLDeveloping Web Graphics with WebGL
Developing Web Graphics with WebGL
 
The Coming Distribution War
The Coming Distribution WarThe Coming Distribution War
The Coming Distribution War
 
Vrml, or There and Back Again
Vrml, or There and Back AgainVrml, or There and Back Again
Vrml, or There and Back Again
 
ELD12: Badge Design
ELD12: Badge DesignELD12: Badge Design
ELD12: Badge Design
 
Bs webgl소모임002
Bs webgl소모임002Bs webgl소모임002
Bs webgl소모임002
 
Integrating Angular js & three.js
Integrating Angular js & three.jsIntegrating Angular js & three.js
Integrating Angular js & three.js
 
Intro to Three.js
Intro to Three.jsIntro to Three.js
Intro to Three.js
 
A-Frame: VR for Web Developers
A-Frame: VR for Web DevelopersA-Frame: VR for Web Developers
A-Frame: VR for Web Developers
 
Bs webgl소모임001 uniform버전
Bs webgl소모임001 uniform버전Bs webgl소모임001 uniform버전
Bs webgl소모임001 uniform버전
 
WebGL and three.js - Web 3D Graphics
WebGL and three.js - Web 3D Graphics WebGL and three.js - Web 3D Graphics
WebGL and three.js - Web 3D Graphics
 
개발자여! 스터디를 하자!
개발자여! 스터디를 하자!개발자여! 스터디를 하자!
개발자여! 스터디를 하자!
 
Build the Virtual Reality Web with A-Frame
Build the Virtual Reality Web with A-FrameBuild the Virtual Reality Web with A-Frame
Build the Virtual Reality Web with A-Frame
 
The Power of WebGL - Hackeando sua GPU com JavaScript
The Power of WebGL - Hackeando sua GPU com JavaScriptThe Power of WebGL - Hackeando sua GPU com JavaScript
The Power of WebGL - Hackeando sua GPU com JavaScript
 
쉽게 풀어보는 WebGL
쉽게 풀어보는 WebGL쉽게 풀어보는 WebGL
쉽게 풀어보는 WebGL
 
Introduction to WebGL and WebVR
Introduction to WebGL and WebVRIntroduction to WebGL and WebVR
Introduction to WebGL and WebVR
 
The next frontier: WebGL and WebVR
The next frontier: WebGL and WebVRThe next frontier: WebGL and WebVR
The next frontier: WebGL and WebVR
 

Similar a WebGL: The Next Generation

Browser-Based Virtual Reality April 2015
Browser-Based Virtual Reality April 2015Browser-Based Virtual Reality April 2015
Browser-Based Virtual Reality April 2015Tony Parisi
 
VR Without Borders RIVER WebVR April 2015
VR Without Borders RIVER WebVR April 2015VR Without Borders RIVER WebVR April 2015
VR Without Borders RIVER WebVR April 2015Tony Parisi
 
Building Rich Internet Applications with HTML5 and WebGL
Building Rich Internet Applications with HTML5 and WebGLBuilding Rich Internet Applications with HTML5 and WebGL
Building Rich Internet Applications with HTML5 and WebGLTony Parisi
 
WT-4064, Build Rich Applications with HTML5 and WebGL, by Tony Parisi
WT-4064, Build Rich Applications with HTML5 and WebGL, by Tony ParisiWT-4064, Build Rich Applications with HTML5 and WebGL, by Tony Parisi
WT-4064, Build Rich Applications with HTML5 and WebGL, by Tony ParisiAMD Developer Central
 
Up And Running With Web VR Fall 2014
Up And Running With Web VR Fall 2014Up And Running With Web VR Fall 2014
Up And Running With Web VR Fall 2014Tony Parisi
 
WebGL demos showcase
WebGL demos showcaseWebGL demos showcase
WebGL demos showcaseYukio Andoh
 
HTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game TechHTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game Techvincent_scheib
 
What Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 AppsWhat Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 AppsDoris Chen
 
Firefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-webFirefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-webChristian Heilmann
 
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Matt Raible
 
Towards Collaborative Portable Web Spaces
Towards Collaborative Portable Web SpacesTowards Collaborative Portable Web Spaces
Towards Collaborative Portable Web Spacesstsire
 
WebGL, WebVR and the Metaverse
WebGL, WebVR and the MetaverseWebGL, WebVR and the Metaverse
WebGL, WebVR and the MetaverseTony Parisi
 
Speak the Web 15.02.2010
Speak the Web 15.02.2010Speak the Web 15.02.2010
Speak the Web 15.02.2010Patrick Lauke
 
AFUP Lorraine - Symfony Webpack Encore
AFUP Lorraine - Symfony Webpack EncoreAFUP Lorraine - Symfony Webpack Encore
AFUP Lorraine - Symfony Webpack EncoreEngineor
 
Academy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphicsAcademy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphicsBinary Studio
 
HTML5DevConf 2013 (October): WebGL is a game changer!
HTML5DevConf 2013 (October): WebGL is a game changer!HTML5DevConf 2013 (October): WebGL is a game changer!
HTML5DevConf 2013 (October): WebGL is a game changer!Iker Jamardo
 
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web DesignChristopher Schmitt
 

Similar a WebGL: The Next Generation (20)

Browser-Based Virtual Reality April 2015
Browser-Based Virtual Reality April 2015Browser-Based Virtual Reality April 2015
Browser-Based Virtual Reality April 2015
 
VR Without Borders RIVER WebVR April 2015
VR Without Borders RIVER WebVR April 2015VR Without Borders RIVER WebVR April 2015
VR Without Borders RIVER WebVR April 2015
 
Building Rich Internet Applications with HTML5 and WebGL
Building Rich Internet Applications with HTML5 and WebGLBuilding Rich Internet Applications with HTML5 and WebGL
Building Rich Internet Applications with HTML5 and WebGL
 
WT-4064, Build Rich Applications with HTML5 and WebGL, by Tony Parisi
WT-4064, Build Rich Applications with HTML5 and WebGL, by Tony ParisiWT-4064, Build Rich Applications with HTML5 and WebGL, by Tony Parisi
WT-4064, Build Rich Applications with HTML5 and WebGL, by Tony Parisi
 
Up And Running With Web VR Fall 2014
Up And Running With Web VR Fall 2014Up And Running With Web VR Fall 2014
Up And Running With Web VR Fall 2014
 
WebGL demos showcase
WebGL demos showcaseWebGL demos showcase
WebGL demos showcase
 
HTML5 Intro
HTML5 IntroHTML5 Intro
HTML5 Intro
 
WebGL Awesomeness
WebGL AwesomenessWebGL Awesomeness
WebGL Awesomeness
 
HTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game TechHTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game Tech
 
What Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 AppsWhat Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 Apps
 
3d web
3d web3d web
3d web
 
Firefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-webFirefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-web
 
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
 
Towards Collaborative Portable Web Spaces
Towards Collaborative Portable Web SpacesTowards Collaborative Portable Web Spaces
Towards Collaborative Portable Web Spaces
 
WebGL, WebVR and the Metaverse
WebGL, WebVR and the MetaverseWebGL, WebVR and the Metaverse
WebGL, WebVR and the Metaverse
 
Speak the Web 15.02.2010
Speak the Web 15.02.2010Speak the Web 15.02.2010
Speak the Web 15.02.2010
 
AFUP Lorraine - Symfony Webpack Encore
AFUP Lorraine - Symfony Webpack EncoreAFUP Lorraine - Symfony Webpack Encore
AFUP Lorraine - Symfony Webpack Encore
 
Academy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphicsAcademy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphics
 
HTML5DevConf 2013 (October): WebGL is a game changer!
HTML5DevConf 2013 (October): WebGL is a game changer!HTML5DevConf 2013 (October): WebGL is a game changer!
HTML5DevConf 2013 (October): WebGL is a game changer!
 
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
 

Más de Tony Parisi

The New Fine Arts
The New Fine ArtsThe New Fine Arts
The New Fine ArtsTony Parisi
 
Face the Future: Computing in an Augmented World
Face the Future: Computing in an Augmented WorldFace the Future: Computing in an Augmented World
Face the Future: Computing in an Augmented WorldTony Parisi
 
glTF and the WebGL Art Pipeline March 2015
glTF and the WebGL Art Pipeline March 2015glTF and the WebGL Art Pipeline March 2015
glTF and the WebGL Art Pipeline March 2015Tony Parisi
 
The Web Eats Everything In Its Path Fall 2014
The Web Eats Everything In Its Path Fall 2014The Web Eats Everything In Its Path Fall 2014
The Web Eats Everything In Its Path Fall 2014Tony Parisi
 
And Who Shall Control the Metaverse?
And Who Shall Control the Metaverse?And Who Shall Control the Metaverse?
And Who Shall Control the Metaverse?Tony Parisi
 
WebGL Primetime!
WebGL Primetime!WebGL Primetime!
WebGL Primetime!Tony Parisi
 
Virtually Anywhere
Virtually AnywhereVirtually Anywhere
Virtually AnywhereTony Parisi
 
glTF Update with Tony Parisi WebGL Meetup August 2013
glTF Update with Tony Parisi WebGL Meetup August 2013glTF Update with Tony Parisi WebGL Meetup August 2013
glTF Update with Tony Parisi WebGL Meetup August 2013Tony Parisi
 

Más de Tony Parisi (9)

The New Fine Arts
The New Fine ArtsThe New Fine Arts
The New Fine Arts
 
Face the Future: Computing in an Augmented World
Face the Future: Computing in an Augmented WorldFace the Future: Computing in an Augmented World
Face the Future: Computing in an Augmented World
 
glTF and the WebGL Art Pipeline March 2015
glTF and the WebGL Art Pipeline March 2015glTF and the WebGL Art Pipeline March 2015
glTF and the WebGL Art Pipeline March 2015
 
The Web Eats Everything In Its Path Fall 2014
The Web Eats Everything In Its Path Fall 2014The Web Eats Everything In Its Path Fall 2014
The Web Eats Everything In Its Path Fall 2014
 
And Who Shall Control the Metaverse?
And Who Shall Control the Metaverse?And Who Shall Control the Metaverse?
And Who Shall Control the Metaverse?
 
WebGL Primetime!
WebGL Primetime!WebGL Primetime!
WebGL Primetime!
 
Virtually Anywhere
Virtually AnywhereVirtually Anywhere
Virtually Anywhere
 
glTF Update with Tony Parisi WebGL Meetup August 2013
glTF Update with Tony Parisi WebGL Meetup August 2013glTF Update with Tony Parisi WebGL Meetup August 2013
glTF Update with Tony Parisi WebGL Meetup August 2013
 
Artists Only
Artists OnlyArtists Only
Artists Only
 

Último

Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 

Último (20)

Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 

WebGL: The Next Generation

  • 2. about me http://www.tonyparisi.com 10/20/2015 CONTACT tparisi@gmail.com skype: auradeluxe http://twitter.com/auradeluxe http://www.tonypa risi.com/ http://www.learningwebgl.com/ GET THE BOOKS! WebGL: Up and Running http://www.amazon.com/dp/144932357X Programming 3D Applications with HTML and WebGL http://www.amazon.com/Programming-Applications-HTML5-WebGL- Visualization/dp/1449362966 MEETUPS http://www.meetup.com/WebGL-Developers-Meetup/ http://www.meetup.com/Web-VR/ BOOK CODE https://github.com/tparisi/WebGLBook https://github.com/tparisi/Programming3DApplications GET GLAM http://www.glamjs.org/ https://github.com/tparisi/glam/ WORK http://www.wevr.com/ CREDS Co-creator, VRML and X3D
  • 3. agenda  WebGL basics  WebGL 2 – major upgrade to the standard  WebVR – virtual reality in the browser, rendered with WebGL  glTF – web-friendly 3D file format for use with WebGL 10/20/2015http://www.tonyparisi.com
  • 4. the 3D rendering standard 10/20/2015http://www.tonyparisi.com 3B seats. Q.E.D. WebGL is on all desktop mobile browsers
  • 6. 10/20/2015http://www.tonyparisi.com 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.  born in 2006 as Mozilla Canvas3D (V. Vukićević)  joined by Opera, Apple, Google, renamed WebGL  standardized by the Khronos Grouphttp://www.khronos.org/
  • 7. how WebGL works  it’s a JavaScript drawing API  draw to a canvas element using a special context (“webgl”)  low-level drawing – buffers, primitives, textures and shaders  accelerated by graphics hardware (GPU)  can draw 2D as well as 3D graphics  just another z-ordered page element  there is no file format; no markup language; no DOM.  libraries and frameworks are key to fast ramp up and productive development http://www.tonyparisi.com 10/20/2015
  • 8. the anatomy of a WebGL application 1. create a <canvas> element 2. obtain a drawing context 3. initialize the viewport 4. create one or more buffers 5. create one or more matrices 6. create one or more shaders 7. initialize the shaders 8. draw one or more primitives http://www.tonyparisi.com 10/20/2015
  • 9. a simple example 10/20/2015http://www.tonyparisi.com inspired by the lessons at Learning WebGL http://www.learningwebgl.com/
  • 10. drawingfunction draw(gl, obj) { // clear the background (with black) gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.enable(gl.DEPTH_TEST); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // set the shader to use gl.useProgram(shaderProgram); // connect up the shader parameters: vertex position, texture coordinate, // projection/model matrices and texture // set up the buffers gl.bindBuffer(gl.ARRAY_BUFFER, obj.buffer); gl.vertexAttribPointer(shaderVertexPositionAttribute, obj.vertSize, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, obj.texCoordBuffer); gl.vertexAttribPointer(shaderTexCoordAttribute, obj.texCoordSize, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, obj.indices); gl.uniformMatrix4fv(shaderProjectionMatrixUniform, false, projectionMatrix); gl.uniformMatrix4fv(shaderModelViewMatrixUniform, false, modelViewMatrix); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, webGLTexture); gl.uniform1i(shaderSamplerUniform, 0); // draw the object gl.drawElements(obj.primtype, obj.nIndices, gl.UNSIGNED_SHORT, 0); } clear the canvas set the shader set up buffers for vertices and texture coordinates pass transform and projection matrices to the shader set the texture and pass to the shader draw the object http://www.tonyparisi.com 10/20/2015 (this part is key; no shader, no pixels!!!)
  • 11. scary? use a framework 10/20/2015http://www.tonyparisi.com renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } ); scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera( 45, canvas.width / canvas.height, 1, 4000 ); scene.add(camera); var mapUrl ="../images/webgl-logo-256.jpg“; var map = THREE.ImageUtils.loadTexture(mapUrl ); var material = new THREE.MeshBasicMaterial ({ map: map }); var geometry = new THREE.CubeGeometry(2, 2, 2); cube = new THREE.Mesh(geometry, material); scene.add( cube ); represents WebGL at a high level using standard 3D graphics concepts can render to WebGL, 2D canvas, SVG and CSS3 three.js: the most popular WebGL library
  • 12. 10/20/2015http://www.tonyparisi.com major upgrade based on OpenGL ES 3.0 https://www.youtube.com/watch?v=2v6iLpY7j5M
  • 13.  promotes current WebGL extensions to full features  multiple render targets, geometry instancing, vertex array objects, fragment depth  adds previously unsupported ES 3.0 features  multisampled render buffers  sampler objects  uniform buffers  3D textures  profiling and debugging – sync objects, query objects  some ES 3.0 features are not supported in WebGL 2  mapped buffers, program binaries, drawRangeElements() 10/20/2015http://www.tonyparisi.com
  • 14. deferred rendering example 10/20/2015http://www.tonyparisi.com Excellent example in WebGL1… would be even faster in V2! http://marcinignac.com/blog/deferred- rendering-explained/demo/ Color, Depth, and Normal buffers. (Images by astrofa, via Wikimedia Commons.) this technique is already being used in WebGL 1 with huge performance hit – three or more render targets. with multiple render targets you do the draw once instead of three or more times…
  • 15. 10/20/2015http://www.tonyparisi.com  Enable WebGL 2 in Firefox https://wiki.mozilla.org/Platform/GFX/WebGL2  Enabled WebGL 2 in Chrome (Canary Windows/OSX, Dev Channel Linux) Run from command line with --enable-unsafe-es3-apis  Live Demo http://toji.github.io/webgl2-particles/ development status
  • 16.  Experimental WebVR API  Head-Tracking and Fullscreen VR Support Now in Browser Builds!!! (nightly/dev channels)  No Big App Downloads and Installs!!! http://mozvr.github.io/webvr-spec/webvr.html 10/20/2015http://www.tonyparisi.com WebVR: virtual reality in the browser Quake 3 WebVR demo, developed by Brandon Jones of Google http://media.tojicode.com/q3bsp/
  • 17. the WebVR API (1) Query for VR Device(s) For Rendering 10/20/2015http://www.tonyparisi.com // polyfill var getVRDevices = navigator.mozGetVRDevices /* FF */ || navigator.getVRDevices; /* webkit */ var self = this; getVRDevices().then( gotVRDevices ); function gotVRDevices( devices ) { var vrHMD; var error; for ( var i = 0; i < devices.length; ++i ) { if ( devices[i] instanceof HMDVRDevice ) { vrHMD = devices[i]; self._vrHMD = vrHMD; if ( vrHMD.getEyeParameters ) { self.left = vrHMD.getEyeParameters( "left" ); self.right = vrHMD.getEyeParameters( "right" ); } break; // We keep the first we encounter } } } get left/right eye (camera) information: horizontal offset, field of view. we’ll use WebGL to render the scene from two cameras
  • 18. the WebVR API (2) Go Fullscreen (VR Mode) 10/20/2015http://www.tonyparisi.com var self = this; var renderer = this._renderer; var vrHMD = this._vrHMD; var canvas = renderer.domElement; var fullScreenChange = canvas.mozRequestFullScreen? 'mozfullscreenchange' : 'webkitfullscreenchange'; document.addEventListener( fullScreenChange, onFullScreenChanged, false ); function onFullScreenChanged() { if ( !document.mozFullScreenElement && !document.webkitFullScreenElement ) { self.setFullScreen( false ); } } if ( canvas.mozRequestFullScreen ) { canvas.mozRequestFullScreen( { vrDisplay: vrHMD } ); } else { canvas.webkitRequestFullscreen( { vrDisplay: vrHMD } ); } handle exiting fullscreen mode request fullscreen mode for this VR device fullscreen mode requires a DOM element
  • 19. the WebVR API (3)Head Tracking 10/20/2015http://www.tonyparisi.com // polyfill var getVRDevices = navigator.mozGetVRDevices /* FF */ || navigator.getVRDevices; /* webkit */ var self = this; getVRDevices().then( gotVRDevices ); function gotVRDevices( devices ) { var vrInput; var error; for ( var i = 0; i < devices.length; ++i ) { if ( devices[i] instanceof PositionSensorVRDevice ) { vrInput = devices[i] self._vrInput = vrInput; break; // We keep the first we encounter } } } … // called once per tick from requestAnimationFrame() var update = function() { var vrState = this.getVRState(); if ( !vrState ) { return; } // vrState.hmd.position contains three floats, x, y, z setCameraPosition(vrState.hmd.position); // vrState.hmd.rotation contains four floats, quaternion x,y,z,w setCameraRotation(vrState.hmd.rotation); }; initialization: get head-tracking VR device update camera to match HMD device position and orientation animation loop: query HMD device state
  • 20. WebVR and mobile  Google Cardboard Showcase  Mobile Chrome http://g.co/chromevr  two ways to implement  for existing mobile browsers – render WebGL Side-by-Side stereo (no need to query devices), existing fullscreen and browser DeviceOrientation API  new WebVR API supported in betas of FF and Chrome http://mozvr.com/downloads/ https://drive.google.com/folderview?id=0BzudLt22BqGRbW9WTHMtOWMzNjQ 10/20/2015http://www.tonyparisi.com
  • 21. WebVR and three.js Latest stable versions (r71 and up) include stereo rendering and head tracking 10/20/2015http://www.tonyparisi.com Code https://github.com/tparisi/WebVR Demo http://tparisi.github.io/WebVR/examples/cube-oculus.html simple examples for WebVR and Cardboard style can be found here
  • 22.  runtime asset format for WebGL, OpenGL ES, and OpenGL applications  compact representation for download efficiency  loads quickly into memory  JSON for scene structure and other high-level constructs  GL native data types require no additional parsing  full-featured  3D constructs (hierarchy, cameras, lights, common materials, animation)  Full support for shaders and arbitrary materials  runtime-neutral  Can be created and used by any tool, app or runtime 10/20/2015http://www.tonyparisi.com gl Transmission Format a “JPEG for 3D” http://www.gltf.gl/
  • 23. 10/20/2015http://www.tonyparisi.com "nodes": { "LOD3sp": { "children": [], "matrix": [ // matrix data here ], "meshes": [ "LOD3spShape-lib" ], "name": "LOD3sp" }, … "meshes": { "LOD3spShape-lib": { "name": "LOD3spShape", "primitives": [ { "attributes": { "NORMAL": "accessor_25", "POSITION": "accessor_23", "TEXCOORD_0": "accessor_27" }, "indices": "accessor_21", "material": "blinn3-fx", "primitive": 4 } ] } }, the structure of a glTF file "buffers": { "duck": { "byteLength": 102040, "type": "arraybuffer", "uri": "duck.bin" } }, meshes and other visual types access low-level data rich data e.g. vertices and animations stored in binary files scene structure defined as hierarchy of nodes
  • 24. 10/20/2015http://www.tonyparisi.com comparison : glTF vs COLLADA file sizes Size (Mb) Wine Rack Super Murdoch Virtual City Razer Rambler glTF JSON + .bin 0.58 0.85 2.6 5.1 12.7 COLLADA (.dae) 0.79 1.8 5.5 7.5 31.6 % reduction 27% 53% 53% 32% 60% 0 5 10 15 20 25 30 35 40 45 50 Wine Rack Super Murdoch Virtual City Razer Rambler COLLADA (.dae) glTF JSON + .bin
  • 25. comparison : glTF vs COLLADA load times 0 1 2 3 4 5 6 7 Wine Rack Razer Virtual City Super Murdoch Rambler COLLADA (.dae) glTF glTF w BufferGeometry Wine Rack Razer Virtual City Super Murdoch Rambler glTF w BufferGeometry 0.06 0.08 0.09 0.21 0.69 glTF 0.08 0.36 0.15 0.27 1.86 COLLADA (.dae) 0.18 1.34 1.05 0.55 3.88 %reduction 67% 94% 91% 62% 82%
  • 26. 10/20/2015http://www.tonyparisi.com three.js Loader https://github.com/mrdoob/three.js/ It’s the native format! http://cesiumjs.org/ Babylon.js Loader (in development) http://www.babylonjs.com/ collada2gltf converter https://github.com/KhronosGroup/glTF FBX to glTF Converter (in development) Drag and drop convertor coming http://gltf.autodesk.io/ Online drag and drop COLLADA to glTF converter http://cesiumjs.org/convertmodel.html PIPELINE TOOLS adoption
  • 27. WebGL ecosystem 10/20/2015http://www.tonyparisi.com game engines/IDEs Goo Engine *http://www.gootechnologies.com/ Verold http://verold.com/ * Turbulenz https://turbulenz.com/ PlayCanvas http://www.playcanvas.com/ Sketchfab https://sketchfab.com/ Unreal *https://www.unrealengine.com/ Unity * http://unity3d.com/#unity-5 scene graph libraries/page frameworks Three.js http://threejs.org/ SceneJS http://scenejs.org/ BabylonJS http://www.babylonjs.com/ GLAM https://github.com/tparisi/glam WebVR video players eleVR https://github.com/hawksley/eleVR-Web-Player Littlstar https://github.com/littlstar/slant-player * not open source
  • 28. Links WebGL 2  Browsers https://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation  Live Demo http://toji.github.io/webgl2-particles/  Specification https://www.khronos.org/registry/webgl/specs/latest/2.0/#5 WebVR  Browsers Firefox http://mozvr.com/downloads/ Desktop Chrome https://drive.google.com/folderview?id=0BzudLt22BqGRbW9WTHMtOWMzNjQ Mobile Chrome https://drive.google.com/folderview?id=0BzudLt22BqGRbW9WTHMtOWMzNjQ  Showcases http://mozvr.com/ http://vr.chromeexperiments.com/  Mailing List web-vr-discuss@mozilla.org  Example Code https://github.com/tparisi/WebVR  Specification http://mozvr.github.io/webvr-spec/webvr.html glTF  Project Page http://www.gltf.gl/ 10/20/2015http://www.tonyparisi.com