PageSourceSearch

https://www.learnopengles.com/how-to-embed-webgl-into-a-wordpress-post/

html learnopengles.com collected 2026-10-02 05:13:03 UTC 96,004 bytes, 1,110 lines download raw bytes

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 &raquo; Feed" href="https://www.learnopengles.com/feed/" />
34<link rel="alternate" type="application/rss+xml" title="Learn OpenGL ES &raquo; Comments Feed" href="https://www.learnopengles.com/comments/feed/" />
35<link rel="alternate" type="application/rss+xml" title="Learn OpenGL ES &raquo; 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&#038;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&#8217;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>&lt;pre&gt;&lt;canvas id=&quot;canvas&quot; width=&quot;550&quot; height=&quot;375&quot;&gt;Your browser does not support the canvas tag. This is a static example of what would be seen.&lt;/canvas&gt;&lt;/pre&gt;</code></p>
130<p>Then, include any necessary scripts:</p>
131<p><code>&lt;pre&gt;&lt;script type=&quot;text/javascript&quot; src=&quot;http://www.learnopengles.com/wordpress/wp-content/uploads/2011/06/webgl-utils.js&quot;&gt;&lt;/script&gt;&lt;/pre&gt;</code></p>
132<p>Embed any additional scripts that you need, such as the main body for your WebGL script:</p>
133<p><code>&lt;pre&gt;&lt;script type=&quot;text/javascript&quot;&gt;<br />
134/**<br />
135 * Lesson_one.js<br />
136 */</p>
137<p>...</p>
138<p>&lt;/script&gt;&lt;/pre&gt;</code></p>
139<p>The &lt;pre&gt; tag is important; otherwise WordPress will mangle your scripts and insert random paragraph tags and other stuff inside. Also, once you&#8217;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&#8217;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&rsquo;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&rsquo;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&rsquo;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&#038;d=identicon&#038;r=g' srcset='https://secure.gravatar.com/avatar/2805bba6cce7460732844f021c68d33a6d192a42238b770bdbcbb92ecc47d569?s=84&#038;d=identicon&#038;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&#038;d=identicon&#038;r=g' srcset='https://secure.gravatar.com/avatar/2805bba6cce7460732844f021c68d33a6d192a42238b770bdbcbb92ecc47d569?s=98&#038;d=identicon&#038;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 &ldquo;How to Embed Webgl into a WordPress Post&rdquo;		</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&#038;d=identicon&#038;r=g' srcset='https://secure.gravatar.com/avatar/f630e8bdc4e43fb381947e8503817119fb7c801848bfb25b84e9ccc76618a80e?s=84&#038;d=identicon&#038;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&#8217;m Federico Ciccarese,<br />
620I read your post &#8220;How to Embed WebGL into WordPress Post.&#8221;<br />
621I&#8217;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&#038;d=identicon&#038;r=g' srcset='https://secure.gravatar.com/avatar/5efb0384da7e8a459c10df6edfbdf8210b9326fbb4d072c37e9679eb4e49fee3?s=84&#038;d=identicon&#038;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&#8217;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&#8217;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&#038;d=identicon&#038;r=g' srcset='https://secure.gravatar.com/avatar/2805bba6cce7460732844f021c68d33a6d192a42238b770bdbcbb92ecc47d569?s=84&#038;d=identicon&#038;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 &#038; 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&#038;d=identicon&#038;r=g' srcset='https://secure.gravatar.com/avatar/665af06ab5238cdfdaf77e5e0b6a9685cd6a065be92c6f2d430784694cbc6762?s=84&#038;d=identicon&#038;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&#8217;s a pain that you have to stick with the html editor but apart from that it works.</p>
682<p>What&#8217;s the recommended way of starting the initialization function (context creation etc) at page load if you don&#8217;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&#8217;m not so much into javascript and html5 that I could tell if that&#8217;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&#038;d=identicon&#038;r=g' srcset='https://secure.gravatar.com/avatar/2805bba6cce7460732844f021c68d33a6d192a42238b770bdbcbb92ecc47d569?s=84&#038;d=identicon&#038;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&#8217;t seem like a bad way to me. I didn&#8217;t do it like that though &#8212; I just embedded the WebGL script directly, and the browser executes the code automatically:</p>
706<p>&lt;pre&gt;&lt;script type=&quot;text/javascript&quot;&gt;<br />
707/**<br />
708* Lesson_one.js<br />
709*/</p>
710<p>&#8230;</p>
711<p>&lt;/script&gt;&lt;/pre&gt;</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&#039;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&#038;d=identicon&#038;r=g' srcset='https://secure.gravatar.com/avatar/7ed5530d7168e558a274a420bbb9a48a131b8fc694277d5670f4d980357f7430?s=84&#038;d=identicon&#038;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&#8217;t work in none of them. Does this work in the latest version of wordpress?</p>
736<p>It&#8217;s a pity WordPress can&#8217;t handle real html/JS/Canvas in posts etc&#8230;</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&#038;d=identicon&#038;r=g' srcset='https://secure.gravatar.com/avatar/2805bba6cce7460732844f021c68d33a6d192a42238b770bdbcbb92ecc47d569?s=84&#038;d=identicon&#038;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&#8230;</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&#038;d=identicon&#038;r=g' srcset='https://secure.gravatar.com/avatar/2ef773403e3c920f78a9358ab02ac1410a53a0b57429124509e3517c11b14069?s=84&#038;d=identicon&#038;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&#038;d=identicon&#038;r=g' srcset='https://secure.gravatar.com/avatar/2805bba6cce7460732844f021c68d33a6d192a42238b770bdbcbb92ecc47d569?s=84&#038;d=identicon&#038;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&#038;d=identicon&#038;r=g' srcset='https://secure.gravatar.com/avatar/2ef773403e3c920f78a9358ab02ac1410a53a0b57429124509e3517c11b14069?s=84&#038;d=identicon&#038;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 &#8220;visual mode&#8221;</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&#038;d=identicon&#038;r=g' srcset='https://secure.gravatar.com/avatar/c56abc1e8982e1e9a046a53f857a5d80f44bdfbdacea9b299247381e1b8d9df4?s=84&#038;d=identicon&#038;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&#038;d=identicon&#038;r=g' srcset='https://secure.gravatar.com/avatar/bb48a48cbfb8a28dc008b2f69288b9ca89f674ad3b98baab5b755b2ca0ba2cbe?s=84&#038;d=identicon&#038;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&#038;d=identicon&#038;r=g' srcset='https://secure.gravatar.com/avatar/2805bba6cce7460732844f021c68d33a6d192a42238b770bdbcbb92ecc47d569?s=84&#038;d=identicon&#038;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&#8217;s for the web player so I&#8217;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 &hellip;" 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 &#8211; 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 &#8212; 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&#8217;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&#8217;s reference site for developing on Android." target="_blank">Android Developers</a></li>
989<li><a href="http://www.opengl.org/" title="The industry&#8217;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&#8217;s official developer&#8217;s blog, on everything Android." target="_blank">Android Developer&#039;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&#039;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 &amp; 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.