-
Notifications
You must be signed in to change notification settings - Fork 62
/
Copy pathindex.html
311 lines (311 loc) · 20.5 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
<!DOCTYPE html>
<html>
<head>
<title>Callum's Sandbox</title>
<meta content="Callum's Sandbox - WebGL experiments, tests, code and sample applications." name="description">
<meta content="callum,chrome,collada,earth,example,experiments,globe,google,hurricane tracker,linden,opengl,planet,sample,shader,spline,three.js,webgl,terrain,street cloud" name="keywords">
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css' />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-51404170-1', 'callum.com');
ga('send', 'pageview');
</script>
<div class="wrapper">
<div class="container">
<h1>About</h1>
<h2>British bloke, in San Francisco via London, Singapore, Barcelona, and Hong Kong ● <a target="_blank" href="http://secondlife.com">Second Life</a> developer during the day since 2004 ● Enthusiastic WebGL hacker in the evenings ● Founder of Industrial Might and Logic Combat Robots ● Eager traveller ● Crossfit and indoor rowing aficionado ● Insanely happy husband and father ● <a href="#updates">Recent updates</a> ● <a href="#contact">Contact me</a></h2>
<hr>
<div id="four-columns" class="grid-container" style="display:block;">
<h1>WebGL apps, experiments and code</h1>
<ul class="rig columns-4">
<li>
<a href="apps/iss_photo_viewer/index.html" target="_blank">
<img src="thumbs/iss_photo_viewer.jpeg" />
</a>
<h3>ISS Photo Viewer</h3>
<p>Displays the shooting location and contents of all (1.4 million+) photos taken from the International Space Station since the first mission in October 2000 up to the present day</p>
<a href="https://github.com/callumprentice/callumprentice.github.io/tree/master/apps/iss_photo_viewer" target="_blank"><img class="srcicon" src="img/githubsrc.png"></a>
</li>
<li>
<a href="apps/amui/index.html" target="_blank">
<img src="thumbs/amui.jpeg" />
</a>
<h3>amui - Add Manipulator UI</h3>
<p>Experiment to let you add manipulator UI (via dat.GUI) to modify objects in a three.js scene on any page via a bookmarklet.</p>
<a href="https://github.com/callumprentice/callumprentice.github.io/tree/master/apps/amui" target="_blank"><img class="srcicon" src="img/githubsrc.png"></a>
</li>
<li>
<a href="apps/street_cloud_flow/index.html" target="_blank">
<img src="thumbs/street_cloud_flow.jpeg" />
</a>
<h3>Street Cloud Flow</h3>
<p>The next iteration of <a href="http://callum.com/apps/street_cloud/index.html" target="_blank">Street Cloud</a>. This version generates multiple views based on a starting location. Lots left to do but makes quite beautiful images. See Help dialog for more details.</p>
<a href="https://github.com/callumprentice/callumprentice.github.io/tree/master/apps/street_cloud_flow" target="_blank"><img class="srcicon" src="img/githubsrc.png"></a>
</li>
<li>
<a href="apps/double_pendulum/index.html" target="_blank">
<img src="thumbs/double_pendulum.jpeg" />
</a>
<h3>Double Pendulum</h3>
<p>Inspired by <a href="http://www.physicsandbox.com/projects/double-pendulum.html" target="_blank">fascinating illustration</a> of double pendulum physics in ~100 lines of JavaScript, I made a WebGL version using one of the three.js <a href="http://threejs.org/examples/webgl_materials_cubemap_balls_reflection.html" target="_blank">examples</a> as a starting point.</p>
<a href="https://github.com/callumprentice/callumprentice.github.io/tree/master/apps/double_pendulum" target="_blank"><img class="srcicon" src="img/githubsrc.png"></a>
</li>
<li>
<a href="apps/threejs_app_template_interactive/index.html" target="_blank">
<img src="thumbs/threejs_app_template_interactive.jpeg" />
</a>
<h3>Three.js Interactive App Template Generator</h3>
<p>Generate a template three.js application using interactive controls and use it as the starting point for your next masterpiece. Select options, features and code then save it off as a zip file. <i>Updated (2014-06-27)</i>: Now you can send it to a JS Fiddle and include helper geometry objects.</p>
<a href="https://github.com/callumprentice/callumprentice.github.io/tree/master/apps/threejs_app_template_interactive" target="_blank"><img class="srcicon" src="img/githubsrc.png"></a>
</li>
<li>
<a href="apps/street_cloud/index.html" target="_blank">
<img src="thumbs/street_cloud.jpeg" />
</a>
<h3>Street Cloud Interactive</h3>
<p>An experiment to render Google Street View ® scenes as 3D point clouds using the LiDAR data captured along with the regular panorama images. A rudimentary navigation system allows you to move between connected locations. <i>Updated (2014-07-09) Change in internals of StreetView API broke it for a while :(</i>:</p>
<a href="https://github.com/callumprentice/callumprentice.github.io/tree/master/apps/street_cloud" target="_blank"><img class="srcicon" src="img/githubsrc.png"></a>
</li>
<li>
<a href="apps/webgl_terrain/index.html" target="_blank">
<img src="thumbs/webgl_terrain.jpeg" />
</a>
<h3>WebGL Terrain</h3>
<p>Noticed a really <a href="http://www.playfuljs.com/realistic-terrain-in-130-lines/" target="_blank">neat page</a> that describes how to make a terrain generator in 130 lines of JavaScript. Thought it would be interesting to make an interactive WebGL version.</p>
<a href="https://github.com/callumprentice/callumprentice.github.io/tree/master/apps/webgl_terrain" target="_blank"><img class="srcicon" src="img/githubsrc.png"></a>
</li>
<li>
<a href="apps/storm_tracks_webgl/index.html" target="_blank">
<img src="thumbs/storm_tracks_webgl.jpeg" />
</a>
<h3>Storm Tracks WebGL</h3>
<p>Interactive map of hurricanes, typhoons, cyclones and tropical storm tracks from 1848 to 2013 including Super Typhoon Haiyan/Yolanda.</p>
<a href="https://github.com/callumprentice/callumprentice.github.io/tree/master/apps/storm_tracks_webgl" target="_blank"><img class="srcicon" src="img/githubsrc.png"></a>
</li>
<li>
<a href="https://github.com/callumprentice/ThreeJsAppTemplate" target="_blank">
<img src="thumbs/threejs_app_template.jpeg" />
</a>
<h3>Three.JS App Template</h3>
<p>Simple Python script to generate a template Three.js app that you can use as a starting point for your next masterpiece.</p>
<a href="https://github.com/callumprentice/ThreeJsAppTemplate" target="_blank"><img class="srcicon" src="img/githubsrc.png"></a>
</li>
<li>
<a href="apps/extruded_earth/index.html" target="_blank">
<img src="thumbs/extruded_earth.jpeg" />
</a>
<h3>Extruded Earth</h3>
<p>Experimenting with data visualization by extruding world countries based on a metric.</p>
<a href="https://github.com/callumprentice/callumprentice.github.io/tree/master/apps/extruded_earth" target="_blank"><img class="srcicon" src="img/githubsrc.png"></a>
</li>
<li>
<a href="apps/connected_planet/index.html" target="_blank">
<img src="thumbs/connected_planet.jpeg" />
</a>
<h3>Connected Planet</h3>
<p>Lat/long connected spline based arcs over planet Earth with logo, tweening and UI.</p>
<a href="https://github.com/callumprentice/callumprentice.github.io/tree/master/apps/connected_planet" target="_blank"><img class="srcicon" src="img/githubsrc.png"></a>
</li>
<li>
<a href="apps/pixijs_test/index.html" target="_blank">
<img src="thumbs/pixijs_test.jpeg" />
</a>
<h3>Pixi.js Test</h3>
<p>Experimenting by mixing up bits of <a href="http://www.pixijs.com" target="_blank">Pixi.js</a> demos. Click to jump.</p>
<a href="https://github.com/callumprentice/callumprentice.github.io/tree/master/apps/pixijs_test" target="_blank"><img class="srcicon" src="img/githubsrc.png"></a>
</li>
<li>
<a href="apps/globe_manipulator/index.html" target="_blank">
<img src="thumbs/globe_manipulator.jpeg" />
</a>
<h3>Globe Manipulator</h3>
<p>Manipulate a globe and go to or pick, lat/long coordinates.</p>
<a href="https://github.com/callumprentice/callumprentice.github.io/tree/master/apps/globe_manipulator" target="_blank"><img class="srcicon" src="img/githubsrc.png"></a>
</li>
<li>
<a href="apps/fur_ball/index.html" target="_blank">
<img src="thumbs/fur_ball.jpeg" />
</a>
<h3>Fur Ball</h3>
<p>Testing buffer geometry with 100,000 lines - next, make it move with a shader.</p>
<a href="https://github.com/callumprentice/callumprentice.github.io/tree/master/apps/fur_ball" target="_blank"><img class="srcicon" src="img/githubsrc.png"></a>
</li>
<li>
<a href="apps/sphere_ray_intersection/index.html" target="_blank">
<img src="thumbs/sphere_ray_intersection.jpeg" />
</a>
<h3>Sphere/Ray Intersection</h3>
<p>Testing sphere and ray intersection code.</p>
<a href="https://github.com/callumprentice/callumprentice.github.io/tree/master/apps/sphere_ray_intersection" target="_blank"><img class="srcicon" src="img/githubsrc.png"></a>
</li>
<li>
<a href="apps/model_pick/index.html" target="_blank">
<img src="thumbs/model_pick.jpeg" />
</a>
<h3>Pick Point From Model</h3>
<p>More complex intersection test against a 3D model</p>
<a href="https://github.com/callumprentice/callumprentice.github.io/tree/master/apps/model_pick" target="_blank"><img class="srcicon" src="img/githubsrc.png"></a>
</li>
<li>
<a href="apps/shader_spline/index.html" target="_blank">
<img src="thumbs/shader_spline.jpeg" />
</a>
<h3>Shader Spline</h3>
<p>Animated shader on spline.</p>
<a href="https://github.com/callumprentice/callumprentice.github.io/tree/master/apps/shader_spline" target="_blank"><img class="srcicon" src="img/githubsrc.png"></a>
</li>
<li>
<a href="apps/spline_planet/index.html" target="_blank">
<img src="thumbs/spline_planet.jpeg" />
</a>
<h3>Spline Planet</h3>
<p>Red planet with extruded circle splines plus animated shader and collinear icons.</p>
<a href="https://github.com/callumprentice/callumprentice.github.io/tree/master/apps/spline_planet" target="_blank"><img class="srcicon" src="img/githubsrc.png"></a>
</li>
<li>
<a href="apps/delaunay/index.html" target="_blank">
<img src="thumbs/delaunay.jpeg" />
</a>
<h3>Delaunay Triangulation</h3>
<p>I wanted to subdivide country outlines into triangles and thought Delaunay triangulation was the right answer but it's not.</p>
<a href="https://github.com/callumprentice/callumprentice.github.io/tree/master/apps/delaunay" target="_blank"><img class="srcicon" src="img/githubsrc.png"></a>
</li>
<li>
<a href="apps/concept_widget/index.html" target="_blank">
<img src="thumbs/concept_widget.jpeg" />
</a>
<h3>Concept Widget</h3>
<p>Experimental canvas based UI widget with lovely people at <a href="http://www.conceptarts.com/" target="_blank">Concept Arts</a>.</p>
<a href="https://github.com/callumprentice/callumprentice.github.io/tree/master/apps/concept_widget" target="_blank"><img class="srcicon" src="img/githubsrc.png"></a>
</li>
<li>
<a href="apps/squares_on_sphere/index.html" target="_blank">
<img src="thumbs/squares_on_sphere.jpeg" />
</a>
<h3>Squares On A Sphere</h3>
<p>Testing how to render collinear squares on a sphere.</p>
<a href="https://github.com/callumprentice/callumprentice.github.io/tree/master/apps/squares_on_sphere" target="_blank"><img class="srcicon" src="img/githubsrc.png"></a>
</li>
<li>
<a href="apps/ctm_loader/index.html" target="_blank">
<img src="thumbs/ctm_loader.jpeg" />
</a>
<h3>CTM Loader Test</h3>
<p>Test loading model from CTM file and apply environment map.</p>
<a href="https://github.com/callumprentice/callumprentice.github.io/tree/master/apps/ctm_loader" target="_blank"><img class="srcicon" src="img/githubsrc.png"></a>
</li>
<li>
<a href="apps/collada_duck/index.html" target="_blank">
<img src="thumbs/collada_duck.jpeg" />
</a>
<h3>Collada Duck</h3>
<p>Load a model of a duck from a Collada file.</p>
<a href="https://github.com/callumprentice/callumprentice.github.io/tree/master/apps/collada_duck" target="_blank"><img class="srcicon" src="img/githubsrc.png"></a>
</li>
</ul>
<hr>
<h1>Other stuff</h1>
<ul class="rig columns-4">
<li>
<a href="apps/wizard_of_satad/index.html" target="_blank">
<img src="thumbs/wizard_of_satad.jpeg" />
</a>
<h3>Wizard of Speed, Time and Distance</h3>
<p>Discover how many minutes speeding really buys you.</p>
<a href="https://github.com/callumprentice/callumprentice.github.io/tree/master/apps/wizard_of_satad" target="_blank"><img class="srcicon" src="img/githubsrc.png"></a>
</li>
<li>
<a href="http://secondlife.com" target="_blank">
<img src="thumbs/secondlife.jpeg" />
</a>
<h3>Second Life</h3>
<p>My day job at <a href="http://lindenlab.com" target="_blank">Linden Lab</a> since 2004</p>
</li>
<li>
<a href="http://wiki.secondlife.com/wiki/LLQtWebKit" target="_blank">
<img src="thumbs/llqtwebkit.jpeg" />
</a>
<h3>LLQtWebKit</h3>
<p>Open source project from 2005 that renders web content to a texture.</p>
</li>
<li>
<a href="http://ubrowser.com" target="_blank">
<img src="thumbs/ubrowser.jpeg" />
</a>
<h3>UBrowser</h3>
<p>Open source project from 2006 that displays a 3D web browser.</p>
</li>
</ul>
<a id="updates"></a>
<hr>
<h1>Recent updates</h1>
<h2>
<ul>
<p>● 2015-01-10: Moved to GitHub and added links to souce</p>
<p>● 2014-11-20: Added ISS Photo Viewer</p>
</ul>
</h2>
<hr>
<a id="contact"></a>
<h1>Contact</h1>
<ul class="rig columns-8">
<li>
<a href="mailto:callum@gmail.com?subject=hello!" target="_blank">
<img src="img/gmail.png" />
</a>
<h4>Email</h4>
</li>
<li>
<a href="mailto:callum@lindenlab.com?subject=hello!" target="_blank">
<img src="img/lindenlab.png" />
</a>
<h4>Work</h4>
</li>
<li>
<a href="https://my.secondlife.com/callum.linden" target="_blank">
<img src="img/secondlife.png" />
</a>
<h4>Second Life</h4>
</li>
<li>
<a href="http://www.linkedin.com/in/callumprentice" target="_blank">
<img src="img/linkedin.png" />
</a>
<h4>LinkedIn</h4>
</li>
<li>
<a href="https://github.com/callumprentice" target="_blank">
<img src="img/github.png" />
</a>
<h4>GitHub</h4>
</li>
<li>
<a href="https://twitter.com/@callumprentice" target="_blank">
<img src="img/twitter.png" />
</a>
<h4>Twitter</h4>
</li>
<li>
<a href="https://facebook.com/callum" target="_blank">
<img src="img/facebook.png" />
</a>
<h4>Facebook</h4>
</li>
<li>
<a href="https://plus.google.com/+CallumPrentice" target="_blank">
<img src="img/googleplus.png" />
</a>
<h4>Google+</h4>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>