{"id":8264,"date":"2013-03-21T08:20:16","date_gmt":"2013-03-21T06:20:16","guid":{"rendered":"http:\/\/flaven.fr\/?p=8264"},"modified":"2013-10-01T05:30:00","modified_gmt":"2013-10-01T03:30:00","slug":"zygote-body-open-3d-viewer-html5-webgl-une-experience-webgl-sur-lexploration-du-corps-humain","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2013\/03\/zygote-body-open-3d-viewer-html5-webgl-une-experience-webgl-sur-lexploration-du-corps-humain\/","title":{"rendered":"Zygote Body, Open 3D Viewer, HTML5, WebGL &#8211; Une exp\u00e9rience WebGL sur l&#8217;exploration du corps humain"},"content":{"rendered":"<p>\t<!-- Zygote Body, Open 3D Viewer, HTML5, WebGL - Une exp\u00e9rience WebGL sur l'exploration du corps humain --><\/p>\n<p>\t<!--  Webdoc, flash, Samuel Bollendorff, ONE MILLIONth TOWER, Open 3D Viewer, Wavefront 3D Object File, HTML5, WebGL, Zygote Body, Katerina Cizek, Mike Robbins, Heidegger, Tarine, Vache, Blender, Bollendorff, 3D, Jerome Denis, jQuery, Javascript, Chrome, Google, Flash, \uff27aia Framework, nfb --><\/p>\n<p>\t<a title=\"Zygote Body, Open 3D Viewer, HTML5, WebGL - Une exp\u00e9rience WebGL sur l'exploration du corps humain\" class=\"bigpic\" href=\"#\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/03\/3D_webgl_www_zygotebody_com_b.jpg\" width=\"600\" height=\"235\" alt=\"Zygote Body, Open 3D Viewer, HTML5, WebGL - Une exp\u00e9rience WebGL sur l'exploration du corps humain\" \/><\/a><em>Copyright &copy; zygotebody.com<\/em><\/p>\n<p>\tOn avait d\u00e9j\u00e0 \u00e9voqu\u00e9 dans ce blog les promesses \u00e9videntes qu&#8217;offraient le tandem HTML5 + WebGL pour la production de webdoc ou d&#8217;exp\u00e9riences interactives enrichies notamment en commentant le stup\u00e9fiant \u00ab ONE MILLIONth TOWER \u00bb de Katerina Cizek, Mike Robbins + friends ou en visionnant l&#8217;excellente production <code>ro.me<\/code>. En voici donc une autre tout aussi \u00e9tonnante <b>Zygote Body<\/b>, qui pr\u00e9sente les diff\u00e9rentes couches qui composent un corps humain (ossature, terminaisons nerveuses, organes&#8230;etc). Vous avez le choix entre un homme et une femme, puis vous descendez la mollette sur votre gauche pour faire dispara\u00eetre les couches successives (nodes) au final il ne reste rien, une sorte d&#8217;exp\u00e9rience live de la <code>finitude<\/code> (une Heideggerienne Dasein eXperience), comme la rappelle \u00e0 bonne escient la Gen\u00e8se : <code>Oui, tu es poussi\u00e8re et \u00e0 la poussi\u00e8re tu retourneras<\/code>.<\/p>\n<p>\tApres ces consid\u00e9rations ontologiques, revenons \u00e0 un propos technologique pour voir ce qui se cache derri\u00e8re cette superbe machinerie HTML5 WebGL. Eh, bien on y trouve un projet open-source aussi flambant que <code>PopCorn<\/code> \u00e0 savoir l&#8217;<code>Open 3D Viewer<\/code>, un player WebGL d&#8217;objets 3D combin\u00e9e \u00e0 une recherche instantan\u00e9e, g\u00e9nial !<\/p>\n<h4>L&#8217;aventure int\u00e9rieure et l&#8217;<code>Open 3D Viewer<\/code><\/h4>\n<p>\tA d\u00e9faut de corps humain, vous aurez tous les d\u00e9tails de l&#8217;anatomie et de la plastique de <code>Bessie<\/code> (Bessie.obj), qui n&#8217;est rien moins qu&#8217;une&#8230;. superbe vache *. <\/p>\n<p>\t<i>* Il n&#8217;est pas dit que c&#8217;est une Tarine, une Prim&#8217;Holstein ou une blonde d&#8217;Aquitaine&#8230; Chez 3WDOC, depuis que nous avons oeuvr\u00e9 sur <code>LA CRISE DU LAIT de Samuel Bollendorff<\/code>, nous sommes devenus quasi experts en bovins, on penche donc pour la Tarine.<\/i><\/p>\n<h4>Installation de l&#8217;<code>Open 3D Viewer<\/code><\/h4>\n<p>Les derniers fichiers source sont disponibles sur Google Code, vous pouvez donc extraire une copie de travail \u00e0 partir de ce d\u00e9p\u00f4t.<\/p>\n<p><b>La commande d&#8217;extraction \u00e0 lancer dans un terminal<\/b><\/p>\n<pre lang=\"bash\">\r\n\t# Non-members may check out a read-only working copy anonymously over HTTP.\r\n\tsvn checkout http:\/\/open-3d-viewer.googlecode.com\/svn\/trunk\/ open-3d-viewer-read-only\r\n<\/pre>\n<p><\/i><\/p>\n<p><i>Source : <a href=\"hhttps:\/\/code.google.com\/p\/open-3d-viewer\/\" target=\"_blank\">https:\/\/code.google.com\/p\/open-3d-viewer\/<\/a><\/i><\/p>\n<p>Il ne reste plus qu&#8217;\u00e0 placer le tout sur un serveur web genre MAMP ou EasyPHP par exemple. Pour installer un serveur en local rien de plus facile, suivez ces tutoriaux :<\/p>\n<ul>\n<li>Installer un environnement PHP-MySQL sur MAC<br \/><a href=\"http:\/\/social.hecube.net\/2009\/04\/installer-un-environnement-php-mysql-sur-mac\/\" target=\"_blank\">http:\/\/social.hecube.net\/2009\/04\/installer-un-environnement-php-mysql-sur-mac\/<\/a><\/li>\n<li>Installer facilement PHP-MySQL sur un PC avec EasyPHP<br \/><a href=\"http:\/\/social.hecube.net\/2009\/03\/installer-facilement-php-mysql-sur-un-pc-avec-easyphp\/\" target=\"_blank\">http:\/\/social.hecube.net\/2009\/03\/installer-facilement-php-mysql-sur-un-pc-avec-easyphp\/<\/a><\/li>\n<\/ul>\n<h4>Qu&#8217;est-ce qu&#8217;il y a dans <code>Bessie<\/code> ?<\/h4>\n<p>On va surtout regarder le r\u00e9pertoire <code>cow_anatomy<\/code> qui contient donc les fichiers de mod\u00e9lisation de cette vache de race 3D notamment le fichier <code>Bessie.obj<\/code> qui peut-\u00eatre ouvert par un logiciel comme <code>Blender<\/code> via un import comme on vous le montre dans les capture d&#8217;\u00e9crans.<\/p>\n<p><b>d\u00e9finition du fichier <code>.obj<\/code><\/b><\/p>\n<blockquote><p>\nFile Type Wavefront 3D Object File <code>.obj<\/code><br \/>\nThree-dimensional object containing 3D coordinates, texture maps, and other object information; a standard 3D image format that can be exported and opened by several 3D image editing programs.\n<\/p><\/blockquote>\n<p><b>Conclusion : Au regard de la prolif\u00e9ration des projets WebGL de ce type, attendons-nous \u00e0 voir fleurir dans un futur proche un certain nombre de projets de webdoc bas\u00e9s sur ce type de technologie WebGL. Avec \u00ab ONE MILLIONth TOWER \u00bb, Katerina Cizek, Mike Robbins + friends avaient montr\u00e9 la voie avec une grande audace technologique, ergonomique et graphique, il ne reste donc plus qu&#8217;\u00e0 nous tous de pers\u00e9v\u00e9rer dans cette voie si prometteuse !<\/b><\/p>\n<p><i>Un grand merci \u00e0 Jerome Denis pour ses lumi\u00e8res &#038; explorations sur le WebGL <a href=\"http:\/\/www.facebook.com\/pages\/JDenis\/209187635807472?ref=stream\" target=\"_blank\">http:\/\/www.facebook.com\/pages\/JDenis\/209187635807472?ref=stream<\/a><\/i><\/p>\n<p>\t<b>Quelques \u00e9crans de Zygote Body<\/b><\/p>\n<div id='gallery-1' class='gallery galleryid-8264 gallery-columns-1 gallery-size-medium'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/flaven.fr\/wp-content\/uploads\/2013\/03\/3D_webgl_www_zygotebody_com_b_bf.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"225\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/03\/3D_webgl_www_zygotebody_com_b_bf-300x225.jpg\" class=\"attachment-medium size-medium\" alt=\"\" srcset=\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/03\/3D_webgl_www_zygotebody_com_b_bf-300x225.jpg 300w, https:\/\/flaven.fr\/wp-content\/uploads\/2013\/03\/3D_webgl_www_zygotebody_com_b_bf-94x70.jpg 94w, https:\/\/flaven.fr\/wp-content\/uploads\/2013\/03\/3D_webgl_www_zygotebody_com_b_bf-420x315.jpg 420w, https:\/\/flaven.fr\/wp-content\/uploads\/2013\/03\/3D_webgl_www_zygotebody_com_b_bf.jpg 640w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n\n<h4>Plus d&#8217;informations<\/h4>\n<ul>\n<li>Zygote Body<br \/>\n\t\t<a href=\"http:\/\/www.zygotebody.com\/\" target=\"_blank\">http:\/\/www.zygotebody.com\/<\/a><\/li>\n<li>open-3d-viewer &#8211; WebGL-based 3D object viewer with instant search<br \/>\n\t\t<a href=\"https:\/\/code.google.com\/p\/open-3d-viewer\/\" target=\"_blank\">https:\/\/code.google.com\/p\/open-3d-viewer\/<\/a><\/li>\n<li>blender.org<br \/>\n\t\t<a href=\"http:\/\/www.blender.org\/\" target=\"_blank\">http:\/\/www.blender.org\/<\/a><\/li>\n<li>J&amp;Denis, le blog de Jerome Denis, une autorit\u00e9 en ce qui concerne la 3D (3dsmax, Maxwell Render&#8230;) et bien sur le WebGL<br \/>\n\t\t\t<a href=\"http:\/\/www.edifik.fr\/bloging\/\" target=\"_blank\">http:\/\/www.edifik.fr\/bloging\/<\/a><\/li>\n<li>ONE MILLIONth TOWER, HTML5, WebGL \u2013 L\u2019urbanisme r\u00e9invent\u00e9 par la seule force du webdoc<br \/>\n\t<a href=\"https:\/\/flaven.fr\/2011\/11\/22\/one-millionth-tower-html5-webgl-lurbanisme-reinvente-par-la-seule-force-du-webdoc\/\" target=\"_blank\">http:\/\/blog.3wdoc.com\/fr\/2011\/11\/22\/one-millionth-tower-html5-webgl-lurbanisme-reinvente-par-la-seule-force-du-webdoc\/<\/a><\/li>\n<li>La crise du lait par Samuel Bollendorff, une d\u00e9monstration de webdocumentaire en HTML5<br \/>\n\t<a href=\"https:\/\/flaven.fr\/2010\/11\/21\/la-crise-du-lait-par-samuel-bollendorff-une-demonstration-de-webdocumentaire-en-html5\/\" target=\"_blank\">http:\/\/blog.3wdoc.com\/fr\/2010\/11\/21\/la-crise-du-lait-par-samuel-bollendorff-une-demonstration-de-webdocumentaire-en-html5\/<\/a><\/li>\n<li>La m\u00eame production, la crise du lait par Samuel Bollendorff,  port\u00e9e en Flash sous \uff27aia Framework par nos soins<br \/>\n\t<a href=\"http:\/\/www.samuel-bollendorff.com\/fr\/la-crise-du-lait\/\" target=\"_blank\">http:\/\/www.samuel-bollendorff.com\/fr\/la-crise-du-lait\/<\/a><\/li>\n<li>i-docs, documentaire interactif \u2013 Back from Bristol, un resum\u00e9 du Symposium i-docs 2012 #idocs<br \/>\n\t<a href=\"https:\/\/flaven.fr\/2012\/03\/28\/i-docs-documentaire-interactif-back-from-bristol-un-condense-de-la-session-i-docs-2012\/\" target=\"_blank\">http:\/\/blog.3wdoc.com\/fr\/2012\/03\/28\/i-docs-documentaire-interactif-back-from-bristol-un-condense-de-la-session-i-docs-2012\/<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>On avait d\u00e9j\u00e0 \u00e9voqu\u00e9 dans ce blog les promesses \u00e9videntes qu&#8217;offraient le tandem HTML5 + WebGL pour la production de webdoc ou d&#8217;exp\u00e9riences interactives enrichies notamment en commentant le stup\u00e9fiant \u00ab ONE MILLIONth TOWER \u00bb de Katerina Cizek, Mike Robbins + friends [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":9632,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"Zygote Body utilise HTML5 et WebGL pour explorer le corps humain en 3D. S\u00e9lectionnez le sexe et visualisez les couches internes, de l'ossature aux organes.","bf_ai_og_title":"Zygote Body: Exp\u00e9rience WebGL","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3436,3454,3451],"tags":[1790,1791,762,372,256,2214,1792,2185,226,1793,2190,1363,1794,1376,1447,1795,740,1796,1797,1798,2263,2274,1799],"class_list":["post-8264","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-digital-storytelling-webdocs","category-journalism-writing","category-web-design-front-end","tag-3d","tag-blender","tag-bollendorff","tag-chrome","tag-flash","tag-google","tag-heidegger","tag-html5","tag-javascript","tag-jerome-denis","tag-jquery","tag-katerina-cizek","tag-mike-robbins","tag-nfb","tag-one-millionth-tower","tag-open-3d-viewer","tag-samuel-bollendorff","tag-tarine","tag-vache","tag-wavefront-3d-object-file","tag-webdoc","tag-webgl","tag-zygote-body"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-29i","jetpack_featured_media_url":"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/03\/3D_webgl_www_zygotebody_com_b_bf.jpg","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/8264","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/comments?post=8264"}],"version-history":[{"count":1,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/8264\/revisions"}],"predecessor-version":[{"id":9633,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/8264\/revisions\/9633"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media\/9632"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=8264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=8264"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=8264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}