{"id":3183,"date":"2010-12-24T19:38:51","date_gmt":"2010-12-24T19:38:51","guid":{"rendered":"http:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/?p=3183"},"modified":"2013-11-29T09:35:51","modified_gmt":"2013-11-29T09:35:51","slug":"chemdoodle","status":"publish","type":"post","link":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/?p=3183","title":{"rendered":"Embedding molecules in blogs: ChemDoodle, WebGL and SVG"},"content":{"rendered":"<div class=\"kcite-section\" kcite-section-id=\"3183\">\n<p>If you get a small rotatable molecule below, then ChemDoodle\/HTML5\/WebGL is working. Why might this be important? Well, the future is mobile, in other words, devices that rely on batteries or other sources of built-in power. This means the power guzzling GPU cards of the past (some reach ~400 Watts!) cannot be used. Rather than using e.g. a full power OpenGL library, one will use Web-based graphics libraries, which (to <a href=\"http:\/\/en.wikipedia.org\/wiki\/WebGL\" target=\"_blank\">quote Wikipedia)<\/a> <em>extends the capability of the\u00a0JavaScript programming language to allow it to generate interactive\u00a03D graphics within any compatible\u00a0web browser<\/em>. A typical target device might be for example Apple&#8217;s iPad (for which the redoubtable <a href=\"http:\/\/www.ch.imperial.ac.uk\/rzepa\/blog\/?p=8\">Jmol<\/a>, which is based on Java, is unlikely to ever work).<\/p>\n<p>To find out if your device and its browser can support this type of graphical display, go to either <a href=\"http:\/\/web.chemdoodle.com\/about\/html5\" target=\"_blank\">this test page<\/a> or this <a href=\"https:\/\/www.khronos.org\/registry\/webgl\/sdk\/tests\/webgl-conformance-tests.html\" target=\"_blank\">more general one<\/a> (which at the time of writing actually gets the WebGL test wrong!).<\/p>\n<p>I have deployed an earlier graphical methodology in other posts (SVG), which many browsers now support. This combination of HTML5, SVG and WebGL is the future! For its use on another blog, <a href=\"http:\/\/molecularmodelingbasics.blogspot.com\/2011\/02\/chemdoodling-now-in-3d-but-not-yet-on.html\">see here<\/a>.<\/p>\n<p>\n<script id=\"a1\" type=\"text\/javascript\">\/\/ < ![CDATA[\n\/\/< ![CDATA[\n        var transformBallAndStick1 = new ChemDoodle.TransformCanvas3D('transformBallAndStick1', 300, 300);\n        transformBallAndStick1.specs.set3DRepresentation('Ball and Stick');\n        transformBallAndStick1.specs.backgroundColor = 'white';\n        var molFile = httpGet( 'wp-content\/uploads\/2011\/12\/trefoil.mol' );\n        var molecule = ChemDoodle.readMOL(molFile, 2);\n        transformBallAndStick1.loadMolecule(molecule);\n\/\/ ]]><\/script><\/p>\n<!-- kcite active, but no citations found -->\n<\/div> <!-- kcite-section 3183 -->","protected":false},"excerpt":{"rendered":"<p>If you get a small rotatable molecule below, then ChemDoodle\/HTML5\/WebGL is working. Why might this be important? Well, the future is mobile, in other words, devices that rely on batteries or other sources of built-in power. This means the power guzzling GPU cards of the past (some reach ~400 Watts!) cannot be used. Rather than [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":5,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[2],"tags":[488,428,486,478,328,487,490,489,479,485,339,484,480],"ppma_author":[2661],"class_list":["post-3183","post","type-post","status-publish","format-standard","hentry","category-chemical-it","tag-3d-graphics","tag-apple","tag-gpu","tag-html5","tag-ipad","tag-java","tag-javascript","tag-opengl-library","tag-svg","tag-typical-target-device","tag-web-browser","tag-web-based-graphics-libraries","tag-webgl"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Embedding molecules in blogs: ChemDoodle, WebGL and SVG - Henry Rzepa&#039;s Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/?p=3183\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Embedding molecules in blogs: ChemDoodle, WebGL and SVG - Henry Rzepa&#039;s Blog\" \/>\n<meta property=\"og:description\" content=\"If you get a small rotatable molecule below, then ChemDoodle\/HTML5\/WebGL is working. Why might this be important? Well, the future is mobile, in other words, devices that rely on batteries or other sources of built-in power. This means the power guzzling GPU cards of the past (some reach ~400 Watts!) cannot be used. Rather than [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/?p=3183\" \/>\n<meta property=\"og:site_name\" content=\"Henry Rzepa&#039;s Blog\" \/>\n<meta property=\"article:published_time\" content=\"2010-12-24T19:38:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-11-29T09:35:51+00:00\" \/>\n<meta name=\"author\" content=\"Henry Rzepa\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Henry Rzepa\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Embedding molecules in blogs: ChemDoodle, WebGL and SVG - Henry Rzepa&#039;s Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/?p=3183","og_locale":"en_GB","og_type":"article","og_title":"Embedding molecules in blogs: ChemDoodle, WebGL and SVG - Henry Rzepa&#039;s Blog","og_description":"If you get a small rotatable molecule below, then ChemDoodle\/HTML5\/WebGL is working. Why might this be important? Well, the future is mobile, in other words, devices that rely on batteries or other sources of built-in power. This means the power guzzling GPU cards of the past (some reach ~400 Watts!) cannot be used. Rather than [&hellip;]","og_url":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/?p=3183","og_site_name":"Henry Rzepa&#039;s Blog","article_published_time":"2010-12-24T19:38:51+00:00","article_modified_time":"2013-11-29T09:35:51+00:00","author":"Henry Rzepa","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Henry Rzepa","Estimated reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/?p=3183#article","isPartOf":{"@id":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/?p=3183"},"author":{"name":"Henry Rzepa","@id":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/#\/schema\/person\/2b40f7b9c872a4dc1547e040a11b6281"},"headline":"Embedding molecules in blogs: ChemDoodle, WebGL and SVG","datePublished":"2010-12-24T19:38:51+00:00","dateModified":"2013-11-29T09:35:51+00:00","mainEntityOfPage":{"@id":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/?p=3183"},"wordCount":202,"commentCount":3,"keywords":["3D graphics","Apple","GPU","HTML5","iPad","Java","JavaScript","OpenGL library","SVG","typical target device","Web browser","Web-based graphics libraries","WebGL"],"articleSection":["Chemical IT"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/?p=3183#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/?p=3183","url":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/?p=3183","name":"Embedding molecules in blogs: ChemDoodle, WebGL and SVG - Henry Rzepa&#039;s Blog","isPartOf":{"@id":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/#website"},"datePublished":"2010-12-24T19:38:51+00:00","dateModified":"2013-11-29T09:35:51+00:00","author":{"@id":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/#\/schema\/person\/2b40f7b9c872a4dc1547e040a11b6281"},"breadcrumb":{"@id":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/?p=3183#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/?p=3183"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/?p=3183#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog"},{"@type":"ListItem","position":2,"name":"Embedding molecules in blogs: ChemDoodle, WebGL and SVG"}]},{"@type":"WebSite","@id":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/#website","url":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/","name":"Henry Rzepa&#039;s Blog","description":"Chemistry with a twist","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/#\/schema\/person\/2b40f7b9c872a4dc1547e040a11b6281","name":"Henry Rzepa","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/897b6740f7f599bca7942cdf7d7914af5988937ae0e3869ab09aebb87f26a731?s=96&d=blank&r=g370be3a7397865e4fd161aefeb0a5a85","url":"https:\/\/secure.gravatar.com\/avatar\/897b6740f7f599bca7942cdf7d7914af5988937ae0e3869ab09aebb87f26a731?s=96&d=blank&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/897b6740f7f599bca7942cdf7d7914af5988937ae0e3869ab09aebb87f26a731?s=96&d=blank&r=g","caption":"Henry Rzepa"},"description":"Henry Rzepa is Emeritus Professor of Computational Chemistry at Imperial College London.","sameAs":["https:\/\/orcid.org\/0000-0002-8635-8390"],"url":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/?author=1"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pDef7-Pl","jetpack-related-posts":[{"id":5881,"url":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/?p=5881","url_meta":{"origin":3183,"position":0},"title":"Mobile-friendly solutions for viewing (WordPress) Blogs with embedded  3D molecular coordinates.","author":"Henry Rzepa","date":"December 11, 2011","format":false,"excerpt":"My very first post on this blog, in 2008, was to describe how Jmol could be used to illustrate chemical themes by adding 3D models to posts. Many of my subsequent efforts have indeed invoked Jmol. I thought I might review progress since then, with a particular focus on using\u2026","rel":"","context":"In &quot;Chemical IT&quot;","block_context":{"text":"Chemical IT","link":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/?cat=2"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5218,"url":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/?p=5218","url_meta":{"origin":3183,"position":1},"title":"Science publishers (and authors) please take note.","author":"Henry Rzepa","date":"October 24, 2011","format":false,"excerpt":"I have for perhaps the last 25 years been urging publishers to recognise how science publishing could and should change. My latest thoughts are published in an article entitled \"The past, present and future of Scientific discourse\" (DOI: 10.1186\/1758-2946-3-46). Here I take two articles, one published 58 years ago and\u2026","rel":"","context":"In &quot;Chemical IT&quot;","block_context":{"text":"Chemical IT","link":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/?cat=2"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":11812,"url":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/?p=11812","url_meta":{"origin":3183,"position":2},"title":"Refactoring my lecture notes on pericyclic reactions.","author":"Henry Rzepa","date":"December 29, 2013","format":false,"excerpt":"When I first started giving lectures to students, it was the students themselves that acted as human photocopiers, faithfully trying to duplicate what I was embossing on the lecture theatre blackboard with chalk. How times have changed! Here I thought I might summarise my latest efforts to refactor the material\u2026","rel":"","context":"In &quot;General&quot;","block_context":{"text":"General","link":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/?cat=1"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":12958,"url":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/?p=12958","url_meta":{"origin":3183,"position":3},"title":"Electronic notebooks: a peek into the future?","author":"Henry Rzepa","date":"September 16, 2014","format":false,"excerpt":"ELNs (electronic laboratory notebooks) have been around for a long time in chemistry, largely of course due to the needs of the pharmaceutical industries. We did our first extensive evaluation probably at least 15 years ago, and nowadays there are many on the commercial market, with a few more coming\u2026","rel":"","context":"In &quot;Chemical IT&quot;","block_context":{"text":"Chemical IT","link":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/?cat=2"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":19697,"url":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/?p=19697","url_meta":{"origin":3183,"position":4},"title":"Ten years on: Jmol and WordPress.","author":"Henry Rzepa","date":"May 16, 2018","format":false,"excerpt":"Ten years are a long time when it comes to (recent) technologies. The first post on this blog was on the topic of how to present chemistry with three intact dimensions. I had in mind molecular models, molecular isosurfaces and molecular vibrations (arguably a further dimension). Here I reflect on\u2026","rel":"","context":"In &quot;Interesting chemistry&quot;","block_context":{"text":"Interesting chemistry","link":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/?cat=4"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":26767,"url":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/?p=26767","url_meta":{"origin":3183,"position":5},"title":"3D Molecular model visualisation: 3 Million atoms +","author":"Henry Rzepa","date":"January 27, 2024","format":false,"excerpt":"In the late 1980s, as I recollected here the equipment needed for real time molecular visualisation as it became known as was still expensive, requiring custom systems such as Evans and Sutherland PS390 workstations. One major breakthrough in making such techniques generally available on less specialised equipment was achieved by\u2026","rel":"","context":"With 1 comment","block_context":{"text":"With 1 comment","link":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/?p=26767#comments"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.ch.ic.ac.uk\/rzepa\/blog\/wp-content\/uploads\/2024\/01\/8glv-150x150.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.ch.ic.ac.uk\/rzepa\/blog\/wp-content\/uploads\/2024\/01\/8glv-150x150.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.ch.ic.ac.uk\/rzepa\/blog\/wp-content\/uploads\/2024\/01\/8glv-150x150.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.ch.ic.ac.uk\/rzepa\/blog\/wp-content\/uploads\/2024\/01\/8glv-150x150.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]}],"jetpack_likes_enabled":false,"authors":[{"term_id":2661,"user_id":1,"is_guest":0,"slug":"admin","display_name":"Henry Rzepa","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/897b6740f7f599bca7942cdf7d7914af5988937ae0e3869ab09aebb87f26a731?s=96&d=blank&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":""}],"_links":{"self":[{"href":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/index.php?rest_route=\/wp\/v2\/posts\/3183","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3183"}],"version-history":[{"count":12,"href":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/index.php?rest_route=\/wp\/v2\/posts\/3183\/revisions"}],"predecessor-version":[{"id":11733,"href":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/index.php?rest_route=\/wp\/v2\/posts\/3183\/revisions\/11733"}],"wp:attachment":[{"href":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3183"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3183"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3183"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.ch.ic.ac.uk\/rzepa\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fppma_author&post=3183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}