/
atom.xml
373 lines (274 loc) · 15.5 KB
/
atom.xml
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
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[Category: demo | Learning Three.js]]></title>
<link href="http://learningthreejs.com/blog/categories/demo/atom.xml" rel="self"/>
<link href="http://learningthreejs.com/"/>
<updated>2015-09-01T13:36:39+01:00</updated>
<id>http://learningthreejs.com/</id>
<author>
<name><![CDATA[Jerome Etienne]]></name>
</author>
<generator uri="http://octopress.org/">Octopress</generator>
<entry>
<title type="html"><![CDATA[Hatsune Miku Dancing In Augmented Reality]]></title>
<link href="http://learningthreejs.com/blog/2015/07/16/hatsune-miku-dancing-in-augmented-reality/"/>
<updated>2015-07-16T08:47:00+01:00</updated>
<id>http://learningthreejs.com/blog/2015/07/16/hatsune-miku-dancing-in-augmented-reality</id>
<content type="html"><![CDATA[<p>This demo shows Hatsune Miku dancing in augmented reality within
your browser! This is great and surprisingly easy to do.
All that running on your browser, based on web standards.
I did it to show it was possible to do AR within the browser. I wanted to share the code to see what you guys can do with it.</p>
<p><img class="right" src="http://learningthreejs.com/data/2015-07-16-hatsune-miku-dancing-in-augmented-reality/screenshots/screenshot-nexus9.png" width="350"></p>
<p>Best of all, it even runs on mobile phones that
support WebGL and WebRTC.
The screenshot on the right is made on a nexus.
So we can do augmented reality within the browser on mobile</p>
<blockquote><p>We can do augmented reality within the browser on currently deployed mobile phones today!
There is nothing to wait for.</p></blockquote>
<iframe src="https://vine.co/v/eApD5rPtKxT/embed/simple" width="600" height="600" frameborder="0"></iframe>
<script src="https://platform.vine.co/static/scripts/embed.js"></script>
<h2>How is it coded ?</h2>
<p>It is mainly a link of 2 parts.
First <a href="https://github.com/jeromeetienne/threex.webar">webar extensions</a>
for three.js. They bundle what is needed to handle augmented reality with three.js, from the webcam setup to the marker localisation.
Second part is the <a href="http://takahirox.github.io/three.js/examples/#webgl_loader_mmd">mmd loader</a> which loads the model. It loads the Hatsune Miku model and its animations.</p>
<p>Once you got those 2 parts, things are simple :) you just have to display your model where your marker is.
To know the tech details, you will have to dig in <a href="http://takahirox.github.io/three.js/examples/#webgl_loader_mmd">the</a>
<a href="https://github.com/jeromeetienne/threex.webar">code</a>.
I will likely talk more about AR tho.</p>
<h2>Now Let's Do a Bit of History</h2>
<p>I did this to show it was possible to do AR within the browser and to share the code to see what you guys can do with it.
It was for a <a href="http://daqri.com/dublinhacks/">AR oriented hackathon</a> in Dublin.
It recently landed a <a href="https://twitter.com/jerome_etienne/status/572435641079877632">new job</a> at <a href="http://daqri.com">Daqri</a>. Part of my job is developer relations, so I get to help people doing AR. I love it :)</p>
<p>All the code to handle Hatsune Miku is from
<a href="https://www.linkedin.com/pub/takahiro-aoyagi/96/10a/41a">Takahiro Aoyagi</a>.
He did a <a href="http://github.io/takahirox/three.js">fork on three.js</a> to load mmd formats, the format used to store Hatsune Miku.
It may be included in three.js soon.
Here is his <a href="http://takahirox.github.io/three.js/examples/#webgl_loader_mmd">example for three.js</a>
It all started with his <a href="http://takahirox.github.io/mmd-viewer-js/">mmd viewer</a> in pure webgl.
The original contains a LOT of neat features like inverse kinetic, physics for the hair,
a toon shader to make the color more cartoonish, a edge shader to enhance the outline of the model
like a drawing.
He is doing excellent work. Check him out on twitter as <a href="https://twitter.com/superhoge">@superhoge</a>.</p>
<p>Let's have a word about <a href="https://en.wikipedia.org/wiki/Hatsune_Miku">Hatsune Miku</a> herself.
It is such a nice story.
She is a Japanese star but she is purely virtual.
She is a humanoid persona which appears as a drawing or as a hologram.
There is no human behind, even for the voice!
When she sings, what you hear is a voice synthesizer from <a href="https://en.wikipedia.org/wiki/Crypton_Future_Media">crypton</a>
All that is crazy but true :)</p>
<p>She even does <a href="https://www.youtube.com/watch?v=pEaBqiLeCu0">concerts</a> where thousand of fans are go to see her.
Actual human fans I mean, not virtual ones.
As you can see, Hatsune Miku is no stranger to augmented reality.
I love her!</p>
<iframe width="420" height="315" src="http://learningthreejs.com//www.youtube.com/embed/pEaBqiLeCu0" frameborder="0" allowfullscreen></iframe>
<h2>How To Run The Demo ?</h2>
<p>You may want to run this demo obviously.
Here is how to do it.
First you put the <a href="http://jeromeetienne.github.io/demo.hatsunemiku-augmentedreality">demo url</a> in your browser.
It will read your webcam using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia">getUserMedia</a>. When it asks for permission, allow it :)
Then you need to put this <a href="http://jeromeetienne.github.io/demo.hatsunemiku-augmentedreality/marker/image-marker-265.html">AR marker</a> in front of the camera.
You can print it and point the camera toward the paper
or you can load the marker web page and put the phone in front of the camera.
And now you can see Hatsune Mike Dancing in Augmented Reality.</p>
<p>Now let's look at it in action in this little screencast.</p>
<iframe width="420" height="315" src="http://learningthreejs.com//www.youtube.com/embed/ObVR2mOM-3Y" frameborder="0" allowfullscreen></iframe>
<h2>Conclusion</h2>
<p>If you want to experiment with augmented reality and three.js, checkout <a href="https://github.com/jeromeetienne/threex.webar">threex.webar</a>.
It is so cool to make augmented reality on the web!
I hope you have as much fun as I had doing it :)
I can't wait to see what augmented reality will do on mobile's browsers.</p>
<p>That's all folks. Have fun.</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Tunnel Effect for your Demo]]></title>
<link href="http://learningthreejs.com/blog/2012/01/11/tunnel-effect/"/>
<updated>2012-01-11T13:00:00+00:00</updated>
<id>http://learningthreejs.com/blog/2012/01/11/tunnel-effect</id>
<content type="html"><![CDATA[<p>This post presents a tunnel effect.
This is a classic in 3D demo.
They are visually efficient and easy to code.
In fact, tunnels are so trendy that
even
<a href="http://en.wikipedia.org/wiki/Doctor_Who">doctor who</a>
and
<a href="http://en.wikipedia.org/wiki/Stargate">stargate</a>
have
<a href="http://www.youtube.com/watch?v=IKo9f5npLNM">fun</a>
<a href="http://www.youtube.com/watch?v=KDIdJtW0vN4">in them</a>
:)</p>
<p><a href="http://jeromeetienne.github.com/tunnelgl/">Try the demo</a>.
It has been built using the
<a href="https://github.com/jeromeetienne/threejsboilerplate">boilerplate for three.js</a>
seen in a
<a href="/blog/2011/12/20/boilerplate-for-three-js/">previous post</a>.
The code is simple and small.
Less than 20lines has been added on top of the boilerplate.
We will create a
<a href="https://github.com/mrdoob/three.js/blob/master/src/core/Geometry.js">THREE.Geometry</a>
to get the shape of tunnel.
Then we will use a
<a href="https://github.com/mrdoob/three.js/blob/master/src/textures/Texture.js">texture</a>
trick to create the
<a href="http://en.wikipedia.org/wiki/Optical_illusion">visual illusion</a>
of moving.</p>
<!-- more -->
<iframe src="http://jeromeetienne.github.com/tunnelgl/"
webkitallowfullscreen mozallowfullscreen allowfullscreen
width="100%" height="420px" frameborder="0">
</iframe>
<h2>Let's build the walls</h2>
<p>The first step is to build the <em>walls</em> of the tunnel.
It is easier that one would expect.
A tunnel may be seen as a cylinder with the camera inside.
Once you realized that, most of the work is done.
Luckily for us,
<a href="https://github.com/mrdoob/three.js/">three.js</a>
got an easy way to build cylinders, called
<a href="https://github.com/mrdoob/three.js/blob/master/src/extras/geometries/CylinderGeometry.js">CylinderGeometry</a>.
Nevertheless our tunnel / cylinder got 2 special points.</p>
<p>First, it is open-ended. So we must not build its top and bottom.
We need this to see thru its extremities.
This is handled by a parameter in
<a href="https://github.com/mrdoob/three.js/blob/master/src/extras/geometries/CylinderGeometry.js">CylinderGeometry</a>.
We just set <code>openended</code> parameter to true and the rest is done for us :)</p>
<p>Second, the camera is usually located outside of objects.
But our tunnel/cylinder has the camera inside it.
To make our object visible from the inside, we need to turn it inside out.
For that, just use <code>mesh.flipSided = true</code></p>
<h2>Let's go forward</h2>
<p>Now we need to go forward in this tunnel
For that we will use an old trick.
We won't move the tunnel walls themselves, only their appearance.
It gives the visual illusion that we are moving.
Remember what they say in matrix ?
<a href="http://www.youtube.com/watch?v=dzm8kTIj_0M">"there is no spoon"</a>.
It is all the same, we are moving while staying still :)</p>
<center>
<iframe width="425" height="349" src="http://www.youtube.com/embed/dzm8kTIj_0M?hl=en&fs=1" frameborder="0" allowfullscreen></iframe>
</center>
<h2>A Texture isn't a spoon</h2>
<p>First we want to move the appearance of the cylinder, thus the player got the illusion to go forward.
We will use <a href="https://github.com/mrdoob/three.js/blob/master/src/textures/Texture.js">THREE.Texture</a> for that.
We wont move the actual pixels of the textures, only its coordinates.
Additionnaly we want the texture to repeat on the cylinder, thus it appears as continuous.
WebGL texture is a powerfull and flexible tool.
You can tweak so many features.</p>
<p>First let's make this texture move.
Suppose we want the texture to loop once every 10 seconds.
So the coordinate <code>.offset.y</code> needs to go from 0 to 1 in 10 seconds.
This line is enougth to make the tunnel move forward.
You can change your speed within the tunnel by changing this number.</p>
<p>```javascript</p>
<pre><code>texture.offset.y += 0.1 * seconds;
</code></pre>
<p>```</p>
<p>Now the texture repetition.
For that we will use a texture parameter called <em>wrap</em>.
It indicates how the gpu repeat the texture on a face.
Here is a good
<a href="http://lucera-project.blogspot.com/2010/06/opengl-wrap.html">tutorial on opengl wrap</a>.
By default, wrapS / wrapT are set to <code>THREE.ClampToEdgeWrapping</code>.
So the texture is scaled to match exactly the size of the face.
In our case, we want to repeat the texture and not scale it.
So we use <code>THREE.RepeatWrapping</code>.</p>
<p>```javascript</p>
<pre><code>texture.wrapT = THREE.RepeatWrapping;
</code></pre>
<p>```</p>
<h2>Conclusion</h2>
<p>We have seen how to do a tunnel with
<a href="https://github.com/mrdoob/three.js/">three.js</a>.
This is very simple to code and awesome on the screen.
It is less than 20 lines added to the <a href="https://github.com/jeromeetienne/threejsboilerplate">boilerplate</a>.
The cylinder geometry was already provided.
We used
<a href="https://github.com/mrdoob/three.js/blob/master/src/textures/Texture.js">THREE.Texture</a>
offsets to provide the optical illusion of moving.</p>
<p>Later, we may add a <a href="http://en.wikipedia.org/wiki/TARDIS">blue phonebooth</a>
and play <em>doctor who</em> :)
The code is available on
<a href="https://github.com/jeromeetienne/tunnelgl">github</a>
under MIT license.
Feel free to fork and modify.
That's all folks, have fun.</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[dat-gui - Simple UI for Demos]]></title>
<link href="http://learningthreejs.com/blog/2011/08/14/dat-gui-simple-ui-for-demos/"/>
<updated>2011-08-14T19:42:00+01:00</updated>
<id>http://learningthreejs.com/blog/2011/08/14/dat-gui-simple-ui-for-demos</id>
<content type="html"><![CDATA[<p><a href="http://code.google.com/p/dat-gui/">Dat.gui</a>
is a GUI widget for your demos. It provide way for the user to set parameters of the
demo to play with it. It is simple to code, yet cool and minimalist on the screen.
It is the blue vuemeters on the screenshot below. This post is a presentation of
the library.</p>
<p><img class="right" src="/data/dat_gui_simple_ui_for_demos/datgui_integrated.png" title="Integrated" ></p>
<h2>How to include it</h2>
<p>Simply include the library file in your page. Download it <a href="http://code.google.com/p/dat-gui">there</a></p>
<p>``` html</p>
<pre><code><script type='text/javascript' src='DAT.GUI.min.js'></script>
</code></pre>
<p>```</p>
<!--more-->
<h2>How to use it</h2>
<p>First initialize the object itself. It will create the widget and display it on the
screen top right corner. You can change this position if you wish (see <code>autoplace</code>)
<img class="right" src="/data/dat_gui_simple_ui_for_demos/datgui_closeup.png" title="Close up" ></p>
<p>``` javascript</p>
<pre><code>var gui = new DAT.GUI({
height : 5 * 32 - 1
});
</code></pre>
<p>```</p>
<p>Here is the visual result on the right.
The misterious <code>height</code>parameter is the height of the widget. You have to set it manually.
In our case, we get 5 lines plus the close button.
The formula which worked for me has been <code>nline * 32 - 1</code>.</p>
<h2>Lets configure it and add some variables</h2>
<p>First we need to store the values of the variables, lets call that <code>params</code>. It may be <code>this</code> too, it depends
of your personal style of code.</p>
<p>``` javascript</p>
<pre><code>var params = {
interation: 5000
};
</code></pre>
<p>```</p>
<p>Let add a variable name <code>interation</code> to the widget.</p>
<p>``` javascript</p>
<pre><code>gui.add(params, 'interation')
</code></pre>
<p>```</p>
<p>It will add a line in the GUI widget.
<em>dat.gui</em> will see <code>params.iteration</code> is a Number and thus <em>guess</em> you want to display a slider for it.
If it is a function, it will be interpreted as a button and call params.foobar() on click.
If the user changes the value with the mouse, the value of <code>params.iteration</code>
will be changed accordingly. Up to you to know what to do with it.</p>
<h2>Lets Custom it Some More</h2>
<p>You may be easy be notified of user changes with callbacks. <code>onFinishChange</code> is triggered once the value is changed.</p>
<p>``` javascript</p>
<pre><code>gui.add(params, 'interation').onFinishChange(function(){
// refresh based on the new value of params.interation
})
</code></pre>
<p>```</p>
<p>You can customize further if needed. To change the label displayed on the variable line, use <code>.name("better label")</code></p>
<p>``` javascript</p>
<pre><code>gui.add(params, 'interation').name('Intertions')
</code></pre>
<p>```</p>
<p>You can set up min/max limits and steps. This one will allows values from
128 to 256, only if they are multiple of 16</p>
<p>``` javascript</p>
<pre><code>gui.add(params, 'width').min(128).max(256).step(16)
</code></pre>
<p>```</p>
<h2>Conclusion</h2>
<p>I hope this introduction got you excited about DAT.GUI. I find nice for simple demos parameters, simple to code and good
looking on the screen at that. For more informations and authoritative
answer, <a href="http://code.google.com/p/dat-gui/">see details</a> here.</p>
]]></content>
</entry>
</feed>