{"id":736,"date":"2012-08-28T21:16:22","date_gmt":"2012-08-29T03:16:22","guid":{"rendered":"http:\/\/cbateman.com\/blog\/?p=736"},"modified":"2013-06-05T22:42:35","modified_gmt":"2013-06-06T04:42:35","slug":"head-coupled-3d-transforms","status":"publish","type":"post","link":"https:\/\/cbateman.com\/blog\/head-coupled-3d-transforms\/","title":{"rendered":"Head-Coupled 3D Transforms"},"content":{"rendered":"<p>Yeah, you read that right. Okay, so this is a little crazy, but I really wanted to try it. If you don&#8217;t know what head-coupled perspective is, here&#8217;s a <a href=\"http:\/\/www.youtube.com\/watch?v=ydIPKkjBlMw&#038;t=0m30s\">realistic example<\/a>.<\/p>\r\n\r\n<p>I built a simple scene with CSS 3D transforms, and then all we have to do is animate the perspective-origin based on the position of your eyeballs. I didn&#8217;t have to do any face-tracking work thanks to the <a href=\"https:\/\/github.com\/liuliu\/ccv\/\">CCV library<\/a>.<\/p>\r\n\r\n<p><a href=\"http:\/\/cbateman.com\/demos\/head-coupled\/\">Check it out here!<\/a><\/p>\r\n\r\n<p>The face tracking will work best if the scene is well lit with a simple background, and you&#8217;ll need to keep your head vertical (and by the way, the face-tracking library is a major memory hog &#8211; it seems to be garbage collecting upwards of 15MB every frame &#8211; yeesh). And of course it will only work in Chrome until Firefox implements webcam access.<\/p>\r\n\r\n<p>Silly, maybe, but it was definitely fun to try. If you&#8217;re interested, I also found an <a href=\"http:\/\/itunes.apple.com\/us\/app\/i3d\/id434844658\">iOS app<\/a> that does the same thing much better.<\/p>\r\n\r\n<p><a href=\"http:\/\/www.chromeexperiments.com\/detail\/head-coupled-3d-transforms\/\"><img decoding=\"async\" src=\"\/demos\/head-coupled\/badge-black_black.png\" alt=\"See my Experiment on ChromeExperiments.com\" \/><\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Yeah, you read that right. Okay, so this is a little crazy, but I really wanted to try it. If you don&#8217;t know what head-coupled perspective is, here&#8217;s a realistic example. I built a simple scene with CSS 3D transforms, and then all we have to do is animate the perspective-origin based on the position of your eyeballs. I didn&#8217;t&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-736","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts\/736"}],"collection":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/comments?post=736"}],"version-history":[{"count":31,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts\/736\/revisions"}],"predecessor-version":[{"id":766,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts\/736\/revisions\/766"}],"wp:attachment":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/media?parent=736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/categories?post=736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/tags?post=736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}