index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Ultraviolet</title>
	<style>
		@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@800&display=swap');
	</style>
	<script src="https://picfunk.art/codearea.js"></script>
	<link rel="shortcut icon" href="./icon.png" />
	<style>
		*{ box-sizing: border-box; text-size-adjust: none; }
		html{
			background: linear-gradient(70deg, #05a -100%, #70a 100%);
			min-height: 100%; display: flex; flex-direction: column;
			padding: 16px;
			padding-top: 158px;
		}
		body{
			margin: 0;
			border-radius: 0 0 16px 16px;
			background: #000a;
			color: #ddd; padding: 16px; font: 400 16px Arial;
			line-height: 24px;
			user-select: none;
		}
		h1{
			position: absolute; top: 0; left: 0; width: 100%;
			color: #eee; font: 900 40px 'Roboto Slab', Arial;
			padding: 50px; margin: 0;
			line-height: 50px;
			background: linear-gradient(110deg, #fff4 60%, #000c 60%);
			clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
		}
		h1 > b{color:#000}
		c{
			font-family: Consolas, monospace;
			padding: 0 2px; background: #fff3; border-radius: 6px;
			user-select: text; font-weight: 700;
		}
		k{
			font-family: Consolas, monospace;
			padding: 0 2px; background: #fff3; border-radius: 6px; padding: 4px;
			font-weight: 700;
			display: block;
			margin-top: 8px;
		}
		k t{ color: #c4f }
		k n{ color: #e52 }
		k m{ color: #dd8 }
		k d{ color: #bbf }
		k o{ color: #ffffff4d }
		hr{ border: none; height: 2px; background: #fff5; margin: 2.5em 0 }
		[refto]{ text-decoration: underline; cursor: pointer }
		#docs{ padding-top: 16px }
		#docs > div{ display: none }
		#docs > h2{ margin: 0; font-family: Consolas, monospace; cursor: pointer; text-decoration: underline; }
		#docs > h2:not(#docsselected){ opacity: .5; font-size: 16px }
		code-area{
			font-family: Consolas, monospace; font-weight: 700;
			padding: 8px; background: #fff3; border-radius: 6px;
			line-height: 1.5;
		}
		::selection{background:#8888}
		nav{
			flex-wrap: wrap; gap: 1px;
			border-radius: 16px 16px 0 0;
			color: #ddd; font: 700 16px Arial;
			user-select: none;
			margin-bottom: 1px;
			display: flex;
			font-size: 0.9em;
			overflow: clip;
			flex-shrink: 0;
		}
		nav > div{
			background: #000a;
			flex: 1 1px; cursor: pointer;
			height: 30px; line-height: 30px;
			text-align: center;
			-webkit-tap-highlight-color: #0000;
		}
		@media screen and (max-width: 470px) { nav > div{ min-width: 49%; } }
		#selected{
			background: #fff; color: black;
		}
		iframe{
			width: 100%; outline: none;
			border: none; border-top: 1px #fff8 solid;
			border-radius: 0 0 6px 6px;
			aspect-ratio: 1/1; max-height: 400px;
			background: #000;
		}
		#sandbox{ border-radius: 6px 6px 0 0; max-height: 525px; overflow: auto; }
		::-webkit-scrollbar{width:0}
		li{margin:.5em 0}
	</style>
</head>
<h1><b>u</b>ltra<b>v</b>iolet</h1>
<nav>
	<div id="selected" node="gettingStarted">Getting started</div>
	<div node="features">Features</div>
	<div node="docs">Docs</div>
	<div onclick="window.open('https://github.com/BlobTheKat/ultraviolet','_blank')">Contribute</div>
</nav>
<div id="gettingStarted">
	Super ⚡ performant 2D graphics library backed by <c>WebGL2</c><br><br>
	<code-area lang="html" disabled>
&lt;script src='https://ultraviolet.js.org/uv.min.js'>&lt;/script>
&lt;canvas width='500' height='300' id='canvas'>&lt;/canvas>
&lt;script>
const ctx = setTargetCanvas(document.getElementById('canvas'))
// ...
&lt;/script>
	</code-area><br>
	This library exposes drawing functionalities much like OpenGL: Build meshes and draw them with GLSL shaders<br>
	At the same time making best use of JS paradigm and APIs<br><br>
	<code-area lang="js" id="sandbox">
// autoCanvas() is a convenience function to replace setTargetCanvas()
// Make sure to call it before anything else
const ctx = autoCanvas(everyFrame)

const cat = Texture().fromSrc('./sample.png')

let rot = 0
function everyFrame(width, height, dt){
	rot += dt
	// Edit me!
	ctx.translate(width/2, height/2)
	const mesh = makeCatpheus(160 + Math.sin(rot*4)*10, rot)
	ctx.draw(mesh, cat)
	drawParticles(ctx.sub(), height, dt)
}

// You can create one mesh ahead of time and pre-upload it for increased performance
// const mesh = makeCatpheus().upload()
function makeCatpheus(rad = 170, rot = 0){
	const msh = Mesh()
	msh.rotate(rot)
	msh.addRect(-100, -100, 200, 200)
	msh.rotate(-rot*2)
	for(let i = 0; i &lt; 16; i++){
		const wave = Math.sin((PI2*(i/16) - rot)*5)*15
		// addRect(x, y, width, height, uv, effect, tint_r, tint_g, tint_b, tint_a)
		// Here we imagine the image to be broken into a 4x4 grid
		// and we choose a sub-square based on i
		msh.addRect(-10, rad + wave, 20, 20, uv(i%4/4, Math.floor(i/4)/4, .25, .25))
		msh.rotate(PI2/16)
	}
	return msh.upload()
}

// Shaders! The particles change color as they fall
const particleShader = Shader(`void main(){
	color = texture(tex0, uv.xy);
	float x = abs(effect-.5);
	color.rgb = (color.rrr*x - color.bbb*x + color.bbb*(1.-x))*.3;
}`, [NORM])
const particles = new Float32Array(100)
for(let i = 0; i &lt; particles.length; i++)
	particles[i] = Math.random()

const additiveBlend = Blend(ONE, ADD, ONE) // src*1 + dst*1
function drawParticles(subCtx, h, dt){
	const mesh = Mesh()
	subCtx.shader = particleShader
	// Go left
	mesh.translate(-202,0)
	let prevY = 0
	for(let i = 0; i &lt; 100; i++){
		const pos = particles[i], pos2 = pos*pos
		mesh.translate(4, -(pos2-prevY)*(h+16))
		mesh.addRect(-8, -8, 16, 16, _, (pos+i/5)%1)
		prevY = pos2
		particles[i] = (pos+dt/2)%1
	}
	subCtx.translate(0,h/2+8)
	subCtx.blend = additiveBlend
	subCtx.draw(mesh, cat)
}
	</code-area>
	<iframe sandbox="allow-scripts" id="sandboxi"></iframe>
</div>
<div id="features" hidden>

<li>Textures & texture arrays:</li>
<code-area lang="js" disabled>
const flowerTex = Texture()
flowerTex.from(fetch('./flower.png').then(a => a.blob()))

const spriteList = Texture(16, 16, 100)
for(let i = 0; i &lt; 100; i++)
	spriteList.put(fetch(`./sprite${i}.png`).then(a => a.blob()), 0, 0, i)
</code-area><br>
<li>Many texture formats including integer textures:</li>
<code-area lang="js" disabled>
const flowerTex = Texture()
flowerTex.fromSrc('./flower.png', Formats.RGBA4)
flowerTex.fromSrc('./flower.png', Formats.RGBA565)
flowerTex.fromSrc('./flower.png', Formats.RG16F)
flowerTex.fromSrc('./flower.png', Formats.R32)
</code-area><br>
<li>Texture customization (wrap mode, filtering, mipmaps):</li>
<code-area lang="js" disabled>
flowerTex.fromSrc('./flower.png', _, PIXELATED | REPEAT)
flowerTex.options = REPEAT_X | REPEAT_MIRRORED_Y | MIPMAPS | UPSCALE_PIXELATED
</code-area><br>
<li>Draw to other targets or textures:</li>
<code-area lang="js" disabled>
const toFlower = Target(flowerTex)
toFlower.draw(...)
ctx.draw(..., [flowerTex]) // Will render updated texture
</code-area><br>
<li>Read pixels from a target or canvas:</li>
<code-area lang="js" disabled>
function colorPicker(x, y){
	const [r, g, b, a] = ctx.getData(x, y, 1, 1)
	return {r, g, b, a}
}
</code-area><br>
<li>Canvas2D-like transformations (<c>.translate()</c>, <c>.scale()</c>, <c>.rotate()</c>, ...):</li>
<code-area lang="js" disabled>
ctx.translate(ctx.width/2, ctx.height/2)
ctx.rotate(PI/2)
ctx.scale(2)
ctx.draw(...)
</code-area><br>
<li>GLSL Shaders:</li>
<code-area lang="js" disabled>
const sh = Shader(`void main(){
	color = texture(tex0, uv.xy);
	if(color.a &lt; .5) discard;
}`, [NORM])
ctx.shader = sh
</code-area><br>
<li>Meshes, allowing fast bulk-drawing of thousands or millions of sprites:</li>
<code-area lang="js" disabled>
function makeMesh(){
	const msh = Mesh()
	msh.scale(10)
	msh.addRect(...)
	msh.addRect(...)
	for(let i = 0; i &lt; 1_000_000; i++) msh.addRect(...)
	return msh.upload()
}
const bigMesh = makeMesh()
function everyFrame(){
	ctx.draw(bigMesh, flowerTex)
}
</code-area><br>
<li>Custom-use sprite properties (for use within shaders):</li>
<code-area lang="js" disabled>
const sh = Shader(`void main(){
	// tint is one such custom-use property
	color = texture(tex0, uv.xy) * tint;
}`, [NORM])
ctx.shader = sh
const msh = Mesh()
msh.addRect(0, 0, 100, 100, _, _, /*rgba*/ 1, 0, 0, 1)
...

ctx.draw(msh, flowerTex)
</code-area><br>
<li>Mesh export/importing:</li>
<code-area lang="js" disabled>
// Let's send the mesh to a web worker to do some processing in parallel
const f32arr = msh.export()
worker.postMessage(f32arr)
worker.onmessage = ({data}) => {
	const msh = Mesh()
	msh.import(data)
	// Work is done, let's draw!
}
</code-area><br>
<li>Stencil buffer access for clipping:</li>
<code-area lang="js" disabled>
ctx.draw(clipShape, _, DONT_DRAW | SET)
// New mesh will only be drawn where it would intersect with clipShape
ctx.draw(mesh, _, RGBA | IF_UNSET)
</code-area><br>
<li>Customizable blend algorithms:</li>
<code-area lang="js" disabled>
// dst = src*(1-dst.a) + dst*1
const additiveBlendBehind = Blend(ONE_MINUS_DST_ALPHA, ADD, ONE)
ctx.blend = additiveBlendBehind
ctx.draw(mesh, flowerTex)
// or a prebuilt one
ctx.blend = Blend.REPLACE
ctx.draw(mesh, flowerTex)
</code-area><br>
<li>8 textures and 6 uniforms per draw operation:</li>
<code-area lang="js" disabled>
const s = 1, t = 2, // accessible as `uniform float s, t;` in shader
	u = [7,8,9,10] // accessible as `uniform vec4 u;` in shader
// Textures available as tex0,tex1,...,tex15 in shader
// If your shader uses a specific texture type make sure to pass the correct one in .draw()!
ctx.draw(mesh, [tex0, tex1, tex2, tex3, ...], s, t, u[0], u[1], u[2], u[3])
</code-area><br>
<li>Custom sprite geometry</li>
<code-area lang="js" disabled>
const star = Geometry(TRIANGLE_FAN, [.5, .5, .5, 1, ...]) // normalize values to [0,1] for better results
ctx.geometry = star
// All of mesh's sprites will be drawn as a star shape
ctx.draw(mesh, ...)
</code-area><br>
Thank you for coming to my TED talk.

</div>
<div id="docs" hidden>
	<h2 refto="exports">Library exports</h2>
	<h2 refto="constants">Constants</h2>
	<h2 refto="texture">Texture</h2>
	<h2 refto="uv">UV</h2>
	<h2 refto="mesh">Mesh</h2>
	<h2 refto="target">Target</h2>
	<h2 refto="transformable">Transformable (wip)</h2>
	<h2 refto="shader">Shader</h2>
	<h2 refto="blend">Blend</h2>
	<hr>
	<div id="exports">
		Sets the canvas to initialise the drawing context from.<br>
		You must call this or <c>autoCanvas()</c> before making use of any other function or method
		<k id="stc"><m>setTargetCanvas</m>(canvas: <t>HTMLCanvasElement</t>) -> <t refto="target">Target</t></k>
		<hr>
		Creates a new canvas and appends it to the body.<br>
		Automatically resizes the canvas to fit the screen and transforms it to CSS-pixel space for you<br>
		Will call the function <c>renderFn</c> every frame, with the canvas's width/height in CSS-pixel units, as well as the seconds passed since the last frame in <c>dt</c><br>
		You must call this or <c>setTargetCanvas()</c> before making use of any other function or method
		<k><m>autoCanvas</m>(renderFn: (width: <t>number</t>, height: <t>number</t>, dt: <t>number</t>) => <t>void</t>) -> <t refto="target">Target</t></k>
		<hr>
		Construct a new uninitialised texture object. See <b refto="texture">its section</b> for more information.
		<k><m>Texture</m>(width?: <t>int</t>, height?: <t>int</t>, layers?: <t>int</t>, format?: <n>valueof</n> <t refto="constants">Formats</t>, options?: <t refto="texture">TextureOptions</t>) -> <t refto="texture">Texture</t></k>
		<hr>
		Construct a new mesh. See <b refto="mesh">its section</b> for more information.
		<k><m>Mesh</m>() -> <t refto="mesh">Mesh</t></k>
		<hr>
		Construct a new target from a size or texture. See <b refto="target">its section</b> for more information.
		<k><m>Target</m>(width?: <t>int</t>, height?: <t>int</t>, format?: <n>valueof</n> <t refto="constants">Formats</t>, stencil?: <t>boolean</t>) -> <t refto="target">Target</t><br>
		<m>Target</m>(texture: <t refto="texture">Texture</t>, layer?: <t>int</t>, stencil?: <t>boolean</t>) -> <t refto="target">Target</t></k>
		<hr>
		Construct a new shader from GLSL source code. See <b refto="shaders">its section</b> for more information.
		<k><m>Shader</m>(glslSource: <t>string</t>, textureTypes: <t>Array</t>&lt;<d>NORM</d>? | <d>FLOAT</d>? | <d>UINT</d>? | <d>LAYERED</d>?>, outputType: <d>NORM</d>? | <d>FLOAT</d>? | <d>UINT</d>?) -> <t refto="shaders">Shader</t></k>
		<hr>
		Represent a uv (A uv is a location within a texture, think a crop rectangle for a texture). See <b refto="uv">its section</b> for more information.
		<k><m>uv</m>(x?: <t>number</t>, y?: <t>number</t>, w?: <t>number</t>, h?: <t>number</t>, layer?: <t>number</t>) -> <t refto="uv">UV</t></k>
		<hr>
		Create a blend function. See <b refto="blend">its section</b> for more information.
		<k><m>Blend</m>(srcMult: <t refto="blend">BlendMultiplier</t>, combineOp: <t refto="blend">BlendCombine</t>, dstMult: <t refto="blend">BlendMultiplier</t>) -> <t refto="blend">Blend</t></k>
		<hr>
		Change the output canvas's color space. <c>display-p3</c> allows slightly more vibrant colors than <c>srgb</c>, while sacrificing equally in color precision
		<k><m>colorSpace</m>(space: <t style="color:#ea2">'srgb'</t> | <t style="color:#ea2">'display-p3'</t>)</k>
		<hr>
		<k><o>The underlying WebGL2 context powering the library</o>
		<d>gl</d>: <t>WebGL2RenderingContext</t><br><d>_</d> = <t>undefined</t><br><d>PI</d> = <d style="color:#ae2">3.141592653589793</d><br><d>PI2</d> = PI*<d style="color:#ae2">2</d></k><br>
		More constants are exposed as library exports, see the <b refto="constants">constants section</b>
	</div>
	<div id="constants">
		<k><d>_</d> = <t>undefined</t><br><d>PI</d> = <d style="color:#ae2">3.141592653589793</d><br><d>PI2</d> = PI*<d style="color:#ae2">2</d></k>
		<k><d>Formats</d> = {<br>
			&nbsp;&nbsp;<o>// Normal 8-bit-per-channel formats</o><br>
			&nbsp;&nbsp;<d>R</d>, <d>RG</d>, <d>RGB</d>, <d>RGBA</d>,<br>
			&nbsp;&nbsp;<o>// Varying bits shared between different channels<br>
			&nbsp;&nbsp;// Upload data by packing channels into 8/16/32 bit ints</o><br>
			&nbsp;&nbsp;<d>RGB565</d>, <d>RGB5_A1</d>, <d>RGB10_A2</d>,<br>
			&nbsp;&nbsp;<d>RGBA4</d>, <d>R11F_G11F_B10F</d>, <d>RGB9_E5</d>,<br>
			&nbsp;&nbsp;<o>// Integer 8, 16 and 32 bit textures<br>
			&nbsp;&nbsp;// UINT or UINT|ARRAY must be used in the array passed to Shader's textureTypes parameter</o><br>
			&nbsp;&nbsp;<d>R8</d>, <d>RG8</d>, <d>RGB8</d>, <d>RGBA8</d>,<br>
			&nbsp;&nbsp;<d>R16</d>, <d>RG16</d>, <d>RGB16</d>, <d>RGBA16</d>,<br>
			&nbsp;&nbsp;<d>R32</d>, <d>RG32</d>, <d>RGB32</d>, <d>RGBA32</d>,<br>
			&nbsp;&nbsp;<o>// half-precision float textures, upload as Uint16Array</o><br>
			&nbsp;&nbsp;<d>R16F</d>, <d>RG16F</d>, <d>RGB16F</d>, <d>RGBA16F</d>,<br>
			&nbsp;&nbsp;<o>// half-precision float textures that allow you<br>
			&nbsp;&nbsp;// to upload data via Float32Arrays</o><br>
			&nbsp;&nbsp;<d>R16F_32F</d>, <d>RG16F_32F</d>, <d>RGB16F_32F</d>, <d>RGBA16F_32F</d>,<br>
			&nbsp;&nbsp;<o>// single-precision float textures</o><br>
			&nbsp;&nbsp;<d>R32F</d>, <d>RG32F</d>, <d>RGB32F</d>, <d>RGBA32F</d><br>
		}</k>
		<k>
			<o>// Constants used by third argument to (Target).draw()</o><br>
			<d>R</d>, <d>G</d>, <d>B</d>, <d>A</d>, <d>RGB</d> = R|G|B, <d>RGBA</d> = R|G|B|A<br>
			<d>IF_SET</d>, <d>IF_UNSET</d>, <d>DONT_DRAW</d><br>
			<d>UNSET</d>, <d>SET</d>, <d>FLIP</d><br>
			<d>DITHERING</d><br><br>
			<o>// Constants used by BlendMultiplier</o><br>
			<d>ZERO</d><br>
			<d>RGB_ONE</d>, <d>A_ONE</d><br>
			<d>ONE</d> = RGB_ONE|A_ONE</d><br>
			<d>RGB_SRC</d>, <d>A_SRC</d>, <d>SRC</d> = RGB_SRC|A_SRC<br>
			<d>RGB_ONE_MINUS_SRC</d>, <d>A_ONE_MINUS_SRC</d><br>
			<d>ONE_MINUS_SRC</d> = RGB_ONE_MINUS_SRC|A_ONE_MINUS_SRC<br>
			<d>RGB_SRC_ALPHA</d>, <d>SRC_ALPHA</d> = RGB_SRC_ALPHA|A_SRC<br>
			<d>RGB_ONE_MINUS_SRC_ALPHA</d><br>
			<d>ONE_MINUS_SRC_ALPHA</d> = RGB_ONE_MINUS_SRC_ALPHA|A_ONE_MINUS_SRC<br>
			<d>A_DST</d>, <d>RGB_DST</d>, <d>DST</d> = RGB_DST|A_DST<br>
			<d>RGB_ONE_MINUS_DST</d>, <d>A_ONE_MINUS_DST</d><br>
			<d>ONE_MINUS_DST</d> = RGB_ONE_MINUS_DST|A_ONE_MINUS_DST<br>
			<d>RGB_DST_ALPHA</d>, <d>DST_ALPHA</d> = RGB_DST_ALPHA|A_DST<br>
			<d>RGB_ONE_MINUS_DST_ALPHA</d><br>
			<d>ONE_MINUS_DST_ALPHA</d> = RGB_ONE_MINUS_DST_ALPHA|A_ONE_MINUS_DST<br>
			<d>RGB_SRC_ALPHA_SATURATE,</d><br>
			<d>SRC_ALPHA_SATURATE</d> = RGB_SRC_ALPHA_SATURATE|A_ONE<br><br>
			<o>// Constants used by BlendCombine</o><br>
			<d>RGB_ADD</d>, <d>A_ADD</d>, <d>ADD</d> = RGB_ADD|A_ADD<br>
			<d>RGB_SUBTRACT</d>, <d>A_SUBTRACT</d>, <d>SUBTRACT</d> = RGB_SUBTRACT|A_SUBTRACT<br>
			<d>RGB_REVERSE_SUBTRACT</d>, <d>A_REVERSE_SUBTRACT</d><br>
			<d>REVERSE_SUBTRACT</d> = RGB_REVERSE_SUBTRACT|A_REVERSE_SUBTRACT<br>
			<d>RGB_MIN</d>, <d>A_MIN</d>, <d>MIN</d> = RGB_MIN|A_MIN<br>
			<d>RGB_MAX</d>, <d>A_MAX</d>, <d>MAX</d> = RGB_MAX|A_MAX<br><br>
			<o>// Constants used by TextureOptions</o><br>
			<d>UPSCALE_PIXELATED</d>, <d>DOWNSCALE_PIXELATED</d>, <d>DOWNSCALE_MIPMAP_NEAREST</d><br>
			<d>PIXELATED</d> = UPSCALE_PIXELATED|DOWNSCALE_PIXELATED|DOWNSCALE_MIPMAP_NEAREST<br>
			<d>MIPMAPS</d><br>
			<d>REPEAT_X</d>, <d>REPEAT_Y</d>, <d>REPEAT</d> = REPEAT_X|REPEAT_Y<br>
			<d>REPEAT_MIRRORED_X</d>, <d>REPEAT_MIRRORED_Y</d><br>
			<d>REPEAT_MIRRORED</d> = REPEAT_MIRRORED_X|REPEAT_MIRRORED_Y<br><br>
			<o>// Constants used by Shader() input/output type</o><br>
			<d>NORM</d>, <d>FLOAT</d>, <d>UINT</d>, <d>LAYERED</d><br><br>
			<o>// Constants used by Geometry() type</o><br>
			<d>TRIANGLE_STRIP</d>, <d>TRIANGLES</d>, <d>TRIANGLE_FAN</d>, <d>LINE_LOOP</d>, <d>LINE_STRIP</d>, <d>LINES</d>, <d>POINTS</d>
		</k>
	</div>
	<div id="texture">
		Types related to <c>Texture</c>
		<k><n>type</n> <d>ImageSource</d> = <t>Blob</t> | <t>HTMLImageElement</t> | <t>HTMLCanvasElement</t> | <t>HTMLVideoElement</t> | <t>ImageData</t> | <t>ImageBitmap</t><br>
		<n>type</n> <d>TextureOptions</d> = <d>REPEAT_X</d>? | <d>REPEAT_Y</d>? | <d>REPEAT</d>? | <d>REPEAT_MIRRORED_X</d>? | <d>REPEAT_MIRRORED_Y</d>? | <d>REPEAT_MIRRORED</d>? | <d>UPSCALE_PIXELATED</d>? | <d>DOWNSCALE_PIXELATED</d>? | <d>DOWNSCALE_MIPMAP_NEAREST</d>? | <d>PIXELATED</d>? | <d>MIPMAPS</d>?<br>
		<n>default</n> format = <d>Formats.RGBA</d></k>
		<hr>
		Construct a new uninitialised texture object. Do not use <c>new</c>.<br>
		If <c>layer == 0</c>, the texture will be a flat texture, with no concept of layers. All functions that accept a layer argument will ignore that argument.<br>
		Otherwise, the texture is a layered texture, which may hold different data on each layer.<br>
		<c>width</c> and <c>height</c> are not guaranteed to be supported for values > <c>4096</c>. Likewise <c>layers</c> for values > <c>256</c>.<br>
		Textures may use a lot of graphical memory. Consider reusing old textures instead of initialising new ones, and <c>.delete()</c> textures when you are done with them to avoid risks of GPU crashes
		<k><n>constructor</n>(width?: <t>int</t>, height?: <t>int</t>, layers?: <t>int</t>, format?: <n>valueof</n> <t refto="constants">Formats</t>, options?: <t>TextureOptions</t>)</k>
		<hr>
		Set the default <c>options</c> parameter for all future texture initialisations
		<k>Texture.<m>setDefaultOptions</m>(options?: <t>TextureOptions</t>)</k>
		<hr>
		Initialise the texture from a URL or Image source. The texture may not be ready immediately, but is loaded in the background. If you need to run a callback after the image has loaded, use <c>.from(...)</c>
		<k>.<m>fromSrc</m>(src: <t>string</t> | <t>ImageSource</t>, format?: <n>valueof</n> <t refto="constants">Formats</t>, options?: <t>TextureOptions</t>) -> <t>this</t></k>
		<hr>
		Initialise the texture from an Image source. If the image source cannot be resolved immediately, a promise is returned, If you do not want to handle the case of when a promise is returned, use <c>.fromSrc(...)</c>
		<k>.<m>from</m>(img: <t>ImageSource</t>, format?: <n>valueof</n> <t refto="constants">Formats</t>, options?: <t>TextureOptions</t>) -> <t>Promise</t>&lt;<t>this</t>> | <t>this</t></k>
		<hr>
		Initialise the texture as empty, same as the constructor
		<k>.<m>of</m>(width?: <t>int</t>, height?: <t>int</t>, layers?: <t>int</t>, format?: <n>valueof</n> <t refto="constants">Formats</t>, options?: <t>TextureOptions</t>) -> <t>this</t></k>
		<hr>
		Get or set the texture options for this texture</c>
		<k><n>get</n>/<n>set</n> options: <t>TextureOptions</t></k>
		<hr>
		Convert a sub-rectangle specified in pixel coordinates from the top-left corner into a <c refto="uv">UV</c> (UV coordinates are (0,0)-(1,1) from the bottom left)<br>
		Note that this function is only useful once the image has been fully loaded, as the actual width and height of the texture are required to perform the conversion
		<k>.<m>uv</m>(x?: <t>number</t>, y?: <t>number</t>, width?: <t>number</t>, height?: <t>number</t>, layer?: <t>number</t>) -> <t refto="uv">UV</t></k>
		<hr>
		Write an Image source within a sub-rect of the texture.<br>Just like with <c>.from(...)</c>, a promise is returned if the image source cannot be resolved immediately
		<k>.<m>put</m>(img: <t>ImageSource</t>, x?: <t>int</t>, y?: <t>int</t>, layer?: <t>int</t>) -> <t>Promise</t>&lt;<t>this</t>> | <t>this</t></k>
		<hr>
		Put some pixels at a sub-rectangle in the texture, from a <c>TypedArray</c>.<br>
		This method is only applicable for flat textures (i.e <c>.layers == 0</c>).<br>
		If specified, format must be compatible with the texture's format or the operation will fail
		<k>.<m>putData</m>(data: <t>Uint8Array</t> | <t>Uint16Array</t> | <t>Uint32Array</t> | <t>Float32Array</t>, x?: <t>int</t>, y?: <t>int</t>, width?: <t>int</t>, height?: <t>int</t>, format?: <n>valueof</n> <t refto="constants">Formats</t>)</k>
		<hr>
		Put some pixels at a sub-rectangle in the texture, from a <c>TypedArray</c>.<br>
		This method is only applicable for layered textures (i.e <c>.layers > 0</c>).<br>
		If specified, format must be compatible with the texture's format or the operation will fail
		<k>.<m>putDataLayers</m>(data: <t>Uint8Array</t> | <t>Uint16Array</t> | <t>Uint32Array</t> | <t>Float32Array</t>, x?: <t>int</t>, y?: <t>int</t>, layer?: <t>int</t>, width?: <t>int</t>, height?: <t>int</t>, depth?: <t>int</t>, format?: <n>valueof</n> <t refto="constants">Formats</t>)</k>
		<hr>
		Delete the texture. Its resources will be freed once any draw operations making use of the texture are completed.<br>The texture cannot be used, modified or re-initialised again
		<k>.<m>delete</m>()</k>
		<hr>
		The texture's width and height in pixels
		<k><n>readonly</n> .width: <t>int</t><br><n>readonly</n> .height: <t>int</t></k><br>
		The number of layers in a layered texture, or <c>0</c> if the texture is flat and not layered
		<k><n>readonly</n> .layers: <t>int</t></k>
		<hr>
		The texture's format, specified when the texture was last initialised
		<k><n>readonly</n> .format: <n>valueof</n> <t refto="constants">Formats</t></k><br>
		The texture's options, specified when the texture was last initialised or from <c>.setOptions(...)</c>
		<k><n>readonly</n> .options: <t>TextureOptions</t></k>
	</div>
	<div id="uv">
		<k><n>type</n> <t>UV</t> = {x: <t>number</t>, y: <t>number</t>, w: <t>number</t>, h: <t>number</t>, l: <t>number</t>}</k>
		<hr>
		Create a uv. Do not use <c>new</c>.<br>
		A uv is a location within a texture, think a crop rectangle for a texture.<br>
		Arguments default to <c>uv(0, 0, 1, 1, 0)</c>, i.e, a square from the bottom-left (0, 0) with size (1, 1) (= the whole texture) at layer 0 (the default layer for most textures)
		<k><n>constructor</n>(x?: <t>number</t>, y?: <t>number</t>, w?: <t>number</t>, h?: <t>number</t>, layer?: <t>number</t>) -> <t>UV</t></k>
		<hr>
		Create a new uv as a sub-rect of another, imagining (0, 0) to be the bottom left of the reference uv and (1, 1) to be the top right
		<k>.<m>sub</m>(x?: <t>number</t>, y?: <t>number</t>, w?: <t>number</t>, h?: <t>number</t>) -> <t>UV</t></k>
		</k>
	</div>
	<div id="mesh">
		Construct a new mesh. Do not use <c>new</c>.<br>
		Unlike textures, meshes use entirely CPU memory, exactly 64 bytes per sprite they contain. That means a mesh with 1,000,000 sprites will take up approximately 64MB of CPU memory while it is being built, up until it is consumed (either with <c>mesh.upload()</c> or <c>(Target).draw(mesh)</c>)
		<k><n>constructor</n>()</k>
		<hr>
		These arguments are used by most of <c>Mesh</c>'s methods
		<k><n>arguments</n> <d>SpriteParams</d> = (uv?: <t>UV</t>, effect?: <t>number</t>, r?: <t>number</t>, g?: <t>number</t>, b?: <t>number</t>, a?: <t>number</t>)</k>
		<hr>
		Construct a mesh consisting of a single sprite, optionally from a rectangle or 3x2 matrix.<br>This is a convenience function that is also usually more performant than its longer form
		<k>Mesh.<m>single</m>(...<d>SpriteParams</d>) -> <t>Mesh</t><br>
		Mesh.<m>singleRect</m>(x: <t>number</t>, y: <t>number</t>, w: <t>number</t>, h: <t>number</t>, ...<d>SpriteParams</d>) -> <t>Mesh</t><br>
		Mesh.<m>singleMat</m>(a: <t>number</t>, b: <t>number</t>, c: <t>number</t>, d: <t>number</t>, e: <t>number</t>, f: <t>number</t>, ...<d>SpriteParams</d>) -> <t>Mesh</t></k>
		<hr>
		Meshes are transformable. The methods <c>.add(...)</c>, <c>.addRect(...)</c> and <c>.addMat(...)</c> transform their coordinates based on the current transformation.<br>
		For example, calling <c>.scale(3, 3)</c> followed by <c>.addRect(0, 0, 10, 10, ...)</c> will in effect add a sprite of width and height 30
		<k><d>Mesh</d> <n>implements</n>  <t refto="transformable">Transformable</t></k>
		<hr>
		Add a sprite at coordinates (0,0) to (1,1) with the specified sprite properties
		<k>.<m>add</m>(...<d>SpriteParams</d>)</k>
		<hr>
		Add a sprite at coordinates <c>(x, y)</c> and size <c>(w, h)</c> (so that the top-right corner is at <c>(x+w, y+h)</c>) with the specified sprite properties
		<k>.<m>addRect</m>(x?: <t>number</t>, y?: <t>number</t>, width?: <t>number</t>, height?: <t>number</t>, ...<d>SpriteParams</d>)</k>
		<hr>
		Add a sprite from a matrix with the specified sprite properties.<br>
		Matrices don't have to be hard to get right. The resulting sprite will have its:<br>
		- Bottom-left corner at <c>(e, f)</c><br>
		- Bottom-right corner at <c>(a, b)</c> from the bottom-left corner (i.e, it will be at <c>(e+a, f+b)</c>)<br>
		- Top-left corner at <c>(c, d)</c> from the bottom-left corner (i.e, it will be at <c>(e+c, f+d)</c>)<br>
		- Top-right corner will be at <c>(c, d)</c> from the bottom-right corner, which is also <c>(a, b)</c> from the top-left corner (i.e, it will be at <c>(e+a+c, f+b+d)</c>)<br>
		The resulting sprite will always be at least a parallelogram (if not a square or rectangle)<br>
		<k>.<m>addMat</m>(a?: <t>number</t>, b?: <t>number</t>, c?: <t>number</t>, d?: <t>number</t>, e?: <t>number</t>, f?: <t>number</t>, ...<d>SpriteParams</d>)</k>
		<hr>
		Upload the mesh to the GPU. The mesh will be deleted and a <c>MeshUpload</c> object will be returned.<br>
		<c>MeshUpload</c> objects:<br>
		- Are opaque and cannot be modified, only referenced<br>
		- Can be passed to <c>(Target).draw(...)</c> instead of the mesh<br>
		- Are not consumable, they can be drawn an infinite number of times<br>
		- Have a <c>.size</c> property much like <c>Mesh</c>es<br>
		Once you no longer need a <c>MeshUpload</c> object, consider calling <c>.delete()</c> on it
		<k id="meshupload">.<m>upload</m>() -> <t>MeshUpload</t></k>
		<hr>
		Delete the mesh object.<br>
		Since both <c>(Target).draw(...)</c> and <c>.upload(...)</c> delete the mesh for you, the only time you will need this method is if the mesh was never consumed and you would like to free its resources immediately for performance reasons.<br>
		Any future calls to <c>.add/addRect/addMat(...)</c> or <c>.upload/export/import(...)</c> will throw an error
		<k>.<m>delete</m>()</k>
		<hr>
		Export all of the sprite data from this mesh as a <c>Float32Array</c> of length <c>16 * mesh.size</c>. The mesh is not consumed and can still be expanded or drawn
		<k>.<m>export</m>() -> <t>Float32Array</t></k>
		<hr>
		Import all of the sprite data from a <c>Float32Array</c> whose length is a multiple of 16. The imported sprites are appended to the end of this mesh
		<k>.<m>import</m>(data: <t>Float32Array</t>)</k>
		<hr>
		The number of sprites currently in this mesh
		<k><n>readonly</n> .size: <t>int</t></k>
	</div>
	<div id="target">
		Construct a new draw target. Do not use <c>new</c>.<br>
		Draw targets facilitate drawing to textures or other objects. The value returned by <c refto="stc">setTargetCanvas(...)</c> is itself a target, which draws its commands to the supplied <c>&lt;canvas></c> element
		<k><n>constructor</n>(width?: <t>int</t>, height?: <t>int</t>, format?: <n>valueof</n> <t refto="constants">Formats</t>, stencil?: <t>boolean</t>)<br>
		<n>constructor</n>(texture: <t refto="texture">Texture</t>, layer?: <t>int</t>, stencil?: <t>boolean</t>)</k>
		<hr>
		Targets are transformable. The method <c>.draw(...)</c> transform all of the mesh's coordinates based on the current transformation.<br>
		For example, calling <c>.rotate(PI/2)</c> followed by <c>.draw(myMesh, ...)</c> will in effect draw myMesh rotated 90 degrees (PI/2 radians)<br>
		With the default transformation, the bottom-left of the target's output is at coordinates <c>(0, 0)</c> and the top-right is at coordinates <c>(1, 1)</c>
		<k><d>Target</d> <n>implements</n> <t refto="transformable">Transformable</t></k>
		<hr>
		Draws a mesh to the target's output<br>
		If <c>textures</c> is not specified, the textures from the previous <c>.draw(...)</c> call (chronologically) will be used, <b>as long as the shader is the same as the one that was used with that previous draw call</b> (if it isn't, then you must re-specify <c>textures</c>).<br>
		If <c>textures</c> is not an array, then <c>textures = [textures]</c>.<br>
		If the provided mesh has more sprites than <c>maxSprites</c>, then only the first <c>maxSprites</c> sprites of the mesh will be drawn
		<k>.<m>draw</m>(mesh: <t refto="mesh">Mesh</t> | <t refto="meshupload">MeshUpload</t> | <t>Float32Array</t>, textures?: <t refto="texture">Texture</t> | <t>Array</t>&lt;<t refto="texture">Texture</t>>, maxSprites?: <t>int</t>)</k>
		<hr>
		Set draw mask options for future draw calls on this target subview (See <b refto="subview">more about subviews</b>)<br>
		The default value is <c>R | G | B | A</c> (or short, <c>RGBA</c>).<br>
		<c>R</c>, <c>G</c>, <c>B</c> and <c>A</c> enable drawing to the respective color channels.<br>
		<c>IF_SET</c> and <c>IF_UNSET</c> limit drawing to only where the stencil buffer is set or unset repectively.<br>
		<c>NO_DRAW</c> forces the stencil test to always fail, resulting in no colors drawn.<br>
		<c>SET</c> and <c>UNSET</c> will set/unset the stencil value wherever something is drawn.<br>
		<c>FLIP</c> is the same as <c>SET | UNSET</c> and sets the stencil value where it was unset and unsets where it was set.<br>
		Stencil operations run everywhere the mesh is drawn. If more than one sprite in the mesh overlap, the specified stencil operation will be executed more than once<br>
		<c>DITHERING</c> will try to enable dithering to create smoother gradients, especially for low precision formats. This is a hint and is not guaranteed to have an effect on all devices
		<k><n>get</n>/<n>set</n> .<d>mask</d>: <d>R</d>? | <d>G</d>? | <d>B</d>? | <d>A</d>? | <d>RGB</d>? | <d>RGBA</d>? | <d>IF_SET</d>? | <d>IF_UNSET</d>? | <d>SET</d>? | <d>UNSET</d>? | <d>FLIP</d>? | <d>NO_DRAW</d>? | <d>DITHERING</d>?</k>
		<hr>
		Set the blend operation for all future draw calls on this target subview
		(See <b refto="subview">more about subviews</b>)<br>
		The default value is <c>Blend(ONE, ADD, ONE_MINUS_SRC_ALPHA)</c><br>
		<k><n>get</n>/<n>set</n> .<d>blend</d>: <t refto="blend">Blend</t></k>
		<hr>
		Set the shader for all future draw calls on this target subview
		(See <b refto="subview">more about subviews</b>; <b refto="shader">more on shaders & uniforms</b>)
		<k><n>get</n>/<n>set</n> .<d>shader</d>: <t refto="shader">Shader</t></k>
		<hr>
		Change the texture output of the target. All future draw operations will draw to this texture (at the specified layer if the texture is layered)<br>
		This method is invalid on the main target (the one returned by <c>setTargetCanvas/autoCanvas(...)</c>)
		<k>.<m>setTexture</m>(texture: <t refto="texture">Texture</t>, layer?: <t>int</t>)</k>
		<hr>
		Resize the target to the specified size<br>
		If the target was configured to draw to a texture, it will no longer draw to that texture but to a new surface constructed from the arguments.<br>
		If called on the main target, its <c>&lt;canvas></c> element will be resized. Chrome supports <c>Formats.RGBA</c> and <c>Formats.RGBA16F</c> for the main target, while most other browsers only support <c>Formats.RGBA</c> for the main target.
		<k>.<m>resize</m>(width: <t>int</t>, height: <t>int</t>, format?: <n>valueof</n> <t refto="constants">Formats</t>)</k>
		<hr>
		Copy a sub-rect of the target's data to a texture. If the target has a texture output, the supplied texture cannot be the same as the target's output texture
		<k>.<m>copyTo</m>(texture: <t refto="texture">Texture</t>, textureX?: <t>int</t>, textureY?: <t>int</t>, textureLayer?: <t>int</t>, x?: <t>int</t>, y?: <t>int</t>, width?: <t>int</t>, height?: <t>int</t>)</k>
		<hr>
		Read pixels from a sub-rect into a <c>TypedArray</c>.<br>
		If <c>arr</c> is specified, it must be of the right type and length. If it is, its contents will be replaced and the array will be returned.<br>
		If <c>arr</c> isn't specified, it will be automatically created with the right type and length and then returned
		<k>.<m>getData</m>(x?: <t>int</t>, y?: <t>int</t>, width?: <t>int</t>, height?: <t>int</t>, arr?: <t>TypedArray</t>) -> <t>Uint8Array</t> | <t>Uint16Array</t> | <t>Uint32Array</t> | <t>Float32Array</t></k>
		<hr>
		Clear the target's output to a plain color (transparent black by default).<br>
		Set any of the arguments to <c>NaN</c> to not clear that channel.<br>
		Also clears the stencil buffer
		<k>.<m>clear</m>(r?: <t>number</t>, g?: <t>number</t>, b?: <t>number</t>, a?: <t>number</t>)</k>
		<hr>
		Clear the target's output to a plain color (transparent black by default).<br>
		Set any of the arguments to <c>NaN</c> to not clear that channel.<br>
		Does not clear the stencil buffer
		<k>.<m>clearColor</m>(r?: <t>number</t>, g?: <t>number</t>, b?: <t>number</t>, a?: <t>number</t>)</k>
		<hr>
		Clears the stencil buffer to zero
		<k>.<m>clearStencil</m>()</k>
		<hr>		
		Delete the target and its resources. Does not delete its texture output (if it had one)
		<k>.<m>delete</m>()</k>
		<hr>
		The target's output's width and height in pixels
		<k><n>readonly</n> .width: <t>int</t><br>
		<n>readonly</n> .height: <t>int</t></k><br>
		The target's texture output, if any
		<k><n>readonly</n> .texture: <t refto="texture">Texture</t> | <t>null</t></k><br>
	</div>
	<div id="transformable">work in progress :(</div>
	<div id="shader">
		Create a shader. Do not use <c>new</c>.<br>
		When this shader is in use, the <c>main()</c> GLSL function will be invoked for every drawn pixel. It must write a color value to <c>color</c>, or execute <c>discard;</c> to indicate that the pixel is to be abandoned and nothing is to be drawn. Do not put a version header or uniforms inside your shader source, they are added for you by the library
		<k><n>constructor</n>(glslSource: <t>string</t>, textureTypes: <t>Array</t>&lt;<d>NORM</d>? | <d>FLOAT</d>? | <d>UINT</d>? | <d>LAYERED</d>?>, outputType: <d>NORM</d>? | <d>FLOAT</d>? | <d>UINT</d>?) -> <t>Shader</t></k>
		<hr>
		Example of a valid shader:<br>(this is the default shader)
		<k><m>Shader</m>(<t style="color:#ea2">`</t><n>void</n> main(){<br>
			&nbsp;&nbsp;<o>// Texture 0 is a flat texture therefore texture() expects a vec2 coordinate</o><br>
			&nbsp;&nbsp;<d>color</d> = <m>texture</m>(<d>tex0</d>, <d>uv</d>.xy) * (<d style="color:#ae2">1.0</d> - <d>tint</d>);<br>
		}<t style="color:#ea2">`</t>, [<d>NORM</d>], <d>NORM</d>)</k>
		<hr>
		Example of default shader but for layered RGBA8 (uint) textures:<br>(this is the default shader)
		<k><m>Shader</m>(<t style="color:#ea2">`</t><n>void</n> main(){<br>
			&nbsp;&nbsp;<o>// Texture 0 is a flat texture therefore texture() expects a vec2 coordinate</o><br>
			&nbsp;&nbsp;<d>color</d> = <m>vec4</m>(<m>texture</m>(<d>tex0</d>, <d>uv</d>.xy))/<d style="color:#ae2">255.0</d> * (<d style="color:#ae2">1.0</d> - <d>tint</d>);<br>
		}<t style="color:#ea2">`</t>, [<d>UINT</d> | <d>LAYERED</d>], <d>NORM</d>)</k>
		<hr>
		Values exposed in the GLSL shader:
		<k>
			<n>uniform vec4</n> u;<br>
			<n>uniform float</n> s, t;<br>
			<n>uniform</n> (<n>sampler2D</n> | <n>usampler2D</n> | <n>sampler2DArray</n> | <n>usampler2DArray</n>)</n> tex0, tex1, ..., tex15;<br>
			<n>in vec2</n> pos, xy; <o>// automatically generated</o><br>
			<n>in vec3</n> uv;<br>
			<n>in float</n> effect;<br>
			<n>in vec4</n> tint;<br>
			<n>out</n> (<n>vec4</n> | <n>uvec4</n>) color;<br>
		</k><br>
		The types and precisions of <c>tex0, tex1, tex2, ...</c> are determined by the values passed to <c>textureTypes</c><br>
		<c>pos</c> represents the coordinate inside the sprite, where <c>(0, 0)</c> is always the bottom-left of the sprite and <c>(1, 1)</c> is always the top-right<br>
		<c>xy</c> represents the mesh-space coordinates of the current pixel<br>
		<c>uv</c> corresponds to the <c>uv</c> value supplied to <c refto="mesh">SpiteParams</c><br>
		<c>effect</c> corresponds to the <c>effect</c> value supplied to <c refto="mesh">SpiteParams</c><br>
		<c>tint</c> corresponds to the <c>r, g, b, a</c> values supplied to <c refto="mesh">SpiteParams</c>
	</div>
	<div id="blend">
		Create a blend mode. Do not use <c>new</c>.<br>
		When this blend mode is in use, when drawing color <c>src</c> onto a canvas where the current pixel's color is <c>dst</c>, the blend mode will be used to determine how the two values are combined to determine the new value to write: <c>src * srcMult &lt;combineOp> dst * dstMult</c>
		<k><n>constructor</n>(srcMult: <t>BlendMultiplier</t>, combineOp: <t>BlendCombine</t>, dstMult: <t>BlendMultiplier</t>) -> <t>Blend</t></k>
		<hr>
		Example: <c>Blend(ONE, ADD, ONE_MINUS_SRC_ALPHA)</c> (the default blend mode),<br>yields the equation <c>src * 1 + dst * (1 - src.a)</c>, which can be simplified to <c>src + dst*(1-src.a)</c>.<br>
		This has the effect that where the drawn sprites have alpha 0, the RGBA values are added to the destination's values, and whn the drawn sprites have alpha 1, the RGBA values replace the destination's values.<br>
		See further down for all possible blend multipliers and combine
		<hr>
		Below is a list of all possible values for <c>BlendMultiplier</c><br>
		Values that start with <c>RGB_</c> only apply to the r, g and b channels<br>
		Values that start with <c>A_</c> only apply to the alpha channel<br>
		A <c>RGB_</c> and <c>A_</c> value can be ORed (<c> | </c>) together to create a new blend multiplier.<br>
		Other values can only be used on their own
		<k>
			<d>ZERO</d> <o>// * 0</o><br>
			<d>ONE</d> <o>// * 1</o><br>
			<d>SRC</d> <o>// * src.rgba</o><br>
			<d>ONE_MINUS_SRC</d> <o>// * (1 - src.rgba)</o><br>
			<d>SRC_ALPHA</d> <o>// * src.a</o><br>
			<d>ONE_MINUS_SRC_ALPHA</d> <o>// * (1 - src.a)</o><br>
			<d>DST</d> <o>// * dst.rgba</o><br>
			<d>ONE_MINUS_DST</d> <o>// * (1 - dst.rgba)</o><br>
			<d>DST_ALPHA</d> <o>// * dst.a</o><br>
			<d>ONE_MINUS_DST_ALPHA</d> <o>// * (1 - dst.a)</o><br>
			<d>SRC_ALPHA_SATURATE</d> <o>//.rgb * min(src.a, 1-dst.a), .a * 1</o><br>
			<br>
			<d>RGB_ONE</d> <o>//.rgb * 1</o><br>
			<d>RGB_SRC</d> <o>//.rgb * src.rgb</o><br>
			<d>RGB_ONE_MINUS_SRC</d> <o>//.rgb * (1 - src.rgb)</o><br>
			<d>RGB_SRC_ALPHA</d> <o>//.rgb * src.a</o><br>
			<d>RGB_ONE_MINUS_SRC_ALPHA</d> <o>//.rgb * (1 - src.a)</o><br>
			<d>RGB_DST</d> <o>//.rgb * dst.rgb</o><br>
			<d>RGB_ONE_MINUS_DST</d> <o>//.rgb * (1 - dst.rgb)</o><br>
			<d>RGB_DST_ALPHA</d> <o>//.rgb * dst.a</o><br>
			<d>RGB_ONE_MINUS_DST_ALPHA</d> <o>//.rgb * (1 - dst.a)</o><br>
			<d>RGB_SRC_ALPHA_SATURATE</d> <o>//.rgb * min(src.a, 1-dst.a)</o><br>
			<br>
			<d>A_ONE</d> <o>//.a * 1</o><br>
			<d>A_SRC</d> <o>//.a * src.a</o><br>
			<d>A_ONE_MINUS_SRC</d> <o>//.a * (1 - src.a)</o><br>
			<d>A_DST</d> <o>//.a * dst.a</o><br>
			<d>A_ONE_MINUS_DST</d> <o>//.a * (1 - dst.a)</o><br>
		</k>
		<hr>
		Below is a list of all possible values for <c>BlendCombine</c><br>
		Values that start with <c>RGB_</c> only apply to the r, g and b channels<br>
		Values that start with <c>A_</c> only apply to the alpha channel<br>
		A <c>RGB_</c> and <c>A_</c> value can be ORed (<c> | </c>) together to create a new blend combine.<br>
		Other values can only be used on their own
		<k>
			<d>ADD</d> <o>// srcResult + dstResult</o><br>
			<d>SUBTRACT</d> <o>// srcResult - dstResult</o><br>
			<d>REVERSE_SUBTRACT</d> <o>// dstResult - srcResult</o><br>
			<d>MIN</d> <o>// min(srcResult, dstResult)</o><br>
			<d>MAX</d> <o>// max(srcResult, dstResult)</o><br>
			<br>
			<d>RGB_ADD</d> <o>// srcResult.rgb + dstResult.rgb</o><br>
			<d>RGB_SUBTRACT</d> <o>// srcResult.rgb - dstResult.rgb</o><br>
			<d>RGB_REVERSE_SUBTRACT</d> <o>// dstResult.rgb - srcResult.rgb</o><br>
			<d>RGB_MIN</d> <o>// min(srcResult.rgb, dstResult.rgb)</o><br>
			<d>RGB_MAX</d> <o>// max(srcResult.rgb, dstResult.rgb)</o><br>
			<br>
			<d>A_ADD</d> <o>// srcResult.a + dstResult.a</o><br>
			<d>A_SUBTRACT</d> <o>// srcResult.a - dstResult.a</o><br>
			<d>A_REVERSE_SUBTRACT</d> <o>// dstResult.a - srcResult.a</o><br>
			<d>A_MIN</d> <o>// min(srcResult.a, dstResult.a)</o><br>
			<d>A_MAX</d> <o>// max(srcResult.a, dstResult.a)</o><br>
		</k>
	</div>
</div>
<script>
	let docsCurrent = docs.children.exports, docsCurrentH2 = docs.firstElementChild
	docsCurrent.style.display = 'block'; docsCurrentH2.id = 'docsselected'
	for(const t of document.querySelectorAll('[refto]')){
		const node = document.getElementById(t.getAttribute('refto'))
		if(t.parentElement == docs) node.h2 = t
		t.onclick = () => {
			let n = node
			if(n.parentElement != docs) setTimeout(()=>n.scrollIntoView(),0,n), n = n.parentElement
			if(n.parentElement != docs) return
			docsCurrent.style.display = ''
			;(docsCurrent = n).style.display = 'block'
			if(n.h2){
				docsselected.id = ''
				n.h2.id = 'docsselected'
			}		
		}
	}
	for(const n of document.querySelectorAll('[node]')){
		const id = n.getAttribute('node')
		n.node = document.getElementById(id)
		n.onclick = () => {selected.node.hidden=true;selected.id='';n.id='selected';n.node.hidden=false;history.replaceState({},'','#'+id)}
		if(id == location.hash.slice(1)) n.onclick()
	}
	document.body.insertAdjacentElement('beforebegin', document.querySelector('nav'))
	const syntaxes = {
		html: [
			[/<script/yi, 'color:#2ae', 'scripttag'],
			[/<[\w-]+/y, 'color:#2ae', 'tag'],
			[/<\/[\w-]+>/y, 'color: #2ae']
		],
		tag: [
			'color:red',
			[/[\w-]+=/y, null, 'prop'],
			[/[\w-]+/y, null, 'prop'],
			['>', 'color:#2ae', 'html']
		],
		scripttag: [
			'color:red',
			[/[\w-]+=/y, null, 'scriptprop'],
			[/[\w-]+/y, null, 'scriptprop'],
			['>', 'color:#2ae', 'js']
		],
		prop: [ [/('[^']*'|"[^"]*"|[^\s>]+)/, 'color:#ea2', 'tag'] ],
		scriptprop: [ [/('[^']*'|"[^"]*"|[^\s>]+)/, 'color:#ea2', 'scripttag'] ],
		js: [
			[/(let|var|const|function|class|extends|static|if|while|for|else|do|switch|case|default|continue|break|return|yield|await|void|throw|new)(?![\w$])/y, 'color:#e52;font-weight:700'],
			[/[\w$]+(?=\()/y, 'color:#dd8'],
			[/\.[\w$]+(?![(\w$])/y, 'color:#bbf'],
			[/<\/script>/y, 'color: #2ae', 'html'],
			[/('([^']|\\.)*('|$)|"([^"]|\\.)*("|$))/y, 'color:#ea2'],
			[/\d[\d_]*(\.[_\d]*)?(e[+-]?[\d_]+)?|\.\d+(e[+-]?[\d_]+)?|[+-]?Infinity|NaN|null|undefined/y, 'color:#ae2'],
			[/[\w$]+(?![(\w$])/y, 'color:#ccc'],
			[/\/\/.*|\/\*([^*]*|\*(?!\/))(\*\/|$)|\.\.\.(?=\s*[)}\],;\n]|\s*$)/y, 'opacity:.3;font-weight:normal'],
			['`', 'color: #ea2', 'jsstring']
		],
		jsstring: [
			'color: #ea2',
			[/\$\{/y, 'color: #ea2', 'js2'],
			['`', 'color: #ea2', 'js']
		]
	}
	const lib = fetch('./uv.min.js').then(a => a.text())
	sandbox.oncompile = src => lib.then(t => {
		sandboxi.srcdoc = '<div id=errors style="color:red;font:700 16px monospace;white-space:pre-wrap;pointer-events:none;touch-action:none;position:absolute;bottom:8px"></div><script>"use strict";addEventListener("error",onunhandledrejection=console.warn=console.error=e=>{errors.append((e.message||e.reason||e)+"\\n");errors.childNodes.length>5&&errors.childNodes[0].remove();e.preventDefault2?.()});'+t+'<\/script><script>'+src.replace(/<\/script>/g,'<\\/script>') + '<\/script>'
	})
	syntaxes.js2 = [[/\}/y, 'color: #ea2', 'jsstring'], ...syntaxes.js]
	for(const c of document.getElementsByTagName('code-area'))
		c.setPatterns(syntaxes, c.getAttribute('lang')),c.value = c.textContent.trim()
</script>
</html>