<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>WebGLRenderer - Pixi.JS</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
<script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">
<div id="doc">
<div id="hd" class="yui3-g header">
<div class="yui3-u-3-4">
<h1><img src="http://www.goodboydigital.com/pixijs/logo_small.png" title="Pixi.JS"></h1>
</div>
<div class="yui3-u-1-4 version">
<em>API Docs for: 1.4.0</em>
</div>
</div>
<div id="bd" class="yui3-g">
<div class="yui3-u-1-4">
<div id="docs-sidebar" class="sidebar apidocs">
<div id="api-list">
<h2 class="off-left">APIs</h2>
<div id="api-tabview" class="tabview">
<ul class="tabs">
<li><a href="#api-classes">Classes</a></li>
<li><a href="#api-modules">Modules</a></li>
</ul>
<div id="api-tabview-filter">
<input type="search" id="api-filter" placeholder="Type to filter APIs">
</div>
<div id="api-tabview-panel">
<ul id="api-classes" class="apis classes">
<li><a href="../classes/AbstractFilter.html">AbstractFilter</a></li>
<li><a href="../classes/AssetLoader.html">AssetLoader</a></li>
<li><a href="../classes/AtlasLoader.html">AtlasLoader</a></li>
<li><a href="../classes/BaseTexture.html">BaseTexture</a></li>
<li><a href="../classes/BitmapFontLoader.html">BitmapFontLoader</a></li>
<li><a href="../classes/BitmapText.html">BitmapText</a></li>
<li><a href="../classes/BlurFilter.html">BlurFilter</a></li>
<li><a href="../classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="../classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="../classes/Circle.html">Circle</a></li>
<li><a href="../classes/ColorMatrixFilter.html">ColorMatrixFilter</a></li>
<li><a href="../classes/ColorStepFilter.html">ColorStepFilter</a></li>
<li><a href="../classes/DisplacementFilter.html">DisplacementFilter</a></li>
<li><a href="../classes/DisplayObject.html">DisplayObject</a></li>
<li><a href="../classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="../classes/Ellipse.html">Ellipse</a></li>
<li><a href="../classes/EventTarget.html">EventTarget</a></li>
<li><a href="../classes/Graphics.html">Graphics</a></li>
<li><a href="../classes/GrayFilter.html">GrayFilter</a></li>
<li><a href="../classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="../classes/InvertFilter.html">InvertFilter</a></li>
<li><a href="../classes/JsonLoader.html">JsonLoader</a></li>
<li><a href="../classes/MovieClip.html">MovieClip</a></li>
<li><a href="../classes/PixelateFilter.html">PixelateFilter</a></li>
<li><a href="../classes/PIXI.PixiShader.html">PIXI.PixiShader</a></li>
<li><a href="../classes/Point.html">Point</a></li>
<li><a href="../classes/Polygon.html">Polygon</a></li>
<li><a href="../classes/PolyK._convex.html">PolyK._convex</a></li>
<li><a href="../classes/PolyK._PointInTriangle.html">PolyK._PointInTriangle</a></li>
<li><a href="../classes/PolyK.AjaxRequest.html">PolyK.AjaxRequest</a></li>
<li><a href="../classes/PolyK.InteractionData.html">PolyK.InteractionData</a></li>
<li><a href="../classes/PolyK.InteractionManager.html">PolyK.InteractionManager</a></li>
<li><a href="../classes/Rectangle.html">Rectangle</a></li>
<li><a href="../classes/RenderTexture.html">RenderTexture</a></li>
<li><a href="../classes/SepiaFilter.html">SepiaFilter</a></li>
<li><a href="../classes/Spine.html">Spine</a></li>
<li><a href="../classes/SpriteSheetLoader.html">SpriteSheetLoader</a></li>
<li><a href="../classes/Sprite™.html">Sprite™</a></li>
<li><a href="../classes/Stage.html">Stage</a></li>
<li><a href="../classes/Text.html">Text</a></li>
<li><a href="../classes/Texture.html">Texture</a></li>
<li><a href="../classes/TilingSprite.html">TilingSprite</a></li>
<li><a href="../classes/WebGLRenderer.html">WebGLRenderer</a></li>
</ul>
<ul id="api-modules" class="apis modules">
<li><a href="../modules/PIXI.html">PIXI</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="yui3-u-3-4">
<div id="api-options">
Show:
<label for="api-show-inherited">
<input type="checkbox" id="api-show-inherited" checked>
Inherited
</label>
<label for="api-show-protected">
<input type="checkbox" id="api-show-protected">
Protected
</label>
<label for="api-show-private">
<input type="checkbox" id="api-show-private">
Private
</label>
<label for="api-show-deprecated">
<input type="checkbox" id="api-show-deprecated">
Deprecated
</label>
</div>
<div class="apidocs">
<div id="docs-main">
<div class="content">
<h1>WebGLRenderer Class</h1>
<div class="box meta">
<div class="foundat">
Defined in: <a href="../files/src_pixi_renderers_webgl_WebGLRenderer.js.html#l13"><code>src/pixi/renderers/webgl/WebGLRenderer.js:13</code></a>
</div>
Module: <a href="../modules/PIXI.html">PIXI</a>
</div>
<div class="box intro">
<p>the WebGLRenderer is draws the stage and all its content onto a webGL enabled canvas. This renderer
should be used for browsers support webGL. This Render works by automatically managing webGLBatchs.
So no need for Sprite Batch's or Sprite Cloud's
Dont forget to add the view to your DOM or you will not see anything :)</p>
</div>
<div class="constructor">
<h2>Constructor</h2>
<div id="method_WebGLRenderer" class="method item">
<h3 class="name"><code>WebGLRenderer</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>width=0</code>
</li>
<li class="arg">
<code>height=0</code>
</li>
<li class="arg">
<code>view</code>
</li>
<li class="arg">
<code>transparent=false</code>
</li>
<li class="arg">
<code>antialias=false</code>
</li>
</ul><span class="paren">)</span>
</div>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_renderers_webgl_WebGLRenderer.js.html#l13"><code>src/pixi/renderers/webgl/WebGLRenderer.js:13</code></a>
</p>
</div>
<div class="description">
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">width=0</code>
<span class="type">Number</span>
<div class="param-description">
<p>the width of the canvas view</p>
</div>
</li>
<li class="param">
<code class="param-name">height=0</code>
<span class="type">Number</span>
<div class="param-description">
<p>the height of the canvas view</p>
</div>
</li>
<li class="param">
<code class="param-name">view</code>
<span class="type">Canvas</span>
<div class="param-description">
<p>the canvas to use as a view, optional</p>
</div>
</li>
<li class="param">
<code class="param-name">transparent=false</code>
<span class="type">Boolean</span>
<div class="param-description">
<p>the transparency of the render view, default false</p>
</div>
</li>
<li class="param">
<code class="param-name">antialias=false</code>
<span class="type">Boolean</span>
<div class="param-description">
<p>sets antialias (only applicable in chrome at the moment)</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div id="classdocs" class="tabview">
<ul class="api-class-tabs">
<li class="api-class-tab index"><a href="#index">Index</a></li>
<li class="api-class-tab methods"><a href="#methods">Methods</a></li>
</ul>
<div>
<div id="index" class="api-class-tabpanel index">
<h2 class="off-left">Item Index</h2>
<div class="index-section methods">
<h3>Methods</h3>
<ul class="index-list methods">
<li class="index-item method private">
<a href="#method_destroyTexture">destroyTexture</a>
</li>
<li class="index-item method private">
<a href="#method_handleContextLost">handleContextLost</a>
</li>
<li class="index-item method private">
<a href="#method_handleContextRestored">handleContextRestored</a>
</li>
<li class="index-item method">
<a href="#method_render">render</a>
</li>
<li class="index-item method">
<a href="#method_resize">resize</a>
</li>
<li class="index-item method private">
<a href="#method_updateTexture">updateTexture</a>
<span class="flag static">static</span>
</li>
<li class="index-item method private">
<a href="#method_updateTextures">updateTextures</a>
<span class="flag static">static</span>
</li>
</ul>
</div>
</div>
<div id="methods" class="api-class-tabpanel">
<h2 class="off-left">Methods</h2>
<div id="method_destroyTexture" class="method item private">
<h3 class="name"><code>destroyTexture</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>texture</code>
</li>
</ul><span class="paren">)</span>
</div>
<span class="flag private">private</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_renderers_webgl_WebGLRenderer.js.html#l297"><code>src/pixi/renderers/webgl/WebGLRenderer.js:297</code></a>
</p>
</div>
<div class="description">
<p>Destroys a loaded webgl texture</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">texture</code>
<span class="type"><a href="../classes/Texture.html" class="crosslink">Texture</a></span>
<div class="param-description">
<p>The texture to update</p>
</div>
</li>
</ul>
</div>
</div>
<div id="method_handleContextLost" class="method item private">
<h3 class="name"><code>handleContextLost</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>event</code>
</li>
</ul><span class="paren">)</span>
</div>
<span class="flag private">private</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_renderers_webgl_WebGLRenderer.js.html#l378"><code>src/pixi/renderers/webgl/WebGLRenderer.js:378</code></a>
</p>
</div>
<div class="description">
<p>Handles a lost webgl context</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">event</code>
<span class="type">Event</span>
<div class="param-description">
</div>
</li>
</ul>
</div>
</div>
<div id="method_handleContextRestored" class="method item private">
<h3 class="name"><code>handleContextRestored</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>event</code>
</li>
</ul><span class="paren">)</span>
</div>
<span class="flag private">private</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_renderers_webgl_WebGLRenderer.js.html#l391"><code>src/pixi/renderers/webgl/WebGLRenderer.js:391</code></a>
</p>
</div>
<div class="description">
<p>Handles a restored webgl context</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">event</code>
<span class="type">Event</span>
<div class="param-description">
</div>
</li>
</ul>
</div>
</div>
<div id="method_render" class="method item">
<h3 class="name"><code>render</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>stage</code>
</li>
</ul><span class="paren">)</span>
</div>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_renderers_webgl_WebGLRenderer.js.html#l125"><code>src/pixi/renderers/webgl/WebGLRenderer.js:125</code></a>
</p>
</div>
<div class="description">
<p>Renders the stage to its webGL view</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">stage</code>
<span class="type"><a href="../classes/Stage.html" class="crosslink">Stage</a></span>
<div class="param-description">
<p>the Stage element to be rendered</p>
</div>
</li>
</ul>
</div>
</div>
<div id="method_resize" class="method item">
<h3 class="name"><code>resize</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>width</code>
</li>
<li class="arg">
<code>height</code>
</li>
</ul><span class="paren">)</span>
</div>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_renderers_webgl_WebGLRenderer.js.html#l325"><code>src/pixi/renderers/webgl/WebGLRenderer.js:325</code></a>
</p>
</div>
<div class="description">
<p>resizes the webGL view to the specified width and height</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">width</code>
<span class="type">Number</span>
<div class="param-description">
<p>the new width of the webGL view</p>
</div>
</li>
<li class="param">
<code class="param-name">height</code>
<span class="type">Number</span>
<div class="param-description">
<p>the new height of the webGL view</p>
</div>
</li>
</ul>
</div>
</div>
<div id="method_updateTexture" class="method item private">
<h3 class="name"><code>updateTexture</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>texture</code>
</li>
</ul><span class="paren">)</span>
</div>
<span class="flag private">private</span>
<span class="flag static">static</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_renderers_webgl_WebGLRenderer.js.html#l250"><code>src/pixi/renderers/webgl/WebGLRenderer.js:250</code></a>
</p>
</div>
<div class="description">
<p>Updates a loaded webgl texture</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">texture</code>
<span class="type"><a href="../classes/Texture.html" class="crosslink">Texture</a></span>
<div class="param-description">
<p>The texture to update</p>
</div>
</li>
</ul>
</div>
</div>
<div id="method_updateTextures" class="method item private">
<h3 class="name"><code>updateTextures</code></h3>
<span class="paren">()</span>
<span class="flag private">private</span>
<span class="flag static">static</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_renderers_webgl_WebGLRenderer.js.html#l223"><code>src/pixi/renderers/webgl/WebGLRenderer.js:223</code></a>
</p>
</div>
<div class="description">
<p>Updates the textures loaded into this webgl renderer</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>
