kampos
Version:
Tiny and fast effects compositor on WebGL
2,144 lines (985 loc) • 182 kB
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset='utf-8'>
<title>kampos 0.16.0 | Documentation</title>
<meta name='description' content='Tiny and fast effects compositor on WebGL'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<link href='assets/bass.css' rel='stylesheet'>
<link href='assets/style.css' rel='stylesheet'>
<link href='assets/github.css' rel='stylesheet'>
<link href='assets/split.css' rel='stylesheet'>
</head>
<body class='documentation m0'>
<div class='flex'>
<div id='split-left' class='overflow-auto fs0 height-viewport-100'>
<div class='py1 px2'>
<h3 class='mb0 no-anchor'>kampos</h3>
<div class='mb1'><code>0.16.0</code></div>
<input
placeholder='Filter'
id='filter-input'
class='col12 block input'
spellcheck='false'
autocapitalize='off'
autocorrect='off'
type='text' />
<div id='toc'>
<ul class='list-reset h5 py1-ul'>
<li><a
href='#kampos'
class=" toggle-sibling">
Kampos
<span class='icon'>▸</span>
</a>
<div class='toggle-target display-none'>
<ul class='list-reset py1-ul pl1'>
<li class='h5'><span>Instance members</span></li>
<li><a
href='#kamposinit'
class='regular pre-open'>
#init
</a></li>
<li><a
href='#kampossetsource'
class='regular pre-open'>
#setSource
</a></li>
<li><a
href='#kamposdraw'
class='regular pre-open'>
#draw
</a></li>
<li><a
href='#kamposplay'
class='regular pre-open'>
#play
</a></li>
<li><a
href='#kamposstop'
class='regular pre-open'>
#stop
</a></li>
<li><a
href='#kamposdestroy'
class='regular pre-open'>
#destroy
</a></li>
<li><a
href='#kamposrestorecontext'
class='regular pre-open'>
#restoreContext
</a></li>
</ul>
</div>
</li>
<li><a
href='#ticker'
class=" toggle-sibling">
Ticker
<span class='icon'>▸</span>
</a>
<div class='toggle-target display-none'>
<ul class='list-reset py1-ul pl1'>
<li class='h5'><span>Instance members</span></li>
<li><a
href='#tickerstart'
class='regular pre-open'>
#start
</a></li>
<li><a
href='#tickerstop'
class='regular pre-open'>
#stop
</a></li>
<li><a
href='#tickerdraw'
class='regular pre-open'>
#draw
</a></li>
<li><a
href='#tickeradd'
class='regular pre-open'>
#add
</a></li>
<li><a
href='#tickerremove'
class='regular pre-open'>
#remove
</a></li>
</ul>
</div>
</li>
<li><a
href='#kamposconfig'
class="">
kamposConfig
</a>
</li>
<li><a
href='#kampossource'
class="">
kamposSource
</a>
</li>
<li><a
href='#effectconfig'
class="">
effectConfig
</a>
</li>
<li><a
href='#shaderconfig'
class="">
shaderConfig
</a>
</li>
<li><a
href='#attribute'
class="">
Attribute
</a>
</li>
<li><a
href='#uniform'
class="">
Uniform
</a>
</li>
<li><a
href='#textureconfig'
class="">
textureConfig
</a>
</li>
<li><a
href='#utilities'
class="h5 bold black caps toggle-sibling">
utilities
<span class='icon'>▸</span>
</a>
<div class='toggle-target display-none'>
<ul class='list-reset py1-ul pl1'>
<li class='h5'><span>Static members</span></li>
<li><a
href='#resolution'
class='regular pre-open'>
.resolution
</a></li>
<li><a
href='#mouse'
class='regular pre-open'>
.mouse
</a></li>
<li><a
href='#circle'
class='regular pre-open'>
.circle
</a></li>
</ul>
</div>
</li>
<li><a
href='#resolutionutility'
class="">
resolutionUtility
</a>
</li>
<li><a
href='#mouseutility'
class="">
mouseUtility
</a>
</li>
<li><a
href='#circleutility'
class="">
circleUtility
</a>
</li>
<li><a
href='#fbo'
class="h5 bold black caps toggle-sibling">
FBO
<span class='icon'>▸</span>
</a>
<div class='toggle-target display-none'>
<ul class='list-reset py1-ul pl1'>
<li class='h5'><span>Static members</span></li>
<li><a
href='#flowmapgrid'
class='regular pre-open'>
.flowmapGrid
</a></li>
</ul>
</div>
</li>
<li><a
href='#flowmapgridfbo'
class="">
flowmapGridFBO
</a>
</li>
<li><a
href='#effects'
class="h5 bold black caps toggle-sibling">
effects
<span class='icon'>▸</span>
</a>
<div class='toggle-target display-none'>
<ul class='list-reset py1-ul pl1'>
<li class='h5'><span>Static members</span></li>
<li><a
href='#brightnesscontrast'
class='regular pre-open'>
.brightnessContrast
</a></li>
<li><a
href='#huesaturation'
class='regular pre-open'>
.hueSaturation
</a></li>
<li><a
href='#blend'
class='regular pre-open'>
.blend
</a></li>
<li><a
href='#alphamask'
class='regular pre-open'>
.alphaMask
</a></li>
<li><a
href='#duotone'
class='regular pre-open'>
.duotone
</a></li>
<li><a
href='#displacement'
class='regular pre-open'>
.displacement
</a></li>
<li><a
href='#turbulence'
class='regular pre-open'>
.turbulence
</a></li>
<li><a
href='#kaleidoscope'
class='regular pre-open'>
.kaleidoscope
</a></li>
<li><a
href='#deformation'
class='regular pre-open'>
.deformation
</a></li>
<li><a
href='#channelsplit'
class='regular pre-open'>
.channelSplit
</a></li>
<li><a
href='#slitscan'
class='regular pre-open'>
.slitScan
</a></li>
<li><a
href='#flowmapgriddisplacement'
class='regular pre-open'>
.flowmapGridDisplacement
</a></li>
</ul>
</div>
</li>
<li><a
href='#brightnesscontrasteffect'
class="">
brightnessContrastEffect
</a>
</li>
<li><a
href='#huesaturationeffect'
class="">
hueSaturationEffect
</a>
</li>
<li><a
href='#blendeffect'
class="">
blendEffect
</a>
</li>
<li><a
href='#alphamaskeffect'
class="">
alphaMaskEffect
</a>
</li>
<li><a
href='#duotoneeffect'
class="">
duotoneEffect
</a>
</li>
<li><a
href='#displacementeffect'
class="">
displacementEffect
</a>
</li>
<li><a
href='#turbulenceeffect'
class="">
turbulenceEffect
</a>
</li>
<li><a
href='#kaleidoscopeeffect'
class="">
kaleidoscopeEffect
</a>
</li>
<li><a
href='#deformationeffect'
class="">
deformationEffect
</a>
</li>
<li><a
href='#channelspliteffect'
class="">
channelSplitEffect
</a>
</li>
<li><a
href='#slitscaneffect'
class="">
slitScanEffect
</a>
</li>
<li><a
href='#flowmapgriddisplacementeffect'
class="">
flowmapGridDisplacementEffect
</a>
</li>
<li><a
href='#transitions'
class="h5 bold black caps toggle-sibling">
transitions
<span class='icon'>▸</span>
</a>
<div class='toggle-target display-none'>
<ul class='list-reset py1-ul pl1'>
<li class='h5'><span>Static members</span></li>
<li><a
href='#fadetransition'
class='regular pre-open'>
.fadeTransition
</a></li>
<li><a
href='#displacementtransition'
class='regular pre-open'>
.displacementTransition
</a></li>
<li><a
href='#dissolvetransition'
class='regular pre-open'>
.dissolveTransition
</a></li>
<li><a
href='#shapetransition'
class='regular pre-open'>
.shapeTransition
</a></li>
</ul>
</div>
</li>
<li><a
href='#fadetransitioneffect'
class="">
fadeTransitionEffect
</a>
</li>
<li><a
href='#displacementtransitioneffect'
class="">
displacementTransitionEffect
</a>
</li>
<li><a
href='#dissolvetransitioneffect'
class="">
dissolveTransitionEffect
</a>
</li>
<li><a
href='#shapetransitioneffect'
class="">
shapeTransitionEffect
</a>
</li>
<li><a
href='#perlin-noise-3d'
class="">
perlin-noise-3d
</a>
</li>
<li><a
href='#cellular-noise-3d'
class="">
cellular-noise-3d
</a>
</li>
<li><a
href='#simplex-3d'
class="">
simplex-3d
</a>
</li>
<li><a
href='#simplex-2d'
class="">
simplex-2d
</a>
</li>
<li><a
href='#white'
class="">
white
</a>
</li>
<li><a
href='#fboconfig'
class="">
fboConfig
</a>
</li>
<li><a
href='#planeconfig'
class="">
planeConfig
</a>
</li>
<li><a
href='#texture'
class="">
Texture
</a>
</li>
</ul>
</div>
<div class='mt1 h6 quiet'>
<a href='https://documentation.js.org/reading-documentation.html'>Need help reading this?</a>
</div>
</div>
</div>
<div id='split-right' class='relative overflow-auto height-viewport-100'>
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='clearfix'>
<h3 class='fl m0' id='kampos'>
Kampos
</h3>
</div>
<p>Initialize a WebGL target with effects.</p>
<div class='pre p1 fill-light mt0'>new Kampos(config: <a href="#kamposconfig">kamposConfig</a>)</div>
<div class='py1 quiet mt1 prose-big'>Parameters</div>
<div class='prose'>
<div class='space-bottom0'>
<div>
<span class='code bold'>config</span> <code class='quiet'>(<a href="#kamposconfig">kamposConfig</a>)</code>
</div>
</div>
</div>
<div class='py1 quiet mt1 prose-big'>Example</div>
<pre class='p1 overflow-auto round fill-light'><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Kampos</span>, effects} <span class="hljs-keyword">from</span> <span class="hljs-string">'kampos'</span>;
<span class="hljs-keyword">const</span> target = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#canvas'</span>);
<span class="hljs-keyword">const</span> hueSat = effects.<span class="hljs-title function_">hueSaturation</span>();
<span class="hljs-keyword">const</span> kampos = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Kampos</span>({target, <span class="hljs-attr">effects</span>: [hueSat]});</pre>
<div class='py1 quiet mt1 prose-big'>Instance Members</div>
<div class="clearfix">
<div class='border-bottom' id='kamposinit'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>init(config?)</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>Initializes a Kampos instance.
This is called inside the constructor,
but can be called again after effects have changed
or after <a href="#kamposdestroy">Kampos#destroy</a>.</p>
<div class='pre p1 fill-light mt0'>init(config: <a href="#kamposconfig">kamposConfig</a>?): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></div>
<div class='py1 quiet mt1 prose-big'>Parameters</div>
<div class='prose'>
<div class='space-bottom0'>
<div>
<span class='code bold'>config</span> <code class='quiet'>(<a href="#kamposconfig">kamposConfig</a>?)</code>
defaults to
<code>this.config</code>
</div>
</div>
</div>
<div class='py1 quiet mt1 prose-big'>Returns</div>
<code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code>:
success whether initializing of the context and program were successful
</section>
</div>
</div>
<div class='border-bottom' id='kampossetsource'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>setSource(source, skipTextureCreation?)</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>Set the source config.</p>
<div class='pre p1 fill-light mt0'>setSource(source: (ArrayBufferView | ImageData | <a href="https://developer.mozilla.org/docs/Web/API/HTMLImageElement">HTMLImageElement</a> | <a href="https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement">HTMLCanvasElement</a> | <a href="https://developer.mozilla.org/docs/Web/API/HTMLVideoElement">HTMLVideoElement</a> | ImageBitmap | <a href="#kampossource">kamposSource</a>), skipTextureCreation: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>?)</div>
<div class='py1 quiet mt1 prose-big'>Parameters</div>
<div class='prose'>
<div class='space-bottom0'>
<div>
<span class='code bold'>source</span> <code class='quiet'>((ArrayBufferView | ImageData | <a href="https://developer.mozilla.org/docs/Web/API/HTMLImageElement">HTMLImageElement</a> | <a href="https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement">HTMLCanvasElement</a> | <a href="https://developer.mozilla.org/docs/Web/API/HTMLVideoElement">HTMLVideoElement</a> | ImageBitmap | <a href="#kampossource">kamposSource</a>))</code>
</div>
</div>
<div class='space-bottom0'>
<div>
<span class='code bold'>skipTextureCreation</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>?)</code>
defaults to
<code>false</code>
</div>
</div>
</div>
<div class='py1 quiet mt1 prose-big'>Example</div>
<pre class='p1 overflow-auto round fill-light'><span class="hljs-keyword">const</span> media = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#video'</span>);
kampos.<span class="hljs-title function_">setSource</span>(media);</pre>
</section>
</div>
</div>
<div class='border-bottom' id='kamposdraw'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>draw(time?)</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>Draw current scene.</p>
<div class='pre p1 fill-light mt0'>draw(time: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>?)</div>
<div class='py1 quiet mt1 prose-big'>Parameters</div>
<div class='prose'>
<div class='space-bottom0'>
<div>
<span class='code bold'>time</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>?)</code>
</div>
</div>
</div>
</section>
</div>
</div>
<div class='border-bottom' id='kamposplay'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>play(beforeDraw?, afterDraw?)</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>Starts the animation loop.</p>
<p>If a <a href="#ticker">Ticker</a> is used, this instance will be added to that <a href="#ticker">Ticker</a>.</p>
<div class='pre p1 fill-light mt0'>play(beforeDraw: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">function</a>?, afterDraw: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">function</a>?)</div>
<div class='py1 quiet mt1 prose-big'>Parameters</div>
<div class='prose'>
<div class='space-bottom0'>
<div>
<span class='code bold'>beforeDraw</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">function</a>?)</code>
function to run before each draw call
</div>
</div>
<div class='space-bottom0'>
<div>
<span class='code bold'>afterDraw</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">function</a>?)</code>
function to run after each draw call
</div>
</div>
</div>
</section>
</div>
</div>
<div class='border-bottom' id='kamposstop'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>stop()</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>Stops the animation loop.</p>
<p>If a <a href="#ticker">Ticker</a> is used, this instance will be removed from that <a href="#ticker">Ticker</a>.</p>
<div class='pre p1 fill-light mt0'>stop()</div>
</section>
</div>
</div>
<div class='border-bottom' id='kamposdestroy'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>destroy(keepState?)</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>Stops the animation loop and frees all resources.</p>
<div class='pre p1 fill-light mt0'>destroy(keepState: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>?)</div>
<div class='py1 quiet mt1 prose-big'>Parameters</div>
<div class='prose'>
<div class='space-bottom0'>
<div>
<span class='code bold'>keepState</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>?)</code>
for internal use.
</div>
</div>
</div>
</section>
</div>
</div>
<div class='border-bottom' id='kamposrestorecontext'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>restoreContext()</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>Restore a lost WebGL context fot the given target.
This will replace canvas DOM element with a fresh clone.</p>
<div class='pre p1 fill-light mt0'>restoreContext(): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></div>
<div class='py1 quiet mt1 prose-big'>Returns</div>
<code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code>:
success whether forcing a context restore was successful
</section>
</div>
</div>
</div>
</section>
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='clearfix'>
<h3 class='fl m0' id='ticker'>
Ticker
</h3>
</div>
<p>Initialize a ticker instance for batching animation of multiple <a href="#kampos">Kampos</a> instances.</p>
<div class='pre p1 fill-light mt0'>new Ticker()</div>
<div class='py1 quiet mt1 prose-big'>Instance Members</div>
<div class="clearfix">
<div class='border-bottom' id='tickerstart'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>start()</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>Starts the animation loop.</p>
<div class='pre p1 fill-light mt0'>start()</div>
</section>
</div>
</div>
<div class='border-bottom' id='tickerstop'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>stop()</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>Stops the animation loop.</p>
<div class='pre p1 fill-light mt0'>stop()</div>
</section>
</div>
</div>
<div class='border-bottom' id='tickerdraw'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>draw(time)</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>Invoke <code>.draw()</code> on all instances in the pool.</p>
<div class='pre p1 fill-light mt0'>draw(time: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</div>
<div class='py1 quiet mt1 prose-big'>Parameters</div>
<div class='prose'>
<div class='space-bottom0'>
<div>
<span class='code bold'>time</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
</div>
</div>
</div>
</section>
</div>
</div>
<div class='border-bottom' id='tickeradd'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>add(instance)</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>Add an instance to the pool.</p>
<div class='pre p1 fill-light mt0'>add(instance: <a href="#kampos">Kampos</a>)</div>
<div class='py1 quiet mt1 prose-big'>Parameters</div>
<div class='prose'>
<div class='space-bottom0'>
<div>
<span class='code bold'>instance</span> <code class='quiet'>(<a href="#kampos">Kampos</a>)</code>
</div>
</div>
</div>
</section>
</div>
</div>
<div class='border-bottom' id='tickerremove'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>remove(instance)</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>Remove an instance form the pool.</p>
<div class='pre p1 fill-light mt0'>remove(instance: <a href="#kampos">Kampos</a>)</div>
<div class='py1 quiet mt1 prose-big'>Parameters</div>
<div class='prose'>
<div class='space-bottom0'>
<div>
<span class='code bold'>instance</span> <code class='quiet'>(<a href="#kampos">Kampos</a>)</code>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</section>
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='clearfix'>
<h3 class='fl m0' id='kamposconfig'>
kamposConfig
</h3>
</div>
<div class='pre p1 fill-light mt0'>kamposConfig</div>
<p>
Type:
<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>
</p>
<div class='py1 quiet mt1 prose-big'>Properties</div>
<div>
<div class='space-bottom0'>
<span class='code bold'>target</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement">HTMLCanvasElement</a>)</code>
</div>
<div class='space-bottom0'>
<span class='code bold'>effects</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a><<a href="#effectconfig">effectConfig</a>>)</code>
</div>
<div class='space-bottom0'>
<span class='code bold'>plane</span> <code class='quiet'>(<a href="#planeconfig">planeConfig</a>)</code>
</div>
<div class='space-bottom0'>
<span class='code bold'>fbo</span> <code class='quiet'>(<a href="#fboconfig">fboConfig</a>)</code>
</div>
<div class='space-bottom0'>
<span class='code bold'>ticker</span> <code class='quiet'>(<a href="#ticker">Ticker</a>?)</code>
</div>
<div class='space-bottom0'>
<span class='code bold'>noSource</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>?)</code>
</div>
<div class='space-bottom0'>
<span class='code bold'>beforeDraw</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">function</a>?)</code>
: function to run before each draw call. If it returns
<code>false</code>
<a href="kampos#draw">kampos#draw</a>
will not be called.
</div>
<div class='space-bottom0'>
<span class='code bold'>afterDraw</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">function</a>?)</code>
: function to run after each draw call.
</div>
<div class='space-bottom0'>
<span class='code bold'>onContextLost</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">function</a>?)</code>
</div>
<div class='space-bottom0'>
<span class='code bold'>onContextRestored</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">function</a>?)</code>
</div>
<div class='space-bottom0'>
<span class='code bold'>onContextCreationError</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">function</a>?)</code>
</div>
</div>
</section>
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='clearfix'>
<h3 class='fl m0' id='kampossource'>
kamposSource
</h3>
</div>
<div class='pre p1 fill-light mt0'>kamposSource</div>
<p>
Type:
<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>
</p>
<div class='py1 quiet mt1 prose-big'>Properties</div>
<div>
<div class='space-bottom0'>
<span class='code bold'>media</span> <code class='quiet'>((ArrayBufferView | ImageData | <a href="https://developer.mozilla.org/docs/Web/API/HTMLImageElement">HTMLImageElement</a> | <a href="https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement">HTMLCanvasElement</a> | <a href="https://developer.mozilla.org/docs/Web/API/HTMLVideoElement">HTMLVideoElement</a> | ImageBitmap))</code>
</div>
<div class='space-bottom0'>
<span class='code bold'>width</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
</div>
<div class='space-bottom0'>
<span class='code bold'>height</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
</div>
<div class='space-bottom0'>
<span class='code bold'>shouldUpdate</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>?)</code>
: whether to resample the source on each draw call
</div>
</div>
</section>
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='clearfix'>
<h3 class='fl m0' id='effectconfig'>
effectConfig
</h3>
</div>
<div class='pre p1 fill-light mt0'>effectConfig</div>
<p>
Type:
<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>
</p>
<div class='py1 quiet mt1 prose-big'>Properties</div>
<div>
<div class='space-bottom0'>
<span class='code bold'>vertex</span> <code class='quiet'>(<a href="#shaderconfig">shaderConfig</a>)</code>
</div>
<div class='space-bottom0'>
<span class='code bold'>fragment</span> <code class='quiet'>(<a href="#shaderconfig">shaderConfig</a>)</code>
</div>
<div class='space-bottom0'>
<span class='code bold'>attributes</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a><<a href="#attribute">Attribute</a>>)</code>
</div>
<div class='space-bottom0'>
<span class='code bold'>uniforms</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a><<a href="#uniform">Uniform</a>>)</code>
</div>
<div class='space-bottom0'>
<span class='code bold'>varying</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
</div>
<div class='space-bottom0'>
<span class='code bold'>textures</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a><<a href="#textureconfig">textureConfig</a>>)</code>
</div>
</div>
</section>
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='clearfix'>
<h3 class='fl m0' id='shaderconfig'>
shaderConfig
</h3>
</div>
<div class='pre p1 fill-light mt0'>shaderConfig</div>
<p>
Type:
<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>
</p>
<div class='py1 quiet mt1 prose-big'>Properties</div>
<div>
<div class='space-bottom0'>
<span class='code bold'>main</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?)</code>
</div>
<div class='space-bottom0'>
<span class='code bold'>source</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?)</code>
</div>
<div class='space-bottom0'>
<span class='code bold'>constant</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?)</code>
</div>
<div class='space-bottom0'>
<span class='code bold'>uniform</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>?)</code>
: mapping variable name to type
</div>
<div class='space-bottom0'>
<span class='code bold'>attribute</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>?)</code>
: mapping variable name to type
</div>
</div>
</section>
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='clearfix'>
<h3 class='fl m0' id='attribute'>
Attribute
</h3>
</div>
<div class='pre p1 fill-light mt0'>Attribute</div>
<p>
Type:
<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>
</p>
<div class='py1 quiet mt1 prose-big'>Properties</div>
<div>
<div class='space-bottom0'>
<span class='code bold'>extends</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
: name of another attribute to extend
</div>
<div class='space-bottom0'>
<span class='code bold'>name</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
: name of attribute to use inside the shader
</div>
<div class='space-bottom0'>
<span class='code bold'>size</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
: attribute size - number of elements to read on each iteration
</div>
<div class='space-bottom0'>
<span class='code bold'>type</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
</div>
<div class='space-bottom0'>
<span class='code bold'>data</span> <code class='quiet'>(ArrayBufferView)</code>
</div>
</div>
</section>
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='clearfix'>
<h3 class='fl m0' id='uniform'>
Uniform
</h3>
</div>
<div class='pre p1 fill-light mt0'>Uniform</div>
<p>
Type:
<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>
</p>
<div class='py1 quiet mt1 prose-big'>Properties</div>
<div>
<div class='space-bottom0'>
<span class='code bold'>name</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
: name of the uniform to be used in the shader
</div>
<div class='space-bottom0'>
<span class='code bold'>size</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>?)</code>
: defaults to
<code>data.length</code>
</div>
<div class='space-bottom0'>
<span class='code bold'>type</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
</div>
<div class='space-bottom0'>
<span cla