1<!DOCTYPE html> 2<html dir="ltr" lang="en-US" prefix="og: https://ogp.me/ns#" class="no-js"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link rel="profile" href="http://gmpg.org/xfn/11"> 7 <link rel="pingback" href="https://www.learnopengles.com/wordpress/xmlrpc.php"> 8
8<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>
8 9<title>How to Embed Webgl into a WordPress Post | Learn OpenGL ES</title> 10 11 <!-- All in One SEO 5.0.1.1 - aioseo.com --> 12 <meta name="description" content="Embedding into Wordpress This information was originally part of WebGL Lesson One: Getting Started, but I thought it would be more useful if I also broke it out into a post on its own. Embedding WebGL into Wordpress can be a little tricky, but if you use the right tags and the HTML editor it" /> 13 <meta name="robots" content="max-image-preview:large" /> 14 <meta name="author" content="Admin"/> 15 <link rel="canonical" href="https://www.learnopengles.com/how-to-embed-webgl-into-a-wordpress-post/" /> 16 <meta name="generator" content="All in One SEO (AIOSEO) 5.0.1.1" /> 17 <meta property="og:locale" content="en_US" /> 18 <meta property="og:site_name" content="Learn OpenGL ES | Learn how to develop mobile graphics using OpenGL ES 2" /> 19 <meta property="og:type" content="article" /> 20 <meta property="og:title" content="How to Embed Webgl into a WordPress Post | Learn OpenGL ES" /> 21 <meta property="og:description" content="Embedding into Wordpress This information was originally part of WebGL Lesson One: Getting Started, but I thought it would be more useful if I also broke it out into a post on its own. Embedding WebGL into Wordpress can be a little tricky, but if you use the right tags and the HTML editor it" /> 22 <meta property="og:url" content="https://www.learnopengles.com/how-to-embed-webgl-into-a-wordpress-post/" /> 23 <meta property="article:published_time" content="2011-09-28T05:00:34+00:00" /> 24 <meta property="article:modified_time" content="2011-09-26T03:45:25+00:00" /> 25 <meta name="twitter:card" content="summary" /> 26 <meta name="twitter:title" content="How to Embed Webgl into a WordPress Post | Learn OpenGL ES" /> 27 <meta name="twitter:description" content="Embedding into Wordpress This information was originally part of WebGL Lesson One: Getting Started, but I thought it would be more useful if I also broke it out into a post on its own. Embedding WebGL into Wordpress can be a little tricky, but if you use the right tags and the HTML editor it" /> 28
28<script type="application/ld+json" class="aioseo-schema"> 29 {"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.learnopengles.com\/how-to-embed-webgl-into-a-wordpress-post\/#article","name":"How to Embed Webgl into a WordPress Post | Learn OpenGL ES","headline":"How to Embed Webgl into a WordPress Post","author":{"@id":"https:\/\/www.learnopengles.com\/author\/oes_admin\/#author"},"publisher":{"@id":"https:\/\/www.learnopengles.com\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/www.learnopengles.com\/wordpress\/wp-content\/uploads\/2011\/06\/webgl-lesson-one-canvas-example.png","@id":"https:\/\/www.learnopengles.com\/how-to-embed-webgl-into-a-wordpress-post\/#articleImage","width":560,"height":443},"datePublished":"2011-09-28T05:00:34+00:00","dateModified":"2011-09-26T03:45:25+00:00","inLanguage":"en-US","commentCount":14,"mainEntityOfPage":{"@id":"https:\/\/www.learnopengles.com\/how-to-embed-webgl-into-a-wordpress-post\/#webpage"},"isPartOf":{"@id":"https:\/\/www.learnopengles.com\/how-to-embed-webgl-into-a-wordpress-post\/#webpage"},"articleSection":"Articles, WebGL, embedding, embedding WebGL into Wordpress, WordPress"},{"@type":"BreadcrumbList","@id":"https:\/\/www.learnopengles.com\/how-to-embed-webgl-into-a-wordpress-post\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.learnopengles.com#listItem","position":1,"name":"Home","item":"https:\/\/www.learnopengles.com","nextItem":{"@type":"ListItem","@id":"https:\/\/www.learnopengles.com\/category\/articles\/#listItem","name":"Articles"}},{"@type":"ListItem","@id":"https:\/\/www.learnopengles.com\/category\/articles\/#listItem","position":2,"name":"Articles","item":"https:\/\/www.learnopengles.com\/category\/articles\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.learnopengles.com\/how-to-embed-webgl-into-a-wordpress-post\/#listItem","name":"How to Embed Webgl into a WordPress Post"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.learnopengles.com#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.learnopengles.com\/how-to-embed-webgl-into-a-wordpress-post\/#listItem","position":3,"name":"How to Embed Webgl into a WordPress Post","previousItem":{"@type":"ListItem","@id":"https:\/\/www.learnopengles.com\/category\/articles\/#listItem","name":"Articles"}}]},{"@type":"Organization","@id":"https:\/\/www.learnopengles.com\/#organization","name":"Learn OpenGL ES","description":"Learn how to develop mobile graphics using OpenGL ES 2","url":"https:\/\/www.learnopengles.com\/"},{"@type":"Person","@id":"https:\/\/www.learnopengles.com\/author\/oes_admin\/#author","url":"https:\/\/www.learnopengles.com\/author\/oes_admin\/","name":"Admin","image":{"@type":"ImageObject","@id":"https:\/\/www.learnopengles.com\/how-to-embed-webgl-into-a-wordpress-post\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/2805bba6cce7460732844f021c68d33a6d192a42238b770bdbcbb92ecc47d569?s=96&d=identicon&r=g","width":96,"height":96,"caption":"Admin"}},{"@type":"WebPage","@id":"https:\/\/www.learnopengles.com\/how-to-embed-webgl-into-a-wordpress-post\/#webpage","url":"https:\/\/www.learnopengles.com\/how-to-embed-webgl-into-a-wordpress-post\/","name":"How to Embed Webgl into a WordPress Post | Learn OpenGL ES","description":"Embedding into Wordpress This information was originally part of WebGL Lesson One: Getting Started, but I thought it would be more useful if I also broke it out into a post on its own. Embedding WebGL into Wordpress can be a little tricky, but if you use the right tags and the HTML editor it","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.learnopengles.com\/#website"},"breadcrumb":{"@id":"https:\/\/www.learnopengles.com\/how-to-embed-webgl-into-a-wordpress-post\/#breadcrumblist"},"author":{"@id":"https:\/\/www.learnopengles.com\/author\/oes_admin\/#author"},"creator":{"@id":"https:\/\/www.learnopengles.com\/author\/oes_admin\/#author"},"datePublished":"2011-09-28T05:00:34+00:00","dateModified":"2011-09-26T03:45:25+00:00"},{"@type":"WebSite","@id":"https:\/\/www.learnopengles.com\/#website","url":"https:\/\/www.learnopengles.com\/","name":"Learn OpenGL ES","description":"Learn how to develop mobile graphics using OpenGL ES 2","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.learnopengles.com\/#organization"}}]} 30 </script>
30 31 <!-- All in One SEO --> 32 33<link rel="alternate" type="application/rss+xml" title="Learn OpenGL ES » Feed" href="https://www.learnopengles.com/feed/" /> 34<link rel="alternate" type="application/rss+xml" title="Learn OpenGL ES » Comments Feed" href="https://www.learnopengles.com/comments/feed/" /> 35<link rel="alternate" type="application/rss+xml" title="Learn OpenGL ES » How to Embed Webgl into a WordPress Post Comments Feed" href="https://www.learnopengles.com/how-to-embed-webgl-into-a-wordpress-post/feed/" /> 36<link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://www.learnopengles.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.learnopengles.com%2Fhow-to-embed-webgl-into-a-wordpress-post%2F" /> 37<link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://www.learnopengles.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.learnopengles.com%2Fhow-to-embed-webgl-into-a-wordpress-post%2F&format=xml" /> 38<style id="wp-img-auto-sizes-contain-inline-css"> 39img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px} 40/*# sourceURL=wp-img-auto-sizes-contain-inline-css */ 41</style> 42<style id="wp-emoji-styles-inline-css"> 43 44 img.wp-smiley, img.emoji { 45 display: inline !important; 46 border: none !important; 47 box-shadow: none !important; 48 height: 1em !important; 49 width: 1em !important; 50 margin: 0 0.07em !important; 51 vertical-align: -0.1em !important; 52 background: none !important; 53 padding: 0 !important; 54 } 55/*# sourceURL=wp-emoji-styles-inline-css */ 56</style> 57<style id="wp-block-library-inline-css"> 58:root{--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color);--wp-editor-canvas-background:#ddd;--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,160.5;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}:root{--wp--preset--font-size--normal:16px;
58--wp--preset--font-size--huge:42px}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}:root .has-text-align-center{text-align:center}:root .has-text-align-left{text-align:left}:root .has-text-align-right{text-align:right}.has-fit-text{white-space:nowrap!important}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{word-wrap:normal!important;border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-break:normal!important}.screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style^=border-color],[style*=";border-color"],[style*="; border-color"]){border-style:solid}html :where([style^=border-top-color],[style*=";border-top-color"],[style*="; border-top-color"]){border-top-style:solid}html :where([style^=border-right-color],[style*=";border-right-color"],[style*="; border-right-color"]){border-right-style:solid}html :where([style^=border-bottom-color],[style*=";border-bottom-color"],[style*="; border-bottom-color"]){border-bottom-style:solid}html :where([style^=border-left-color],[style*=";border-left-color"],[style*="; border-left-color"]){border-left-style:solid}html :where([style^=border-width],[style*=";border-width"],[style*="; border-width"]){border-style:solid}html :where([style^=border-top-width],[style*=";border-top-width"],[style*="; border-top-width"]){border-top-style:solid}html :where([style^=border-right-width],[style*=";border-right-width"],[style*="; border-right-width"]){border-right-style:solid}html :where([style^=border-bottom-width],[style*=";border-bottom-width"],[style*="; border-bottom-width"]){border-bottom-style:solid}html :where([style^=border-left-width],[style*=";border-left-width"],[style*="; border-left-width"]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}} 59 60/*# sourceURL=/wp-includes/css/dist/block-library/common.min.css */ 61</style> 62<style id="classic-theme-styles-inline-css"> 63/*! This file is auto-generated */ 64.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} 65/*# sourceURL=/wp-includes/css/classic-themes.min.css */ 66</style> 67 68<style id="global-styles-inline-css"> 69:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,
690) 0%,rgb(255,105,0) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);}.wp-block-button{--wp--preset--dimension--25: 25%;--wp--preset--dimension--50: 50%;--wp--preset--dimension--75: 75%;--wp--preset--dimension--100: 100%;}:where(body) { margin: 0; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #32373c;border-width: 0;color: #fff;font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;letter-spacing: inherit;line-height: inherit;padding-top: calc(0.667em + 2px);padding-right: calc(1.333em + 2px);padding-bottom: calc(0.667em + 2px);padding-left: calc(1.333em + 2px);text-decoration: none;text-transform: inherit;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}
69.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} 70/*# sourceURL=global-styles-inline-css */ 71</style> 72 73<link rel='stylesheet' id='genericons-css' href='https://www.learnopengles.com/wordpress/wp-content/themes/twentysixteen/genericons/genericons.css?ver=3.4.1' media='all' /> 74<link rel='stylesheet' id='twentysixteen-style-css' href='https://www.learnopengles.com/wordpress/wp-content/themes/twentysixteen-child/style.css?ver=7.1.2' media='all' />
75<script id="jquery-core-js" src="https://www.learnopengles.com/wordpress/wp-includes/js/jquery/jquery.min.js?ver=3.7.1"></script>
vendor: 1 bytes, line 75
75
76<script id="jquery-migrate-js" src="https://www.learnopengles.com/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1"></script>
76 77<link rel="https://api.w.org/" href="https://www.learnopengles.com/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://www.learnopengles.com/wp-json/wp/v2/posts/479" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://www.learnopengles.com/wordpress/xmlrpc.php?rsd" /> 78<meta name="generator" content="WordPress 7.1.2" /> 79<link rel='shortlink' href='https://www.learnopengles.com/?p=479' /> 80<style id="custom-background-css"> 81body.custom-background { background-color: #ffffff; } 82</style> 83<style id="wp-custom-css"> 84/* Bare "monospace" can render as Courier; prefer the modern system monos. */ 85pre, code, kbd, samp, var { font-family: Menlo, Consolas, "Courier New", monospace; } 86 87/* Optional: Montserrat is geometric; Helvetica isn't. Closest system geometrics: */ 88h1, h2, h3, h4, h5, h6, .site-title, .entry-title, .widget-title, button, .button { 89 font-family: "Avenir Next", "Century Gothic", "Segoe UI", Helvetica, Arial, sans-serif; 90} 91</style> 92
93<script type='text/javascript' src='https://www.learnopengles.com/wordpress/wp-content/plugins/wp-spamshield/js/jscripts.php'></script>
93 94</head> 95 96<body class="wp-singular post-template-default single single-post postid-479 single-format-standard custom-background wp-theme-twentysixteen wp-child-theme-twentysixteen-child"> 97<div id="page" class="site"> 98 <div class="site-inner"> 99 <a class="skip-link screen-reader-text" href="#content">Skip to content</a> 100 101 <header id="masthead" class="site-header" role="banner"> 102 <div class="site-header-main"> 103 <div class="site-branding"> 104 105 <p class="site-title"><a href="https://www.learnopengles.com/" rel="home">Learn OpenGL ES</a></p> 106 <p class="site-description">Learn how to develop mobile graphics using OpenGL ES 2</p> 107 </div><!-- .site-branding --> 108 109 </div><!-- .site-header-main --> 110 111 </header><!-- .site-header --> 112 113 <div id="content" class="site-content"> 114 115<div id="primary" class="content-area"> 116 <main id="main" class="site-main" role="main"> 117 118<article id="post-479" class="post-479 post type-post status-publish format-standard hentry category-articles category-webgl tag-embedding tag-embedding-webgl-into-wordpress tag-wordpress"> 119 <header class="entry-header"> 120 <h1 class="entry-title">How to Embed Webgl into a WordPress Post</h1> </header><!-- .entry-header --> 121 122 123 124 <div class="entry-content"> 125 <h5>Embedding into WordPress</h5> 126<p>This information was originally part of <a href="http://www.learnopengles.com/webgl-lesson-one-getting-started/" title="WebGL Lesson One: Getting Started">WebGL Lesson One: Getting Started</a>, but I thought it would be more useful if I also broke it out into a post on its own. </p> 127<p>Embedding WebGL into WordPress can be a little tricky, but if you use the right tags and the HTML editor it can be done without too much trouble! You’ll need to insert a canvas in your post, script includes for any third-party libraries, and a script body for your main script (this can also be an include).</p> 128<p>First, place a canvas tag where you would like the graphics to appear:</p> 129<p><code><pre><canvas id="canvas" width="550" height="375">Your browser does not support the canvas tag. This is a static example of what would be seen.</canvas></pre></code></p> 130<p>Then, include any necessary scripts:</p> 131<p><code><pre><script type="text/javascript" src="http://www.learnopengles.com/wordpress/wp-content/uploads/2011/06/webgl-utils.js"></script></pre></code></p> 132<p>Embed any additional scripts that you need, such as the main body for your WebGL script:</p> 133<p><code><pre><script type="text/javascript"><br /> 134/**<br /> 135 * Lesson_one.js<br /> 136 */</p> 137<p>...</p> 138<p></script></pre></code></p> 139<p>The <pre> tag is important; otherwise WordPress will mangle your scripts and insert random paragraph tags and other stuff inside. Also, once you’ve inserted this code, you have to stick to using the HTML editor, as the visual editor will also mangle or delete your scripts.</p> 140<p>If you’ve embedded your scripts correctly, then your WebGL canvas should appear, like below:</p> 141<p><canvas id="canvas" width="550" height="375">Your browser does not support the canvas tag. This is a static example of what would be seen.<br /><img decoding="async" src="http://www.learnopengles.com/wordpress/wp-content/uploads/2011/06/webgl-lesson-one-canvas-example.png" alt="WebGL lesson one, example of what would be seen in a browser."></img></canvas></p> 142<p>Hope this helps out some people out there!</p> 143<p><!-- Script data --></p> 144<pre> 145<!-- WebGL utils originally from here: https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/common/webgl-utils.js -->
146<script type="text/javascript" src="http://www.learnopengles.com/wordpress/wp-content/uploads/2011/06/webgl-utils.js"></script>
146 147<!-- glMatrix utils originally from here: http://code.google.com/p/glmatrix/source/browse/glMatrix.js -->
148<script type="text/javascript" src="http://www.learnopengles.com/wordpress/wp-content/uploads/2011/06/glMatrix.js"></script>
148 149<!-- Shader programs -->
150<script id="vertex_shader" type="x-shader/x-vertex"> 151uniform mat4 u_MVPMatrix; // A constant representing the combined model/view/projection matrix. 152 153attribute vec4 a_Position; // Per-vertex position information we will pass in. 154attribute vec4 a_Color; // Per-vertex color information we will pass in. 155 156varying vec4 v_Color; // This will be passed into the fragment shader. 157 158void main() // The entry point for our vertex shader. 159{ 160 v_Color = a_Color; // Pass the color through to the fragment shader. 161 // It will be interpolated across the triangle. 162 163 // gl_Position is a special variable used to store the final position. 164 // Multiply the vertex by the matrix to get the final point in normalized screen coordinates. 165 gl_Position = u_MVPMatrix * a_Position; 166} 167</script>
vendor: 2 bytes, line 167
167
168<script id="fragment_shader" type="x-shader/x-fragment"> 169precision mediump float; // Set the default precision to medium. We don't need as high of a 170 // precision in the fragment shader. 171varying vec4 v_Color; // This is the color from the vertex shader interpolated across the 172 // triangle per fragment. 173void main() // The entry point for our fragment shader. 174{ 175 gl_FragColor = v_Color; // Pass the color directly through the pipeline. 176} 177</script>
vendor: 2 bytes, line 177
177
178<script type="text/javascript"> 179/** 180 * Lesson_one.js 181 */ 182 183// We make use of the WebGL utility library, which was downloaded from here: 184// https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/common/webgl-utils.js 185// 186// It defines two functions which we use here: 187// 188// // Creates a WebGL context. 189// WebGLUtils.setupWebGL(canvas); 190// 191// Requests an animation callback. See: https://developer.mozilla.org/en/DOM/window.requestAnimationFrame 192// window.requestAnimFrame(callback, node); 193// 194// We also make use of the glMatrix file which can be downloaded from here: 195// http://code.google.com/p/glmatrix/source/browse/glMatrix.js 196// 197 198/** Hold a reference to the WebGLContext */ 199var gl = null; 200 201/** Hold a reference to the canvas DOM object. */ 202var canvas = null; 203 204/** 205 * Store the model matrix. This matrix is used to move models from object space (where each model can be thought 206 * of being located at the center of the universe) to world space. 207 */ 208var modelMatrix = mat4.create(); 209 210/** 211 * Store the view matrix. This can be thought of as our camera. This matrix transforms world space to eye space; 212 * it positions things relative to our eye. 213 */ 214var viewMatrix = mat4.create(); 215 216/** Store the projection matrix. This is used to project the scene onto a 2D viewport. */ 217var projectionMatrix = mat4.create(); 218 219/** Allocate storage for the final combined matrix. This will be passed into the shader program. */ 220var mvpMatrix = mat4.create(); 221 222/** Store our model data in a Float32Array buffer. */ 223var trianglePositions; 224var triangle1Colors; 225var triangle2Colors; 226var triangle3Colors; 227 228/** Store references to the vertex buffer objects (VBOs) that will be created. */ 229var trianglePositionBufferObject; 230var triangleColorBufferObject1; 231var triangleColorBufferObject2; 232var triangleColorBufferObject3; 233 234/** This will be used to pass in the transformation matrix. */ 235var mvpMatrixHandle; 236 237/** This will be used to pass in model position information. */ 238var positionHandle; 239 240/** This will be used to pass in model color information. */ 241var colorHandle; 242 243/** Size of the position data in elements. */ 244var positionDataSize = 3; 245 246/** Size of the color data in elements. */ 247var colorDataSize = 4; 248 249//Helper function to load a shader 250function loadShader(sourceScriptId, type) 251{ 252 var shaderHandle = gl.createShader(type); 253 var error; 254 255 if (shaderHandle != 0) 256 { 257 // Read the embedded shader from the document. 258 var shaderSource = document.getElementById(sourceScriptId); 259 260 if (!shaderSource) 261 { 262 throw("Error: shader script '" + sourceScriptId + "' not found"); 263 } 264 265 // Pass in the shader source. 266 gl.shaderSource(shaderHandle, shaderSource.text); 267 268 // Compile the shader. 269 gl.compileShader(shaderHandle); 270 271 // Get the compilation status. 272 var compiled = gl.getShaderParameter(shaderHandle, gl.COMPILE_STATUS); 273 274 // If the compilation failed, delete the shader. 275 if (!compiled) 276 { 277 error = gl.getShaderInfoLog(shaderHandle); 278 gl.deleteShader(shaderHandle); 279 shaderHandle = 0; 280 } 281 } 282 283 if (shaderHandle == 0) 284 { 285 throw("Error creating shader " + sourceScriptId + ": " + error); 286 } 287 288 return shaderHandle; 289} 290 291// Helper function to link a program 292function linkProgram(vertexShader, fragmentShader) 293{ 294 // Create a program object and store the handle to it. 295 var programHandle = gl.createProgram(); 296 297 if (programHandle != 0) 298 { 299 // Bind the vertex shader to the program. 300 gl.attachShader(programHandle, vertexShader); 301 302 // Bind the fragment shader to the program. 303 gl.attachShader(programHandle, fragmentShader); 304 305 // Bind attributes 306 gl.bindAttribLocation(programHandle, 0, "a_Position"); 307 gl.bindAttribLocation(programHandle, 1, "a_Color"); 308 309 // Link the two shaders together into a program. 310 gl.linkProgram(programHandle); 311 312 // Get the link status. 313 var linked = gl.getProgramParameter(programHandle, gl.LINK_STATUS); 314 315 // If the link failed, delete the program. 316 if (!linked) 317 { 318 gl.deleteProgram(programHandle); 319 programHandle = 0; 320 } 321 } 322 323 if (programHandle == 0) 324 { 325 throw("Error creating program."); 326 } 327 328 return programHandle; 329} 330 331//Called when we have the context 332function startRendering() 333{ 334 /* Configure viewport */ 335 // Set the OpenGL viewport to the same size as the canvas. 336 gl.viewport(0, 0, canvas.clientWidth, canvas.clientHeight); 337 338 // Create a new perspective projection matrix. The height will stay the same 339 // while the width will vary as per aspect ratio. 340 var ratio = canvas.clientWidth / canvas.clientHeight; 341 var left = -ratio; 342 var right = ratio; 343 var bottom = -1.0; 344 var top = 1.0; 345 var near = 1.0; 346 var far = 10.0; 347 348 mat4.frustum(left, right, bottom, top, near, far, projectionMatrix); 349 350 /* Configure general parameters */ 351
352 // Set the background clear color to gray. 353 gl.clearColor(0.5, 0.5, 0.5, 1.0); 354 355 /* Configure camera */ 356 // Position the eye behind the origin. 357 var eyeX = 0.0; 358 var eyeY = 0.0; 359 var eyeZ = 1.5; 360 361 // We are looking toward the distance 362 var lookX = 0.0; 363 var lookY = 0.0; 364 var lookZ = -5.0; 365 366 // Set our up vector. This is where our head would be pointing were we holding the camera. 367 var upX = 0.0; 368 var upY = 1.0; 369 var upZ = 0.0; 370 371 // Set the view matrix. This matrix can be said to represent the camera position. 372 var eye = vec3.create(); 373 eye[0] = eyeX; eye[1] = eyeY; eye[2] = eyeZ; 374 var center = vec3.create(); 375 center[0] = lookX; center[1] = lookY; center[2] = lookZ; 376 var up = vec3.create(); 377 up[0] = upX; up[1] = upY; up[2] = upZ; 378 mat4.lookAt(eye, center, up, viewMatrix); 379 /* Configure shaders */ 380 var vertexShaderHandle = loadShader("vertex_shader", gl.VERTEX_SHADER); 381 var fragmentShaderHandle = loadShader("fragment_shader", gl.FRAGMENT_SHADER); 382 383 // Create a program object and store the handle to it. 384 var programHandle = linkProgram(vertexShaderHandle, fragmentShaderHandle); 385 386 // Set program handles. These will later be used to pass in values to the program. 387 mvpMatrixHandle = gl.getUniformLocation(programHandle, "u_MVPMatrix"); 388 positionHandle = gl.getAttribLocation(programHandle, "a_Position"); 389 colorHandle = gl.getAttribLocation(programHandle, "a_Color"); 390 391 // Tell OpenGL to use this program when rendering. 392 gl.useProgram(programHandle); 393 394 // Create buffers in OpenGL's working memory. 395 trianglePositionBufferObject = gl.createBuffer(); 396// checkError(); 397 gl.bindBuffer(gl.ARRAY_BUFFER, trianglePositionBufferObject); 398// checkError(); 399 gl.bufferData(gl.ARRAY_BUFFER, trianglePositions, gl.STATIC_DRAW); 400// checkError(); 401 402 triangleColorBufferObject1 = gl.createBuffer(); 403// checkError(); 404 gl.bindBuffer(gl.ARRAY_BUFFER, triangleColorBufferObject1); 405// checkError(); 406 gl.bufferData(gl.ARRAY_BUFFER, triangle1Colors, gl.STATIC_DRAW); 407// checkError(); 408 409 triangleColorBufferObject2 = gl.createBuffer(); 410// checkError(); 411 gl.bindBuffer(gl.ARRAY_BUFFER, triangleColorBufferObject2); 412// checkError(); 413 gl.bufferData(gl.ARRAY_BUFFER, triangle2Colors, gl.STATIC_DRAW); 414// checkError(); 415 416 triangleColorBufferObject3 = gl.createBuffer(); 417// checkError(); 418 gl.bindBuffer(gl.ARRAY_BUFFER, triangleColorBufferObject3); 419// checkError(); 420 gl.bufferData(gl.ARRAY_BUFFER, triangle3Colors, gl.STATIC_DRAW); 421// checkError(); 422 423 // Tell the browser we want render() to be called whenever it's time to draw another frame. 424 window.requestAnimFrame(render, canvas); 425} 426 427// Callback called each time the browser wants us to draw another frame 428function render(time) 429{ 430 // Clear the canvas 431 gl.clear(gl.COLOR_BUFFER_BIT); 432 433 // Do a complete rotation every 10 seconds. 434 var time = Date.now() % 10000; 435 var angleInDegrees = (360.0 / 10000.0) * time; 436 var angleInRadians = angleInDegrees / 57.2957795; 437 438 var xyz = vec3.create(); 439 440 // Draw the triangle facing straight on. 441 mat4.identity(modelMatrix); 442 mat4.rotateZ(modelMatrix, angleInRadians); 443 drawTriangle(triangleColorBufferObject1); 444 445 // Draw one translated a bit down and rotated to be flat on the ground. 446 mat4.identity(modelMatrix); 447 xyz[0] = 0; xyz[1] = -1; xyz[2] = 0; 448 mat4.translate(modelMatrix, xyz); 449 mat4.rotateX(modelMatrix, 90 / 57.2957795); 450 xyz[0] = 0; xyz[1] = 0; xyz[2] = 1; 451 mat4.rotate(modelMatrix, angleInRadians, xyz); 452 drawTriangle(triangleColorBufferObject2); 453 454 // Draw one translated a bit to the right and rotated to be facing to the left. 455 mat4.identity(modelMatrix); 456 xyz[0] = 1; xyz[1] = 0; xyz[2] = 0; 457 mat4.translate(modelMatrix, xyz); 458 mat4.rotateY(modelMatrix, 90 / 57.2957795); 459 xyz[0] = 0; xyz[1] = 0; xyz[2] = 1; 460 mat4.rotate(modelMatrix, angleInRadians, xyz); 461 drawTriangle(triangleColorBufferObject3); 462 463 // Send the commands to WebGL 464 gl.flush(); 465 466 // Request another frame
467 window.requestAnimFrame(render, canvas); 468} 469 470function checkError() 471{ 472 var error = gl.getError(); 473 474 if (error) 475 { 476 throw("error: " + error); 477 } 478} 479 480// Draws a triangle from the given vertex data. 481function drawTriangle(triangleColorBufferObject) 482{ 483 // Pass in the position information 484// console.log("positionHandle=" + positionHandle); 485// console.log("colorHandle=" + colorHandle); 486 gl.enableVertexAttribArray(positionHandle); 487// checkError(); 488 489 gl.bindBuffer(gl.ARRAY_BUFFER, trianglePositionBufferObject); 490 gl.vertexAttribPointer(positionHandle, positionDataSize, gl.FLOAT, false, 491 0, 0); 492// checkError(); 493 494 // Pass in the color information 495 gl.enableVertexAttribArray(colorHandle); 496// checkError(); 497 498 gl.bindBuffer(gl.ARRAY_BUFFER, triangleColorBufferObject); 499 gl.vertexAttribPointer(colorHandle, colorDataSize, gl.FLOAT, false, 500 0, 0); 501// checkError(); 502 503 504 505 // This multiplies the view matrix by the model matrix, and stores the result in the modelview matrix 506 // (which currently contains model * view). 507 mat4.multiply(viewMatrix, modelMatrix, mvpMatrix); 508 // Matrix.multiplyMM(mMVPMatrix, 0, mViewMatrix, 0, mModelMatrix, 0); 509 510 // This multiplies the modelview matrix by the projection matrix, and stores the result in the MVP matrix 511 // (which now contains model * view * projection). 512 mat4.multiply(projectionMatrix, mvpMatrix, mvpMatrix); 513 514 // Matrix.multiplyMM(mMVPMatrix, 0, mProjectionMatrix, 0, mMVPMatrix, 0); 515 516 gl.uniformMatrix4fv(mvpMatrixHandle, false, mvpMatrix); 517// checkError(); 518 gl.drawArrays(gl.TRIANGLES, 0, 3); 519// checkError(); 520// console.log("Made it past one frame"); 521} 522 523// Main entry point 524function main() 525{ 526 // Try to get a WebGL context 527 canvas = document.getElementById("canvas"); 528 529 // We don't need a depth buffer. See https://www.khronos.org/registry/webgl/specs/1.0/ Section 5.2 for more info. 530 gl = WebGLUtils.setupWebGL(canvas, { depth: false }); 531 532 if (gl != null) 533 { 534 // Init model data. 535 536 // Define points for equilateral triangles. 537 trianglePositions = new Float32Array([ 538 // X, Y, Z, 539 -0.5, -0.25, 0.0, 540 0.5, -0.25, 0.0, 541 0.0, 0.559016994, 0.0]); 542 543 // This triangle is red, green, and blue. 544 triangle1Colors = new Float32Array([ 545 // R, G, B, A 546 1.0, 0.0, 0.0, 1.0, 547 0.0, 0.0, 1.0, 1.0, 548 0.0, 1.0, 0.0, 1.0]); 549 550 // This triangle is yellow, cyan, and magenta. 551 triangle2Colors = new Float32Array([ 552 // R, G, B, A 553 1.0, 1.0, 0.0, 1.0, 554 0.0, 1.0, 1.0, 1.0, 555 1.0, 0.0, 1.0, 1.0]); 556 557 // This triangle is white, gray, and black. 558 triangle3Colors = new Float32Array([ 559 // R, G, B, A 560 1.0, 1.0, 1.0, 1.0, 561 0.5, 0.5, 0.5, 1.0, 562 0.0, 0.0, 0.0, 1.0]); 563 564 startRendering(); 565 } 566} 567 568// Execute the main entry point 569main(); 570</script>
570</pre> 571 572<div style="padding: 15px 15px 0 15px; margin: 0 0 0 0; border: 1px solid #e6e6e6; background: #fafafa; border-radius: 5px;"> 573 <a href="https://pragprog.com/titles/kbogla/opengl-es-2-for-android/" style="float: left; margin: 0 15px 5px 0;"><img decoding="async" src="http://www.learnopengles.com/wordpress/wp-content/uploads/2026/09/kbogla_hu_b95bf25a3e0162db.jpg" width="155" alt="OpenGL ES 2 for Android book cover" style="border: none;"></a> 574 <div> 575 <h4 style="display: inline;">About the book</h4> 576 <div style="margin-top: 0.7em;"><p>Android is booming like never before, with millions of devices shipping every day. In <em><a href="https://pragprog.com/titles/kbogla/opengl-es-2-for-android/">OpenGL ES 2 for Android: A Quick-Start Guide</a></em>, you’ll learn all about shaders and the OpenGL pipeline, and discover the power of OpenGL ES 2.0, which is much more feature-rich than its predecessor.</p><p>It’s never been a better time to learn how to create your own 3D games and live wallpapers. If you can program in Java and you have a creative vision that you’d like to share with the world, then this is the book for you.</p></div> 577 </div> 578 <div style="clear: both;"></div> 579</div> 580<div class="author-info"> 581 <div class="author-avatar"> 582 <img alt='' src='https://secure.gravatar.com/avatar/2805bba6cce7460732844f021c68d33a6d192a42238b770bdbcbb92ecc47d569?s=42&d=identicon&r=g' srcset='https://secure.gravatar.com/avatar/2805bba6cce7460732844f021c68d33a6d192a42238b770bdbcbb92ecc47d569?s=84&d=identicon&r=g 2x' class='avatar avatar-42 photo' height='42' width='42' decoding='async'/> </div><!-- .author-avatar --> 583 584 <div class="author-description"> 585 <h2 class="author-title"><span class="author-heading">Author:</span> Admin</h2> 586 587 <p class="author-bio"> 588 Kevin is the author of <a href="http://pragprog.com/book/kbogla/opengl-es-2-for-android">OpenGL ES 2 for Android: A Quick-Start Guide</a>. He also has extensive experience in Android development. <a class="author-link" href="https://www.learnopengles.com/author/oes_admin/" rel="author"> 589 View all posts by Admin </a> 590 </p><!-- .author-bio --> 591 </div><!-- .author-description --> 592</div><!-- .author-info --> 593 </div><!-- .entry-content --> 594 595 <footer class="entry-footer"> 596 <span class="byline"><span class="author vcard"><img alt='' src='https://secure.gravatar.com/avatar/2805bba6cce7460732844f021c68d33a6d192a42238b770bdbcbb92ecc47d569?s=49&d=identicon&r=g' srcset='https://secure.gravatar.com/avatar/2805bba6cce7460732844f021c68d33a6d192a42238b770bdbcbb92ecc47d569?s=98&d=identicon&r=g 2x' class='avatar avatar-49 photo' height='49' width='49' decoding='async'/><span class="screen-reader-text">Author </span> <a class="url fn n" href="https://www.learnopengles.com/author/oes_admin/">Admin</a></span></span><span class="posted-on"><span class="screen-reader-text">Posted on </span><a href="https://www.learnopengles.com/how-to-embed-webgl-into-a-wordpress-post/" rel="bookmark"><time class="entry-date published" datetime="2011-09-28T05:00:34+00:00">September 28, 2011</time><time class="updated" datetime="2011-09-26T03:45:25+00:00">September 26, 2011</time></a></span><span class="cat-links"><span class="screen-reader-text">Categories </span><a href="https://www.learnopengles.com/category/articles/" rel="category tag">Articles</a>, <a href="https://www.learnopengles.com/category/webgl/" rel="category tag">WebGL</a></span><span class="tags-links"><span class="screen-reader-text">Tags </span><a href="https://www.learnopengles.com/tag/embedding/" rel="tag">embedding</a>, <a href="https://www.learnopengles.com/tag/embedding-webgl-into-wordpress/" rel="tag">embedding WebGL into Wordpress</a>, <a href="https://www.learnopengles.com/tag/wordpress/" rel="tag">WordPress</a></span> </footer><!-- .entry-footer --> 597</article><!-- #post-## --> 598 599<div id="comments" class="comments-area"> 600 601 <h2 class="comments-title"> 602 14 thoughts on “How to Embed Webgl into a WordPress Post” </h2> 603 604 605 <ol class="comment-list">
606 <li id="comment-367" class="comment even thread-even depth-1"> 607 <article id="div-comment-367" class="comment-body"> 608 <footer class="comment-meta"> 609 <div class="comment-author vcard"> 610 <img alt='' src='https://secure.gravatar.com/avatar/f630e8bdc4e43fb381947e8503817119fb7c801848bfb25b84e9ccc76618a80e?s=42&d=identicon&r=g' srcset='https://secure.gravatar.com/avatar/f630e8bdc4e43fb381947e8503817119fb7c801848bfb25b84e9ccc76618a80e?s=84&d=identicon&r=g 2x' class='avatar avatar-42 photo' height='42' width='42' decoding='async'/> <b class="fn"><a href="http://ciccaresedesign.com" class="url" rel="ugc external nofollow">Federico Ciccarese</a></b> <span class="says">says:</span> </div><!-- .comment-author --> 611 612 <div class="comment-metadata"> 613 <a href="https://www.learnopengles.com/how-to-embed-webgl-into-a-wordpress-post/#comment-367"><time datetime="2011-12-06T10:54:30+00:00">December 6, 2011 at 10:54 am</time></a> </div><!-- .comment-metadata --> 614 615 </footer><!-- .comment-meta --> 616 617 <div class="comment-content"> 618 <p>Hi,<br /> 619I’m Federico Ciccarese,<br /> 620I read your post “How to Embed WebGL into WordPress Post.”<br /> 621I’m interested in this.<br /> 622I have a WordPress site ciccaresedesign.com and I need to incorporate a 3D WebGL in various posts.<br /> 623Can you help me?<br /> 624I might even pay for this information.<br /> 625If you are interested please contact me I give you other details.</p> 626 </div><!-- .comment-content --> 627 628 <div class="reply"><a rel="nofollow" class="comment-reply-link" href="#comment-367" data-commentid="367" data-postid="479" data-belowelement="div-comment-367" data-respondelement="respond" data-replyto="Reply to Federico Ciccarese" aria-label="Reply to Federico Ciccarese">Reply</a></div> </article><!-- .comment-body --> 629 </li><!-- #comment-## --> 630 <li id="comment-657" class="comment odd alt thread-odd thread-alt depth-1 parent"> 631 <article id="div-comment-657" class="comment-body"> 632 <footer class="comment-meta"> 633 <div class="comment-author vcard"> 634 <img alt='' src='https://secure.gravatar.com/avatar/5efb0384da7e8a459c10df6edfbdf8210b9326fbb4d072c37e9679eb4e49fee3?s=42&d=identicon&r=g' srcset='https://secure.gravatar.com/avatar/5efb0384da7e8a459c10df6edfbdf8210b9326fbb4d072c37e9679eb4e49fee3?s=84&d=identicon&r=g 2x' class='avatar avatar-42 photo' height='42' width='42' loading='lazy' decoding='async'/> <b class="fn">Wallace</b> <span class="says">says:</span> </div><!-- .comment-author --> 635 636 <div class="comment-metadata"> 637 <a href="https://www.learnopengles.com/how-to-embed-webgl-into-a-wordpress-post/#comment-657"><time datetime="2012-01-18T09:44:27+00:00">January 18, 2012 at 9:44 am</time></a> </div><!-- .comment-metadata --> 638 639 </footer><!-- .comment-meta --> 640 641 <div class="comment-content"> 642 <p>Hi, I’m not too familiar with wordpress, but it seems like the HTML editor automatically removes the script tags and the canvas tags inside the pre tags. Are there any plugins I have to install before trying to put the canvas into the HTML editor?</p> 643<p>I’m not that good with HTML and javascript, but would like to convert some of my glsl shaders and put it in webgl.</p> 644 </div><!-- .comment-content --> 645 646 <div class="reply"><a rel="nofollow" class="comment-reply-link" href="#comment-657" data-commentid="657" data-postid="479" data-belowelement="div-comment-657" data-respondelement="respond" data-replyto="Reply to Wallace" aria-label="Reply to Wallace">Reply</a></div> </article><!-- .comment-body --> 647 <ol class="children"> 648 <li id="comment-677" class="comment byuser comment-author-oes_admin bypostauthor even depth-2"> 649 <article id="div-comment-677" class="comment-body"> 650 <footer class="comment-meta"> 651 <div class="comment-author vcard"> 652 <img alt='' src='https://secure.gravatar.com/avatar/2805bba6cce7460732844f021c68d33a6d192a42238b770bdbcbb92ecc47d569?s=42&d=identicon&r=g' srcset='https://secure.gravatar.com/avatar/2805bba6cce7460732844f021c68d33a6d192a42238b770bdbcbb92ecc47d569?s=84&d=identicon&r=g 2x' class='avatar avatar-42 photo' height='42' width='42' loading='lazy' decoding='async'/> <b class="fn"><a href="http://www.learnopengles.com" class="url" rel="ugc">Admin</a></b> <span class="says">says:</span> </div><!-- .comment-author --> 653 654 <div class="comment-metadata"> 655 <a href="https://www.learnopengles.com/how-to-embed-webgl-into-a-wordpress-post/#comment-677"><time datetime="2012-01-23T13:03:19+00:00">January 23, 2012 at 1:03 pm</time></a> </div><!-- .comment-metadata --> 656 657 </footer><!-- .comment-meta --> 658 659 <div class="comment-content"> 660 <p>Hi Wallace,</p> 661<p>The only way I know of is to edit that post in HTML mode and never switch to Visual mode. What you could do is edit the rest in Visual mode and then paste in the script & canvas tags at the end. Will have to investigate this some more!</p> 662 </div><!-- .comment-content --> 663 664 <div class="reply"><a rel="nofollow" class="comment-reply-link" href="#comment-677" data-commentid="677" data-postid="479" data-belowelement="div-comment-677" data-respondelement="respond" data-replyto="Reply to Admin" aria-label="Reply to Admin">Reply</a></div> </article><!-- .comment-body --> 665 </li><!-- #comment-## --> 666</ol><!-- .children --> 667</li><!-- #comment-## -->
668 <li id="comment-837" class="comment odd alt thread-even depth-1 parent"> 669 <article id="div-comment-837" class="comment-body"> 670 <footer class="comment-meta"> 671 <div class="comment-author vcard"> 672 <img alt='' src='https://secure.gravatar.com/avatar/665af06ab5238cdfdaf77e5e0b6a9685cd6a065be92c6f2d430784694cbc6762?s=42&d=identicon&r=g' srcset='https://secure.gravatar.com/avatar/665af06ab5238cdfdaf77e5e0b6a9685cd6a065be92c6f2d430784694cbc6762?s=84&d=identicon&r=g 2x' class='avatar avatar-42 photo' height='42' width='42' loading='lazy' decoding='async'/> <b class="fn"><a href="http://renderingpipeline.com" class="url" rel="ugc external nofollow">Robert</a></b> <span class="says">says:</span> </div><!-- .comment-author --> 673 674 <div class="comment-metadata"> 675 <a href="https://www.learnopengles.com/how-to-embed-webgl-into-a-wordpress-post/#comment-837"><time datetime="2012-03-10T22:59:44+00:00">March 10, 2012 at 10:59 pm</time></a> </div><!-- .comment-metadata --> 676 677 </footer><!-- .comment-meta --> 678 679 <div class="comment-content"> 680 <p>Thanks, works great.<br /> 681It’s a pain that you have to stick with the html editor but apart from that it works.</p> 682<p>What’s the recommended way of starting the initialization function (context creation etc) at page load if you don’t want to mess with the theme? I tried</p> 683<p>window.onload=function()<br /> 684{<br /> 685 init();<br /> 686}</p> 687<p>in my script and it works but I’m not so much into javascript and html5 that I could tell if that’s a good way or if it could lead to problems.</p> 688 </div><!-- .comment-content --> 689 690 <div class="reply"><a rel="nofollow" class="comment-reply-link" href="#comment-837" data-commentid="837" data-postid="479" data-belowelement="div-comment-837" data-respondelement="respond" data-replyto="Reply to Robert" aria-label="Reply to Robert">Reply</a></div> </article><!-- .comment-body --> 691 <ol class="children"> 692 <li id="comment-848" class="comment byuser comment-author-oes_admin bypostauthor even depth-2"> 693 <article id="div-comment-848" class="comment-body"> 694 <footer class="comment-meta"> 695 <div class="comment-author vcard"> 696 <img alt='' src='https://secure.gravatar.com/avatar/2805bba6cce7460732844f021c68d33a6d192a42238b770bdbcbb92ecc47d569?s=42&d=identicon&r=g' srcset='https://secure.gravatar.com/avatar/2805bba6cce7460732844f021c68d33a6d192a42238b770bdbcbb92ecc47d569?s=84&d=identicon&r=g 2x' class='avatar avatar-42 photo' height='42' width='42' loading='lazy' decoding='async'/> <b class="fn"><a href="http://www.learnopengles.com" class="url" rel="ugc">Admin</a></b> <span class="says">says:</span> </div><!-- .comment-author --> 697 698 <div class="comment-metadata"> 699 <a href="https://www.learnopengles.com/how-to-embed-webgl-into-a-wordpress-post/#comment-848"><time datetime="2012-03-12T17:25:28+00:00">March 12, 2012 at 5:25 pm</time></a> </div><!-- .comment-metadata --> 700 701 </footer><!-- .comment-meta --> 702 703 <div class="comment-content"> 704 <p>Hi Robert,</p> 705<p>It doesn’t seem like a bad way to me. I didn’t do it like that though — I just embedded the WebGL script directly, and the browser executes the code automatically:</p> 706<p><pre><script type="text/javascript"><br /> 707/**<br /> 708* Lesson_one.js<br /> 709*/</p> 710<p>…</p> 711<p></script></pre></p> 712 </div><!-- .comment-content --> 713 714 <div class="reply"><a rel="nofollow" class="comment-reply-link" href="#comment-848" data-commentid="848" data-postid="479" data-belowelement="div-comment-848" data-respondelement="respond" data-replyto="Reply to Admin" aria-label="Reply to Admin">Reply</a></div> </article><!-- .comment-body --> 715 </li><!-- #comment-## --> 716</ol><!-- .children --> 717</li><!-- #comment-## --> 718 <li id="comment-902" class="pingback odd alt thread-odd thread-alt depth-1"> 719 <div class="comment-body"> 720 Pingback: <a href="http://wallaceyuen.com/?p=38" class="url" rel="ugc external nofollow">WebGL Testing | Wallace's Programming Blog</a> </div> 721 </li><!-- #comment-## -->
722 <li id="comment-1313" class="comment even thread-even depth-1 parent"> 723 <article id="div-comment-1313" class="comment-body"> 724 <footer class="comment-meta"> 725 <div class="comment-author vcard"> 726 <img alt='' src='https://secure.gravatar.com/avatar/7ed5530d7168e558a274a420bbb9a48a131b8fc694277d5670f4d980357f7430?s=42&d=identicon&r=g' srcset='https://secure.gravatar.com/avatar/7ed5530d7168e558a274a420bbb9a48a131b8fc694277d5670f4d980357f7430?s=84&d=identicon&r=g 2x' class='avatar avatar-42 photo' height='42' width='42' loading='lazy' decoding='async'/> <b class="fn">Flo</b> <span class="says">says:</span> </div><!-- .comment-author --> 727 728 <div class="comment-metadata"> 729 <a href="https://www.learnopengles.com/how-to-embed-webgl-into-a-wordpress-post/#comment-1313"><time datetime="2012-10-13T13:37:35+00:00">October 13, 2012 at 1:37 pm</time></a> </div><!-- .comment-metadata --> 730 731 </footer><!-- .comment-meta --> 732 733 <div class="comment-content"> 734 <p>Hi!<br /> 735Tried this technique on severeal themes but doesn’t work in none of them. Does this work in the latest version of wordpress?</p> 736<p>It’s a pity WordPress can’t handle real html/JS/Canvas in posts etc…</p> 737 </div><!-- .comment-content --> 738 739 <div class="reply"><a rel="nofollow" class="comment-reply-link" href="#comment-1313" data-commentid="1313" data-postid="479" data-belowelement="div-comment-1313" data-respondelement="respond" data-replyto="Reply to Flo" aria-label="Reply to Flo">Reply</a></div> </article><!-- .comment-body --> 740 <ol class="children"> 741 <li id="comment-1321" class="comment byuser comment-author-oes_admin bypostauthor odd alt depth-2"> 742 <article id="div-comment-1321" class="comment-body"> 743 <footer class="comment-meta"> 744 <div class="comment-author vcard"> 745 <img alt='' src='https://secure.gravatar.com/avatar/2805bba6cce7460732844f021c68d33a6d192a42238b770bdbcbb92ecc47d569?s=42&d=identicon&r=g' srcset='https://secure.gravatar.com/avatar/2805bba6cce7460732844f021c68d33a6d192a42238b770bdbcbb92ecc47d569?s=84&d=identicon&r=g 2x' class='avatar avatar-42 photo' height='42' width='42' loading='lazy' decoding='async'/> <b class="fn"><a href="http://www.learnopengles.com" class="url" rel="ugc">Admin</a></b> <span class="says">says:</span> </div><!-- .comment-author --> 746 747 <div class="comment-metadata"> 748 <a href="https://www.learnopengles.com/how-to-embed-webgl-into-a-wordpress-post/#comment-1321"><time datetime="2012-10-26T20:57:56+00:00">October 26, 2012 at 8:57 pm</time></a> </div><!-- .comment-metadata --> 749 750 </footer><!-- .comment-meta --> 751 752 <div class="comment-content"> 753 <p>Unfortunately for me it has only worked when using the HTML editor. The moment you switch to visual mode everything gets wiped out…</p> 754 </div><!-- .comment-content --> 755 756 <div class="reply"><a rel="nofollow" class="comment-reply-link" href="#comment-1321" data-commentid="1321" data-postid="479" data-belowelement="div-comment-1321" data-respondelement="respond" data-replyto="Reply to Admin" aria-label="Reply to Admin">Reply</a></div> </article><!-- .comment-body --> 757 </li><!-- #comment-## --> 758</ol><!-- .children --> 759</li><!-- #comment-## --> 760 <li id="comment-2244" class="comment even thread-odd thread-alt depth-1 parent"> 761 <article id="div-comment-2244" class="comment-body"> 762 <footer class="comment-meta"> 763 <div class="comment-author vcard"> 764 <img alt='' src='https://secure.gravatar.com/avatar/2ef773403e3c920f78a9358ab02ac1410a53a0b57429124509e3517c11b14069?s=42&d=identicon&r=g' srcset='https://secure.gravatar.com/avatar/2ef773403e3c920f78a9358ab02ac1410a53a0b57429124509e3517c11b14069?s=84&d=identicon&r=g 2x' class='avatar avatar-42 photo' height='42' width='42' loading='lazy' decoding='async'/> <b class="fn"><a href="http://www.xrez.com" class="url" rel="ugc external nofollow">Greg Downing</a></b> <span class="says">says:</span> </div><!-- .comment-author --> 765 766 <div class="comment-metadata"> 767 <a href="https://www.learnopengles.com/how-to-embed-webgl-into-a-wordpress-post/#comment-2244"><time datetime="2014-04-12T21:06:25+00:00">April 12, 2014 at 9:06 pm</time></a> </div><!-- .comment-metadata --> 768 769 </footer><!-- .comment-meta --> 770 771 <div class="comment-content"> 772 <p>I am having a strange problem, when I add the for the includes it behaves normally. When I add the text for the embedded script into the post the editor adds an extra closing after my closing . I think this is breaking the code. Has anyone encountered this before?</p> 773 </div><!-- .comment-content --> 774 775 <div class="reply"><a rel="nofollow" class="comment-reply-link" href="#comment-2244" data-commentid="2244" data-postid="479" data-belowelement="div-comment-2244" data-respondelement="respond" data-replyto="Reply to Greg Downing" aria-label="Reply to Greg Downing">Reply</a></div> </article><!-- .comment-body --> 776 <ol class="children">
777 <li id="comment-2275" class="comment byuser comment-author-oes_admin bypostauthor odd alt depth-2"> 778 <article id="div-comment-2275" class="comment-body"> 779 <footer class="comment-meta"> 780 <div class="comment-author vcard"> 781 <img alt='' src='https://secure.gravatar.com/avatar/2805bba6cce7460732844f021c68d33a6d192a42238b770bdbcbb92ecc47d569?s=42&d=identicon&r=g' srcset='https://secure.gravatar.com/avatar/2805bba6cce7460732844f021c68d33a6d192a42238b770bdbcbb92ecc47d569?s=84&d=identicon&r=g 2x' class='avatar avatar-42 photo' height='42' width='42' loading='lazy' decoding='async'/> <b class="fn"><a href="http://www.learnopengles.com" class="url" rel="ugc">Admin</a></b> <span class="says">says:</span> </div><!-- .comment-author --> 782 783 <div class="comment-metadata"> 784 <a href="https://www.learnopengles.com/how-to-embed-webgl-into-a-wordpress-post/#comment-2275"><time datetime="2014-04-14T19:47:21+00:00">April 14, 2014 at 7:47 pm</time></a> </div><!-- .comment-metadata --> 785 786 </footer><!-- .comment-meta --> 787 788 <div class="comment-content"> 789 <p>IIRC, when I did this, I had to keep the editor in HTML mode otherwise things would break. ð</p> 790 </div><!-- .comment-content --> 791 792 <div class="reply"><a rel="nofollow" class="comment-reply-link" href="#comment-2275" data-commentid="2275" data-postid="479" data-belowelement="div-comment-2275" data-respondelement="respond" data-replyto="Reply to Admin" aria-label="Reply to Admin">Reply</a></div> </article><!-- .comment-body --> 793 </li><!-- #comment-## --> 794</ol><!-- .children --> 795</li><!-- #comment-## --> 796 <li id="comment-2276" class="comment even thread-even depth-1"> 797 <article id="div-comment-2276" class="comment-body"> 798 <footer class="comment-meta"> 799 <div class="comment-author vcard"> 800 <img alt='' src='https://secure.gravatar.com/avatar/2ef773403e3c920f78a9358ab02ac1410a53a0b57429124509e3517c11b14069?s=42&d=identicon&r=g' srcset='https://secure.gravatar.com/avatar/2ef773403e3c920f78a9358ab02ac1410a53a0b57429124509e3517c11b14069?s=84&d=identicon&r=g 2x' class='avatar avatar-42 photo' height='42' width='42' loading='lazy' decoding='async'/> <b class="fn"><a href="http://www.xrez.com" class="url" rel="ugc external nofollow">Greg Downing</a></b> <span class="says">says:</span> </div><!-- .comment-author --> 801 802 <div class="comment-metadata"> 803 <a href="https://www.learnopengles.com/how-to-embed-webgl-into-a-wordpress-post/#comment-2276"><time datetime="2014-04-14T21:13:17+00:00">April 14, 2014 at 9:13 pm</time></a> </div><!-- .comment-metadata --> 804 805 </footer><!-- .comment-meta --> 806 807 <div class="comment-content"> 808 <p>I did this without ever entering “visual mode”</p> 809 </div><!-- .comment-content --> 810 811 <div class="reply"><a rel="nofollow" class="comment-reply-link" href="#comment-2276" data-commentid="2276" data-postid="479" data-belowelement="div-comment-2276" data-respondelement="respond" data-replyto="Reply to Greg Downing" aria-label="Reply to Greg Downing">Reply</a></div> </article><!-- .comment-body --> 812 </li><!-- #comment-## --> 813 <li id="comment-2434" class="comment odd alt thread-odd thread-alt depth-1"> 814 <article id="div-comment-2434" class="comment-body"> 815 <footer class="comment-meta"> 816 <div class="comment-author vcard"> 817 <img alt='' src='https://secure.gravatar.com/avatar/c56abc1e8982e1e9a046a53f857a5d80f44bdfbdacea9b299247381e1b8d9df4?s=42&d=identicon&r=g' srcset='https://secure.gravatar.com/avatar/c56abc1e8982e1e9a046a53f857a5d80f44bdfbdacea9b299247381e1b8d9df4?s=84&d=identicon&r=g 2x' class='avatar avatar-42 photo' height='42' width='42' loading='lazy' decoding='async'/> <b class="fn"><a href="http://Www.Timbre-Design.Com" class="url" rel="ugc external nofollow">Derek</a></b> <span class="says">says:</span> </div><!-- .comment-author --> 818 819 <div class="comment-metadata"> 820 <a href="https://www.learnopengles.com/how-to-embed-webgl-into-a-wordpress-post/#comment-2434"><time datetime="2015-01-24T02:55:11+00:00">January 24, 2015 at 2:55 am</time></a> </div><!-- .comment-metadata --> 821 822 </footer><!-- .comment-meta --> 823 824 <div class="comment-content"> 825 <p>There are a few plugins which can call JS without embedding it directly in the page.<br /> 826One of the more comprehensive ones:<br /> 827<a href="https://wordpress.org/plugins/css-javascript-toolbox/" title="css-javascript-toolbox" rel="nofollow">CSS Javascript Toolbox</a></p> 828 </div><!-- .comment-content --> 829 830 <div class="reply"><a rel="nofollow" class="comment-reply-link" href="#comment-2434" data-commentid="2434" data-postid="479" data-belowelement="div-comment-2434" data-respondelement="respond" data-replyto="Reply to Derek" aria-label="Reply to Derek">Reply</a></div> </article><!-- .comment-body --> 831 </li><!-- #comment-## -->
832 <li id="comment-2459" class="comment even thread-even depth-1 parent"> 833 <article id="div-comment-2459" class="comment-body"> 834 <footer class="comment-meta"> 835 <div class="comment-author vcard"> 836 <img alt='' src='https://secure.gravatar.com/avatar/bb48a48cbfb8a28dc008b2f69288b9ca89f674ad3b98baab5b755b2ca0ba2cbe?s=42&d=identicon&r=g' srcset='https://secure.gravatar.com/avatar/bb48a48cbfb8a28dc008b2f69288b9ca89f674ad3b98baab5b755b2ca0ba2cbe?s=84&d=identicon&r=g 2x' class='avatar avatar-42 photo' height='42' width='42' loading='lazy' decoding='async'/> <b class="fn">Kornel Varga</b> <span class="says">says:</span> </div><!-- .comment-author --> 837 838 <div class="comment-metadata"> 839 <a href="https://www.learnopengles.com/how-to-embed-webgl-into-a-wordpress-post/#comment-2459"><time datetime="2015-04-23T16:26:41+00:00">April 23, 2015 at 4:26 pm</time></a> </div><!-- .comment-metadata --> 840 841 </footer><!-- .comment-meta --> 842 843 <div class="comment-content"> 844 <p>Hey guys,<br /> 845I am trying to use include Unity WebGL build on a WordPress site, do you have any idea how to do that? It might be obvious, but Im not sure how/ if at all possible to upload the rest of the content.</p> 846 </div><!-- .comment-content --> 847 848 <div class="reply"><a rel="nofollow" class="comment-reply-link" href="#comment-2459" data-commentid="2459" data-postid="479" data-belowelement="div-comment-2459" data-respondelement="respond" data-replyto="Reply to Kornel Varga" aria-label="Reply to Kornel Varga">Reply</a></div> </article><!-- .comment-body --> 849 <ol class="children"> 850 <li id="comment-2461" class="comment byuser comment-author-oes_admin bypostauthor odd alt depth-2"> 851 <article id="div-comment-2461" class="comment-body"> 852 <footer class="comment-meta"> 853 <div class="comment-author vcard"> 854 <img alt='' src='https://secure.gravatar.com/avatar/2805bba6cce7460732844f021c68d33a6d192a42238b770bdbcbb92ecc47d569?s=42&d=identicon&r=g' srcset='https://secure.gravatar.com/avatar/2805bba6cce7460732844f021c68d33a6d192a42238b770bdbcbb92ecc47d569?s=84&d=identicon&r=g 2x' class='avatar avatar-42 photo' height='42' width='42' loading='lazy' decoding='async'/> <b class="fn"><a href="http://www.learnopengles.com" class="url" rel="ugc">Admin</a></b> <span class="says">says:</span> </div><!-- .comment-author --> 855 856 <div class="comment-metadata"> 857 <a href="https://www.learnopengles.com/how-to-embed-webgl-into-a-wordpress-post/#comment-2461"><time datetime="2015-04-23T23:28:11+00:00">April 23, 2015 at 11:28 pm</time></a> </div><!-- .comment-metadata --> 858 859 </footer><!-- .comment-meta --> 860 861 <div class="comment-content"> 862 <p>I found this article that might help out: <a href="http://www.rewindgamestudio.com/?p=180" rel="nofollow ugc">http://www.rewindgamestudio.com/?p=180</a>. That’s for the web player so I’m not sure if it also applies to WebGL, but the one post I found for WebGL was linking back to this web page. ð</p> 863 </div><!-- .comment-content --> 864 865 <div class="reply"><a rel="nofollow" class="comment-reply-link" href="#comment-2461" data-commentid="2461" data-postid="479" data-belowelement="div-comment-2461" data-respondelement="respond" data-replyto="Reply to Admin" aria-label="Reply to Admin">Reply</a></div> </article><!-- .comment-body --> 866 </li><!-- #comment-## --> 867</ol><!-- .children --> 868</li><!-- #comment-## --> 869 </ol><!-- .comment-list --> 870 871 872 873 874 <div id="respond" class="comment-respond"> 875 <h2 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/how-to-embed-webgl-into-a-wordpress-post/#respond" style="display:none;">Cancel reply</a></small></h2><form action="https://www.learnopengles.com/wordpress/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Comment <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p style="clear: both;" class="subscribe-to-comments"> 876 <input type="checkbox" name="subscribe" id="subscribe" value="subscribe" style="width: auto;" /> 877 <label for="subscribe">Notify me of followup comments via e-mail</label> 878 </p><p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p> 879<p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p> 880<p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p> 881<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p> 882<p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='479' id='comment_post_ID' /> 883<input type='hidden' name='comment_parent' id='comment_parent' value='0' /> 884</p> 885<noscript><input type="hidden" name="JS04X7" value="NS1" /></noscript> 886<noscript><p><strong>Currently you have JavaScript disabled. In order to post comments, please make sure JavaScript and Cookies are enabled, and reload the page.</strong> <a href="http://enable-javascript.com/" rel="nofollow external" >Click here for instructions on how to enable JavaScript in your browser.</a></p></noscript> 887</form> </div><!-- #respond --> 888 889</div><!-- .comments-area --> 890 891 <nav class="navigation post-navigation" aria-label="Posts"> 892 <h2 class="screen-reader-text">Post navigation</h2> 893 <div class="nav-links"><div class="nav-previous"><a href="https://www.learnopengles.com/android-lesson-four-introducing-basic-texturing/" rel="prev"><span class="meta-nav" aria-hidden="true">Previous</span> <span class="screen-reader-text">Previous post:</span> <span class="post-title">Android Lesson Four: Introducing Basic Texturing</span></a></div><div class="nav-next"><a href="https://www.learnopengles.com/android-lesson-five-an-introduction-to-blending/" rel="next"><span class="meta-nav" aria-hidden="true">Next</span> <span class="screen-reader-text">Next post:</span> <span class="post-title">Android Lesson Five: An Introduction to Blending</span></a></div></div> 894 </nav> 895 </main><!-- .site-main --> 896 897 898</div><!-- .content-area --> 899 900 901 <aside id="secondary" class="sidebar widget-area" role="complementary"> 902 <section id="search-2" class="widget widget_search"> 903<form role="search" method="get" class="search-form" action="https://www.learnopengles.com/"> 904 <label> 905 <span class="screen-reader-text">Search for:</span> 906 <input type="search" class="search-field" placeholder="Search …" value="" name="s" /> 907 </label> 908 <button type="submit" class="search-submit"><span class="screen-reader-text">Search</span></button> 909</form> 910</section> 911 <section id="recent-posts-2" class="widget widget_recent_entries"> 912 <h2 class="widget-title">Recent Posts</h2> 913 <ul> 914 <li> 915 <a href="https://www.learnopengles.com/happy-new-year-2017-roundup-chip-8-rust-and-more/">Happy New Year 2017 Roundup – CHIP-8, Rust, and more</a> 916 </li> 917 <li> 918 <a href="https://www.learnopengles.com/new-roundup-support-for-android-studio/">
918New Roundup + Support for Android Studio</a> 919 </li> 920 <li> 921 <a href="https://www.learnopengles.com/learning-java-by-building-android-games-a-new-android-game-coding-books-for-beginners/">Learning Java by Building Android Games — a New Android Game Coding Books for Beginners</a> 922 </li> 923 <li> 924 <a href="https://www.learnopengles.com/opengl-roundup-fall-edition/">OpenGL Roundup, Fall Edition</a> 925 </li> 926 <li> 927 <a href="https://www.learnopengles.com/a-performance-comparison-redux-java-c-and-renderscript-on-the-nexus-5/">A performance comparison redux: Java, C, and Renderscript on the Nexus 5</a> 928 </li> 929 </ul> 930 931 </section><section id="categories-3" class="widget widget_categories"><h2 class="widget-title">Categories</h2> 932 <ul> 933 <li class="cat-item cat-item-172"><a href="https://www.learnopengles.com/category/air-hockey-project/">Air Hockey Project</a> 934</li> 935 <li class="cat-item cat-item-10"><a href="https://www.learnopengles.com/category/android/">Android</a> 936</li> 937 <li class="cat-item cat-item-6"><a href="https://www.learnopengles.com/category/android-tutorials/">Android Tutorials</a> 938</li> 939 <li class="cat-item cat-item-7"><a href="https://www.learnopengles.com/category/articles/">Articles</a> 940</li> 941 <li class="cat-item cat-item-41"><a href="https://www.learnopengles.com/category/game-development/">Game Development</a> 942</li> 943 <li class="cat-item cat-item-101"><a href="https://www.learnopengles.com/category/ios/">iOS</a> 944</li> 945 <li class="cat-item cat-item-170"><a href="https://www.learnopengles.com/category/ios-tutorials/">iOS Tutorials</a> 946</li> 947 <li class="cat-item cat-item-8"><a href="https://www.learnopengles.com/category/miscellaneous/">Miscellaneous</a> 948</li> 949 <li class="cat-item cat-item-173"><a href="https://www.learnopengles.com/category/native-development/">Native Development</a> 950</li> 951 <li class="cat-item cat-item-76"><a href="https://www.learnopengles.com/category/roundups/">Roundups</a> 952</li> 953 <li class="cat-item cat-item-33"><a href="https://www.learnopengles.com/category/webgl/">WebGL</a> 954</li> 955 <li class="cat-item cat-item-40"><a href="https://www.learnopengles.com/category/webgl-tutorials/">WebGL Tutorials</a> 956</li> 957 </ul> 958 959 </section><section id="nav_menu-4" class="widget widget_nav_menu"><h2 class="widget-title">Android Tutorials</h2><div class="menu-android-tutorials-container"><ul id="menu-android-tutorials" class="menu"><li id="menu-item-122" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-122"><a href="https://www.learnopengles.com/android-lesson-one-getting-started/">Lesson One: Getting Started</a></li> 960<li id="menu-item-294" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-294"><a href="https://www.learnopengles.com/android-lesson-two-ambient-and-diffuse-lighting/">Lesson Two: Ambient and Diffuse Lighting</a></li> 961<li id="menu-item-340" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-340"><a href="https://www.learnopengles.com/android-lesson-three-moving-to-per-fragment-lighting/">Lesson Three: Moving to Per-Fragment Lighting</a></li> 962<li id="menu-item-605" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-605"><a href="https://www.learnopengles.com/android-lesson-four-introducing-basic-texturing/">Lesson Four: Introducing Basic Texturing</a></li> 963<li id="menu-item-688" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-688"><a href="https://www.learnopengles.com/android-lesson-five-an-introduction-to-blending/">Lesson Five: An Introduction to Blending</a></li> 964<li id="menu-item-809" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-809"><a href="https://www.learnopengles.com/android-lesson-six-an-introduction-to-texture-filtering/">Lesson Six: An Introduction to Texture Filtering</a></li> 965<li id="menu-item-916" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-916"><a href="https://www.learnopengles.com/android-lesson-seven-an-introduction-to-vertex-buffer-objects-vbos/">Lesson Seven: An Introduction to Vertex Buffer Objects</a></li> 966<li id="menu-item-1062" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1062"><a href="https://www.learnopengles.com/android-lesson-eight-an-introduction-to-index-buffer-objects-ibos/">Lesson Eight: An Introduction to Index Buffer Objects</a></li> 967</ul></div></section><section id="nav_menu-8" class="widget widget_nav_menu"><h2 class="widget-title">WebGL Tutorials</h2><div class="menu-webgl-tutorials-container"><ul id="menu-webgl-tutorials" class="menu"><li id="menu-item-473" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-473"><a href="https://www.learnopengles.com/webgl-lesson-one-getting-started/">Lesson One: Getting Started</a></li> 968</ul></div></section><section id="nav_menu-6" class="widget widget_nav_menu"><h2 class="widget-title">Articles</h2><div class="menu-articles-container"><ul id="menu-articles" class="menu"><li id="menu-item-618" class="menu-item menu-item-type-post_type menu-item-object-post current-menu-item menu-item-618"><a href="https://www.learnopengles.com/how-to-embed-webgl-into-a-wordpress-post/" aria-current="page">How to Embed Webgl into a WordPress Post</a></li> 969<li id="menu-item-808" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-808"><a href="https://www.learnopengles.com/listening-to-android-touch-events-and-acting-on-them/">Listening to Android Touch Events, and Acting on Them</a></li> 970<li id="menu-item-859" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-859"><a href="https://www.learnopengles.com/rotating-an-object-with-touch-events/">Rotating An Object With Touch Events</a></li> 971<li id="menu-item-1206" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1206"><a href="https://www.learnopengles.com/how-to-use-opengl-es-2-in-an-android-live-wallpaper/">How to Use OpenGL ES 2 in an Android Live Wallpaper</a></li> 972<li id="menu-item-1260" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1260"><a href="https://www.learnopengles.com/understanding-opengls-matrices/">Understanding OpenGL’s Matrices</a></li> 973</ul></div></section><section id="nav_menu-9" class="widget widget_nav_menu"><h2 class="widget-title">Air Hockey Project</h2><div class="menu-air-hockey-project-container"><ul id="menu-air-hockey-project" class="menu"><li id="menu-item-2252" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2252"><a href="https://www.learnopengles.com/developing-a-simple-game-of-air-hockey-using-c-and-opengl-es-2-for-android-ios-and-the-web/">A Simple Game of Air Hockey Using C and OpenGL ES 2</a></li> 974<li id="menu-item-2249" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2249"><a href="https://www.learnopengles.com/calling-opengl-from-android-using-the-ndk/">Calling OpenGL on Android via the NDK</a></li> 975<li id="menu-item-2250" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2250"><a href="https://www.learnopengles.com/calling-opengl-from-c-on-ios-sharing-common-code-with-android/">Calling OpenGL on iOS, Sharing Common Code with Android</a></li> 976<li id="menu-item-2251" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2251"><a href="https://www.learnopengles.com/calling-opengl-from-c-on-the-web-by-using-emscripten-sharing-common-code-with-android-and-ios/">Calling OpenGL on the web via Emscripten</a></li> 977<li id="menu-item-2254" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2254"><a href="https://www.learnopengles.com/loading-a-png-into-memory-and-displaying-it-as-a-texture-with-opengl-es-2-using-almost-the-same-code-on-ios-android-and-emscripten/">Displaying a PNG as a Texture on Android</a></li> 978<li id="menu-item-2256" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2256"><a href="https://www.learnopengles.com/loading-a-png-into-memory-and-displaying-it-as-a-texture-with-opengl-es-2-adding-support-for-ios/">Displaying a PNG as a Texture on iOS</a></li> 979<li id="menu-item-2255" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2255"><a href="https://www.learnopengles.com/loading-a-png-into-memory-and-displaying-it-as-a-texture-with-opengl-es-2-adding-support-for-emscripten/">Displaying a PNG as a Texture on Emscripten</a></li> 980<li id="menu-item-2257" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2257"><a href="https://www.learnopengles.com/adding-a-3d-perspective-and-object-rendering-to-our-air-hockey-project-in-native-c-code/">Adding a 3d Perspective</a></li> 981<li id="menu-item-2253" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2253"><a href="https://www.learnopengles.com/finishing-up-our-native-air-hockey-project-with-touch-events-and-basic-collision-detection/">Finishing Up With Touch Events and Basic Collision Detection</a></li> 982</ul></div></section><section id="text-9" class="widget widget_text"><h2 class="widget-title">Get the Book</h2> <div class="textwidget"><div align="center"><a href="https://pragprog.com/titles/kbogla/opengl-es-2-for-android/"><img width="300" src="https://www.learnopengles.com/wordpress/wp-content/uploads/2026/09/kbogla_hu_b95bf25a3e0162db.jpg" alt="OpenGL ES 2 for Android book cover"></a> 983<p><a href="https://pragprog.com/titles/kbogla/opengl-es-2-for-android/">Buy Now</a></p> 984</div></div> 985 </section><section id="text-8" class="widget widget_text"><h2 class="widget-title">Get the Source Code</h2> <div class="textwidget">Source code is available at the <a href="https://github.com/learnopengles/Learn-OpenGLES-Tutorials" target="_blank">GitHub repository</a>.</div> 986 </section><section id="linkcat-3" class="widget widget_links"><h2 class="widget-title">Reference Sites</h2> 987 <ul class='xoxo blogroll'> 988<li><a href="http://developer.android.com/index.html" title="Google’s reference site for developing on Android." target="_blank">Android Developers</a></li> 989<li><a href="http://www.opengl.org/" title="The industry’s foundation for high performance graphics." target="_blank">OpenGL</a></li> 990<li><a href="http://www.khronos.org/" title="Open standards for media authoring and acceleration." target="_blank">The Khronos Group</a></li> 991 992 </ul> 993</section> 994<section id="linkcat-5" class="widget widget_links"><h2 class="widget-title">Resources</h2> 995 <ul class='xoxo blogroll'> 996<li><a href="http://android-developers.blogspot.com/" title="Google’s official developer’s blog, on everything Android." target="_blank">Android Developer's Blog</a></li> 997<li><a href="http://www.dataorienteddesign.com/dodmain/dodmain.html">Data-Oriented Design</a></li> 998<li><a href="http://gameprogrammingpatterns.com/index.html">Game Programming Patterns</a></li> 999<li><a href="http://www.khronos.org/webgl/wiki/Main_Page" target="_blank">Khronos WebGL Public Wiki</a></li> 1000<li><a href="https://wiki.mozilla.org/Platform/GFX/MobileGPUs">Platform/GFX/MobileGPUs</a></li> 1001 1002 </ul> 1003</section> 1004<section id="linkcat-2" class="widget widget_links"><h2 class="widget-title">Tutorials and Information</h2> 1005 <ul class='xoxo blogroll'> 1006<li><a href="http://www.euclideanspace.com/" title="Learning math and physics to build a 3D world." target="_blank">Euclidean Space</a></li> 1007<li><a href="http://www.falloutsoftware.com/" title="OpenGL, DirectX, DirectDraw and 3D game programming tutorials." target="_blank">FalloutSoftware.com</a></li> 1008<li>
1008<a href="http://gamecodeschool.com" title="Game coding for beginners">Game Code School</a></li> 1009<li><a href="http://ghoshehsoft.wordpress.com/" title="OpenGL ES 2.0 topics for Android">Ghoshehsoft's Blog</a></li> 1010<li><a href="http://glprogramming.com/" title="Communal website for the OpenGL Help Network." target="_blank">GLProgramming</a></li> 1011<li><a href="http://mindprod.com/jgloss/jgloss.html" title="Canadian Mind Products Java & Internet Glossary" target="_blank">Java glossary</a></li> 1012<li><a href="http://arcsynthesis.org/gltut/" title="A detailed online webbook on modern OpenGL programming, using shaders." target="_blank">Learning Modern 3D Graphics Programming</a></li> 1013<li><a href="http://learningwebgl.com/blog/" target="_blank">Learning WebGL</a></li> 1014<li><a href="http://nehe.gamedev.net/" title="OpenGL tutorials, demos, games and more." target="_blank">NeHe Productions</a></li> 1015<li><a href="https://en.wikibooks.org/wiki/OpenGL_Programming" target="_blank">OpenGL Programming WikiBook</a></li> 1016<li><a href="http://www.songho.ca/opengl/index.html" title="Fundamental OpenGL tutorials and notes." target="_blank">songho.ca OpenGL Tutorials</a></li> 1017 1018 </ul> 1019</section> 1020<section id="pages-2" class="widget widget_pages"><h2 class="widget-title">Pages</h2> 1021 <ul> 1022 <li class="page_item page-item-927"><a href="https://www.learnopengles.com/about/">About</a></li> 1023<li class="page_item page-item-27"><a href="https://www.learnopengles.com/privacy-policy/">Privacy Policy</a></li> 1024<li class="page_item page-item-720"><a href="https://www.learnopengles.com/terms-of-use/">Terms of Use</a></li> 1025 </ul> 1026 1027 </section><section id="archives-2" class="widget widget_archive"><h2 class="widget-title">Archives</h2> 1028 <ul> 1029 <li><a href='https://www.learnopengles.com/2017/01/'>January 2017</a></li> 1030 <li><a href='https://www.learnopengles.com/2016/08/'>August 2016</a></li> 1031 <li><a href='https://www.learnopengles.com/2015/06/'>June 2015</a></li> 1032 <li><a href='https://www.learnopengles.com/2014/10/'>October 2014</a></li> 1033 <li><a href='https://www.learnopengles.com/2014/07/'>July 2014</a></li> 1034 <li><a href='https://www.learnopengles.com/2014/04/'>April 2014</a></li> 1035 <li><a href='https://www.learnopengles.com/2013/11/'>November 2013</a></li> 1036 <li><a href='https://www.learnopengles.com/2013/10/'>October 2013</a></li> 1037 <li><a href='https://www.learnopengles.com/2013/09/'>September 2013</a></li> 1038 <li><a href='https://www.learnopengles.com/2013/07/'>July 2013</a></li> 1039 <li><a href='https://www.learnopengles.com/2013/06/'>June 2013</a></li> 1040 <li><a href='https://www.learnopengles.com/2013/05/'>May 2013</a></li> 1041 <li><a href='https://www.learnopengles.com/2013/04/'>April 2013</a></li> 1042 <li><a href='https://www.learnopengles.com/2013/02/'>February 2013</a></li> 1043 <li><a href='https://www.learnopengles.com/2013/01/'>January 2013</a></li> 1044 <li><a href='https://www.learnopengles.com/2012/10/'>October 2012</a></li> 1045 <li><a href='https://www.learnopengles.com/2012/08/'>August 2012</a></li> 1046 <li><a href='https://www.learnopengles.com/2012/07/'>July 2012</a></li> 1047 <li><a href='https://www.learnopengles.com/2012/06/'>June 2012</a></li> 1048 <li><a href='https://www.learnopengles.com/2012/05/'>May 2012</a></li> 1049 <li><a href='https://www.learnopengles.com/2012/04/'>April 2012</a></li> 1050 <li><a href='https://www.learnopengles.com/2012/03/'>March 2012</a></li> 1051 <li><a href='https://www.learnopengles.com/2012/02/'>February 2012</a></li> 1052 <li><a href='https://www.learnopengles.com/2011/12/'>December 2011</a></li> 1053 <li><a href='https://www.learnopengles.com/2011/10/'>October 2011</a></li> 1054 <li><a href='https://www.learnopengles.com/2011/09/'>September 2011</a></li> 1055 <li><a href='https://www.learnopengles.com/2011/07/'>July 2011</a></li> 1056 <li><a href='https://www.learnopengles.com/2011/06/'>June 2011</a></li> 1057 <li><a href='https://www.learnopengles.com/2011/05/'>May 2011</a></li> 1058 </ul> 1059 1060 </section> </aside><!-- .sidebar .widget-area --> 1061 1062 </div><!-- .site-content --> 1063 1064 <footer id="colophon" class="site-footer" role="contentinfo"> 1065 1066 1067 <div class="site-info"> 1068 <span class="site-title"><a href="https://www.learnopengles.com/" rel="home">Learn OpenGL ES</a></span> 1069 <a href="https://wordpress.org/">Proudly powered by WordPress</a> 1070 </div><!-- .site-info --> 1071 </footer><!-- .site-footer --> 1072 </div><!-- .site-inner --> 1073</div><!-- .site --> 1074
1075<script type="speculationrules"> 1076{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wordpress/wp-*.php","/wordpress/wp-admin/*","/wordpress/wp-content/uploads/*","/wordpress/wp-content/*","/wordpress/wp-content/plugins/*","/wordpress/wp-content/themes/twentysixteen-child/*","/wordpress/wp-content/themes/twentysixteen/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} 1077</script>
1077 1078
1079<script type='text/javascript'> 1080/* <![CDATA[ */ 1081r3f5x9JS=escape(document['referrer']); 1082hf4N='7fbba920326baea54ce914514d3f905e'; 1083hf4V='e8e1e496a6d0dffd6ac1fb1b94e07c75'; 1084cm4S="form[action='https://www.learnopengles.com/wordpress/wp-comments-post.php']"; 1085jQuery(document).ready(function($){var e="#commentform, .comment-respond form, .comment-form, "+cm4S+", #lostpasswordform, #registerform, #loginform, #login_form, #wpss_contact_form";$(e).submit(function(){$("<input>").attr("type","hidden").attr("name","r3f5x9JS").attr("value",r3f5x9JS).appendTo(e);$("<input>").attr("type","hidden").attr("name",hf4N).attr("value",hf4V).appendTo(e);return true;});$("#comment").attr({minlength:"15",maxlength:"15360"})}); 1086/* ]]> */ 1087</script>
1087
1088<script id="twentysixteen-skip-link-focus-fix-js" src="https://www.learnopengles.com/wordpress/wp-content/themes/twentysixteen/js/skip-link-focus-fix.js?ver=20160816"></script>
vendor: 1 bytes, line 1088
1088
1089<script async data-wp-strategy="async" fetchpriority="low" id="comment-reply-js" src="https://www.learnopengles.com/wordpress/wp-includes/js/comment-reply.min.js?ver=7.1.2"></script>
vendor: 1 bytes, line 1089
1089
1090<script id="twentysixteen-script-js-extra"> 1091var screenReaderText = {"expand":"expand child menu","collapse":"collapse child menu"}; 1092//# sourceURL=twentysixteen-script-js-extra 1093</script>
vendor: 1 bytes, line 1093
1093
1094<script id="twentysixteen-script-js" src="https://www.learnopengles.com/wordpress/wp-content/themes/twentysixteen/js/functions.js?ver=20160816"></script>
vendor: 1 bytes, line 1094
1094
1095<script id="wpss-jscripts-ftr-js" src="https://www.learnopengles.com/wordpress/wp-content/plugins/wp-spamshield/js/jscripts-ftr-min.js"></script>
vendor: 1 bytes, line 1095
1095
1096<script id="wp-emoji-settings" type="application/json"> 1097{"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://www.learnopengles.com/wordpress/wp-includes/js/wp-emoji-release.min.js?ver=7.1.2"}} 1098</script>
vendor: 1 bytes, line 1098
1098
1099<script type="module"> 1100/*! This file is auto-generated */ 1101var e="script#wp-emoji-settings",t=document.querySelector(e);if(!(t instanceof HTMLScriptElement))throw new Error("Element missing: "+e);const r=JSON.parse(t.text),s=(window._wpemojiSettings=r,"wpEmojiSettingsSupports"),o=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(s,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const r=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===r[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,r){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!r(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,r){let a;const s=(a="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),o=(s.textBaseline="top",s.font="600 32px Arial",{});return e.forEach(e=>{o[e]=t(s,e,n,r)}),o}function a(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}r.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(s));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(o),u.toString(),c.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"});const a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=e=>{i(n=e.data),a.terminate(),t(n)})}catch(e){}i(n=f(o,u,c,p))}t(n)}).then(e=>{for(const n in e)r.supports[n]=e[n],r.supports.everything=r.supports.everything&&r.supports[n],"flag"!==n&&(r.supports.everythingExceptFlag=r.supports.everythingExceptFlag&&r.supports[n]);var t;r.supports.everythingExceptFlag=r.supports.everythingExceptFlag&&!r.supports.flag,r.supports.everything||((t=r.source||{}).concatemoji?a(t.concatemoji):t.wpemoji&&t.twemoji&&(a(t.twemoji),a(t.wpemoji)))}); 1102//# sourceURL=https://www.learnopengles.com/wordpress/wp-includes/js/wp-emoji-loader.min.js 1103</script>
1103 1104</body> 1105</html> 1106 1107<!-- Dynamic page generated in 0.122 seconds. --> 1108<!-- Cached page generated by WP-Super-Cache on 2026-09-22 22:45:27 --> 1109 1110<!-- Compression = gzip -->
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.