This repository has been archived by the owner on Aug 16, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
317 lines (315 loc) · 14.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- Slide meta data, remove/edit as you see fit -->
<title>WebGL</title>
<meta name="generator" content="Organic" />
<meta name="author" content="Jordi Boggiano" />
<meta name="company" content="Liip AG" />
<meta name="email" content="[email protected]" />
<meta name="presdate" content="2010-05-30" />
<!-- Slippy core file and dependencies -->
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.history.js"></script>
<script type="text/javascript" src="js/slippy-0.9.0.js"></script>
<!-- Slippy structural styles -->
<link type="text/css" rel="stylesheet" href="css/slippy-0.9.0.css"/>
<!-- Slippy theme -->
<link type="text/css" rel="stylesheet" href="css/slippy-dark.css"/>
<!-- Syntax highlighting core file -->
<script type="text/javascript" src="highlighter/shCore.js"></script>
<!-- Syntax highlighting brushes, remove those you don't need -->
<script type="text/javascript" src="highlighter/shBrushBash.js"></script>
<script type="text/javascript" src="highlighter/shBrushCpp.js"></script>
<script type="text/javascript" src="highlighter/shBrushCSharp.js"></script>
<script type="text/javascript" src="highlighter/shBrushCss.js"></script>
<script type="text/javascript" src="highlighter/shBrushDelphi.js"></script>
<script type="text/javascript" src="highlighter/shBrushDiff.js"></script>
<script type="text/javascript" src="highlighter/shBrushGroovy.js"></script>
<script type="text/javascript" src="highlighter/shBrushJava.js"></script>
<script type="text/javascript" src="highlighter/shBrushJScript.js"></script>
<script type="text/javascript" src="highlighter/shBrushPhp.js"></script>
<script type="text/javascript" src="highlighter/shBrushPlain.js"></script>
<script type="text/javascript" src="highlighter/shBrushPython.js"></script>
<script type="text/javascript" src="highlighter/shBrushRuby.js"></script>
<script type="text/javascript" src="highlighter/shBrushScala.js"></script>
<script type="text/javascript" src="highlighter/shBrushSql.js"></script>
<script type="text/javascript" src="highlighter/shBrushVb.js"></script>
<script type="text/javascript" src="highlighter/shBrushXml.js"></script>
<!-- Syntax highlighting styles-->
<link type="text/css" rel="stylesheet" href="highlighter/shCore.css"/>
<link type="text/css" rel="stylesheet" href="highlighter/shThemeEclipse.css"/>
<!-- Slippy init code -->
<script type="text/javascript">
$(function() {
$(".slide").slippy({
// settings go here
// possible values are:
// - animLen, duration for default animations (0 = disabled)
// - animInForward, receives a slide and animates it
// - animInRewind, receives a slide and animates it
// - animOutForward, receives a slide and animates it
// - animOutRewind, receives a slide and animates it
// - baseWidth, defines the base for img resizing, if you don't want only
// full-width images, specify this as the pixel width of a slide so that
// images are scaled properly (default is 620px wide)
// - ratio, defines the width/height ratio of the slides, defaults to 1.3 (620x476)
});
SyntaxHighlighter.all();
});
</script>
<!-- Custom style for this deck -->
<style type="text/css">
.slide.nochrome {
border: 0;
background: 0;
}
</style>
</head>
<body>
<div class="slide">
<h1>Coming soon... 3D without plugins</h1>
<h3>WebGL. OK, what is it...</h3>
<ul>
<li>Hardware-assisted 3D rendering in browser</li>
<li>Standards-based, multi-vendor support, no plugin required</li>
<li>Appearing in browsers big and small</li>
<li>based on OpenGL-es 2.0</li>
<li>plugin adoption still a problem</li>
<li>plugin/browser barrier a pain</li>
<li>leave implementation up to the browser folks, things are better</li>
</ul>
</div>
<div class="slide">
<h1>Alternatives?</h1>
<ul>
<li> Flash/Papervision3D
<li> Silverlight/Balder
<li> Java Applet/OpenGL/JOGL
<li> Flash10
<li> Unity3D plugin
<li> Torque3D plugin
<li> Google NaCl
<li> Google O3D -- WebGL prototype
<li> VRML -- 3D as markup, Windows-only plugin
</ul>
</div>
<div class="slide">
<h1>Didn't it take years to get html5?</h1>
<ul>
<li> It's a multivendor standard, implemented in open and closed browsers
<li> This one is not going to disappear or falter like VRML
<li> Nightly browser builds have it, supported as long as you have OpenGL
<li> iOS has the best adoption rate in the industry
<li> millions of handhelds will be WebGL-ready overnight
<li> android mobiles will follow, slowly
<li> don't hold your breath for windows mobile
<li> make a reasonable fallback for non-WebGL browsers and you will rock
<li> choose html5 or flash based on your audience
</ul>
</div>
<div class="slide">
<h1>Microsoft resistance?</h1>
<ul>
<li> Web standards and OpenGL... two thing MS already hated
<li> WebGL opens up another web standards battle
<li> Windows machines vs. OpenGL API
<li> Google Angle (Almost Native Graphics Layer Engine)
<li> Browsers do WebGL through Angle+Direct3D
<li> IE will never support WebGL
<li> WebGL working group Apple, Google, Mozilla, Opera (not MS)</li>
<p><img width="200" src="images/earth.jpg"/>
</ul>
</div>
<div class="slide">
<h1>Processing.js as a WebGL framework</h1>
<ul>
<li>Quickest results</li>
<li>Java-based syntax, several books document it</li>
<li>Some Processing extensions are not yet in PJS, eg Network</li>
<li>No fine-grained control over WebGL constructs, less flexible</li>
<li>A quick <a href="test1b.html" target=_blank>demo</a></li>
<p><img width="300" src="images/pong.png"/>
</ul>
</div>
<div class="slide">
<h1>Features, recommendations</h1>
<ul>
<li> Take advantage of interactive and 3D rendering
<li> Use the mouse and keyboard
<li> Move or alternate the camera
<li> Move light sources
<li> Use curved surfaces to see light effects
<li> Plan for effects like shadows to provide visual cues
<li> Use realistic approximations for gravity and other physics
<li> Be aware of principles of vision
<li> A quick <a href="test2.html" target=_blank>Pong reloaded</a></li>
<p><img width="300" src="images/reloaded.jpg"/>
</ul>
</div>
<div class="slide">
<h1>Is the restaurant on the ridge?</h1>
<img src="images/ridge.png">
</div>
<div class="slide">
<h1>...or in the valley?</h1>
<img src="images/valley.png">
</div>
<div class="slide">
<h1>Matrix stack</h1>
<ul>
<li> Many frameworks borrow this idea from OpenGL
<li> Easily added to WebGL using the programmable pipeline
<li> Matrix is 4x4 to provide both rotation and translation
<li> Don't worry about matrix math, just ask for your transforms
<li> If you don't need to preserve the stack, just reset the xform matrix</li>
<p><img width=200 src="images/robot.png">
</ul>
</div>
<div class="slide">
<h1>consider a robot</h1>
<ul>
<li> push a matrix # whole robot
<li> apply translation (to position the whole robot), modifies the top matrix
<li> place robot body
<li> push a matrix # left arm
<li> apply translation (to left side)
<li> apply rotate for the left arm
<li> place the left arm
<li> ... place fingers
<li> pop matrix # left arm
<li> push a matrix # right arm
<li> apply translation (to right side)
<li> apply rotate for the right arm
<li> place the right arm
<li> ... place fingers
<li> pop matrix # right arm
<li> pop matrix # whole robot
<li> <a href="test4.html" target=_blank>Swing</a>, robot</li>
<p><img width=100 src="images/robot.png">
</ul>
</div>
<div class="slide">
<h1>I wanted eye-popping 3d</h1>
<ul>
<li> Active/Passive stereo
<li> OpenGL supports active stereo, a quad-buffering mode
<li> No surprise, WebGL leaves this out
<li> Anaglyphs in WebGL? Maybe.
<li> You can make people use the red/blue glasses
<li> Welcome to the world of the future
<li> But processingjs can't do it
<li> Active stereo... Java applets (eg Processing/J)
<li> Adjust stereo 3d depth so at the edges it meets (or falls behind) the window border
<li> <a href="test6.html" target=_blank>Processing.js anaglyph attempt</a></li>
<li> <a href="http://cs.helsinki.fi/u/ilmarihe/jscene/demos/stereo.html" target=_blank>cue headache</a></li>
<p><img width="300" src="images/glasses.jpg"/>
</ul>
</div>
<div class="slide">
<h1>Think multiple platforms</h1>
<ul>
<li> Why write your 3D in java/android, objc/iOS, flash/web
<li> Write it once in WebGL
<li> Native apps can embed a webview
<li> An even more Mobile-friendly web
<li> Rethink mouse clicking/interacting
<li> This very tricky part can be written just once
</ul>
</div>
<div class="slide">
<h1>You blinked!</h1>
<ul>
<li> Use flash to access web cam
<li> demos are out there that add you to the scene
<li>Unfortunately, none of them work at the moment
<li>HTML5 webcam API will nail this</li>
<li>Add to an object like <a href="https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/google/shiny-teapot/index.html" target=_blank>Utah teapot</a></li>
<p><img width="300" src="images/teapot.png"/>
</ul>
</div>
<div class="slide">
<h1>Websocket connection</h1>
<pre>
websock = new WebSocket("ws://localhost:8080");
websock.onopen = function(evt) {
console.log("opened websocket")
websock.send("Hello Web Socket!");
};
websock.onmessage = function(evt) {
console.log("received message " + evt.data);
};
websock.onclose = function(evt) {
console.log("I really should try to connect again");
};
</pre>
</div>
<div class="slide">
<h1>Eventmachine</h1>
<pre>
require 'em-websocket'
EventMachine::WebSocket.start(:host => "0.0.0.0", :port => 8080) do |ws|
ws.onopen { ws.send "Hello Client!"}
ws.onmessage { |msg| ws.send "Pong: #{msg}" }
ws.onclose { puts "WebSocket closed" }
end
</pre>
<p><p><p><a href="test3.html" target=_blank>run...</a>
</div>
<div class="slide">
<h1>ProcessingJS prototyping</h1>
<ul>
<li> mix JS with Processing
<li> Not optimized
<li> Lots of WebGL features are inaccessible
<li> Implement in a full js framework later
</ul>
</div>
<div class="slide">
<h1>Grown-up WebGL</h1>
<ul>
<li> X3DOM
<li> GLGE
<li> WebGLU
<li> SpiderGL
<li> C3DL
<li> CopperLicht
</ul>
</div>
<div class="slide">
<h1>Shaders</h1>
<ul>
<li> WebGL uses a C-like language for shaders
<li> Vertex shader takes coordinates, typically transforms by top matrix
<li> Fragment shader deals with color for fragments
<p><img src="images/pipeline.gif"/>
</ul>
</div>
<div class="slide">
<h1>SpiderGL examples</h1>
<ul>
<li><a href="spider2.html" target=_blank>Simple example</a>
<li><a href="spider.html" target=_blank>Shadow demo</a>
</ul>
</div>
<div class="slide">
<h1>Summary</h1>
<ul>
<li> WebGL will be the best way to do 3D on the web (eventually)
<li> Quick prototypes in ProcessingJS
<li> Watch for iOS to be the fastest adopter
<li> Next audience in high adopters will be developers, techies
<li> Have a backup plan for desktops and slow adopters
<li> Unity, Torque frameworks will probably target WebGL
<li> Frameworks like CopperLicht will likely work toward other platforms
<li> Consider WebGL as its own multiplatform framework
</ul>
</div>
<div class="slide">
<h1>Questions</h1>
<ul>
</ul>
</div>
</body>
</html>