<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>*drawlogic &#187; JAVASCRIPT</title>
	<atom:link href="http://drawlogic.com/category/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://drawlogic.com</link>
	<description>interactive and game development technologies for the web - flash, flex, unity3d, silverlight, javascript</description>
	<lastBuildDate>Thu, 22 Dec 2011 21:55:20 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Impact Javascript Game Engine Demo for iOS</title>
		<link>http://drawlogic.com/2010/10/11/impact-javascript-game-engine-demo-for-ios/</link>
		<comments>http://drawlogic.com/2010/10/11/impact-javascript-game-engine-demo-for-ios/#comments</comments>
		<pubDate>Tue, 12 Oct 2010 06:31:42 +0000</pubDate>
		<dc:creator>drawk</dc:creator>
				<category><![CDATA[JAVASCRIPT]]></category>
		<category><![CDATA[TECHNOLOGY]]></category>
		<category><![CDATA[ENGINE]]></category>
		<category><![CDATA[impact]]></category>
		<category><![CDATA[ios]]></category>
		<category><![CDATA[MOBILE]]></category>
		<category><![CDATA[OPENGL]]></category>
		<category><![CDATA[opengl es]]></category>
		<category><![CDATA[webkit]]></category>

		<guid isPermaLink="false">http://drawlogic.com/?p=886</guid>
		<description><![CDATA[Pretty promising project over at PhobosLab of the Impact Game Engine running on the iOS platform using the JavaScriptCore Framework. The best part is it has all Canvas calls passed into run on OpenGL ES thus the speedy demo. Biolab Disaster on the iPhone 3GS from Dominic Szablewski on Vimeo. The game is running in [...]]]></description>
			<content:encoded><![CDATA[<p>Pretty promising project over at <a href="http://www.phoboslab.org/log/2010/10/impact-for-ios" target="_blank">PhobosLab of the Impact Game Engine running on the iOS platform</a> using the JavaScriptCore Framework. The best part is it has all Canvas calls passed into run on OpenGL ES thus the speedy demo.</p>
<p><iframe src="http://player.vimeo.com/video/15733748" width="400" height="225" frameborder="0"></iframe>
<p><a href="http://vimeo.com/15733748">Biolab Disaster on the iPhone 3GS</a> from <a href="http://vimeo.com/dsz">Dominic Szablewski</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
<blockquote><p>The game is running in its own process and is not using the iPhone&#8217;s browser at all. Instead, it&#8217;s just using the JavaScriptCore Framework to run the game. All the necessary calls to the Canvas API have been reimplemented with OpenGL-ES and the touch input is passed over to JavaScript to be evaluated by the engine. I of course had to make some changes to the engine, but the game source code is exactly the same as for the web version.</p></blockquote>
<p>This would probably never fly on the App Store because it executes code or interprets it but is a very nice experiment.  More discussion at <a href="http://news.ycombinator.com/item?id=1779632">Hacker News.</a>. </p>
]]></content:encoded>
			<wfw:commentRss>http://drawlogic.com/2010/10/11/impact-javascript-game-engine-demo-for-ios/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Three.js &#8211; Javascript 3D Engine with Canvas and SVG Renderers</title>
		<link>http://drawlogic.com/2010/04/25/three-js-javascript-3d-engine-with-canvas-and-svg-renderers/</link>
		<comments>http://drawlogic.com/2010/04/25/three-js-javascript-3d-engine-with-canvas-and-svg-renderers/#comments</comments>
		<pubDate>Mon, 26 Apr 2010 03:16:12 +0000</pubDate>
		<dc:creator>drawk</dc:creator>
				<category><![CDATA[3D ENGINES]]></category>
		<category><![CDATA[JAVASCRIPT]]></category>
		<category><![CDATA[PROGRAMMING]]></category>
		<category><![CDATA[TECHNOLOGY]]></category>
		<category><![CDATA[3d]]></category>
		<category><![CDATA[canvas]]></category>
		<category><![CDATA[ENGINE]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[renderer]]></category>
		<category><![CDATA[svg]]></category>

		<guid isPermaLink="false">http://drawlogic.com/?p=777</guid>
		<description><![CDATA[A new Javascript 3D Engine that can render to Canvas and SVG has been released by mr. doob. Mr. doob is a well known Flash developer that has added many great experiments and cool contributions without being stuck to one technology, making some great interactive projects in javascript, chrome experiments and html5 (canvas/svg) in addition to the [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://mrdoob.com/122/threejs" target="_blank"><img class="alignright" title="Three.js cube" src="http://i81.photobucket.com/albums/j223/drawkbox/cube.png" alt="" width="200" height="150" /></a>A new <a href="http://github.com/mrdoob/three.js" target="_self">Javascript 3D Engine that can render to Canvas and SVG</a> has been released by <a href="http://mrdoob.com/" target="_self">mr. doob</a>.</p>
<p>Mr. doob is a well known Flash developer that has added many great experiments and cool contributions without being stuck to one technology, making some great interactive projects in javascript, <a href="http://mrdoob.com/blog/post/644" target="_blank">chrome experiments</a> and html5 (canvas/svg) in addition to the work in Flash with toolkits like Papervision 3D.  Recently the <a href="http://mrdoob.com/120/Harmony" target="_blank">Harmony html5/javascript sketching project</a> generated lots of interest for an html5 sketching app.</p>
<p><a href="http://github.com/mrdoob/three.js" target="_blank">Three.js</a> is great because it is a 3d engine built with renderers in SVG and Canvas makes to a really good base for modular, cross platform 3d engine right now (as soon as IE9 joins the party). For a while a good javascript rendering library will need to support multiple renderers for browser differences in performance and supported dependencies like canvas, svg and webgl.  Three.js has that reality as part of the design. </p>
<blockquote><p>Currently the engine only supports particles and triangles/quads with flat colors. The aim is to keep the code as simple and modular as possible.</p>
<p>At the moment the engine can render using &lt;canvas&gt; and &lt;svg&gt;. WebGL rendering would come at a later stage but feel free to fork the project and have a go.</p>
<p>Although this allows 3D for iPhoneOS and Android platforms the performance on these devices is not too good.</p></blockquote>
<ul>
<li><a href="http://mrdoob.com/blog/post/693" target="_blank">Blog post on the Three.js project</a></li>
<li><a href="http://github.com/mrdoob/three.js" target="_self">Three.js at github</a></li>
<li>Demos
<ul>
<li><a href="http://mrdoob.com/lab/javascript/three/geometry/cube.html" target="_self">Cube</a></li>
<li><a href="http://mrdoob.com/lab/javascript/three/particles/random.html" target="_self">Random</a></li>
<li><a href="http://mrdoob.com/lab/javascript/three/particles/waves.html" target="_self">Waves</a></li>
<li><a href="http://mrdoob.com/lab/javascript/three/particles/floor.html" target="_self">Floor</a></li>
</ul>
</li>
</ul>
<p>Sample Code:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> camera<span style="color: #339933;">,</span> scene<span style="color: #339933;">,</span> renderer<span style="color: #339933;">;</span>
&nbsp;
    init<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    setInterval<span style="color: #009900;">&#40;</span>loop<span style="color: #339933;">,</span> <span style="color: #CC0000;">1000</span> <span style="color: #339933;">/</span> <span style="color: #CC0000;">60</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #003366; font-weight: bold;">function</span> init<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
    <span style="color: #009900;">&#123;</span>
        camera <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Camera<span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">1000</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        scene <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Scene<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        renderer <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> CanvasRenderer<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        renderer.<span style="color: #660066;">setSize</span><span style="color: #009900;">&#40;</span>window.<span style="color: #660066;">innerWidth</span><span style="color: #339933;">,</span> window.<span style="color: #660066;">innerHeight</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> <span style="color: #CC0000;">1000</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #003366; font-weight: bold;">var</span> particle <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Particle<span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">new</span> ColorMaterial<span style="color: #009900;">&#40;</span>Math.<span style="color: #660066;">random</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> 0x808008 <span style="color: #339933;">+</span> 0x808080<span style="color: #339933;">,</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            particle.<span style="color: #660066;">size</span> <span style="color: #339933;">=</span> Math.<span style="color: #660066;">random</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">10</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">5</span><span style="color: #339933;">;</span>
            particle.<span style="color: #660066;">position</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">=</span> Math.<span style="color: #660066;">random</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">2000</span> <span style="color: #339933;">-</span> <span style="color: #CC0000;">1000</span><span style="color: #339933;">;</span>
            particle.<span style="color: #660066;">position</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">=</span> Math.<span style="color: #660066;">random</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">2000</span> <span style="color: #339933;">-</span> <span style="color: #CC0000;">1000</span><span style="color: #339933;">;</span>
            particle.<span style="color: #660066;">position</span>.<span style="color: #660066;">z</span> <span style="color: #339933;">=</span> Math.<span style="color: #660066;">random</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">2000</span> <span style="color: #339933;">-</span> <span style="color: #CC0000;">1000</span><span style="color: #339933;">;</span>
            particle.<span style="color: #660066;">updateMatrix</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            scene.<span style="color: #660066;">add</span><span style="color: #009900;">&#40;</span> particle <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        document.<span style="color: #660066;">body</span>.<span style="color: #660066;">appendChild</span><span style="color: #009900;">&#40;</span>renderer.<span style="color: #660066;">viewport</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #003366; font-weight: bold;">function</span> loop<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
    <span style="color: #009900;">&#123;</span>
        renderer.<span style="color: #660066;">render</span><span style="color: #009900;">&#40;</span>scene<span style="color: #339933;">,</span> camera<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://drawlogic.com/2010/04/25/three-js-javascript-3d-engine-with-canvas-and-svg-renderers/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>iTween Tweening and Easing Animation Library for Unity 3D</title>
		<link>http://drawlogic.com/2010/04/11/itween-tweening-and-easing-animation-library-for-unity-3d/</link>
		<comments>http://drawlogic.com/2010/04/11/itween-tweening-and-easing-animation-library-for-unity-3d/#comments</comments>
		<pubDate>Sun, 11 Apr 2010 23:38:46 +0000</pubDate>
		<dc:creator>drawk</dc:creator>
				<category><![CDATA[C#]]></category>
		<category><![CDATA[JAVASCRIPT]]></category>
		<category><![CDATA[PROGRAMMING]]></category>
		<category><![CDATA[TECHNOLOGY]]></category>
		<category><![CDATA[3d]]></category>
		<category><![CDATA[ANIMATION]]></category>
		<category><![CDATA[easing]]></category>
		<category><![CDATA[itween]]></category>
		<category><![CDATA[tweener]]></category>
		<category><![CDATA[tweenlite]]></category>
		<category><![CDATA[unity]]></category>
		<category><![CDATA[unity3d]]></category>

		<guid isPermaLink="false">http://drawlogic.com/?p=772</guid>
		<description><![CDATA[iTween is a tweening kit for Unity that is in the same style as TweenLite, Tweener and others in the tween format that is common for flash tween libraries in Actionscript 3. This library is available in javascript and C# for Unity 3d Projects and is quite fast and solid. iTween is a simple one [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.pixelplacement.com/iTween/"><img class="alignright" title="iTween for Unity" src="http://i81.photobucket.com/albums/j223/drawkbox/iTweenLogo.png" alt="" width="349" height="145" /></a><a href="http://www.pixelplacement.com/iTween/" target="_blank">iTween</a> is a tweening kit for Unity that is in the same style as <a href="http://www.greensock.com/tweenlite/" target="_blank">TweenLite</a>, <a href="http://code.google.com/p/tweener/" target="_blank">Tweener</a> and others in the tween format that is common for flash tween libraries in Actionscript 3. This library is available in <a href="http://www.pixelplacement.com/iTween/" target="_blank">javascript </a>and <a href="http://www.insquare.com/itween/" target="_blank">C#</a> for Unity 3d Projects and is quite fast and solid.</p>
<p>iTween is a simple one file drop in for some great scripted animation and easing that is very reminiscent of Flash using Penner equations and common libraries so it is easy to get started. It works for web player, desktop and iPhone Unity (however long that lasts).</p>
<p>Some sample code looks like this:</p>

<div class="wp_syntax"><div class="code"><pre class="csharp" style="font-family:monospace;"><span style="color: #0600FF; font-weight: bold;">private</span> GameObject go<span style="color: #008000;">;</span>
<span style="color: #0600FF; font-weight: bold;">private</span> GameObject cam<span style="color: #008000;">;</span>
&nbsp;
<span style="color: #6666cc; font-weight: bold;">void</span> Awake<span style="color: #008000;">&#40;</span><span style="color: #008000;">&#41;</span>
<span style="color: #008000;">&#123;</span>
    go <span style="color: #008000;">=</span> gameObject<span style="color: #008000;">;</span>
    cam <span style="color: #008000;">=</span> Camera<span style="color: #008000;">.</span><span style="color: #0000FF;">main</span><span style="color: #008000;">.</span><span style="color: #0000FF;">gameObject</span><span style="color: #008000;">;</span>
<span style="color: #008000;">&#125;</span>
&nbsp;
<span style="color: #0600FF; font-weight: bold;">private</span> <span style="color: #6666cc; font-weight: bold;">void</span> Start<span style="color: #008000;">&#40;</span><span style="color: #008000;">&#41;</span>
<span style="color: #008000;">&#123;</span>
    iTween<span style="color: #008000;">.</span><span style="color: #0000FF;">rotateFrom</span><span style="color: #008000;">&#40;</span>go, 1<span style="color: #008000;">.</span>5f, <span style="color: #FF0000;">0</span>, <span style="color: #0600FF; font-weight: bold;">null</span>, <span style="color: #FF0000;">90</span>, <span style="color: #0600FF; font-weight: bold;">null</span>, iTween<span style="color: #008000;">.</span><span style="color: #0000FF;">EasingType</span><span style="color: #008000;">.</span><span style="color: #0000FF;">easeInExpo</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
    iTween<span style="color: #008000;">.</span><span style="color: #0000FF;">moveFrom</span><span style="color: #008000;">&#40;</span>go, 1<span style="color: #008000;">.</span>5f, <span style="color: #FF0000;">0</span>, <span style="color: #0600FF; font-weight: bold;">null</span>, 3<span style="color: #008000;">.</span>5f, <span style="color: #0600FF; font-weight: bold;">null</span>, iTween<span style="color: #008000;">.</span><span style="color: #0000FF;">EasingType</span><span style="color: #008000;">.</span><span style="color: #0000FF;">easeInExpo</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
    iTween<span style="color: #008000;">.</span><span style="color: #0000FF;">colorTo</span><span style="color: #008000;">&#40;</span>go, <span style="color: #008000;">.</span>3f, 1<span style="color: #008000;">.</span>5f, <span style="color: #FF0000;">3</span>, <span style="color: #008000;">.</span>5f, 1<span style="color: #008000;">.</span>2f<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
    iTween<span style="color: #008000;">.</span><span style="color: #0000FF;">shake</span><span style="color: #008000;">&#40;</span>cam, <span style="color: #008000;">.</span>8f, 1<span style="color: #008000;">.</span>5f, <span style="color: #0600FF; font-weight: bold;">null</span>, <span style="color: #008000;">.</span>3f, <span style="color: #0600FF; font-weight: bold;">null</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
    iTween<span style="color: #008000;">.</span><span style="color: #0000FF;">scaleTo</span><span style="color: #008000;">&#40;</span>go, <span style="color: #FF0000;">2</span>, 2<span style="color: #008000;">.</span>3f, <span style="color: #0600FF; font-weight: bold;">null</span>, <span style="color: #FF0000;">2</span>, <span style="color: #0600FF; font-weight: bold;">null</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
    iTween<span style="color: #008000;">.</span><span style="color: #0000FF;">rotateBy</span><span style="color: #008000;">&#40;</span>go, <span style="color: #0600FF; font-weight: bold;">null</span>, 4<span style="color: #008000;">.</span>3f, <span style="color: #008000;">.</span>5f, <span style="color: #0600FF; font-weight: bold;">null</span>, <span style="color: #0600FF; font-weight: bold;">null</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
    iTween<span style="color: #008000;">.</span><span style="color: #0000FF;">moveTo</span><span style="color: #008000;">&#40;</span>go, <span style="color: #0600FF; font-weight: bold;">null</span>, 4<span style="color: #008000;">.</span>6f, <span style="color: #0600FF; font-weight: bold;">null</span>, 1<span style="color: #008000;">.</span>2f, <span style="color: #0600FF; font-weight: bold;">null</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
    iTween<span style="color: #008000;">.</span><span style="color: #0000FF;">moveTo</span><span style="color: #008000;">&#40;</span>go, <span style="color: #0600FF; font-weight: bold;">null</span>, 5<span style="color: #008000;">.</span>8f, <span style="color: #0600FF; font-weight: bold;">null</span>, <span style="color: #FF0000;">0</span>, <span style="color: #0600FF; font-weight: bold;">null</span>, iTween<span style="color: #008000;">.</span><span style="color: #0000FF;">EasingType</span><span style="color: #008000;">.</span><span style="color: #0000FF;">easeInExpo</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
    iTween<span style="color: #008000;">.</span><span style="color: #0000FF;">shake</span><span style="color: #008000;">&#40;</span>cam, <span style="color: #008000;">.</span>8f, 6<span style="color: #008000;">.</span>8f, <span style="color: #0600FF; font-weight: bold;">null</span>, <span style="color: #008000;">.</span>3f, <span style="color: #0600FF; font-weight: bold;">null</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
    iTween<span style="color: #008000;">.</span><span style="color: #0000FF;">colorTo</span><span style="color: #008000;">&#40;</span>go, <span style="color: #008000;">.</span>5f, 7<span style="color: #008000;">.</span>6f, <span style="color: #008000;">.</span>165f, <span style="color: #008000;">.</span>498f, <span style="color: #008000;">.</span>729f<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
    iTween<span style="color: #008000;">.</span><span style="color: #0000FF;">scaleTo</span><span style="color: #008000;">&#40;</span>go, <span style="color: #0600FF; font-weight: bold;">null</span>, 7<span style="color: #008000;">.</span>6f, <span style="color: #0600FF; font-weight: bold;">null</span>, <span style="color: #FF0000;">1</span>, <span style="color: #0600FF; font-weight: bold;">null</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
<span style="color: #008000;">&#125;</span></pre></div></div>

<ul>
<li><a href="http://www.pixelplacement.com/iTween/" target="_blank">Download Javascript iTween</a> by Bob Berkebile (<a href="http://www.pixelplacement.com/" target="_blank">pixelplacement.com</a>)</li>
<li><a href="http://www.insquare.com/itween/" target="_blank">Download C# iTween</a> by Patrick Corkum (<a href="http://www.insquare.com/" target="_blank">insquare.com</a>)</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://drawlogic.com/2010/04/11/itween-tweening-and-easing-animation-library-for-unity-3d/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>WebGL Announced, Javascript Controlled OpenGL Standard, is Now Official at Khronos Group, Who Runs OpenGL, OpenVG, OpenGL ES</title>
		<link>http://drawlogic.com/2009/08/08/webgl-announced-javascript-controlled-opengl-standard-is-now-official-at-khronos-group-who-runs-opengl-openvg-opengl-es/</link>
		<comments>http://drawlogic.com/2009/08/08/webgl-announced-javascript-controlled-opengl-standard-is-now-official-at-khronos-group-who-runs-opengl-openvg-opengl-es/#comments</comments>
		<pubDate>Sat, 08 Aug 2009 21:55:11 +0000</pubDate>
		<dc:creator>drawk</dc:creator>
				<category><![CDATA[3d]]></category>
		<category><![CDATA[3D ENGINES]]></category>
		<category><![CDATA[AWAY3D]]></category>
		<category><![CDATA[CODE]]></category>
		<category><![CDATA[COMPANIES]]></category>
		<category><![CDATA[CONFERENCE]]></category>
		<category><![CDATA[EFFECTS]]></category>
		<category><![CDATA[ENGINE]]></category>
		<category><![CDATA[GAMEDEV]]></category>
		<category><![CDATA[GAMES]]></category>
		<category><![CDATA[HAXE]]></category>
		<category><![CDATA[JAVASCRIPT]]></category>
		<category><![CDATA[LIBRARIES]]></category>
		<category><![CDATA[NEWS]]></category>
		<category><![CDATA[OPEN SOURCE]]></category>
		<category><![CDATA[OPENGL]]></category>
		<category><![CDATA[PROGRAMMING]]></category>
		<category><![CDATA[RENDERING]]></category>
		<category><![CDATA[STANDARDS]]></category>
		<category><![CDATA[TECHNOLOGY]]></category>
		<category><![CDATA[TORQUE 3D]]></category>
		<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[unity3d]]></category>
		<category><![CDATA[browser]]></category>
		<category><![CDATA[group]]></category>
		<category><![CDATA[khronos]]></category>
		<category><![CDATA[opengles]]></category>
		<category><![CDATA[standard]]></category>
		<category><![CDATA[webgl]]></category>

		<guid isPermaLink="false">http://drawlogic.com/?p=622</guid>
		<description><![CDATA[So many cool and useful technologies are unveiled at SIGGRAPH every year, this year at SIGGRAPH 2009 was no different.  Khronos Group, behind the new guidance of OpenGL, OpenGL ES, OpenCL, OpenVG, COLLADA etc, came another big announcement about hardware rendering within the browser.  WebGL is now an official standard being developed at Khronos Group [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignright" title="OpenGL" src="http://i81.photobucket.com/albums/j223/drawkbox/opengl-logo-1-1.png" alt="" width="239" height="123" />So many cool and useful technologies are unveiled at SIGGRAPH every year, this year at SIGGRAPH 2009 was no different.  Khronos Group, behind the new guidance of OpenGL, OpenGL ES, OpenCL, OpenVG, COLLADA etc, came another big announcement about hardware rendering within the browser.  <a href="http://www.khronos.org/news/press/releases/khronos-webgl-initiative-hardware-accelerated-3d-graphics-internet/" target="_blank">WebGL is now an official standard being developed</a> at Khronos Group to bring javascript control of OpenGL to browsers&#8230; Wow!</p>
<p>Ok so this was officially announced at the GDC in March but limited information, but now it has been slated for an <strong>official public standard </strong><strong>in early 2010</strong>. Shortly after the announcement at the GDC we saw <a href="http://code.google.com/apis/o3d/" target="_blank">Google o3D</a> appear doing exactly that, controlling OpenGL through Javascript in the browser <a href="http://o3d.blogspot.com/2009/07/improving-o3ds-hardware-compatibility.html" target="_blank">but it was still largely software/harward hybrid rendered</a>. Google, Mozilla, Opera are part of the companies supporting WebGL which is great for browser support, also NVIDIA, AMD and Ericsson are in on it.</p>
<blockquote>
<h3><img class="alignright" title="Khronos Group" src="http://i81.photobucket.com/albums/j223/drawkbox/khronos_logo.gif" alt="" width="195" height="57" />Khronos Details WebGL Initiative to Bring Hardware-Accelerated 3D Graphics to the Internet</h3>
<p><em>JavaScript Binding to OpenGL ES 2.0 for Rich 3D Web Graphics without Browser Plugins; Wide industry Support from Major Browser Vendors including Google, Mozilla and Opera; Specification will be Available Royalty-free to all Developers</em></p>
<p><strong>4th August, 2009 – New Orleans, SIGGRAPH 2009 – The Khronos™ Group, today announced more details on its new WebGL™ working group</strong> for enabling hardware-accelerated 3D graphics in Web pages without the need for browser plug-ins.  First announced at the Game Developers Conference in March of 2009, the WebGL working group includes many industry leaders such as <strong>AMD, Ericsson, Google, Mozilla, NVIDIA and Opera</strong>.  The WebGL working group is defining a JavaScript binding to OpenGL® ES 2.0 to enable rich 3D graphics within a browser on any platform supporting the OpenGL or OpenGL ES graphics standards.  The working group is developing the specification to provide content portability across diverse browsers and platforms, including the capability of portable, secure shader programs.  <strong>WebGL will be a royalty-free standard developed under the proven Khronos development process, with the target of a first public release in first half of 2010.</strong> Khronos warmly welcomes any interested company to become a member and participate in the development of the WebGL specification.</p></blockquote>
<p><a href="http://drawlogic.com/2009/04/21/google-releases-o3d-plugin-for-3d-in-browser-controlled-with-javascript/" target="_blank">Google released O3D</a> this year and there are great strides in 3d within the browser from game engine wrapper technologies such as <a href="http://technology.instantaction.com/" target="_blank">instant action technology</a>, gaim theory engine (now owned by id Software and runs <a href="http://www.quakelive.com/" target="_blank">Quake  Live</a>, hardware rendered <a href="http://unity3d.com/" target="_blank">Unity 3D</a> (and <a href="http://www.garagegames.com/products/torque-3d" target="_blank">Torque 3D</a> coming soon), and Flash software rendered  3d engines <a href="http://blog.papervision3d.org/" target="_blank">Papervision 3D</a>, <a href="http://away3d.com/" target="_blank">Away 3D</a>, <a href="http://www.flashsandy.org/" target="_blank">Sandy </a>(<a href="http://drawlogic.com/2009/07/16/haxe-sandy-able-to-generate-a-3d-javascript-engine-port-of-sandy-for-canvas/" target="_blank">Sandy also released a haXe version that exports a javascript version</a>) and others.  But it looks like the movement is to bring OpenGL to the web as a standard under the name WebGL, this would be great!  There would still be lots of times where plugins are better now and in the near future but the path is a good one. Having a software/hardware rendering hybrid like Google O3D for broad video card support (some of the painful older intel cards), or using a plugin like Unity3D, Torque 3D or wrapper technology for bigger engines is a good idea for the time being. But the future is grand in this area.</p>
<p>I think that Google O3D and OpenGL ES success on iPhone games probably combined to get this in motion.  OpenGL and very basic video cards are now standard in most machines out there.  <a href="http://unity3d.com/webplayer/hwstats/" target="_blank">Unity3D actually published hardware statistics on casual gamers</a> (web-based games) ever so kindly and shows that even though there are some older Intel cards out there, for the most part machines nowadays have a video card capable of supporting at least low-poly 3d and hardware supported 2d rendering in real-time for games, user interfaces and more.</p>
<p>This is exciting news, it appears the movement of the web gaming market is getting much more capable and is accelerating the innovation of hardware accelerating the web.</p>
]]></content:encoded>
			<wfw:commentRss>http://drawlogic.com/2009/08/08/webgl-announced-javascript-controlled-opengl-standard-is-now-official-at-khronos-group-who-runs-opengl-openvg-opengl-es/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>Haxe Sandy Ability to Generate a 3D Javascript Engine Port of Sandy for Canvas</title>
		<link>http://drawlogic.com/2009/07/16/haxe-sandy-able-to-generate-a-3d-javascript-engine-port-of-sandy-for-canvas/</link>
		<comments>http://drawlogic.com/2009/07/16/haxe-sandy-able-to-generate-a-3d-javascript-engine-port-of-sandy-for-canvas/#comments</comments>
		<pubDate>Thu, 16 Jul 2009 17:32:36 +0000</pubDate>
		<dc:creator>drawk</dc:creator>
				<category><![CDATA[3d]]></category>
		<category><![CDATA[3D ENGINES]]></category>
		<category><![CDATA[ACTIONSCRIPT]]></category>
		<category><![CDATA[ACTIONSCRIPT3]]></category>
		<category><![CDATA[ARCHITECT]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[GAMEDEV]]></category>
		<category><![CDATA[GAMES]]></category>
		<category><![CDATA[HAXE]]></category>
		<category><![CDATA[JAVASCRIPT]]></category>
		<category><![CDATA[OPEN SOURCE]]></category>
		<category><![CDATA[PROGRAMMING]]></category>
		<category><![CDATA[RENDERING]]></category>
		<category><![CDATA[SANDY]]></category>
		<category><![CDATA[STANDARDS]]></category>
		<category><![CDATA[TECHNOLOGY]]></category>
		<category><![CDATA[canvas]]></category>
		<category><![CDATA[ENGINE]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[hx]]></category>
		<category><![CDATA[motor2]]></category>
		<category><![CDATA[port]]></category>
		<category><![CDATA[puremvc]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://drawlogic.com/?p=604</guid>
		<description><![CDATA[Haxe Sandy is a version of Sandy that can export to an experimental Javascript 3D engine taking advantage of the &#60;canvas&#62; element. There are some great demos that run smoothly in canvas capable browsers and very smooth in Chrome. Demos of Haxe Sandy: Displaying a model Getting Started Model Loading Physics Shading Tweening Skybox Primitives [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.flashsandy.org/haxe" target="_blank">Haxe Sandy </a>is a version of Sandy that can export to an experimental Javascript 3D engine taking advantage of the &lt;canvas&gt; element. There are some <a href="http://webdemos.sourceforge.net/haxesandy/gettingstarted-js.html" target="_blank">great demos that run smoothly</a> in canvas capable browsers and very smooth in Chrome.</p>
<p><a href="http://webdemos.sourceforge.net/haxesandy/gettingstarted-js.html" target="_blank"><img class="alignright" title="Sandy Haxe" src="http://i81.photobucket.com/albums/j223/drawkbox/sandyhx.png" alt="" width="341" height="292" /></a></p>
<p><strong>Demos of Haxe Sandy:</strong></p>
<ul>
<li><a href="http://webdemos.sourceforge.net/haxesandy/" target="_blank">Displaying  		a model</a></li>
<li> <a href="http://webdemos.sourceforge.net/haxesandy/gettingstarted-js.html" target="_blank">Getting Started</a></li>
<li> <a href="http://webdemos.sourceforge.net/haxesandy/modelloading-js.html" target="_blank">Model Loading</a></li>
<li><a href="http://webdemos.sourceforge.net/haxesandy/physics-js.html" target="_blank">Physics</a></li>
<li><a href="http://webdemos.sourceforge.net/haxesandy/shading-js.html" target="_blank">Shading</a></li>
<li><a href="http://webdemos.sourceforge.net/haxesandy/tweening-js.html" target="_blank">Tweening</a></li>
<li><a href="http://webdemos.sourceforge.net/haxesandy/skybox-js.html" target="_blank">Skybox</a></li>
<li><a href="http://webdemos.sourceforge.net/haxesandy/primitives-js.html" target="_blank">Primitives</a></li>
</ul>
<p>Sandy was actually the first open source 3d engine in flash, maybe this will be a trend building in <a href="http://haxe.org/" target="_blank">haXe </a>for export to flash and javascript?  It certainly looks like a great start and would make a very nice platform for 3d on the web allowing Sandy or other flash libraries to run in Flash and Javascript by writing in an abstraction platform like haXe. Other libraries like <a href="http://www.motorphysics.de/" target="_blank">Motor2</a>, <a href="http://code.google.com/p/physaxe/" target="_blank">Physaxe</a>, <a href="http://code.google.com/p/haxe3d/" target="_blank">haxe3D</a>, <a href="http://forums.puremvc.org/index.php?topic=636.0" target="_blank">PureMVC </a>and more have haXe versions. Still very experimental but a possible need when Flash and canvas are both in the market in the future.  Right now it is still all Flash.</p>
<ul>
<li><a href="http://www.flashsandy.org/haxe" target="_blank">Haxe Sandy</a></li>
<li><a href="http://webdemos.sourceforge.net/haxesandy/gettingstarted-js.html">Haxe Sandy Demos</a></li>
<li><a href="http://www.brighthub.com/hubfolio/matthew-casperson/blog/archive/2009/07/08/flash-and-javascript-3d-with-sandy-hx.aspx" target="_blank">Haxe Sandy Tutorials by Matthew Casperson</a></li>
<li><a href="http://www.flashsandy.org/download" target="_blank">Haxe Sandy Download</a>
<ul>
<li><a title="http://sandy.googlecode.com/files/sandy-hx-src-3.1.1.tar.gz" rel="nofollow" href="http://sandy.googlecode.com/files/sandy-hx-src-3.1.1.tar.gz">Download sources</a></li>
<li><a title="http://sandy.googlecode.com/files/sandy-hx-docs-3.1.1.tar.gz" rel="nofollow" href="http://sandy.googlecode.com/files/sandy-hx-docs-3.1.1.tar.gz">Download API documentation</a></li>
<li><a title="http://sandy.googlecode.com/files/sandy-hx-tutos-3.1.1.tar.gz" rel="nofollow" href="http://sandy.googlecode.com/files/sandy-hx-tutos-3.1.1.tar.gz">Download all examples to get started</a></li>
</ul>
</li>
</ul>
<p>[ <a href="http://www.devmaster.net/news/index.php?storyid=2296" target="_blank">via Matthew Casperson at devmaster.net</a> ]</p>
]]></content:encoded>
			<wfw:commentRss>http://drawlogic.com/2009/07/16/haxe-sandy-able-to-generate-a-3d-javascript-engine-port-of-sandy-for-canvas/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>V8-GL, Hardware Accelerated Desktop Apps with OpenGL in Javascript</title>
		<link>http://drawlogic.com/2009/06/21/v8-gl-hardware-accelerated-desktop-apps-with-opengl-in-javascript/</link>
		<comments>http://drawlogic.com/2009/06/21/v8-gl-hardware-accelerated-desktop-apps-with-opengl-in-javascript/#comments</comments>
		<pubDate>Mon, 22 Jun 2009 00:52:41 +0000</pubDate>
		<dc:creator>drawk</dc:creator>
				<category><![CDATA[3d]]></category>
		<category><![CDATA[3D ENGINES]]></category>
		<category><![CDATA[APPLICATIONS]]></category>
		<category><![CDATA[ARCHITECT]]></category>
		<category><![CDATA[DESKTOP]]></category>
		<category><![CDATA[ENGINE]]></category>
		<category><![CDATA[GAMEDEV]]></category>
		<category><![CDATA[GAMES]]></category>
		<category><![CDATA[JAVASCRIPT]]></category>
		<category><![CDATA[MARKET]]></category>
		<category><![CDATA[OPEN SOURCE]]></category>
		<category><![CDATA[OPENGL]]></category>
		<category><![CDATA[PERFORMANCE]]></category>
		<category><![CDATA[PROGRAMMING]]></category>
		<category><![CDATA[RENDERING]]></category>
		<category><![CDATA[STANDARDS]]></category>
		<category><![CDATA[TECHNOLOGY]]></category>
		<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[v8]]></category>

		<guid isPermaLink="false">http://drawlogic.com/?p=583</guid>
		<description><![CDATA[This is a very cool project called V8-GL.  It is an OpenGL engine with 80% of the API converted to run on the V8 Javascript engine, the same engine that runs Google Chrome. This is exciting as more productive languages like Javascript get speed boosts from engines like V8 and are capable of manipulating more [...]]]></description>
			<content:encoded><![CDATA[<p>This is a very cool project called <a href="http://github.com/philogb/v8-gl/tree/master#readme" target="_blank">V8-GL</a>.  It is <a href="http://blog.thejit.org/2009/06/21/v8-gl/">an OpenGL engine with 80% of the API converted to run on the V8 Javascript engine</a>, the <a href="http://code.google.com/p/v8/" target="_blank">same engine that runs Google Chrome</a>.</p>
<p><a href="http://blog.thejit.org/2009/06/21/v8-gl/" target="_blank"><img class="alignnone" title="V8-GL" src="http://i81.photobucket.com/albums/j223/drawkbox/v8gl2.png" alt="" width="658" height="500" /></a></p>
<p>This is exciting as more productive languages like Javascript get speed boosts from engines like V8 and are capable of manipulating more complex systems like OpenGL.  <a href="http://drawlogic.com/2009/04/21/google-releases-o3d-plugin-for-3d-in-browser-controlled-with-javascript/" target="_blank">Google is also pursing this in the browser with O3D with javascript manipulation of hardware rendering</a>.  Also, a Google funded project called <a href="http://code.google.com/p/unladen-swallow/" target="_blank">Unladen Swallow is converting Python to the LLVM virtual machine</a>, so that it can have increasing speeds to compete with gcc speeds.</p>
<p>Making things easier to produce and control with more simplified and minimal languages like Javascript, Python and Actionscript etc that control more complex systems, that typically you would need to invest more time in such as a platform on C++ is the goal. V8-GL has this goal in mind.</p>
<p><em>V8-GL from the author states:</em></p>
<blockquote><p><a href="http://github.com/philogb/v8-gl/tree/master#readme">V8-GL</a> intends to provide a high-level JavaScript API for creating 2D/3D hardware accelerated desktop graphics.</p>
<p>In other words, you can hack some JavaScript code that opens a desktop window and renders some 3D hardware accelerated graphics. Bindings are made using the <a href="http://code.google.com/p/v8/">V8 JavaScript engine</a>.</p></blockquote>
<ul>
<li><a href="http://blog.thejit.org/2009/06/21/v8-gl/" target="_blank">V8-GL blog post</a></li>
<li><a href="http://github.com/philogb/v8-gl/tree/master#readme" target="_blank">V8-GL source on Github</a></li>
<li>Also <a href="http://code.google.com/p/jslibs/" target="_blank">check out the SpiderMonkey jslibs project</a> with other javascript wrappers for libraries like ode, sdl and more using the engine by Mozilla.</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://drawlogic.com/2009/06/21/v8-gl-hardware-accelerated-desktop-apps-with-opengl-in-javascript/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Google Releases O3D Plugin for 3D in Browser Controlled with Javascript</title>
		<link>http://drawlogic.com/2009/04/21/google-releases-o3d-plugin-for-3d-in-browser-controlled-with-javascript/</link>
		<comments>http://drawlogic.com/2009/04/21/google-releases-o3d-plugin-for-3d-in-browser-controlled-with-javascript/#comments</comments>
		<pubDate>Tue, 21 Apr 2009 23:31:04 +0000</pubDate>
		<dc:creator>drawk</dc:creator>
				<category><![CDATA[3d]]></category>
		<category><![CDATA[3D ENGINES]]></category>
		<category><![CDATA[APPLICATIONS]]></category>
		<category><![CDATA[ENGINE]]></category>
		<category><![CDATA[GAMEDEV]]></category>
		<category><![CDATA[GAMES]]></category>
		<category><![CDATA[JAVASCRIPT]]></category>
		<category><![CDATA[OPEN SOURCE]]></category>
		<category><![CDATA[PROGRAMMING]]></category>
		<category><![CDATA[RENDERING]]></category>
		<category><![CDATA[STANDARDS]]></category>
		<category><![CDATA[TECHNOLOGY]]></category>
		<category><![CDATA[browser]]></category>
		<category><![CDATA[formats]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[hardware]]></category>
		<category><![CDATA[o3d]]></category>
		<category><![CDATA[sketchup]]></category>

		<guid isPermaLink="false">http://drawlogic.com/?p=524</guid>
		<description><![CDATA[Google has a few things going for 3d in the browser, not just 3d but hardware rendering in the browser.  They previously had native client which allows you to run code via a plugin proxy with a sample running Quake.  They also had Lively which was a virtual world plugin that was shut down a [...]]]></description>
			<content:encoded><![CDATA[<p>Google has a few things going for 3d in the browser, not just 3d but hardware rendering in the browser.  They previously had <a href="http://code.google.com/p/nativeclient/" target="_blank">native client</a> which allows you to run code via a plugin proxy with a sample running Quake.  They also had <a href="http://www.lively.com/goodbye.html" target="_blank">Lively which was a virtual world plugin</a> that was shut down a few month after it started.</p>
<p><a href="http://google-code-updates.blogspot.com/2009/04/toward-open-web-standard-for-3d.html" target="_blank"><img class="alignnone" title="o3d" src="http://i81.photobucket.com/albums/j223/drawkbox/o3d.png" alt="" width="560" height="316" /></a></p>
<p>Now they are also <a href="http://code.google.com/apis/o3d/" target="_blank">making and releasing an O3D plugin that looks to be another way to do web 3d</a> scenes and games although it is a very early stage. They appear to <a href="http://google-code-updates.blogspot.com/2009/04/toward-open-web-standard-for-3d.html" target="_blank">want to have an open discussion about how best to add hardware rendering to the web</a>.  Their approach uses a javascript api to control the browser plugin and the <a href="http://code.google.com/apis/o3d/" target="_blank">O3D control</a> is essentially just a renderer.</p>
<p>This won&#8217;t change anything now as Unity3D, Flash 3D pseudo engines, even Director 3D still are the top choices for games, apps, and interactives that need effects and possibly hardware rendering. But it is interesting that Google is essentially re-entering this debate after ditching on Lively and they must see some benefit to having a discussion about 3d on the web and 3d standards in general.  I know they have lots of models and tools with <a href="http://sketchup.google.com/" target="_blank">SketchUp</a> and <a href="http://sketchup.google.com/3dwarehouse/" target="_blank">Google 3D warehouse</a> so who knows maybe they will take it over by being standards, open and information based.</p>
<blockquote>
<h3>What is O3D?</h3>
<p>O3D is an open-source web API for creating rich, interactive 3D applications in the browser. This API is shared at an early stage as part of a conversation with the broader developer community about establishing an open web standard for 3D graphics.</p>
<h3>Get involved</h3>
<ul>
<li>Download the plug-in (<a href="http://tools.google.com/dlpage/o3d/eula.html">Windows</a> and <a href="http://tools.google.com/dlpage/o3d/eula.html">Mac</a>) and explore the <a href="http://code.google.com/apis/o3d/docs/samplesdirectory.html">samples</a> to see O3D&#8217;s capabilities. Linux users, see these <a href="http://code.google.com/p/o3d/wiki/HowToBuild">instructions</a>.</li>
<li>Read the <a href="http://code.google.com/apis/o3d/docs/techoverview.html">Technical Overview</a> and <a href="http://code.google.com/apis/o3d/docs/devguideintro.html">Developer&#8217;s Guide</a> to learn how to get started.</li>
<li>Join the O3D <a href="http://code.google.com/apis/o3d/docs/groups.html">developer groups</a> to provide feedback.</li>
</ul>
</blockquote>
<p><object width="560" height="340" data="http://www.youtube.com/v/uofWfXOzX-g&amp;hl=en&amp;fs=1" type="application/x-shockwave-flash"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/uofWfXOzX-g&amp;hl=en&amp;fs=1" /><param name="allowfullscreen" value="true" /></object></p>
<p>One thing is for sure, 3d development is still old school proprietary lock in in most cases.  Working with 3d and tools like Maya, 3dsmax and others they have always been very non standard.  From file formats to interfaces to even basic movements, all different.  The general maths of 3d are the same and so should 3d pipelines.  Formats like <a href="http://en.wikipedia.org/wiki/COLLADA" target="_blank">COLLADA </a>are nice because they are starting to open up 3d pipelines and content creation but COLLADA still has many porting issues.  <a href="http://en.wikipedia.org/wiki/FBX" target="_blank">FBX file format</a> is another that is really useful and common making pipelines in Unity 3D, for instance, very nice. But it is owned and run by Autodesk who owns all the 3d apps (Maya, 3dsmax, SGI) and I am a bit leary of that method.  But in the end 3d pipelines and rendering will be somewhat standardized and maybe the web will be hardware rendered one day.  In most cases it is not needed, but for gaming, immersion, demos and other entertainment it could benefit heavily from a more standardized 3d pipeline and methods.</p>
]]></content:encoded>
			<wfw:commentRss>http://drawlogic.com/2009/04/21/google-releases-o3d-plugin-for-3d-in-browser-controlled-with-javascript/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>JavaScript Standard ECMAScript Fifth Edition (ES5) Published</title>
		<link>http://drawlogic.com/2009/04/09/javascript-standard-ecmascript-fifth-edition-es5-published/</link>
		<comments>http://drawlogic.com/2009/04/09/javascript-standard-ecmascript-fifth-edition-es5-published/#comments</comments>
		<pubDate>Fri, 10 Apr 2009 00:06:00 +0000</pubDate>
		<dc:creator>drawk</dc:creator>
				<category><![CDATA[ACTIONSCRIPT]]></category>
		<category><![CDATA[ACTIONSCRIPT3]]></category>
		<category><![CDATA[ADOBE]]></category>
		<category><![CDATA[ARCHITECT]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[CODE]]></category>
		<category><![CDATA[FLASH]]></category>
		<category><![CDATA[JAVASCRIPT]]></category>
		<category><![CDATA[JAVASCRIPT2]]></category>
		<category><![CDATA[JSON]]></category>
		<category><![CDATA[MICROSOFT]]></category>
		<category><![CDATA[NEWS]]></category>
		<category><![CDATA[PROGRAMMING]]></category>
		<category><![CDATA[TECHNOLOGY]]></category>
		<category><![CDATA[ECMAScript]]></category>
		<category><![CDATA[Edition]]></category>
		<category><![CDATA[es4]]></category>
		<category><![CDATA[es5]]></category>
		<category><![CDATA[Fifth]]></category>
		<category><![CDATA[standard]]></category>
		<category><![CDATA[STANDARDS]]></category>

		<guid isPermaLink="false">http://drawlogic.com/?p=518</guid>
		<description><![CDATA[Well it appears ES4 path is dead officially and a new standard has been published replacing it, the ECMAScript Fifth Edition announced in Geneva, Switzerland and will be in place as fully tested and approved by all involved by the end of 2009. ES5 was previously known as ECMAScript 3.1 or an iteration of the [...]]]></description>
			<content:encoded><![CDATA[<p>Well it appears ES4 path is dead officially and a new standard has been published replacing it, <a href="http://www.ecma-international.org/news/PressReleases/PR_Ecma_finalises_major_revision_of_ECMAScript.htm" target="_blank">the ECMAScript Fifth Edition</a> announced in Geneva, Switzerland and will be in place as fully tested and approved by all involved by the end of 2009. ES5 was previously known as ECMAScript 3.1 or an iteration of the ES3 standard that is what most JavaScript is based on in all browsers, and was previously competing with the ES4 newer standard that changed Javascript quite a bit but in many areas much better, in some areas it was bloated.</p>
<blockquote><p>This revision of <a style="font-family: Verdana; font-style: normal; font-variant: normal; font-weight: normal; font-size: 1em; line-height: normal; font-size-adjust: none; font-stretch: normal; height: auto; letter-spacing: normal; text-align: left; text-decoration: underline; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; width: auto; word-spacing: normal; color: #999999;" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262</a> will be known as ECMAScript, Fifth Edition. It was previously developed under the working name ECMAScript 3.1, which will no longer be used. ECMAScript is the scripting language that is used to create web pages with dynamic behavior. ECMAScript, which is more commonly known by the name JavaScript™, is an essential component of every web browser and the ECMAScript standard is one of the core standards that enable the existence of interoperable web applications on the World Wide Web.</p></blockquote>
<p>ECMAScript Fifth Edition (ES5) was <a href="http://blogs.msdn.com/jscript/archive/2009/04/09/a-major-milestone-in-javascript-standardization.aspx" target="_blank">strongly guided by Crockford and Microsoft</a>, which is different than the push for ES4 which is what ActionScript 3 is based on and was supported by Adobe and Mozilla.</p>
<p>However it seems everyone is happy and everyone is supporting this version to get things moving if you go by the ECMA Org quotes:</p>
<blockquote>
<p class="PR-Heading3" style="font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 1.22em; font-weight: bold; color: #333333;">Industry Reaction</p>
<p>Brendan Eich, Mozilla CTO and creator of the JavaScript language, said “The Fifth Edition of ECMAScript makes real improvements based on browser innovation and collaboration in Ecma, which provides a solid foundation for further work in future editions.” Microsoft’s ECMAScript architect, Allen Wirfs-Brock, commented “We expect the Fifth Edition to benefit all web developers by helping improve browser interoperability and making enhanced scripting features broadly available.”</p></blockquote>
<p>Peace.</p>
<p>I still have to read further into the <a href="http://www.ecma-international.org/publications/files/drafts/tc39-2009-025.pdf" target="_blank">ECMAScript 5 specification which was published</a>, but there are some new interesting things.</p>
<p>One nice feature is the <a href="http://blogs.msdn.com/ie/archive/2008/09/10/native-json-in-ie8.aspx" target="_blank">JSON object</a>.  Right now you have to eval to use JSON in javascript in a browser but they now have JSON.parse(object) and JSON.stringify(object) which is standard and conveniently already wired into IE8 this way. This is based on the <a href="http://www.json.org/json2.js" target="_blank">JSON2.js library</a> by <a href="http://www.crockford.com/" target="_blank">Douglas Crockford</a> of Yahoo.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> jsObjString <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;{<span style="color: #000099; font-weight: bold;">\&quot;</span>memberNull<span style="color: #000099; font-weight: bold;">\&quot;</span> : null, <span style="color: #000099; font-weight: bold;">\&quot;</span>memberNum<span style="color: #000099; font-weight: bold;">\&quot;</span> : 3, <span style="color: #000099; font-weight: bold;">\&quot;</span>memberStr<span style="color: #000099; font-weight: bold;">\&quot;</span> : <span style="color: #000099; font-weight: bold;">\&quot;</span>StringJSON<span style="color: #000099; font-weight: bold;">\&quot;</span>, <span style="color: #000099; font-weight: bold;">\&quot;</span>memberBool<span style="color: #000099; font-weight: bold;">\&quot;</span> : true , <span style="color: #000099; font-weight: bold;">\&quot;</span>memberObj<span style="color: #000099; font-weight: bold;">\&quot;</span> : { <span style="color: #000099; font-weight: bold;">\&quot;</span>mnum<span style="color: #000099; font-weight: bold;">\&quot;</span> : 1, <span style="color: #000099; font-weight: bold;">\&quot;</span>mbool<span style="color: #000099; font-weight: bold;">\&quot;</span> : false}, <span style="color: #000099; font-weight: bold;">\&quot;</span>memberX<span style="color: #000099; font-weight: bold;">\&quot;</span> : {}, <span style="color: #000099; font-weight: bold;">\&quot;</span>memberArray<span style="color: #000099; font-weight: bold;">\&quot;</span> : [33, <span style="color: #000099; font-weight: bold;">\&quot;</span>StringTst<span style="color: #000099; font-weight: bold;">\&quot;</span>,null,{}]&quot;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> jsObjStringParsed <span style="color: #339933;">=</span> JSON.<span style="color: #660066;">parse</span><span style="color: #009900;">&#40;</span>jsObjString<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> jsObjStringBack <span style="color: #339933;">=</span> JSON.<span style="color: #660066;">stringify</span><span style="color: #009900;">&#40;</span>jsObjStringParsed<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Another feature is <a href="http://blogs.msdn.com/ie/archive/2009/01/13/responding-to-change-updated-getter-setter-syntax-in-ie8-rc-1.aspx" target="_blank">DOM prototypes</a> which are useful and cool, which allow you to extend dom objects.</p>
<ul>
<li><a style="text-decoration: none; color: #0066aa;" href="http://msdn.microsoft.com/en-us/library/dd282900(VS.85).aspx">Document Object Model Prototypes, Part 1: Introduction</a></li>
<li><a style="text-decoration: none; color: #0066aa;" href="http://msdn.microsoft.com/en-us/library/dd229916(VS.85).aspx">Document Object Model Prototypes, Part 2: Accessor (getter/setter) Support</a></li>
</ul>
<p>If you use javascript or are an actionscripter, not sure if Adobe will have ActionScript 4 go this way or if Alchemy has changed the flash player into a multi language VM now.  It will be fun to watch things progress but also if you are into javascript it seems this standard, ES5, will be it by the end of the year.  And probably since IE8 already supports it, in all new browser by then as well.  It will probably take 1-2 years before browser saturation makes this usable but if you are using standards that mimic this then there will be no change then, such as the JSON2.js library.</p>
]]></content:encoded>
			<wfw:commentRss>http://drawlogic.com/2009/04/09/javascript-standard-ecmascript-fifth-edition-es5-published/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>UnityDevelop, Port of the Best Flash IDE, FlashDevelop for Unity Scripts (Javascript)</title>
		<link>http://drawlogic.com/2009/02/19/unitydevelop-port-of-the-best-flash-ide-flashdevelop-for-unity-scripts-javascript/</link>
		<comments>http://drawlogic.com/2009/02/19/unitydevelop-port-of-the-best-flash-ide-flashdevelop-for-unity-scripts-javascript/#comments</comments>
		<pubDate>Fri, 20 Feb 2009 04:48:14 +0000</pubDate>
		<dc:creator>drawk</dc:creator>
				<category><![CDATA[.NET]]></category>
		<category><![CDATA[3d]]></category>
		<category><![CDATA[APPLICATIONS]]></category>
		<category><![CDATA[ARCHITECT]]></category>
		<category><![CDATA[C#]]></category>
		<category><![CDATA[CODE]]></category>
		<category><![CDATA[DESKTOP]]></category>
		<category><![CDATA[DEVELOPMENT]]></category>
		<category><![CDATA[GAMEDEV]]></category>
		<category><![CDATA[GAMES]]></category>
		<category><![CDATA[JAVASCRIPT]]></category>
		<category><![CDATA[OPEN SOURCE]]></category>
		<category><![CDATA[PROGRAMMING]]></category>
		<category><![CDATA[TECHNOLOGY]]></category>
		<category><![CDATA[TOOLS]]></category>
		<category><![CDATA[autocomplete]]></category>
		<category><![CDATA[blurst]]></category>
		<category><![CDATA[editor]]></category>
		<category><![CDATA[flashbang]]></category>
		<category><![CDATA[flashdevelop]]></category>
		<category><![CDATA[IDE]]></category>
		<category><![CDATA[intellisense]]></category>
		<category><![CDATA[unity]]></category>
		<category><![CDATA[unity3d]]></category>
		<category><![CDATA[unityscript]]></category>

		<guid isPermaLink="false">http://drawlogic.com/?p=407</guid>
		<description><![CDATA[The guys over at Flashbang Studios, a web game development studio in phoenix, az, and some of the most visible developers in the Unity3d space with Blurst, released something that may interest both FlashDevelop users and Unity3d developers. UnityDevelop was released by Flashbang Studios recently and it is a modded version of FlashDevelop (originally from [...]]]></description>
			<content:encoded><![CDATA[<p>The guys over at <a href="http://www.flashbangstudios.com/" target="_blank">Flashbang Studios</a>, a web game development studio in phoenix, az, and some of the most visible developers in the Unity3d space with <a href="http://blurst.com/" target="_blank">Blurst</a>, released something that may interest both <a href="http://www.flashdevelop.org/community/viewforum.php?f=11&amp;sid=f082b8fa607ed787daf1e3338d3e6d07" target="_blank">FlashDevelop </a>users and <a href="http://unity3d.com/" target="_blank">Unity3d</a> developers.</p>
<p><strong><a href="http://technology.blurst.com/unitydevelop-javascript-editor/" target="_blank">UnityDevelop was released by Flashbang Studios recently</a></strong> and it is a modded version of FlashDevelop (originally from <a href="http://www.icsharpcode.net/OpenSource/SD/Download/" target="_blank">SharpDevelop </a>a really nice open source .NET and mono IDE) and it supports intellisense for Javascript or Unity3d&#8217;s use of Javascript which is called UnityScript much like ActionScript.  UnityScript can be a little more strict and has access to all of Unity3d&#8217;s API calls just like C# and Boo in the mono based virtual machine that Unity3d uses.</p>
<p>FlashDevelop, is by far the best Flash / Flex /haXe IDE in my opinion so it is really great to release this for Unity.  I hope one day I or someone has the time to port to Mono so it can be used on Macs <a href="http://technology.blurst.com/unitydevelop-javascript-editor/#comment-56" target="_blank">even with the 140 pinvokes</a>, it would be a good spread mechanism for mono.</p>
<p>With <a href="http://drawlogic.com/2009/01/21/unity3d-25-coming-soon-about-to-blow-up-with-windows-ide-support/" target="_blank">Unity3d coming to windows soon</a>, UnityDevelop could be a good go to IDE for unity if you aren&#8217;t using solely C# with VS.NET. Currently this is based on FlashDevelop2 source code.</p>
<p><strong>Video Overview of UnityDevelop</strong><br />
<!--start_raw--><br />
<object width="640" height="360" data="http://vimeo.com/moogaloop.swf?clip_id=3076296&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" type="application/x-shockwave-flash"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=3076296&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" /></object><br />
<a href="http://vimeo.com/3076296">UnityDevelop Walkthrough</a> from <a href="http://vimeo.com/blurst">Flashbang Studios</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
<p><strong>Downloads</strong></p>
<ul>
<li><a href="http://technology.blurst.com/examples/UnityDevelop.zip">Download UnityDevelop</a> (2.9 MB)</li>
<li><a href="http://technology.blurst.com/examples/UnityDevelop_dev.zip">Source Code</a></li>
</ul>
<p>Thanks flashbang!</p>
]]></content:encoded>
			<wfw:commentRss>http://drawlogic.com/2009/02/19/unitydevelop-port-of-the-best-flash-ide-flashdevelop-for-unity-scripts-javascript/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Mini Javascript Version of Papervision3D-like Engine with Canvas (Pseudo 3d with 2d)</title>
		<link>http://drawlogic.com/2009/02/18/mini-javascript-version-of-papervision3d-with-canvas-pseudo-3d-with-2d/</link>
		<comments>http://drawlogic.com/2009/02/18/mini-javascript-version-of-papervision3d-with-canvas-pseudo-3d-with-2d/#comments</comments>
		<pubDate>Wed, 18 Feb 2009 21:32:59 +0000</pubDate>
		<dc:creator>drawk</dc:creator>
				<category><![CDATA[3d]]></category>
		<category><![CDATA[3D ENGINES]]></category>
		<category><![CDATA[CODE]]></category>
		<category><![CDATA[DEVELOPMENT]]></category>
		<category><![CDATA[ENGINE]]></category>
		<category><![CDATA[GAMEDEV]]></category>
		<category><![CDATA[GAMES]]></category>
		<category><![CDATA[JAVASCRIPT]]></category>
		<category><![CDATA[LIBRARIES]]></category>
		<category><![CDATA[OPEN SOURCE]]></category>
		<category><![CDATA[PAPERVISION]]></category>
		<category><![CDATA[RENDERING]]></category>
		<category><![CDATA[TECHNOLOGY]]></category>
		<category><![CDATA[canvas]]></category>
		<category><![CDATA[FLASH]]></category>
		<category><![CDATA[japan]]></category>
		<category><![CDATA[papervision3d]]></category>
		<category><![CDATA[pseudo]]></category>

		<guid isPermaLink="false">http://drawlogic.com/?p=389</guid>
		<description><![CDATA[Looks like it is a javascript day here at *drawlogic.  Here is an interesting example with some demos of a javascript and canvas based pseudo 3d engine. Anything this cool you know it has to be from Japan. Also of note, it has been rumored that Silverlight 3 will have fully hardware accelerated 3d and [...]]]></description>
			<content:encoded><![CDATA[<p>Looks like it is a javascript day here at *drawlogic.  Here is an interesting example with some<a href="http://gyu.que.jp/jscloth/touch.html" target="_blank"> demos of a javascript and canvas based pseudo 3d engine</a>. Anything this cool you know it has to be from Japan.<br />
Also of note, it has been rumored that Silverlight 3 will have fully hardware accelerated 3d and canvas and javascript engines are getting much faster with great demos like this.  Adobe needs to leap into hardware acceleration for flash on a broader scale soon.</p>
<p>But I digress, this demo it appears, was inspired by Papervision3D due to the naming and the javascript reference of &#8220;<a href="http://gyu.que.jp/jscloth/parpevision.js" target="_blank">parpevision.js</a>&#8220;.  I wasn&#8217;t able to find much more information about this but it is very well done and this example even shows some environment mapping. It is not close to flash pseudo-3d engines like Papervision3D yet but at the rate of javascript engine development lately this could rival flash AVM2 in the next couple of years.</p>
<p><a href="http://gyu.que.jp/jscloth/touch.html" target="_blank"><img class="alignnone" title="papervision in javascript" src="http://i81.photobucket.com/albums/j223/drawkbox/js-environment-mapping.png" alt="" width="479" height="375" /></a></p>
<h3>Demos</h3>
<ul>
<li><a href="http://gyu.que.jp/jscloth/" target="_blank">Cloth</a></li>
<li><a href="http://gyu.que.jp/jscloth/miku.html" target="_blank">Miku Character</a></li>
<li><a href="http://gyu.que.jp/jscloth/touch.html" target="_blank">Enviroment Mapping</a></li>
</ul>
<h3>Code</h3>
<ul>
<li>Sample iPod iTouch Mesh data (<a href="http://gyu.que.jp/jscloth/touchdat/meshdata.js" target="_blank">meshdata.js</a>) &#8211; contains models</li>
<li>Code from the main engine (<a href="http://gyu.que.jp/jscloth/parpevision.js" target="_blank">parpevision.js</a>)</li>
<li>Sample Viewport and main app (<a href="http://gyu.que.jp/jscloth/touch.js" target="_blank">touch.js</a> from demo 3)</li>
</ul>
<p>Here is the code for the parpevision.js file and the mini engine, it is an MIT license.<span id="more-389"></span></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">/* MIT-LICENSE */</span>
<span style="color: #006600; font-style: italic;">/*
Copyright (c) 2009 Satoshi Ueyama
&nbsp;
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
&quot;Software&quot;), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
&nbsp;
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
&nbsp;
THE SOFTWARE IS PROVIDED &quot;AS IS&quot;, WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/</span>
&nbsp;
window.<span style="color: #660066;">P3D</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
	texture<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span>
	g<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">null</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
P3D.<span style="color: #660066;">clear</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>f<span style="color: #339933;">,</span> w<span style="color: #339933;">,</span> h<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> g <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">g</span><span style="color: #339933;">;</span>
	g.<span style="color: #660066;">beginPath</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	g.<span style="color: #660066;">fillStyle</span> <span style="color: #339933;">=</span> f<span style="color: #339933;">;</span>
	g.<span style="color: #660066;">fillRect</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> w<span style="color: #339933;">,</span> h<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#125;</span>
&nbsp;
P3D.<span style="color: #660066;">num_cmp</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>a<span style="color: #339933;">,</span>b<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">return</span> a<span style="color: #339933;">-</span>b<span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span>
&nbsp;
P3D.<span style="color: #660066;">drawTriangle</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>poss<span style="color: #339933;">,</span> uvs<span style="color: #339933;">,</span> shade_clr<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> w <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">texture</span>.<span style="color: #660066;">width</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> h <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">texture</span>.<span style="color: #660066;">height</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> g <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">g</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> vAd <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">-</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">,</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">-</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span> <span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> vBd <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">-</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">,</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">-</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span> <span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> vA <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span> uvs<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">u</span> <span style="color: #339933;">-</span> uvs<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">u</span> <span style="color: #339933;">,</span> uvs<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">v</span> <span style="color: #339933;">-</span> uvs<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">v</span> <span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> vB <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span> uvs<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">u</span> <span style="color: #339933;">-</span> uvs<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">u</span> <span style="color: #339933;">,</span> uvs<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">v</span> <span style="color: #339933;">-</span> uvs<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">v</span> <span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
	vA<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">*=</span> w<span style="color: #339933;">;</span>
	vA<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">*=</span> h<span style="color: #339933;">;</span>
&nbsp;
	vB<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">*=</span> w<span style="color: #339933;">;</span>
	vB<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">*=</span> h<span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> m <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> M22<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	m._11 <span style="color: #339933;">=</span> vA<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
	m._12 <span style="color: #339933;">=</span> vA<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
	m._21 <span style="color: #339933;">=</span> vB<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
	m._22 <span style="color: #339933;">=</span> vB<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> im <span style="color: #339933;">=</span> m.<span style="color: #660066;">getInvert</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>im<span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> a <span style="color: #339933;">=</span> im._11 <span style="color: #339933;">*</span> vAd<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">+</span> im._12 <span style="color: #339933;">*</span> vBd<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> b <span style="color: #339933;">=</span> im._21 <span style="color: #339933;">*</span> vAd<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">+</span> im._22 <span style="color: #339933;">*</span> vBd<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> c <span style="color: #339933;">=</span> im._11 <span style="color: #339933;">*</span> vAd<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">+</span> im._12 <span style="color: #339933;">*</span> vBd<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> d <span style="color: #339933;">=</span> im._21 <span style="color: #339933;">*</span> vAd<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">+</span> im._22 <span style="color: #339933;">*</span> vBd<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> wu <span style="color: #339933;">=</span> uvs<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">u</span> <span style="color: #339933;">*</span> w<span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> hv <span style="color: #339933;">=</span> uvs<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">v</span> <span style="color: #339933;">*</span> h<span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> du <span style="color: #339933;">=</span> wu <span style="color: #339933;">*</span> a <span style="color: #339933;">+</span> hv <span style="color: #339933;">*</span> b<span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> dv <span style="color: #339933;">=</span> wu <span style="color: #339933;">*</span> c <span style="color: #339933;">+</span> hv <span style="color: #339933;">*</span> d<span style="color: #339933;">;</span>
&nbsp;
	g.<span style="color: #660066;">save</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	g.<span style="color: #660066;">beginPath</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	g.<span style="color: #660066;">moveTo</span><span style="color: #009900;">&#40;</span>poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span><span style="color: #339933;">,</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	g.<span style="color: #660066;">lineTo</span><span style="color: #009900;">&#40;</span>poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span><span style="color: #339933;">,</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	g.<span style="color: #660066;">lineTo</span><span style="color: #009900;">&#40;</span>poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span><span style="color: #339933;">,</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	g.<span style="color: #660066;">clip</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	g.<span style="color: #660066;">transform</span><span style="color: #009900;">&#40;</span>a<span style="color: #339933;">,</span> c<span style="color: #339933;">,</span> b<span style="color: #339933;">,</span> d<span style="color: #339933;">,</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">-</span> du<span style="color: #339933;">,</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">-</span> dv<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">// bounds</span>
	<span style="color: #003366; font-weight: bold;">var</span> bx <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span>wu<span style="color: #339933;">,</span> wu<span style="color: #339933;">+</span>vA<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> wu<span style="color: #339933;">+</span>vB<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> by <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span>hv<span style="color: #339933;">,</span> hv<span style="color: #339933;">+</span>vA<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> hv<span style="color: #339933;">+</span>vB<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
	bx.<span style="color: #660066;">sort</span><span style="color: #009900;">&#40;</span>P3D.<span style="color: #660066;">num_cmp</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	by.<span style="color: #660066;">sort</span><span style="color: #009900;">&#40;</span>P3D.<span style="color: #660066;">num_cmp</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> bw <span style="color: #339933;">=</span> bx<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">-</span> bx<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> bh <span style="color: #339933;">=</span> by<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">-</span> by<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>bx<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">+</span>bw<span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;=</span> <span style="color: #009900;">&#40;</span>w<span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> bw<span style="color: #339933;">++;</span>
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>by<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">+</span>bh<span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;=</span> <span style="color: #009900;">&#40;</span>h<span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> bh<span style="color: #339933;">++;</span>
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>bx<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">&amp;</span>gt<span style="color: #339933;">;=</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>bx<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">--;</span> bw<span style="color: #339933;">++;</span><span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>by<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">&amp;</span>gt<span style="color: #339933;">;=</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>by<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">--;</span> bh<span style="color: #339933;">++;</span><span style="color: #009900;">&#125;</span>
&nbsp;
	g.<span style="color: #660066;">drawImage</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">texture</span><span style="color: #339933;">,</span> bx<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> by<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> bw<span style="color: #339933;">,</span> bh<span style="color: #339933;">,</span> bx<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> by<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> bw<span style="color: #339933;">,</span> bh<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>shade_clr<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		g.<span style="color: #660066;">fillStyle</span> <span style="color: #339933;">=</span> shade_clr<span style="color: #339933;">;</span>
		g.<span style="color: #660066;">fillRect</span><span style="color: #009900;">&#40;</span>bx<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> by<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> bw<span style="color: #339933;">,</span> bh<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	g.<span style="color: #660066;">restore</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
P3D.<span style="color: #660066;">drawTestByIndexBuffer</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>pos_buf<span style="color: #339933;">,</span> ix_buf<span style="color: #339933;">,</span> culling<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> g <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">g</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>ix_buf.<span style="color: #660066;">length</span><span style="color: #339933;">%</span>3<span style="color: #009900;">&#41;</span> <span style="color: #339933;">!=</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span>
		<span style="color: #000066; font-weight: bold;">throw</span> <span style="color: #3366CC;">&quot;invalid index buffer length!&quot;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> len <span style="color: #339933;">=</span> ix_buf.<span style="color: #660066;">length</span><span style="color: #339933;">/</span><span style="color: #CC0000;">3</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">,</span> ibase<span style="color: #339933;">,</span> vbase<span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> poss <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span><span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span><span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
	g.<span style="color: #660066;">strokeWidth</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span>i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> ibase <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>i <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> len<span style="color: #339933;">;++</span>i<span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
		vbase <span style="color: #339933;">=</span> ix_buf<span style="color: #009900;">&#91;</span>ibase<span style="color: #339933;">++</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;&amp;</span>lt<span style="color: #339933;">;</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">;</span>
		poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">=</span> pos_buf<span style="color: #009900;">&#91;</span>vbase<span style="color: #339933;">++</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">=</span> pos_buf<span style="color: #009900;">&#91;</span>vbase  <span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
		vbase <span style="color: #339933;">=</span> ix_buf<span style="color: #009900;">&#91;</span>ibase<span style="color: #339933;">++</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;&amp;</span>lt<span style="color: #339933;">;</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">;</span>
		poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">=</span> pos_buf<span style="color: #009900;">&#91;</span>vbase<span style="color: #339933;">++</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">=</span> pos_buf<span style="color: #009900;">&#91;</span>vbase  <span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
		vbase <span style="color: #339933;">=</span> ix_buf<span style="color: #009900;">&#91;</span>ibase<span style="color: #339933;">++</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;&amp;</span>lt<span style="color: #339933;">;</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">;</span>
		poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">=</span> pos_buf<span style="color: #009900;">&#91;</span>vbase<span style="color: #339933;">++</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">=</span> pos_buf<span style="color: #009900;">&#91;</span>vbase  <span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// z component of cross product &amp;lt; 0 ?</span>
&nbsp;
		<span style="color: #003366; font-weight: bold;">var</span> Ax <span style="color: #339933;">=</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">-</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> Ay <span style="color: #339933;">=</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">-</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> Cx <span style="color: #339933;">=</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">-</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> Cy <span style="color: #339933;">=</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">-</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #003366; font-weight: bold;">var</span> cull <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>Ax <span style="color: #339933;">*</span> Cy<span style="color: #009900;">&#41;</span> <span style="color: #339933;">-</span> <span style="color: #009900;">&#40;</span>Ay <span style="color: #339933;">*</span> Cx<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span>culling<span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		g.<span style="color: #660066;">beginPath</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		g.<span style="color: #660066;">strokeStyle</span> <span style="color: #339933;">=</span> cull <span style="color: #339933;">?</span> <span style="color: #3366CC;">&quot;#592&quot;</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;#0f0&quot;</span><span style="color: #339933;">;</span>
		g.<span style="color: #660066;">moveTo</span><span style="color: #009900;">&#40;</span>poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span><span style="color: #339933;">,</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		g.<span style="color: #660066;">lineTo</span><span style="color: #009900;">&#40;</span>poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span><span style="color: #339933;">,</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		g.<span style="color: #660066;">lineTo</span><span style="color: #009900;">&#40;</span>poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span><span style="color: #339933;">,</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		g.<span style="color: #660066;">lineTo</span><span style="color: #009900;">&#40;</span>poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span><span style="color: #339933;">,</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		g.<span style="color: #660066;">stroke</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
P3D.<span style="color: #660066;">drawByIndexBuffer</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>pos_buf<span style="color: #339933;">,</span> ix_buf<span style="color: #339933;">,</span> tx_buf<span style="color: #339933;">,</span> culling<span style="color: #339933;">,</span> z_clip<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> w<span style="color: #339933;">,</span> h<span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> color_polygon <span style="color: #339933;">=</span> <span style="color: #339933;">!</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">texture</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">texture</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		w <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">texture</span>.<span style="color: #660066;">width</span><span style="color: #339933;">;</span>
		h <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">texture</span>.<span style="color: #660066;">height</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> g <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">g</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> m <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> M22<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>culling<span style="color: #009900;">&#41;</span> culling <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>ix_buf.<span style="color: #660066;">length</span><span style="color: #339933;">%</span>3<span style="color: #009900;">&#41;</span> <span style="color: #339933;">!=</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span>
		<span style="color: #000066; font-weight: bold;">throw</span> <span style="color: #3366CC;">&quot;invalid index buffer length!&quot;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">,</span> ibase<span style="color: #339933;">,</span> vbase<span style="color: #339933;">,</span> tbase<span style="color: #339933;">,</span> poss <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span><span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span><span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> len <span style="color: #339933;">=</span> ix_buf.<span style="color: #660066;">length</span><span style="color: #339933;">/</span><span style="color: #CC0000;">3</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> uv_0u<span style="color: #339933;">,</span> uv_0v<span style="color: #339933;">,</span> uv_1u<span style="color: #339933;">,</span> uv_1v<span style="color: #339933;">,</span> uv_2u<span style="color: #339933;">,</span> uv_2v<span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span>i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> ibase <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>i <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> len<span style="color: #339933;">;++</span>i<span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
		tbase <span style="color: #339933;">=</span> ix_buf<span style="color: #009900;">&#91;</span>ibase<span style="color: #339933;">++</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;&amp;</span>lt<span style="color: #339933;">;</span> <span style="color: #CC0000;">1</span>
		vbase <span style="color: #339933;">=</span> tbase <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;&amp;</span>lt<span style="color: #339933;">;</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
		poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">=</span> pos_buf<span style="color: #009900;">&#91;</span>vbase<span style="color: #339933;">++</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span> uv_0u <span style="color: #339933;">=</span> tx_buf<span style="color: #009900;">&#91;</span>tbase<span style="color: #339933;">++</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">=</span> pos_buf<span style="color: #009900;">&#91;</span>vbase<span style="color: #339933;">++</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span> uv_0v <span style="color: #339933;">=</span> tx_buf<span style="color: #009900;">&#91;</span>tbase<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>z_clip <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> <span style="color: #009900;">&#40;</span>pos_buf<span style="color: #009900;">&#91;</span>vbase<span style="color: #009900;">&#93;</span> <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">||</span> pos_buf<span style="color: #009900;">&#91;</span>vbase<span style="color: #009900;">&#93;</span> <span style="color: #339933;">&amp;</span>gt<span style="color: #339933;">;</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>ibase <span style="color: #339933;">+=</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">;</span> <span style="color: #000066; font-weight: bold;">continue</span><span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span>
&nbsp;
		tbase <span style="color: #339933;">=</span> ix_buf<span style="color: #009900;">&#91;</span>ibase<span style="color: #339933;">++</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;&amp;</span>lt<span style="color: #339933;">;</span> <span style="color: #CC0000;">1</span>
		vbase <span style="color: #339933;">=</span> tbase <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;&amp;</span>lt<span style="color: #339933;">;</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
		poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">=</span> pos_buf<span style="color: #009900;">&#91;</span>vbase<span style="color: #339933;">++</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span> uv_1u <span style="color: #339933;">=</span> tx_buf<span style="color: #009900;">&#91;</span>tbase<span style="color: #339933;">++</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">=</span> pos_buf<span style="color: #009900;">&#91;</span>vbase<span style="color: #339933;">++</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span> uv_1v <span style="color: #339933;">=</span> tx_buf<span style="color: #009900;">&#91;</span>tbase<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>z_clip <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> <span style="color: #009900;">&#40;</span>pos_buf<span style="color: #009900;">&#91;</span>vbase<span style="color: #009900;">&#93;</span> <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">||</span> pos_buf<span style="color: #009900;">&#91;</span>vbase<span style="color: #009900;">&#93;</span> <span style="color: #339933;">&amp;</span>gt<span style="color: #339933;">;</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #339933;">++</span>ibase<span style="color: #339933;">;</span> <span style="color: #000066; font-weight: bold;">continue</span><span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span>
&nbsp;
		tbase <span style="color: #339933;">=</span> ix_buf<span style="color: #009900;">&#91;</span>ibase<span style="color: #339933;">++</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;&amp;</span>lt<span style="color: #339933;">;</span> <span style="color: #CC0000;">1</span>
		vbase <span style="color: #339933;">=</span> tbase <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;&amp;</span>lt<span style="color: #339933;">;</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
		poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">=</span> pos_buf<span style="color: #009900;">&#91;</span>vbase<span style="color: #339933;">++</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span> uv_2u <span style="color: #339933;">=</span> tx_buf<span style="color: #009900;">&#91;</span>tbase<span style="color: #339933;">++</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">=</span> pos_buf<span style="color: #009900;">&#91;</span>vbase<span style="color: #339933;">++</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span> uv_2v <span style="color: #339933;">=</span> tx_buf<span style="color: #009900;">&#91;</span>tbase<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>z_clip <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> <span style="color: #009900;">&#40;</span>pos_buf<span style="color: #009900;">&#91;</span>vbase<span style="color: #009900;">&#93;</span> <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">||</span> pos_buf<span style="color: #009900;">&#91;</span>vbase<span style="color: #009900;">&#93;</span> <span style="color: #339933;">&amp;</span>gt<span style="color: #339933;">;</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">continue</span><span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #003366; font-weight: bold;">var</span> vAd <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">-</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">,</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">-</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span> <span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> vBd <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">-</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">,</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">-</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span> <span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #003366; font-weight: bold;">var</span> vCd <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">-</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">,</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">-</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span> <span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// z component of cross product &amp;lt; 0 ?</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>vAd<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">*</span> vCd<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">-</span> <span style="color: #009900;">&#40;</span>vAd<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">*</span> vCd<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span>culling<span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span>
			<span style="color: #000066; font-weight: bold;">continue</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>color_polygon<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			g.<span style="color: #660066;">fillStyle</span> <span style="color: #339933;">=</span> uv_0u<span style="color: #339933;">;</span>
&nbsp;
			g.<span style="color: #660066;">beginPath</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			g.<span style="color: #660066;">moveTo</span><span style="color: #009900;">&#40;</span>poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span><span style="color: #339933;">,</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			g.<span style="color: #660066;">lineTo</span><span style="color: #009900;">&#40;</span>poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span><span style="color: #339933;">,</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			g.<span style="color: #660066;">lineTo</span><span style="color: #009900;">&#40;</span>poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span><span style="color: #339933;">,</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			g.<span style="color: #660066;">fill</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">continue</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #003366; font-weight: bold;">var</span> vA <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span> uv_1u <span style="color: #339933;">-</span> uv_0u <span style="color: #339933;">,</span> uv_1v <span style="color: #339933;">-</span> uv_0v <span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> vB <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span> uv_2u <span style="color: #339933;">-</span> uv_0u <span style="color: #339933;">,</span> uv_2v <span style="color: #339933;">-</span> uv_0v <span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
		vA<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">*=</span> w<span style="color: #339933;">;</span>
		vA<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">*=</span> h<span style="color: #339933;">;</span>
&nbsp;
		vB<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">*=</span> w<span style="color: #339933;">;</span>
		vB<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">*=</span> h<span style="color: #339933;">;</span>
&nbsp;
		m._11 <span style="color: #339933;">=</span> vA<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		m._12 <span style="color: #339933;">=</span> vA<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		m._21 <span style="color: #339933;">=</span> vB<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		m._22 <span style="color: #339933;">=</span> vB<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #003366; font-weight: bold;">var</span> im <span style="color: #339933;">=</span> m.<span style="color: #660066;">getInvert</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>im<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #000066; font-weight: bold;">continue</span><span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #003366; font-weight: bold;">var</span> a <span style="color: #339933;">=</span> im._11 <span style="color: #339933;">*</span> vAd<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">+</span> im._12 <span style="color: #339933;">*</span> vBd<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> b <span style="color: #339933;">=</span> im._21 <span style="color: #339933;">*</span> vAd<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">+</span> im._22 <span style="color: #339933;">*</span> vBd<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #003366; font-weight: bold;">var</span> c <span style="color: #339933;">=</span> im._11 <span style="color: #339933;">*</span> vAd<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">+</span> im._12 <span style="color: #339933;">*</span> vBd<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> d <span style="color: #339933;">=</span> im._21 <span style="color: #339933;">*</span> vAd<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">+</span> im._22 <span style="color: #339933;">*</span> vBd<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #003366; font-weight: bold;">var</span> wu <span style="color: #339933;">=</span> uv_0u <span style="color: #339933;">*</span> w<span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> hv <span style="color: #339933;">=</span> uv_0v <span style="color: #339933;">*</span> h<span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> du <span style="color: #339933;">=</span> wu <span style="color: #339933;">*</span> a <span style="color: #339933;">+</span> hv <span style="color: #339933;">*</span> b<span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> dv <span style="color: #339933;">=</span> wu <span style="color: #339933;">*</span> c <span style="color: #339933;">+</span> hv <span style="color: #339933;">*</span> d<span style="color: #339933;">;</span>
&nbsp;
		g.<span style="color: #660066;">save</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		g.<span style="color: #660066;">beginPath</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		g.<span style="color: #660066;">moveTo</span><span style="color: #009900;">&#40;</span>poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span><span style="color: #339933;">,</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		g.<span style="color: #660066;">lineTo</span><span style="color: #009900;">&#40;</span>poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span><span style="color: #339933;">,</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		g.<span style="color: #660066;">lineTo</span><span style="color: #009900;">&#40;</span>poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span><span style="color: #339933;">,</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		g.<span style="color: #660066;">clip</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		g.<span style="color: #660066;">transform</span><span style="color: #009900;">&#40;</span>a<span style="color: #339933;">,</span> c<span style="color: #339933;">,</span> b<span style="color: #339933;">,</span> d<span style="color: #339933;">,</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">-</span> du<span style="color: #339933;">,</span> poss<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">-</span> dv<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// bounds</span>
		<span style="color: #003366; font-weight: bold;">var</span> bx <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span>wu<span style="color: #339933;">,</span> wu<span style="color: #339933;">+</span>vA<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> wu<span style="color: #339933;">+</span>vB<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> by <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span>hv<span style="color: #339933;">,</span> hv<span style="color: #339933;">+</span>vA<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> hv<span style="color: #339933;">+</span>vB<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
		bx.<span style="color: #660066;">sort</span><span style="color: #009900;">&#40;</span>P3D.<span style="color: #660066;">num_cmp</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		by.<span style="color: #660066;">sort</span><span style="color: #009900;">&#40;</span>P3D.<span style="color: #660066;">num_cmp</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #003366; font-weight: bold;">var</span> bw <span style="color: #339933;">=</span> bx<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">-</span> bx<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> bh <span style="color: #339933;">=</span> by<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">-</span> by<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>bx<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">+</span>bw<span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;=</span> <span style="color: #009900;">&#40;</span>w<span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> bw<span style="color: #339933;">++;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>by<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">+</span>bh<span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;=</span> <span style="color: #009900;">&#40;</span>h<span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> bh<span style="color: #339933;">++;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>bx<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">&amp;</span>gt<span style="color: #339933;">;=</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>bx<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">--;</span> bw<span style="color: #339933;">++;</span><span style="color: #009900;">&#125;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>by<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">&amp;</span>gt<span style="color: #339933;">;=</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>by<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">--;</span> bh<span style="color: #339933;">++;</span><span style="color: #009900;">&#125;</span>
&nbsp;
		g.<span style="color: #660066;">drawImage</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">texture</span><span style="color: #339933;">,</span> bx<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> by<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> bw<span style="color: #339933;">,</span> bh<span style="color: #339933;">,</span> bx<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> by<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> bw<span style="color: #339933;">,</span> bh<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">/*
		if (shade_clr) {
			g.fillStyle = shade_clr;
			g.fillRect(bx[0], by[0], bw, bh);
		}
*/</span>
		g.<span style="color: #660066;">restore</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> Vec3<span style="color: #009900;">&#40;</span>_x<span style="color: #339933;">,</span> _y<span style="color: #339933;">,</span> _z<span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">=</span> _x <span style="color: #339933;">||</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">=</span> _y <span style="color: #339933;">||</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">z</span> <span style="color: #339933;">=</span> _z <span style="color: #339933;">||</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
Vec3.<span style="color: #660066;">prototype</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
	zero<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">z</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	sub<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>v<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">-=</span> v.<span style="color: #660066;">x</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">-=</span> v.<span style="color: #660066;">y</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">z</span> <span style="color: #339933;">-=</span> v.<span style="color: #660066;">z</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	add<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>v<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">+=</span> v.<span style="color: #660066;">x</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">+=</span> v.<span style="color: #660066;">y</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">z</span> <span style="color: #339933;">+=</span> v.<span style="color: #660066;">z</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	copyFrom<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>v<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">=</span> v.<span style="color: #660066;">x</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">=</span> v.<span style="color: #660066;">y</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">z</span> <span style="color: #339933;">=</span> v.<span style="color: #660066;">z</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	norm<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">return</span> Math.<span style="color: #660066;">sqrt</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">x</span><span style="color: #339933;">*</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">y</span><span style="color: #339933;">*</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">z</span><span style="color: #339933;">*</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">z</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	normalize<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> nrm <span style="color: #339933;">=</span> Math.<span style="color: #660066;">sqrt</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">x</span><span style="color: #339933;">*</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">y</span><span style="color: #339933;">*</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">z</span><span style="color: #339933;">*</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">z</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>nrm <span style="color: #339933;">!=</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span>
		<span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">/=</span> nrm<span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">/=</span> nrm<span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">z</span> <span style="color: #339933;">/=</span> nrm<span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	smul<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>k<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">*=</span> k<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">*=</span> k<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">z</span> <span style="color: #339933;">*=</span> k<span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	dpWith<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>v<span style="color: #009900;">&#41;</span>	<span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">x</span><span style="color: #339933;">*</span>v.<span style="color: #660066;">x</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">y</span><span style="color: #339933;">*</span>v.<span style="color: #660066;">y</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">z</span><span style="color: #339933;">*</span>v.<span style="color: #660066;">z</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	cp<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>v<span style="color: #339933;">,</span> w<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>w.<span style="color: #660066;">y</span> <span style="color: #339933;">*</span> v.<span style="color: #660066;">z</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">-</span> <span style="color: #009900;">&#40;</span>w.<span style="color: #660066;">z</span> <span style="color: #339933;">*</span> v.<span style="color: #660066;">y</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>w.<span style="color: #660066;">z</span> <span style="color: #339933;">*</span> v.<span style="color: #660066;">x</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">-</span> <span style="color: #009900;">&#40;</span>w.<span style="color: #660066;">x</span> <span style="color: #339933;">*</span> v.<span style="color: #660066;">z</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">z</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>w.<span style="color: #660066;">x</span> <span style="color: #339933;">*</span> v.<span style="color: #660066;">y</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">-</span> <span style="color: #009900;">&#40;</span>w.<span style="color: #660066;">y</span> <span style="color: #339933;">*</span> v.<span style="color: #660066;">x</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	toString<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;, &quot;</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;,&quot;</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">z</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> M44<span style="color: #009900;">&#40;</span>cpy<span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>cpy<span style="color: #009900;">&#41;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">copyFrom</span><span style="color: #009900;">&#40;</span>cpy<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">ident</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
M44.<span style="color: #660066;">prototype</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
	ident<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			  <span style="color: #000066; font-weight: bold;">this</span>._12 <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>._13 <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>._14 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._21 <span style="color: #339933;">=</span>       <span style="color: #000066; font-weight: bold;">this</span>._23 <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>._24 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._31 <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>._32 <span style="color: #339933;">=</span>       <span style="color: #000066; font-weight: bold;">this</span>._34 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._41 <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>._42 <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>._43 <span style="color: #339933;">=</span>       <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>._11 <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>._22 <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>._33 <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>._44 <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	copyFrom<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>m<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._11 <span style="color: #339933;">=</span> m._11<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._12 <span style="color: #339933;">=</span> m._12<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._13 <span style="color: #339933;">=</span> m._13<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._14 <span style="color: #339933;">=</span> m._14<span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>._21 <span style="color: #339933;">=</span> m._21<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._22 <span style="color: #339933;">=</span> m._22<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._23 <span style="color: #339933;">=</span> m._23<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._24 <span style="color: #339933;">=</span> m._24<span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>._31 <span style="color: #339933;">=</span> m._31<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._32 <span style="color: #339933;">=</span> m._32<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._33 <span style="color: #339933;">=</span> m._33<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._34 <span style="color: #339933;">=</span> m._34<span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>._41 <span style="color: #339933;">=</span> m._41<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._42 <span style="color: #339933;">=</span> m._42<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._43 <span style="color: #339933;">=</span> m._43<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._44 <span style="color: #339933;">=</span> m._44<span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	transVec3<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>out<span style="color: #339933;">,</span> x<span style="color: #339933;">,</span> y<span style="color: #339933;">,</span> z<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		out<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> x <span style="color: #339933;">*</span> <span style="color: #000066; font-weight: bold;">this</span>._11 <span style="color: #339933;">+</span> y <span style="color: #339933;">*</span> <span style="color: #000066; font-weight: bold;">this</span>._21 <span style="color: #339933;">+</span> z <span style="color: #339933;">*</span> <span style="color: #000066; font-weight: bold;">this</span>._31 <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>._41<span style="color: #339933;">;</span>
		out<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> x <span style="color: #339933;">*</span> <span style="color: #000066; font-weight: bold;">this</span>._12 <span style="color: #339933;">+</span> y <span style="color: #339933;">*</span> <span style="color: #000066; font-weight: bold;">this</span>._22 <span style="color: #339933;">+</span> z <span style="color: #339933;">*</span> <span style="color: #000066; font-weight: bold;">this</span>._32 <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>._42<span style="color: #339933;">;</span>
		out<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> x <span style="color: #339933;">*</span> <span style="color: #000066; font-weight: bold;">this</span>._13 <span style="color: #339933;">+</span> y <span style="color: #339933;">*</span> <span style="color: #000066; font-weight: bold;">this</span>._23 <span style="color: #339933;">+</span> z <span style="color: #339933;">*</span> <span style="color: #000066; font-weight: bold;">this</span>._33 <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>._43<span style="color: #339933;">;</span>
		out<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">3</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> x <span style="color: #339933;">*</span> <span style="color: #000066; font-weight: bold;">this</span>._14 <span style="color: #339933;">+</span> y <span style="color: #339933;">*</span> <span style="color: #000066; font-weight: bold;">this</span>._24 <span style="color: #339933;">+</span> z <span style="color: #339933;">*</span> <span style="color: #000066; font-weight: bold;">this</span>._34 <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>._44<span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	transVec3Rot<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>out<span style="color: #339933;">,</span> x<span style="color: #339933;">,</span> y<span style="color: #339933;">,</span> z<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		out<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> x <span style="color: #339933;">*</span> <span style="color: #000066; font-weight: bold;">this</span>._11 <span style="color: #339933;">+</span> y <span style="color: #339933;">*</span> <span style="color: #000066; font-weight: bold;">this</span>._21 <span style="color: #339933;">+</span> z <span style="color: #339933;">*</span> <span style="color: #000066; font-weight: bold;">this</span>._31<span style="color: #339933;">;</span>
		out<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> x <span style="color: #339933;">*</span> <span style="color: #000066; font-weight: bold;">this</span>._12 <span style="color: #339933;">+</span> y <span style="color: #339933;">*</span> <span style="color: #000066; font-weight: bold;">this</span>._22 <span style="color: #339933;">+</span> z <span style="color: #339933;">*</span> <span style="color: #000066; font-weight: bold;">this</span>._32<span style="color: #339933;">;</span>
		out<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> x <span style="color: #339933;">*</span> <span style="color: #000066; font-weight: bold;">this</span>._13 <span style="color: #339933;">+</span> y <span style="color: #339933;">*</span> <span style="color: #000066; font-weight: bold;">this</span>._23 <span style="color: #339933;">+</span> z <span style="color: #339933;">*</span> <span style="color: #000066; font-weight: bold;">this</span>._33<span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	perspectiveLH<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>vw<span style="color: #339933;">,</span> vh<span style="color: #339933;">,</span> z_near<span style="color: #339933;">,</span> z_far<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._11 <span style="color: #339933;">=</span> <span style="color: #CC0000;">2.0</span><span style="color: #339933;">*</span>z_near<span style="color: #339933;">/</span>vw<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._12 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._13 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._14 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>._21 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._22 <span style="color: #339933;">=</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">*</span>z_near<span style="color: #339933;">/</span>vh<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._23 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._24 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>._31 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._32 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._33 <span style="color: #339933;">=</span> z_far<span style="color: #339933;">/</span><span style="color: #009900;">&#40;</span>z_far<span style="color: #339933;">-</span>z_near<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._34 <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>._41 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._42 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._43 <span style="color: #339933;">=</span> z_near<span style="color: #339933;">*</span>z_far<span style="color: #339933;">/</span><span style="color: #009900;">&#40;</span>z_near<span style="color: #339933;">-</span>z_far<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._44 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	lookAtLH<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>aUp<span style="color: #339933;">,</span> aFrom<span style="color: #339933;">,</span> aAt<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> aX <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Vec3<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> aY <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Vec3<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #003366; font-weight: bold;">var</span> aZ <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Vec3<span style="color: #009900;">&#40;</span>aAt.<span style="color: #660066;">x</span><span style="color: #339933;">,</span> aAt.<span style="color: #660066;">y</span><span style="color: #339933;">,</span> aAt.<span style="color: #660066;">z</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		aZ.<span style="color: #660066;">sub</span><span style="color: #009900;">&#40;</span>aFrom<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">normalize</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		aX.<span style="color: #660066;">cp</span><span style="color: #009900;">&#40;</span>aUp<span style="color: #339933;">,</span> aZ<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">normalize</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		aY.<span style="color: #660066;">cp</span><span style="color: #009900;">&#40;</span>aZ<span style="color: #339933;">,</span> aX<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>._11 <span style="color: #339933;">=</span> aX.<span style="color: #660066;">x</span><span style="color: #339933;">;</span>  <span style="color: #000066; font-weight: bold;">this</span>._12 <span style="color: #339933;">=</span> aY.<span style="color: #660066;">x</span><span style="color: #339933;">;</span>  <span style="color: #000066; font-weight: bold;">this</span>._13 <span style="color: #339933;">=</span> aZ.<span style="color: #660066;">x</span><span style="color: #339933;">;</span>  <span style="color: #000066; font-weight: bold;">this</span>._14 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._21 <span style="color: #339933;">=</span> aX.<span style="color: #660066;">y</span><span style="color: #339933;">;</span>  <span style="color: #000066; font-weight: bold;">this</span>._22 <span style="color: #339933;">=</span> aY.<span style="color: #660066;">y</span><span style="color: #339933;">;</span>  <span style="color: #000066; font-weight: bold;">this</span>._23 <span style="color: #339933;">=</span> aZ.<span style="color: #660066;">y</span><span style="color: #339933;">;</span>  <span style="color: #000066; font-weight: bold;">this</span>._24 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._31 <span style="color: #339933;">=</span> aX.<span style="color: #660066;">z</span><span style="color: #339933;">;</span>  <span style="color: #000066; font-weight: bold;">this</span>._32 <span style="color: #339933;">=</span> aY.<span style="color: #660066;">z</span><span style="color: #339933;">;</span>  <span style="color: #000066; font-weight: bold;">this</span>._33 <span style="color: #339933;">=</span> aZ.<span style="color: #660066;">z</span><span style="color: #339933;">;</span>  <span style="color: #000066; font-weight: bold;">this</span>._34 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>._41 <span style="color: #339933;">=</span> <span style="color: #339933;">-</span>aFrom.<span style="color: #660066;">dpWith</span><span style="color: #009900;">&#40;</span>aX<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._42 <span style="color: #339933;">=</span> <span style="color: #339933;">-</span>aFrom.<span style="color: #660066;">dpWith</span><span style="color: #009900;">&#40;</span>aY<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._43 <span style="color: #339933;">=</span> <span style="color: #339933;">-</span>aFrom.<span style="color: #660066;">dpWith</span><span style="color: #009900;">&#40;</span>aZ<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._44 <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
&nbsp;
	    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	mul<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>A<span style="color: #339933;">,</span> B<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._11 <span style="color: #339933;">=</span> A._11<span style="color: #339933;">*</span>B._11  <span style="color: #339933;">+</span>  A._12<span style="color: #339933;">*</span>B._21  <span style="color: #339933;">+</span>  A._13<span style="color: #339933;">*</span>B._31  <span style="color: #339933;">+</span>  A._14<span style="color: #339933;">*</span>B._41<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._12 <span style="color: #339933;">=</span> A._11<span style="color: #339933;">*</span>B._12  <span style="color: #339933;">+</span>  A._12<span style="color: #339933;">*</span>B._22  <span style="color: #339933;">+</span>  A._13<span style="color: #339933;">*</span>B._32  <span style="color: #339933;">+</span>  A._14<span style="color: #339933;">*</span>B._42<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._13 <span style="color: #339933;">=</span> A._11<span style="color: #339933;">*</span>B._13  <span style="color: #339933;">+</span>  A._12<span style="color: #339933;">*</span>B._23  <span style="color: #339933;">+</span>  A._13<span style="color: #339933;">*</span>B._33  <span style="color: #339933;">+</span>  A._14<span style="color: #339933;">*</span>B._43<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._14 <span style="color: #339933;">=</span> A._11<span style="color: #339933;">*</span>B._14  <span style="color: #339933;">+</span>  A._12<span style="color: #339933;">*</span>B._24  <span style="color: #339933;">+</span>  A._13<span style="color: #339933;">*</span>B._34  <span style="color: #339933;">+</span>  A._14<span style="color: #339933;">*</span>B._44<span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>._21 <span style="color: #339933;">=</span> A._21<span style="color: #339933;">*</span>B._11  <span style="color: #339933;">+</span>  A._22<span style="color: #339933;">*</span>B._21  <span style="color: #339933;">+</span>  A._23<span style="color: #339933;">*</span>B._31  <span style="color: #339933;">+</span>  A._24<span style="color: #339933;">*</span>B._41<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._22 <span style="color: #339933;">=</span> A._21<span style="color: #339933;">*</span>B._12  <span style="color: #339933;">+</span>  A._22<span style="color: #339933;">*</span>B._22  <span style="color: #339933;">+</span>  A._23<span style="color: #339933;">*</span>B._32  <span style="color: #339933;">+</span>  A._24<span style="color: #339933;">*</span>B._42<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._23 <span style="color: #339933;">=</span> A._21<span style="color: #339933;">*</span>B._13  <span style="color: #339933;">+</span>  A._22<span style="color: #339933;">*</span>B._23  <span style="color: #339933;">+</span>  A._23<span style="color: #339933;">*</span>B._33  <span style="color: #339933;">+</span>  A._24<span style="color: #339933;">*</span>B._43<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._24 <span style="color: #339933;">=</span> A._21<span style="color: #339933;">*</span>B._14  <span style="color: #339933;">+</span>  A._22<span style="color: #339933;">*</span>B._24  <span style="color: #339933;">+</span>  A._23<span style="color: #339933;">*</span>B._34  <span style="color: #339933;">+</span>  A._24<span style="color: #339933;">*</span>B._44<span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>._31 <span style="color: #339933;">=</span> A._31<span style="color: #339933;">*</span>B._11  <span style="color: #339933;">+</span>  A._32<span style="color: #339933;">*</span>B._21  <span style="color: #339933;">+</span>  A._33<span style="color: #339933;">*</span>B._31  <span style="color: #339933;">+</span>  A._34<span style="color: #339933;">*</span>B._41<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._32 <span style="color: #339933;">=</span> A._31<span style="color: #339933;">*</span>B._12  <span style="color: #339933;">+</span>  A._32<span style="color: #339933;">*</span>B._22  <span style="color: #339933;">+</span>  A._33<span style="color: #339933;">*</span>B._32  <span style="color: #339933;">+</span>  A._34<span style="color: #339933;">*</span>B._42<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._33 <span style="color: #339933;">=</span> A._31<span style="color: #339933;">*</span>B._13  <span style="color: #339933;">+</span>  A._32<span style="color: #339933;">*</span>B._23  <span style="color: #339933;">+</span>  A._33<span style="color: #339933;">*</span>B._33  <span style="color: #339933;">+</span>  A._34<span style="color: #339933;">*</span>B._43<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._34 <span style="color: #339933;">=</span> A._31<span style="color: #339933;">*</span>B._14  <span style="color: #339933;">+</span>  A._32<span style="color: #339933;">*</span>B._24  <span style="color: #339933;">+</span>  A._33<span style="color: #339933;">*</span>B._34  <span style="color: #339933;">+</span>  A._34<span style="color: #339933;">*</span>B._44<span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>._41 <span style="color: #339933;">=</span> A._41<span style="color: #339933;">*</span>B._11  <span style="color: #339933;">+</span>  A._42<span style="color: #339933;">*</span>B._21  <span style="color: #339933;">+</span>  A._43<span style="color: #339933;">*</span>B._31  <span style="color: #339933;">+</span>  A._44<span style="color: #339933;">*</span>B._41<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._42 <span style="color: #339933;">=</span> A._41<span style="color: #339933;">*</span>B._12  <span style="color: #339933;">+</span>  A._42<span style="color: #339933;">*</span>B._22  <span style="color: #339933;">+</span>  A._43<span style="color: #339933;">*</span>B._32  <span style="color: #339933;">+</span>  A._44<span style="color: #339933;">*</span>B._42<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._43 <span style="color: #339933;">=</span> A._41<span style="color: #339933;">*</span>B._13  <span style="color: #339933;">+</span>  A._42<span style="color: #339933;">*</span>B._23  <span style="color: #339933;">+</span>  A._43<span style="color: #339933;">*</span>B._33  <span style="color: #339933;">+</span>  A._44<span style="color: #339933;">*</span>B._43<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._44 <span style="color: #339933;">=</span> A._41<span style="color: #339933;">*</span>B._14  <span style="color: #339933;">+</span>  A._42<span style="color: #339933;">*</span>B._24  <span style="color: #339933;">+</span>  A._43<span style="color: #339933;">*</span>B._34  <span style="color: #339933;">+</span>  A._44<span style="color: #339933;">*</span>B._44<span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	translate<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>x<span style="color: #339933;">,</span> y<span style="color: #339933;">,</span> z<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._11 <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>  <span style="color: #000066; font-weight: bold;">this</span>._12 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>  <span style="color: #000066; font-weight: bold;">this</span>._13 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>  <span style="color: #000066; font-weight: bold;">this</span>._14 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._21 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>  <span style="color: #000066; font-weight: bold;">this</span>._22 <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>  <span style="color: #000066; font-weight: bold;">this</span>._23 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>  <span style="color: #000066; font-weight: bold;">this</span>._24 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._31 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>  <span style="color: #000066; font-weight: bold;">this</span>._32 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>  <span style="color: #000066; font-weight: bold;">this</span>._33 <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>  <span style="color: #000066; font-weight: bold;">this</span>._34 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>._41 <span style="color: #339933;">=</span> x<span style="color: #339933;">;</span>  <span style="color: #000066; font-weight: bold;">this</span>._42 <span style="color: #339933;">=</span> y<span style="color: #339933;">;</span>  <span style="color: #000066; font-weight: bold;">this</span>._43 <span style="color: #339933;">=</span> z<span style="color: #339933;">;</span>  <span style="color: #000066; font-weight: bold;">this</span>._44 <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	transpose33<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> t<span style="color: #339933;">;</span>
&nbsp;
		t <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>._12<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._12 <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>._21<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._21 <span style="color: #339933;">=</span> t<span style="color: #339933;">;</span>
&nbsp;
		t <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>._13<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._13 <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>._31<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._31 <span style="color: #339933;">=</span> t<span style="color: #339933;">;</span>
&nbsp;
		t <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>._23<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._23 <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>._32<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._32 <span style="color: #339933;">=</span> t<span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">// OpenGL style rotation</span>
	glRotate<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>angle<span style="color: #339933;">,</span> x<span style="color: #339933;">,</span> y<span style="color: #339933;">,</span> z<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> s <span style="color: #339933;">=</span> Math.<span style="color: #660066;">sin</span><span style="color: #009900;">&#40;</span> angle <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> c <span style="color: #339933;">=</span> Math.<span style="color: #660066;">cos</span><span style="color: #009900;">&#40;</span> angle <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #003366; font-weight: bold;">var</span> xx <span style="color: #339933;">=</span> x <span style="color: #339933;">*</span> x<span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> yy <span style="color: #339933;">=</span> y <span style="color: #339933;">*</span> y<span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> zz <span style="color: #339933;">=</span> z <span style="color: #339933;">*</span> z<span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> xy <span style="color: #339933;">=</span> x <span style="color: #339933;">*</span> y<span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> yz <span style="color: #339933;">=</span> y <span style="color: #339933;">*</span> z<span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> zx <span style="color: #339933;">=</span> z <span style="color: #339933;">*</span> x<span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> xs <span style="color: #339933;">=</span> x <span style="color: #339933;">*</span> s<span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> ys <span style="color: #339933;">=</span> y <span style="color: #339933;">*</span> s<span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> zs <span style="color: #339933;">=</span> z <span style="color: #339933;">*</span> s<span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> one_c <span style="color: #339933;">=</span> <span style="color: #CC0000;">1.0</span> <span style="color: #339933;">-</span> c<span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">/*
		this._11 = (one_c * xx) + c;
		this._21 = (one_c * xy) - zs;
		this._31 = (one_c * zx) + ys;
		this._41 = 0;
&nbsp;
		this._12 = (one_c * xy) + zs;
		this._22 = (one_c * yy) + c;
		this._32 = (one_c * yz) - xs;
		this._42 = 0;
&nbsp;
		this._13 = (one_c * zx) - ys;
		this._23 = (one_c * yz) + xs;
		this._33 = (one_c * zz) + c;
		this._43 = 0;
&nbsp;
		this._14 = 0;
		this._24 = 0;
		this._34 = 0;
		this._44 = 1;
*/</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>._11 <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>one_c <span style="color: #339933;">*</span> xx<span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> c<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._12 <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>one_c <span style="color: #339933;">*</span> xy<span style="color: #009900;">&#41;</span> <span style="color: #339933;">-</span> zs<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._13 <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>one_c <span style="color: #339933;">*</span> zx<span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> ys<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._14 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>._21 <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>one_c <span style="color: #339933;">*</span> xy<span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> zs<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._22 <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>one_c <span style="color: #339933;">*</span> yy<span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> c<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._23 <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>one_c <span style="color: #339933;">*</span> yz<span style="color: #009900;">&#41;</span> <span style="color: #339933;">-</span> xs<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._24 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>._31 <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>one_c <span style="color: #339933;">*</span> zx<span style="color: #009900;">&#41;</span> <span style="color: #339933;">-</span> ys<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._32 <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>one_c <span style="color: #339933;">*</span> yz<span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> xs<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._33 <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>one_c <span style="color: #339933;">*</span> zz<span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> c<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._34 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>._41 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._42 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._43 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._44 <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// matrix 2x2</span>
<span style="color: #003366; font-weight: bold;">function</span> M22<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">this</span>._11 <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">this</span>._12 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">this</span>._21 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">this</span>._22 <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
M22.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">getInvert</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> out <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> M22<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> det <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>._11 <span style="color: #339933;">*</span> <span style="color: #000066; font-weight: bold;">this</span>._22 <span style="color: #339933;">-</span> <span style="color: #000066; font-weight: bold;">this</span>._12 <span style="color: #339933;">*</span> <span style="color: #000066; font-weight: bold;">this</span>._21<span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>det <span style="color: #339933;">&amp;</span>gt<span style="color: #339933;">;</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">0.0001</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> det <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> <span style="color: #CC0000;">0.0001</span><span style="color: #009900;">&#41;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
&nbsp;
	out._11 <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>._22 <span style="color: #339933;">/</span> det<span style="color: #339933;">;</span>
	out._22 <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>._11 <span style="color: #339933;">/</span> det<span style="color: #339933;">;</span>
&nbsp;
	out._12 <span style="color: #339933;">=</span> <span style="color: #339933;">-</span><span style="color: #000066; font-weight: bold;">this</span>._12 <span style="color: #339933;">/</span> det<span style="color: #339933;">;</span>
	out._21 <span style="color: #339933;">=</span> <span style="color: #339933;">-</span><span style="color: #000066; font-weight: bold;">this</span>._21 <span style="color: #339933;">/</span> det<span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">return</span> out<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://drawlogic.com/2009/02/18/mini-javascript-version-of-papervision3d-with-canvas-pseudo-3d-with-2d/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

