Update Files

Kha/Backends/HTML5/kha/js/AEAudioChannel.hx

@@ -0,0 +1,77 @@
+package kha.js;
+
+import js.html.AudioElement;
+import kha.audio1.AudioChannel;
+
+class AEAudioChannel implements kha.audio1.AudioChannel {
+	var element: AudioElement;
+	var stopped = false;
+	var looping: Bool;
+
+	public function new(element: AudioElement, looping: Bool) {
+		this.element = element;
+		this.looping = looping;
+	}
+
+	public function play(): Void {
+		stopped = false;
+		element.play();
+	}
+
+	public function pause(): Void {
+		try {
+			element.pause();
+		}
+		catch (e:Dynamic) {
+			trace(e);
+		}
+	}
+
+	public function stop(): Void {
+		try {
+			element.pause();
+			element.currentTime = 0;
+			stopped = true;
+		}
+		catch (e:Dynamic) {
+			trace(e);
+		}
+	}
+
+	public var length(get, never): Float; // Seconds
+
+	function get_length(): Float {
+		if (Math.isFinite(element.duration)) {
+			return element.duration;
+		}
+		else {
+			return Math.POSITIVE_INFINITY;
+		}
+	}
+
+	public var position(get, set): Float; // Seconds
+
+	function get_position(): Float {
+		return element.currentTime;
+	}
+
+	function set_position(value: Float): Float {
+		return element.currentTime = value;
+	}
+
+	public var volume(get, set): Float;
+
+	function get_volume(): Float {
+		return element.volume;
+	}
+
+	function set_volume(value: Float): Float {
+		return element.volume = value;
+	}
+
+	public var finished(get, never): Bool;
+
+	function get_finished(): Bool {
+		return stopped || (!looping && position >= length);
+	}
+}

Kha/Backends/HTML5/kha/js/AudioElementAudio.hx

@@ -0,0 +1,15 @@
+package kha.js;
+
+@:keep
+class AudioElementAudio {
+	public static function play(sound: Sound, loop: Bool = false): kha.audio1.AudioChannel {
+		return stream(sound, loop);
+	}
+
+	public static function stream(sound: Sound, loop: Bool = false): kha.audio1.AudioChannel {
+		sound.element.loop = loop;
+		var channel = new AEAudioChannel(sound.element, loop);
+		channel.play();
+		return cast channel;
+	}
+}

Kha/Backends/HTML5/kha/js/CanvasGraphics.hx

@@ -0,0 +1,264 @@
+package kha.js;
+
+import kha.Color;
+import kha.graphics2.Graphics;
+import kha.graphics2.ImageScaleQuality;
+import kha.math.FastMatrix3;
+import js.html.CanvasRenderingContext2D;
+
+class CanvasGraphics extends Graphics {
+	var canvas: CanvasRenderingContext2D;
+	var webfont: kha.js.Font;
+	var myColor: Color;
+	var scaleQuality: ImageScaleQuality;
+	var clipping: Bool = false;
+
+	static var instance: CanvasGraphics;
+
+	public function new(canvas: CanvasRenderingContext2D) {
+		super();
+		this.canvas = canvas;
+		instance = this;
+		myColor = Color.fromBytes(0, 0, 0);
+		// webfont = new Font("Arial", new FontStyle(false, false, false), 12);
+		// canvas.globalCompositeOperation = "normal";
+	}
+
+	public static function stringWidth(font: kha.Font, text: String): Float {
+		if (instance == null)
+			return 5 * text.length;
+		else {
+			instance.font = font;
+			return instance.canvas.measureText(text).width;
+		}
+	}
+
+	override public function begin(clear: Bool = true, clearColor: Color = null): Void {
+		if (clear)
+			this.clear(clearColor);
+	}
+
+	override public function clear(color: Color = null): Void {
+		if (color == null)
+			color = 0x00000000;
+		canvas.strokeStyle = "rgba(" + color.Rb + "," + color.Gb + "," + color.Bb + "," + color.A + ")";
+		canvas.fillStyle = "rgba(" + color.Rb + "," + color.Gb + "," + color.Bb + "," + color.A + ")";
+		if (color.A == 0) // if color is transparent, clear the screen. Note: in Canvas, transparent colors will overlay, not overwrite.
+			canvas.clearRect(0, 0, canvas.canvas.width, canvas.canvas.height);
+		else
+			canvas.fillRect(0, 0, canvas.canvas.width, canvas.canvas.height);
+		this.color = myColor;
+	}
+
+	override public function end(): Void {}
+
+	/*override public function translate(x: Float, y: Float) {
+		tx = x;
+		ty = y;
+	}*/
+	override public function drawImage(img: kha.Image, x: Float, y: Float) {
+		canvas.globalAlpha = opacity;
+		canvas.drawImage(cast(img, CanvasImage).image, x, y);
+		canvas.globalAlpha = 1;
+	}
+
+	override public function drawScaledSubImage(image: kha.Image, sx: Float, sy: Float, sw: Float, sh: Float, dx: Float, dy: Float, dw: Float, dh: Float) {
+		canvas.globalAlpha = opacity;
+		try {
+			if (dw < 0 || dh < 0) {
+				canvas.save();
+				canvas.translate(dx, dy);
+				var x = 0.0;
+				var y = 0.0;
+				if (dw < 0) {
+					canvas.scale(-1, 1);
+					x = -dw;
+				}
+				if (dh < 0) {
+					canvas.scale(1, -1);
+					y = -dh;
+				}
+				canvas.drawImage(cast(image, CanvasImage).image, sx, sy, sw, sh, x, y, dw, dh);
+				canvas.restore();
+			}
+			else {
+				canvas.drawImage(cast(image, CanvasImage).image, sx, sy, sw, sh, dx, dy, dw, dh);
+			}
+		}
+		catch (ex:Dynamic) {}
+		canvas.globalAlpha = 1;
+	}
+
+	override function set_color(color: Color): Color {
+		myColor = color;
+		canvas.strokeStyle = "rgba(" + color.Rb + "," + color.Gb + "," + color.Bb + "," + color.A + ")";
+		canvas.fillStyle = "rgba(" + color.Rb + "," + color.Gb + "," + color.Bb + "," + color.A + ")";
+		return color;
+	}
+
+	override function get_color(): Color {
+		return myColor;
+	}
+
+	override function get_imageScaleQuality(): ImageScaleQuality {
+		return scaleQuality;
+	}
+
+	override function set_imageScaleQuality(value: ImageScaleQuality): ImageScaleQuality {
+		if (value == ImageScaleQuality.Low) {
+			untyped canvas.mozImageSmoothingEnabled = false;
+			untyped canvas.webkitImageSmoothingEnabled = false;
+			untyped canvas.msImageSmoothingEnabled = false;
+			canvas.imageSmoothingEnabled = false;
+		}
+		else {
+			untyped canvas.mozImageSmoothingEnabled = true;
+			untyped canvas.webkitImageSmoothingEnabled = true;
+			untyped canvas.msImageSmoothingEnabled = true;
+			canvas.imageSmoothingEnabled = true;
+		}
+		return scaleQuality = value;
+	}
+
+	override public function drawRect(x: Float, y: Float, width: Float, height: Float, strength: Float = 1.0) {
+		canvas.beginPath();
+		var oldStrength = canvas.lineWidth;
+		canvas.lineWidth = Math.round(strength);
+		canvas.rect(x, y, width, height);
+		canvas.stroke();
+		canvas.lineWidth = oldStrength;
+	}
+
+	override public function fillRect(x: Float, y: Float, width: Float, height: Float) {
+		canvas.globalAlpha = opacity * myColor.A;
+		canvas.fillRect(x, y, width, height);
+		canvas.globalAlpha = opacity;
+	}
+
+	public function drawArc(cx: Float, cy: Float, radius: Float, sAngle: Float, eAngle: Float, strength: Float = 1.0, ccw: Bool = false) {
+		_drawArc(cx, cy, radius, sAngle, eAngle, strength, ccw);
+	}
+
+	public function drawCircle(cx: Float, cy: Float, radius: Float, strength: Float = 1.0) {
+		_drawArc(cx, cy, radius, 0, 2 * Math.PI, strength, false);
+	}
+
+	inline function _drawArc(cx: Float, cy: Float, radius: Float, sAngle: Float, eAngle: Float, strength: Float, ccw: Bool) {
+		canvas.beginPath();
+		var oldStrength = canvas.lineWidth;
+		canvas.lineWidth = Math.round(strength);
+		canvas.arc(cx, cy, radius, sAngle, eAngle, ccw);
+		canvas.stroke();
+		canvas.lineWidth = oldStrength;
+	}
+
+	public function fillArc(cx: Float, cy: Float, radius: Float, sAngle: Float, eAngle: Float, ccw: Bool = false) {
+		canvas.beginPath();
+		canvas.arc(cx, cy, radius, sAngle, eAngle, ccw);
+		canvas.fill();
+	}
+
+	public function fillCircle(cx: Float, cy: Float, radius: Float) {
+		canvas.beginPath();
+		canvas.arc(cx, cy, radius, 0, 2 * Math.PI, false);
+		canvas.fill();
+	}
+
+	var bakedQuadCache = new kha.Kravur.AlignedQuad();
+
+	override public function drawString(text: String, x: Float, y: Float) {
+		// canvas.fillText(text, tx + x, ty + y + webfont.getHeight());
+		// canvas.drawImage(cast(webfont.getTexture(), Image).image, 0, 0, 50, 50, tx + x, ty + y, 50, 50);
+
+		var image = webfont.getImage(fontSize, myColor);
+		if (image.width > 0) {
+			// the image created in getImage() is not imediately useable
+			var xpos = x;
+			var ypos = y;
+			for (i in 0...text.length) {
+				var q = webfont.kravur._get(fontSize).getBakedQuad(bakedQuadCache, kha.graphics2.Graphics.fontGlyphs.indexOf(text.charCodeAt(i)), xpos, ypos);
+
+				if (q != null) {
+					if (q.s1 - q.s0 > 0 && q.t1 - q.t0 > 0 && q.x1 - q.x0 > 0 && q.y1 - q.y0 > 0)
+						canvas.drawImage(image, q.s0 * image.width, q.t0 * image.height, (q.s1 - q.s0) * image.width, (q.t1 - q.t0) * image.height, q.x0,
+							q.y0, q.x1 - q.x0, q.y1 - q.y0);
+					xpos += q.xadvance;
+				}
+			}
+		}
+	}
+
+	override public function drawCharacters(text: Array<Int>, start: Int, length: Int, x: Float, y: Float): Void {
+		var image = webfont.getImage(fontSize, myColor);
+		if (image.width > 0) {
+			// the image created in getImage() is not imediately useable
+			var xpos = x;
+			var ypos = y;
+			for (i in start...start + length) {
+				var q = webfont.kravur._get(fontSize).getBakedQuad(bakedQuadCache, kha.graphics2.Graphics.fontGlyphs.indexOf(text[i]), xpos, ypos);
+
+				if (q != null) {
+					if (q.s1 - q.s0 > 0 && q.t1 - q.t0 > 0 && q.x1 - q.x0 > 0 && q.y1 - q.y0 > 0)
+						canvas.drawImage(image, q.s0 * image.width, q.t0 * image.height, (q.s1 - q.s0) * image.width, (q.t1 - q.t0) * image.height, q.x0,
+							q.y0, q.x1 - q.x0, q.y1 - q.y0);
+					xpos += q.xadvance;
+				}
+			}
+		}
+	}
+
+	override function set_font(font: kha.Font): kha.Font {
+		webfont = cast(font, kha.js.Font);
+		// canvas.font = webfont.size + "px " + webfont.name;
+		return cast webfont;
+	}
+
+	override function get_font(): kha.Font {
+		return cast webfont;
+	}
+
+	override public function drawLine(x1: Float, y1: Float, x2: Float, y2: Float, strength: Float = 1.0) {
+		canvas.beginPath();
+		var oldWith = canvas.lineWidth;
+		canvas.lineWidth = Math.round(strength);
+		canvas.moveTo(x1, y1);
+		canvas.lineTo(x2, y2);
+		canvas.moveTo(0, 0);
+		canvas.stroke();
+		canvas.lineWidth = oldWith;
+	}
+
+	override public function fillTriangle(x1: Float, y1: Float, x2: Float, y2: Float, x3: Float, y3: Float) {
+		canvas.beginPath();
+		canvas.moveTo(x1, y1);
+		canvas.lineTo(x2, y2);
+		canvas.lineTo(x3, y3);
+		canvas.closePath();
+		canvas.fill();
+	}
+
+	override public function scissor(x: Int, y: Int, width: Int, height: Int): Void {
+		if (!clipping) {
+			canvas.save();
+			clipping = true;
+		}
+		canvas.beginPath();
+		canvas.rect(x, y, width, height);
+		canvas.clip();
+	}
+
+	override public function disableScissor(): Void {
+		if (clipping) {
+			canvas.restore();
+			clipping = false;
+		}
+	}
+
+	override public function drawVideo(video: kha.Video, x: Float, y: Float, width: Float, height: Float): Void {
+		canvas.drawImage(cast(video, Video).element, x, y, width, height);
+	}
+
+	override public function setTransformation(transformation: FastMatrix3): Void {
+		canvas.setTransform(transformation._00, transformation._01, transformation._10, transformation._11, transformation._20, transformation._21);
+	}
+}

Kha/Backends/HTML5/kha/js/Font.hx

@@ -0,0 +1,77 @@
+package kha.js;
+
+import js.Syntax;
+import haxe.io.Bytes;
+import js.Browser;
+import js.html.ImageElement;
+import kha.Color;
+import kha.Kravur;
+
+@:keepInit
+class Font implements Resource {
+	public var kravur: Kravur;
+
+	var images: Map<Int, Map<Int, ImageElement>> = new Map();
+
+	public function new(blob: Blob) {
+		this.kravur = Syntax.code("new kha_js_Font.Kravur(blob);");
+	}
+
+	public static function fromBytes(bytes: Bytes): Font {
+		return new Font(Blob.fromBytes(bytes));
+	}
+
+	public function height(fontSize: Int): Float {
+		return kravur._get(fontSize).getHeight();
+	}
+
+	public function width(fontSize: Int, str: String): Float {
+		return kravur._get(fontSize).stringWidth(str);
+	}
+
+	public function widthOfCharacters(fontSize: Int, characters: Array<Int>, start: Int, length: Int): Float {
+		return kravur._get(fontSize).charactersWidth(characters, start, length);
+	}
+
+	public function baseline(fontSize: Int): Float {
+		return kravur._get(fontSize).getBaselinePosition();
+	}
+
+	public function getImage(fontSize: Int, color: Color): ImageElement {
+		var glyphs = kha.graphics2.Graphics.fontGlyphs;
+		var imageIndex = fontSize * 10000 + glyphs.length;
+		if (!images.exists(imageIndex)) {
+			images[imageIndex] = new Map();
+		}
+		if (!images[imageIndex].exists(color.value)) {
+			var kravur = this.kravur._get(fontSize);
+			var canvas = Browser.document.createCanvasElement();
+			canvas.width = kravur.width;
+			canvas.height = kravur.height;
+			var ctx = canvas.getContext("2d");
+			ctx.fillStyle = "black";
+			ctx.fillRect(0, 0, kravur.width, kravur.height);
+
+			var imageData = ctx.getImageData(0, 0, kravur.width, kravur.height);
+			var bytes = cast(kravur.getTexture(), CanvasImage).bytes;
+			for (i in 0...bytes.length) {
+				imageData.data[i * 4 + 0] = color.Rb;
+				imageData.data[i * 4 + 1] = color.Gb;
+				imageData.data[i * 4 + 2] = color.Bb;
+				imageData.data[i * 4 + 3] = bytes.get(i);
+			}
+			ctx.putImageData(imageData, 0, 0);
+
+			var img = Browser.document.createImageElement();
+			img.src = canvas.toDataURL("image/png");
+			images[imageIndex][color.value] = img;
+			return img;
+		}
+		return images[imageIndex][color.value];
+	}
+
+	public function unload(): Void {
+		kravur = null;
+		images = null;
+	}
+}

Kha/Backends/HTML5/kha/js/MobileWebAudio.hx

@@ -0,0 +1,32 @@
+package kha.js;
+
+import js.Syntax;
+import js.html.audio.AudioContext;
+
+@:keep
+class MobileWebAudio {
+	@:noCompletion public static var _context: AudioContext;
+
+	@:noCompletion public static function _init(): Void {
+		try {
+			_context = new AudioContext();
+			return;
+		}
+		catch (e:Dynamic) {}
+		try {
+			Syntax.code("this._context = new webkitAudioContext();");
+			return;
+		}
+		catch (e:Dynamic) {}
+	}
+
+	public static function play(sound: Sound, loop: Bool = false): kha.audio1.AudioChannel {
+		var channel = new MobileWebAudioChannel(cast sound, loop);
+		channel.play();
+		return channel;
+	}
+
+	public static function stream(sound: Sound, loop: Bool = false): kha.audio1.AudioChannel {
+		return play(sound, loop);
+	}
+}

Kha/Backends/HTML5/kha/js/MobileWebAudioChannel.hx

@@ -0,0 +1,105 @@
+package kha.js;
+
+import js.html.audio.AudioBuffer;
+import js.html.audio.AudioBufferSourceNode;
+import js.html.audio.GainNode;
+
+class MobileWebAudioChannel implements kha.audio1.AudioChannel {
+	var buffer: AudioBuffer;
+	var loop: Bool;
+	var source: AudioBufferSourceNode;
+	var gain: GainNode;
+	var startTime: Float;
+	var pauseTime: Float;
+	var paused: Bool = false;
+	var stopped: Bool = false;
+
+	public function new(sound: MobileWebAudioSound, loop: Bool) {
+		this.buffer = sound._buffer;
+		this.loop = loop;
+		createSource();
+	}
+
+	function createSource(): Void {
+		source = MobileWebAudio._context.createBufferSource();
+		source.loop = loop;
+		source.buffer = buffer;
+		source.onended = function() {
+			stopped = true;
+		}
+		gain = MobileWebAudio._context.createGain();
+		source.connect(gain);
+		gain.connect(MobileWebAudio._context.destination);
+	}
+
+	public function play(): Void {
+		if (paused || stopped) {
+			createSource();
+		}
+		stopped = false;
+		if (paused) {
+			paused = false;
+			startTime = MobileWebAudio._context.currentTime - pauseTime;
+			source.start(0, pauseTime);
+		}
+		else {
+			startTime = MobileWebAudio._context.currentTime;
+			source.start();
+		}
+	}
+
+	public function pause(): Void {
+		final wasStopped = paused || stopped;
+		pauseTime = MobileWebAudio._context.currentTime - startTime;
+		paused = true;
+		if (wasStopped)
+			return;
+		source.stop();
+	}
+
+	public function stop(): Void {
+		final wasStopped = paused || stopped;
+		paused = false;
+		stopped = true;
+		if (wasStopped)
+			return;
+		source.stop();
+	}
+
+	public var length(get, never): Float; // Seconds
+
+	function get_length(): Float {
+		return source.buffer.duration;
+	}
+
+	public var position(get, set): Float; // Seconds
+
+	function get_position(): Float {
+		if (stopped)
+			return length;
+		if (paused)
+			return pauseTime;
+		else
+			return MobileWebAudio._context.currentTime - startTime;
+	}
+
+	function set_position(value: Float): Float {
+		return value;
+	}
+
+	public var volume(get, set): Float;
+
+	function get_volume(): Float {
+		return gain.gain.value;
+	}
+
+	function set_volume(value: Float): Float {
+		return gain.gain.value = value;
+	}
+
+	public var finished(get, never): Bool;
+
+	function get_finished(): Bool {
+		return stopped;
+	}
+}

Kha/Backends/HTML5/kha/js/MobileWebAudioSound.hx

@@ -0,0 +1,37 @@
+package kha.js;
+
+import haxe.io.Bytes;
+import js.html.XMLHttpRequest;
+
+class MobileWebAudioSound extends kha.Sound {
+	public var _buffer: Dynamic;
+
+	public function new(filename: String, done: kha.Sound->Void, failed: AssetError->Void) {
+		super();
+		var request = untyped new XMLHttpRequest();
+		request.open("GET", filename, true);
+		request.responseType = "arraybuffer";
+
+		request.onerror = function() {
+			failed({url: filename});
+		};
+
+		request.onload = function() {
+			compressedData = Bytes.ofData(request.response);
+			uncompressedData = null;
+			MobileWebAudio._context.decodeAudioData(compressedData.getData(), function(buffer) {
+				length = buffer.duration;
+				channels = buffer.numberOfChannels;
+				_buffer = buffer;
+				done(this);
+			}, function() {
+				failed({url: filename, error: "Audio format not supported"});
+			});
+		};
+		request.send(null);
+	}
+
+	override public function uncompress(done: Void->Void): Void {
+		done();
+	}
+}

Kha/Backends/HTML5/kha/js/Sound.hx

@@ -0,0 +1,132 @@
+package kha.js;
+
+import js.Browser;
+import js.html.AudioElement;
+import js.html.ErrorEvent;
+import js.html.Event;
+import js.html.MediaError;
+
+using StringTools;
+
+/*class SoundChannel extends kha.SoundChannel {
+	private var element: Dynamic;
+
+	public function new(element: Dynamic) {
+		super();
+		this.element = element;
+	}
+
+	override public function play(): Void {
+		super.play();
+		element.play();
+	} 
+
+	override public function pause(): Void {
+		try {
+			element.pause();
+		}
+		catch (e: Dynamic) {
+			trace(e);
+		}
+	}
+
+	override public function stop(): Void {
+		try {
+			element.pause();
+			element.currentTime = 0;
+			super.stop();
+		}
+		catch (e: Dynamic) {
+			trace(e);
+		}
+	}
+
+	override public function getCurrentPos(): Int {
+		return Math.ceil(element.currentTime * 1000);  // Miliseconds
+	}
+
+	override public function getLength(): Int {
+		if (Math.isFinite(element.duration)) {
+			return Math.floor(element.duration * 1000); // Miliseconds
+		}
+		else {
+			return -1;
+		}
+	}
+}*/
+class Sound extends kha.Sound {
+	var filenames: Array<String>;
+
+	static var loading: Array<Sound> = new Array();
+
+	var done: kha.Sound->Void;
+	var failed: AssetError->Void;
+
+	public var element: AudioElement;
+
+	public function new(filenames: Array<String>, done: kha.Sound->Void, failed: AssetError->Void) {
+		super();
+
+		this.done = done;
+		this.failed = failed;
+		loading.push(this); // prevent gc from removing this
+
+		element = Browser.document.createAudioElement();
+
+		this.filenames = [];
+		for (filename in filenames) {
+			if (element.canPlayType("audio/ogg") != "" && filename.endsWith(".ogg"))
+				this.filenames.push(filename);
+			if (element.canPlayType("audio/mp4") != "" && filename.endsWith(".mp4"))
+				this.filenames.push(filename);
+			if (element.canPlayType("audio/wav") != "" && filename.endsWith(".wav"))
+				this.filenames.push(filename);
+		}
+
+		element.addEventListener("error", errorListener, false);
+		element.addEventListener("canplay", canPlayThroughListener, false);
+
+		element.src = this.filenames[0];
+		element.preload = "auto";
+		element.load();
+	}
+
+	// override public function play(): kha.SoundChannel {
+	//	try {
+	//		element.play();
+	//	}
+	//	catch (e: Dynamic) {
+	//		trace(e);
+	//	}
+	//	return new SoundChannel(element);
+	// }
+	function errorListener(eventInfo: ErrorEvent): Void {
+		if (element.error.code == MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED) {
+			for (i in 0...filenames.length - 1) {
+				if (element.src == filenames[i]) {
+					// try loading with next extension:
+					element.src = filenames[i + 1];
+					return;
+				}
+			}
+		}
+
+		failed({url: element.src});
+		finishAsset();
+	}
+
+	function canPlayThroughListener(eventInfo: Event): Void {
+		finishAsset();
+	}
+
+	function finishAsset() {
+		element.removeEventListener("error", errorListener, false);
+		element.removeEventListener("canplaythrough", canPlayThroughListener, false);
+		done(this);
+		loading.remove(this);
+	}
+
+	override public function uncompress(done: Void->Void): Void {
+		done();
+	}
+}

Kha/Backends/HTML5/kha/js/Video.hx

@@ -0,0 +1,147 @@
+package kha.js;
+
+import js.Browser;
+import js.html.ErrorEvent;
+import js.html.Event;
+import js.html.MediaError;
+import js.html.VideoElement;
+
+using StringTools;
+
+class Video extends kha.Video {
+	public var element: VideoElement;
+	public var texture: Image;
+
+	var filenames: Array<String>;
+	var done: kha.Video->Void;
+
+	function new() {
+		super();
+	}
+
+	public static function fromElement(element: js.html.VideoElement): Video {
+		var video = new Video();
+		video.element = element;
+		if (SystemImpl.gl != null)
+			video.texture = Image.fromVideo(video);
+		return video;
+	}
+
+	public static function fromFile(filenames: Array<String>, done: kha.Video->Void): Void {
+		var video = new Video();
+
+		video.done = done;
+
+		video.element = cast Browser.document.createElement("video");
+
+		video.filenames = [];
+		for (filename in filenames) {
+			if (video.element.canPlayType("video/webm") != "" && filename.endsWith(".webm"))
+				video.filenames.push(filename);
+			#if !kha_debug_html5
+			if (video.element.canPlayType("video/mp4") != "" && filename.endsWith(".mp4"))
+				video.filenames.push(filename);
+			#end
+		}
+
+		video.element.addEventListener("error", video.errorListener, false);
+		video.element.addEventListener("canplaythrough", video.canPlayThroughListener, false);
+
+		video.element.preload = "auto";
+		video.element.src = video.filenames[0];
+	}
+
+	override public function width(): Int {
+		return element.videoWidth;
+	}
+
+	override public function height(): Int {
+		return element.videoHeight;
+	}
+
+	override public function play(loop: Bool = false): Void {
+		try {
+			element.loop = loop;
+			element.play();
+		}
+		catch (e:Dynamic) {
+			trace(e);
+		}
+	}
+
+	override public function pause(): Void {
+		try {
+			element.pause();
+		}
+		catch (e:Dynamic) {
+			trace(e);
+		}
+	}
+
+	override public function stop(): Void {
+		try {
+			element.pause();
+			element.currentTime = 0;
+		}
+		catch (e:Dynamic) {
+			trace(e);
+		}
+	}
+
+	override public function getCurrentPos(): Int {
+		return Math.ceil(element.currentTime * 1000); // Miliseconds
+	}
+
+	override function get_position(): Int {
+		return Math.ceil(element.currentTime * 1000);
+	}
+
+	override function set_position(value: Int): Int {
+		element.currentTime = value / 1000;
+		return value;
+	}
+
+	override public function getVolume(): Float {
+		return element.volume;
+	}
+
+	override public function setVolume(volume: Float): Void {
+		element.volume = volume;
+	}
+
+	override public function getLength(): Int {
+		if (Math.isFinite(element.duration)) {
+			return Math.floor(element.duration * 1000); // Miliseconds
+		}
+		else {
+			return -1;
+		}
+	}
+
+	function errorListener(eventInfo: ErrorEvent): Void {
+		if (element.error.code == MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED) {
+			for (i in 0...filenames.length - 1) {
+				if (element.src == filenames[i]) {
+					// try loading with next extension:
+					element.src = filenames[i + 1];
+					return;
+				}
+			}
+		}
+
+		trace("Error loading " + element.src);
+		finishAsset();
+	}
+
+	function canPlayThroughListener(eventInfo: Event): Void {
+		finishAsset();
+	}
+
+	function finishAsset() {
+		element.removeEventListener("error", errorListener, false);
+		element.removeEventListener("canplaythrough", canPlayThroughListener, false);
+		if (SystemImpl.gl != null)
+			texture = Image.fromVideo(this);
+		done(this);
+	}
+}

Kha/Backends/HTML5/kha/js/WebAudioSound.hx

@@ -0,0 +1,114 @@
+package kha.js;
+
+import haxe.io.Bytes;
+import js.Browser;
+import js.html.XMLHttpRequest;
+import kha.audio2.Audio;
+
+/*
+	class WebAudioChannel extends kha.SoundChannel {
+	private var buffer: Dynamic;
+	private var startTime: Float;
+	private var offset: Float;
+	private var source: Dynamic;
+
+	public function new(buffer: Dynamic) {
+		super();
+		this.offset = 0;
+		this.buffer = buffer;
+		this.startTime = Audio._context.currentTime; 
+		this.source = Audio._context.createBufferSource();
+		this.source.buffer = this.buffer;
+		this.source.connect(Audio._context.destination);
+		this.source.start(0);
+	}
+
+	override public function play(): Void {
+		if (source != null) return;
+		super.play();
+		startTime = Audio._context.currentTime - offset;
+		source.start(0, offset);
+	}
+
+	override public function pause(): Void {
+		source.stop();
+		offset = Audio._context.currentTime - startTime;
+		startTime = -1;
+		source = null;
+	}
+
+	override public function stop(): Void {
+		source.stop();
+		source = null;
+		offset = 0;
+		startTime = -1;
+		super.stop();
+	}
+
+	override public function getCurrentPos(): Int {
+		if (startTime < 0) return Math.ceil(offset * 1000);
+		else return Math.ceil((Audio._context.currentTime - startTime) * 1000); //Miliseconds
+	}
+
+	override public function getLength(): Int {
+		return Math.floor(buffer.duration * 1000); //Miliseconds
+	}
+	}
+ */
+class WebAudioSound extends kha.Sound {
+	public function new(filename: String, done: kha.Sound->Void, failed: AssetError->Void) {
+		super();
+		var request = untyped new XMLHttpRequest();
+		request.open("GET", filename, true);
+		request.responseType = "arraybuffer";
+
+		request.onerror = function() {
+			failed({url: filename});
+		};
+
+		request.onload = function() {
+			compressedData = Bytes.ofData(request.response);
+			uncompressedData = null;
+			done(this);
+		};
+		request.send(null);
+	}
+
+	function superUncompress(done: Void->Void): Void {
+		super.uncompress(done);
+	}
+
+	override public function uncompress(done: Void->Void): Void {
+		Audio._context.decodeAudioData(compressedData.getData(), function(buffer: js.html.audio.AudioBuffer) {
+			final ch0 = buffer.getChannelData(0);
+			final ch1 = buffer.numberOfChannels == 1 ? ch0 : buffer.getChannelData(1);
+			final len = ch0.length;
+			uncompressedData = new kha.arrays.Float32Array(len * 2);
+			length = buffer.duration;
+			channels = buffer.numberOfChannels;
+			sampleRate = Math.round(buffer.sampleRate);
+			var idx = 0;
+			var i = 0;
+			final lidx = len * 2;
+			function uncompressInner() {
+				var chk_len = idx + 11025;
+				var next_chk = chk_len > lidx ? lidx : chk_len;
+				while (idx < next_chk) {
+					uncompressedData[idx] = ch0[i];
+					uncompressedData[idx + 1] = ch1[i];
+					idx += 2;
+					++i;
+				}
+				if (idx < lidx)
+					js.Browser.window.setTimeout(uncompressInner, 0);
+				else {
+					compressedData = null;
+					done();
+				}
+			};
+			uncompressInner();
+		}, function() {
+			superUncompress(done);
+		});
+	}
+}

Kha/Backends/HTML5/kha/js/graphics4/ConstantLocation.hx

@@ -0,0 +1,11 @@
+package kha.js.graphics4;
+
+class ConstantLocation implements kha.graphics4.ConstantLocation {
+	public var value: Dynamic;
+	public var type: Int;
+
+	public function new(value: Dynamic, type: Int) {
+		this.value = value;
+		this.type = type;
+	}
+}

Kha/Backends/HTML5/kha/js/graphics4/Graphics.hx

@@ -0,0 +1,738 @@
+package kha.js.graphics4;
+
+import js.html.webgl.GL2;
+import kha.graphics4.StencilValue;
+import kha.arrays.Float32Array;
+import kha.arrays.Int32Array;
+import js.html.webgl.GL;
+import kha.graphics4.BlendingFactor;
+import kha.graphics4.BlendingOperation;
+import kha.graphics4.CompareMode;
+import kha.graphics4.CubeMap;
+import kha.graphics4.CullMode;
+import kha.graphics4.IndexBuffer;
+import kha.graphics4.MipMapFilter;
+import kha.graphics4.PipelineState;
+import kha.graphics4.StencilAction;
+import kha.graphics4.TextureAddressing;
+import kha.graphics4.TextureFilter;
+import kha.graphics4.Usage;
+import kha.graphics4.VertexBuffer;
+import kha.graphics4.VertexStructure;
+import kha.Image;
+import kha.math.FastMatrix3;
+import kha.math.FastMatrix4;
+import kha.math.FastVector2;
+import kha.math.FastVector3;
+import kha.math.FastVector4;
+import kha.WebGLImage;
+
+class Graphics implements kha.graphics4.Graphics {
+	var currentPipeline: PipelineState = null;
+	var depthTest: Bool = false;
+	var depthMask: Bool = false;
+	var colorMaskRed: Bool = true;
+	var colorMaskGreen: Bool = true;
+	var colorMaskBlue: Bool = true;
+	var colorMaskAlpha: Bool = true;
+	var indicesCount: Int;
+	var renderTarget: Canvas;
+	var renderTargetFrameBuffer: Dynamic;
+	var renderTargetMSAA: Dynamic;
+	var renderTargetTexture: Dynamic;
+	var isCubeMap: Bool = false;
+	var isDepthAttachment: Bool = false;
+	var instancedExtension: Dynamic;
+	var blendMinMaxExtension: Dynamic;
+
+	static var current: Graphics = null;
+	static var useVertexAttributes: Int = 0;
+
+	public function new(renderTarget: Canvas = null) {
+		this.renderTarget = renderTarget;
+		init();
+		if (SystemImpl.gl2) {
+			instancedExtension = true;
+		}
+		else {
+			instancedExtension = SystemImpl.gl.getExtension("ANGLE_instanced_arrays");
+			blendMinMaxExtension = SystemImpl.gl.getExtension("EXT_blend_minmax");
+		}
+	}
+
+	function init() {
+		if (renderTarget == null)
+			return;
+		isCubeMap = Std.isOfType(renderTarget, CubeMap);
+		if (isCubeMap) {
+			var cubeMap: CubeMap = cast(renderTarget, CubeMap);
+			renderTargetFrameBuffer = cubeMap.frameBuffer;
+			renderTargetTexture = cubeMap.texture;
+			isDepthAttachment = cubeMap.isDepthAttachment;
+		}
+		else {
+			var image: WebGLImage = cast(renderTarget, WebGLImage);
+			renderTargetFrameBuffer = image.frameBuffer;
+			renderTargetMSAA = image.MSAAFrameBuffer;
+			renderTargetTexture = image.texture;
+		}
+	}
+
+	public function begin(additionalRenderTargets: Array<Canvas> = null): Void {
+		if (current == null) {
+			current = this;
+		}
+		else {
+			throw "End before you begin";
+		}
+
+		SystemImpl.gl.enable(GL.BLEND);
+		SystemImpl.gl.blendFunc(GL.SRC_ALPHA, GL.ONE_MINUS_SRC_ALPHA);
+		if (renderTarget == null) {
+			SystemImpl.gl.bindFramebuffer(GL.FRAMEBUFFER, null);
+			SystemImpl.gl.viewport(0, 0, System.windowWidth(), System.windowHeight());
+		}
+		else {
+			SystemImpl.gl.bindFramebuffer(GL.FRAMEBUFFER, renderTargetFrameBuffer);
+			// if (isCubeMap) SystemImpl.gl.framebufferTexture(GL.FRAMEBUFFER, GL.COLOR_ATTACHMENT0, GL.TEXTURE_CUBE_MAP, renderTargetTexture, 0); // Layered
+			SystemImpl.gl.viewport(0, 0, renderTarget.width, renderTarget.height);
+			if (additionalRenderTargets != null) {
+				SystemImpl.gl.framebufferTexture2D(GL.FRAMEBUFFER, SystemImpl.drawBuffers.COLOR_ATTACHMENT0_WEBGL, GL.TEXTURE_2D, renderTargetTexture, 0);
+				for (i in 0...additionalRenderTargets.length) {
+					SystemImpl.gl.framebufferTexture2D(GL.FRAMEBUFFER, SystemImpl.drawBuffers.COLOR_ATTACHMENT0_WEBGL + i + 1, GL.TEXTURE_2D,
+						cast(additionalRenderTargets[i], WebGLImage).texture, 0);
+				}
+				var attachments = [SystemImpl.drawBuffers.COLOR_ATTACHMENT0_WEBGL];
+				for (i in 0...additionalRenderTargets.length) {
+					attachments.push(SystemImpl.drawBuffers.COLOR_ATTACHMENT0_WEBGL + i + 1);
+				}
+				SystemImpl.gl2 ? untyped SystemImpl.gl.drawBuffers(attachments) : SystemImpl.drawBuffers.drawBuffersWEBGL(attachments);
+			}
+		}
+	}
+
+	public function beginFace(face: Int): Void {
+		if (current == null) {
+			current = this;
+		}
+		else {
+			throw "End before you begin";
+		}
+
+		SystemImpl.gl.enable(GL.BLEND);
+		SystemImpl.gl.blendFunc(GL.SRC_ALPHA, GL.ONE_MINUS_SRC_ALPHA);
+		SystemImpl.gl.bindFramebuffer(GL.FRAMEBUFFER, renderTargetFrameBuffer);
+		SystemImpl.gl.framebufferTexture2D(GL.FRAMEBUFFER, isDepthAttachment ? GL.DEPTH_ATTACHMENT : GL.COLOR_ATTACHMENT0,
+			GL.TEXTURE_CUBE_MAP_POSITIVE_X + face, renderTargetTexture, 0);
+		SystemImpl.gl.viewport(0, 0, renderTarget.width, renderTarget.height);
+	}
+
+	public function beginEye(eye: Int): Void {
+		if (current == null) {
+			current = this;
+		}
+		else {
+			throw "End before you begin";
+		}
+
+		SystemImpl.gl.enable(GL.BLEND);
+		SystemImpl.gl.blendFunc(GL.SRC_ALPHA, GL.ONE_MINUS_SRC_ALPHA);
+		SystemImpl.gl.bindFramebuffer(GL.FRAMEBUFFER, null);
+		if (eye == 0) {
+			SystemImpl.gl.viewport(0, 0, Std.int(System.windowWidth() * 0.5), System.windowHeight());
+		}
+		else {
+			SystemImpl.gl.viewport(Std.int(System.windowWidth() * 0.5), 0, Std.int(System.windowWidth() * 0.5), System.windowHeight());
+		}
+	}
+
+	public function end(): Void {
+		if (current == this) {
+			current = null;
+		}
+		else {
+			throw "Begin before you end";
+		}
+
+		if (renderTargetMSAA != null) {
+			untyped SystemImpl.gl.bindFramebuffer(SystemImpl.gl.READ_FRAMEBUFFER, renderTargetFrameBuffer);
+			untyped SystemImpl.gl.bindFramebuffer(SystemImpl.gl.DRAW_FRAMEBUFFER, renderTargetMSAA);
+			untyped SystemImpl.gl.blitFramebuffer(0, 0, renderTarget.width, renderTarget.height, 0, 0, renderTarget.width, renderTarget.height,
+				GL.COLOR_BUFFER_BIT, GL.NEAREST);
+		}
+		#if (debug || kha_debug_html5)
+		var error = SystemImpl.gl.getError();
+		switch (error) {
+			case GL.NO_ERROR:
+
+			case GL.INVALID_ENUM:
+				trace("WebGL error: Invalid enum");
+			case GL.INVALID_VALUE:
+				trace("WebGL error: Invalid value");
+			case GL.INVALID_OPERATION:
+				trace("WebGL error: Invalid operation");
+			case GL.INVALID_FRAMEBUFFER_OPERATION:
+				trace("WebGL error: Invalid framebuffer operation");
+			case GL.OUT_OF_MEMORY:
+				trace("WebGL error: Out of memory");
+			case GL.CONTEXT_LOST_WEBGL:
+				trace("WebGL error: Context lost");
+			default:
+				trace("Unknown WebGL error");
+		}
+		#end
+	}
+
+	public function flush(): Void {}
+
+	public function vsynced(): Bool {
+		return true;
+	}
+
+	public function refreshRate(): Int {
+		return 60;
+	}
+
+	public function clear(?color: Color, ?depth: Float, ?stencil: Int): Void {
+		var clearMask: Int = 0;
+		if (color != null) {
+			clearMask |= GL.COLOR_BUFFER_BIT;
+			SystemImpl.gl.colorMask(true, true, true, true);
+			SystemImpl.gl.clearColor(color.R, color.G, color.B, color.A);
+		}
+		if (depth != null) {
+			clearMask |= GL.DEPTH_BUFFER_BIT;
+			SystemImpl.gl.enable(GL.DEPTH_TEST);
+			SystemImpl.gl.depthMask(true);
+			SystemImpl.gl.clearDepth(depth);
+		}
+		if (stencil != null) {
+			clearMask |= GL.STENCIL_BUFFER_BIT;
+			SystemImpl.gl.enable(GL.STENCIL_TEST);
+			SystemImpl.gl.stencilMask(0xff);
+			SystemImpl.gl.clearStencil(stencil);
+		}
+		SystemImpl.gl.clear(clearMask);
+		SystemImpl.gl.colorMask(colorMaskRed, colorMaskGreen, colorMaskBlue, colorMaskAlpha);
+		if (depthTest) {
+			SystemImpl.gl.enable(GL.DEPTH_TEST);
+		}
+		else {
+			SystemImpl.gl.disable(GL.DEPTH_TEST);
+		}
+		SystemImpl.gl.depthMask(depthMask);
+	}
+
+	public function viewport(x: Int, y: Int, width: Int, height: Int): Void {
+		if (renderTarget == null) {
+			SystemImpl.gl.viewport(x, System.windowHeight(0) - y - height, width, height);
+		}
+		else {
+			SystemImpl.gl.viewport(x, y, width, height);
+		}
+	}
+
+	public function scissor(x: Int, y: Int, width: Int, height: Int): Void {
+		SystemImpl.gl.enable(GL.SCISSOR_TEST);
+		if (renderTarget == null) {
+			SystemImpl.gl.scissor(x, System.windowHeight(0) - y - height, width, height);
+		}
+		else {
+			SystemImpl.gl.scissor(x, y, width, height);
+		}
+	}
+
+	public function disableScissor(): Void {
+		SystemImpl.gl.disable(GL.SCISSOR_TEST);
+	}
+
+	public function setDepthMode(write: Bool, mode: CompareMode): Void {
+		switch (mode) {
+			case Always:
+				write ? SystemImpl.gl.enable(GL.DEPTH_TEST) : SystemImpl.gl.disable(GL.DEPTH_TEST);
+				depthTest = write;
+				SystemImpl.gl.depthFunc(GL.ALWAYS);
+			case Never:
+				SystemImpl.gl.enable(GL.DEPTH_TEST);
+				depthTest = true;
+				SystemImpl.gl.depthFunc(GL.NEVER);
+			case Equal:
+				SystemImpl.gl.enable(GL.DEPTH_TEST);
+				depthTest = true;
+				SystemImpl.gl.depthFunc(GL.EQUAL);
+			case NotEqual:
+				SystemImpl.gl.enable(GL.DEPTH_TEST);
+				depthTest = true;
+				SystemImpl.gl.depthFunc(GL.NOTEQUAL);
+			case Less:
+				SystemImpl.gl.enable(GL.DEPTH_TEST);
+				depthTest = true;
+				SystemImpl.gl.depthFunc(GL.LESS);
+			case LessEqual:
+				SystemImpl.gl.enable(GL.DEPTH_TEST);
+				depthTest = true;
+				SystemImpl.gl.depthFunc(GL.LEQUAL);
+			case Greater:
+				SystemImpl.gl.enable(GL.DEPTH_TEST);
+				depthTest = true;
+				SystemImpl.gl.depthFunc(GL.GREATER);
+			case GreaterEqual:
+				SystemImpl.gl.enable(GL.DEPTH_TEST);
+				depthTest = true;
+				SystemImpl.gl.depthFunc(GL.GEQUAL);
+		}
+		SystemImpl.gl.depthMask(write);
+		depthMask = write;
+	}
+
+	static function getBlendFunc(factor: BlendingFactor): Int {
+		switch (factor) {
+			case BlendZero, Undefined:
+				return GL.ZERO;
+			case BlendOne:
+				return GL.ONE;
+			case SourceAlpha:
+				return GL.SRC_ALPHA;
+			case DestinationAlpha:
+				return GL.DST_ALPHA;
+			case InverseSourceAlpha:
+				return GL.ONE_MINUS_SRC_ALPHA;
+			case InverseDestinationAlpha:
+				return GL.ONE_MINUS_DST_ALPHA;
+			case SourceColor:
+				return GL.SRC_COLOR;
+			case DestinationColor:
+				return GL.DST_COLOR;
+			case InverseSourceColor:
+				return GL.ONE_MINUS_SRC_COLOR;
+			case InverseDestinationColor:
+				return GL.ONE_MINUS_DST_COLOR;
+		}
+	}
+
+	static function getBlendOp(op: BlendingOperation): Int {
+		switch (op) {
+			case Add:
+				return GL.FUNC_ADD;
+			case Subtract:
+				return GL.FUNC_SUBTRACT;
+			case ReverseSubtract:
+				return GL.FUNC_REVERSE_SUBTRACT;
+			case Min:
+				return 0x8007;
+			case Max:
+				return 0x8008;
+		}
+	}
+
+	public function setBlendingMode(source: BlendingFactor, destination: BlendingFactor, operation: BlendingOperation, alphaSource: BlendingFactor,
+			alphaDestination: BlendingFactor, alphaOperation: BlendingOperation): Void {
+		if (source == BlendOne && destination == BlendZero) {
+			SystemImpl.gl.disable(GL.BLEND);
+		}
+		else {
+			SystemImpl.gl.enable(GL.BLEND);
+			SystemImpl.gl.blendFuncSeparate(getBlendFunc(source), getBlendFunc(destination), getBlendFunc(alphaSource), getBlendFunc(alphaDestination));
+			SystemImpl.gl.blendEquationSeparate(getBlendOp(operation), getBlendOp(alphaOperation));
+		}
+	}
+
+	public function createVertexBuffer(vertexCount: Int, structure: VertexStructure, usage: Usage, canRead: Bool = false): kha.graphics4.VertexBuffer {
+		return new VertexBuffer(vertexCount, structure, usage);
+	}
+
+	public function setVertexBuffer(vertexBuffer: kha.graphics4.VertexBuffer): Void {
+		for (i in 0...useVertexAttributes) {
+			SystemImpl.gl.disableVertexAttribArray(i);
+		}
+		useVertexAttributes = vertexBuffer.set(0);
+	}
+
+	public function setVertexBuffers(vertexBuffers: Array<kha.graphics4.VertexBuffer>): Void {
+		for (i in 0...useVertexAttributes) {
+			SystemImpl.gl.disableVertexAttribArray(i);
+		}
+		var offset: Int = 0;
+		for (vertexBuffer in vertexBuffers) {
+			offset += vertexBuffer.set(offset);
+		}
+		useVertexAttributes = offset;
+	}
+
+	public function createIndexBuffer(indexCount: Int, usage: Usage, canRead: Bool = false): kha.graphics4.IndexBuffer {
+		return new IndexBuffer(indexCount, usage);
+	}
+
+	public function setIndexBuffer(indexBuffer: kha.graphics4.IndexBuffer): Void {
+		indicesCount = indexBuffer.count();
+		indexBuffer.set();
+	}
+
+	// public function maxTextureSize(): Int {
+	//	return Sys.gl == null ? 8192 : Sys.gl.getParameter(Sys.gl.MAX_TEXTURE_SIZE);
+	// }
+	// public function supportsNonPow2Textures(): Bool {
+	//	return false;
+	// }
+
+	public function setTexture(stage: kha.graphics4.TextureUnit, texture: kha.Image): Void {
+		if (texture == null) {
+			SystemImpl.gl.activeTexture(GL.TEXTURE0 + (cast stage : TextureUnit).value);
+			SystemImpl.gl.bindTexture(GL.TEXTURE_2D, null);
+		}
+		else {
+			cast(texture, WebGLImage).set((cast stage : TextureUnit).value);
+		}
+	}
+
+	public function setTextureDepth(stage: kha.graphics4.TextureUnit, texture: kha.Image): Void {
+		cast(texture, WebGLImage).setDepth((cast stage : TextureUnit).value);
+	}
+
+	public function setTextureArray(unit: kha.graphics4.TextureUnit, texture: kha.Image): Void {
+		// not implemented yet.
+	}
+
+	public function setVideoTexture(unit: kha.graphics4.TextureUnit, texture: kha.Video): Void {
+		if (texture == null) {
+			SystemImpl.gl.activeTexture(GL.TEXTURE0 + (cast unit : TextureUnit).value);
+			SystemImpl.gl.bindTexture(GL.TEXTURE_2D, null);
+		}
+		else {
+			cast((cast texture : kha.js.Video).texture, WebGLImage).set((cast unit : TextureUnit).value);
+		}
+	}
+
+	public function setImageTexture(unit: kha.graphics4.TextureUnit, texture: kha.Image): Void {}
+
+	public function setTextureParameters(texunit: kha.graphics4.TextureUnit, uAddressing: TextureAddressing, vAddressing: TextureAddressing,
+			minificationFilter: TextureFilter, magnificationFilter: TextureFilter, mipmapFilter: MipMapFilter): Void {
+		SystemImpl.gl.activeTexture(GL.TEXTURE0 + (cast texunit : TextureUnit).value);
+
+		switch (uAddressing) {
+			case Clamp:
+				SystemImpl.gl.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_WRAP_S, GL.CLAMP_TO_EDGE);
+			case Repeat:
+				SystemImpl.gl.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_WRAP_S, GL.REPEAT);
+			case Mirror:
+				SystemImpl.gl.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_WRAP_S, GL.MIRRORED_REPEAT);
+		}
+
+		switch (vAddressing) {
+			case Clamp:
+				SystemImpl.gl.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_WRAP_T, GL.CLAMP_TO_EDGE);
+			case Repeat:
+				SystemImpl.gl.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_WRAP_T, GL.REPEAT);
+			case Mirror:
+				SystemImpl.gl.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_WRAP_T, GL.MIRRORED_REPEAT);
+		}
+
+		switch (minificationFilter) {
+			case PointFilter:
+				switch (mipmapFilter) {
+					case NoMipFilter:
+						SystemImpl.gl.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MIN_FILTER, GL.NEAREST);
+					case PointMipFilter:
+						SystemImpl.gl.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MIN_FILTER, GL.NEAREST_MIPMAP_NEAREST);
+					case LinearMipFilter:
+						SystemImpl.gl.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MIN_FILTER, GL.NEAREST_MIPMAP_LINEAR);
+				}
+			case LinearFilter, AnisotropicFilter:
+				switch (mipmapFilter) {
+					case NoMipFilter:
+						SystemImpl.gl.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MIN_FILTER, GL.LINEAR);
+					case PointMipFilter:
+						SystemImpl.gl.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MIN_FILTER, GL.LINEAR_MIPMAP_NEAREST);
+					case LinearMipFilter:
+						SystemImpl.gl.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MIN_FILTER, GL.LINEAR_MIPMAP_LINEAR);
+				}
+				if (minificationFilter == AnisotropicFilter) {
+					SystemImpl.gl.texParameteri(GL.TEXTURE_2D, SystemImpl.anisotropicFilter.TEXTURE_MAX_ANISOTROPY_EXT, 4);
+				}
+		}
+
+		switch (magnificationFilter) {
+			case PointFilter:
+				SystemImpl.gl.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MAG_FILTER, GL.NEAREST);
+			case LinearFilter, AnisotropicFilter:
+				SystemImpl.gl.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MAG_FILTER, GL.LINEAR);
+		}
+	}
+
+	public function setTexture3DParameters(texunit: kha.graphics4.TextureUnit, uAddressing: TextureAddressing, vAddressing: TextureAddressing,
+		wAddressing: TextureAddressing, minificationFilter: TextureFilter, magnificationFilter: TextureFilter, mipmapFilter: MipMapFilter): Void {}
+
+	public function setTextureCompareMode(texunit: kha.graphics4.TextureUnit, enabled: Bool) {
+		if (enabled) {
+			SystemImpl.gl.texParameteri(GL.TEXTURE_2D, GL2.TEXTURE_COMPARE_MODE, GL2.COMPARE_REF_TO_TEXTURE);
+			SystemImpl.gl.texParameteri(GL.TEXTURE_2D, GL2.TEXTURE_COMPARE_FUNC, GL.LEQUAL);
+		}
+		else {
+			SystemImpl.gl.texParameteri(GL.TEXTURE_2D, GL2.TEXTURE_COMPARE_MODE, GL.NONE);
+		}
+	}
+
+	public function setCubeMapCompareMode(texunit: kha.graphics4.TextureUnit, enabled: Bool) {
+		if (enabled) {
+			SystemImpl.gl.texParameteri(GL.TEXTURE_CUBE_MAP, GL2.TEXTURE_COMPARE_MODE, GL2.COMPARE_REF_TO_TEXTURE);
+			SystemImpl.gl.texParameteri(GL.TEXTURE_CUBE_MAP, GL2.TEXTURE_COMPARE_FUNC, GL.LEQUAL);
+		}
+		else {
+			SystemImpl.gl.texParameteri(GL.TEXTURE_CUBE_MAP, GL2.TEXTURE_COMPARE_MODE, GL.NONE);
+		}
+	}
+
+	public function setCubeMap(stage: kha.graphics4.TextureUnit, cubeMap: kha.graphics4.CubeMap): Void {
+		if (cubeMap == null) {
+			SystemImpl.gl.activeTexture(GL.TEXTURE0 + (cast stage : TextureUnit).value);
+			SystemImpl.gl.bindTexture(GL.TEXTURE_CUBE_MAP, null);
+		}
+		else {
+			cubeMap.set((cast stage : TextureUnit).value);
+		}
+	}
+
+	public function setCubeMapDepth(stage: kha.graphics4.TextureUnit, cubeMap: kha.graphics4.CubeMap): Void {
+		cubeMap.setDepth((cast stage : TextureUnit).value);
+	}
+
+	public function maxBoundTextures(): Int {
+		return SystemImpl.gl.getParameter(GL.MAX_TEXTURE_IMAGE_UNITS);
+	}
+
+	public function setCullMode(mode: CullMode): Void {
+		switch (mode) {
+			case None:
+				SystemImpl.gl.disable(GL.CULL_FACE);
+			case Clockwise:
+				SystemImpl.gl.enable(GL.CULL_FACE);
+				SystemImpl.gl.cullFace(GL.BACK);
+			case CounterClockwise:
+				SystemImpl.gl.enable(GL.CULL_FACE);
+				SystemImpl.gl.cullFace(GL.FRONT);
+		}
+	}
+
+	public function setPipeline(pipe: PipelineState): Void {
+		setCullMode(pipe.cullMode);
+		setDepthMode(pipe.depthWrite, pipe.depthMode);
+		if (pipe.stencilFrontMode == Always && pipe.stencilBackMode == Always && pipe.stencilFrontBothPass == Keep && pipe.stencilBackBothPass == Keep
+			&& pipe.stencilFrontDepthFail == Keep && pipe.stencilBackDepthFail == Keep && pipe.stencilFrontFail == Keep && pipe.stencilBackFail == Keep) {
+			SystemImpl.gl.disable(GL.STENCIL_TEST);
+		}
+		else {
+			SystemImpl.gl.enable(GL.STENCIL_TEST);
+			setStencilParameters(true, pipe.stencilFrontMode, pipe.stencilFrontBothPass, pipe.stencilFrontDepthFail, pipe.stencilFrontFail,
+				pipe.stencilReferenceValue, pipe.stencilReadMask, pipe.stencilWriteMask);
+			setStencilParameters(false, pipe.stencilBackMode, pipe.stencilBackBothPass, pipe.stencilBackDepthFail, pipe.stencilBackFail,
+				pipe.stencilReferenceValue, pipe.stencilReadMask, pipe.stencilWriteMask);
+		}
+		setBlendingMode(pipe.blendSource, pipe.blendDestination, pipe.blendOperation, pipe.alphaBlendSource, pipe.alphaBlendDestination,
+			pipe.alphaBlendOperation);
+		currentPipeline = pipe;
+		pipe.set();
+		colorMaskRed = pipe.colorWriteMaskRed;
+		colorMaskGreen = pipe.colorWriteMaskGreen;
+		colorMaskBlue = pipe.colorWriteMaskBlue;
+		colorMaskAlpha = pipe.colorWriteMaskAlpha;
+	}
+
+	public function setStencilReferenceValue(value: Int): Void {
+		SystemImpl.gl.stencilFuncSeparate(GL.FRONT, convertCompareMode(currentPipeline.stencilFrontMode), value, currentPipeline.stencilReadMask);
+		SystemImpl.gl.stencilFuncSeparate(GL.BACK, convertCompareMode(currentPipeline.stencilBackMode), value, currentPipeline.stencilReadMask);
+	}
+
+	public function setBool(location: kha.graphics4.ConstantLocation, value: Bool): Void {
+		SystemImpl.gl.uniform1i((cast location : ConstantLocation).value, value ? 1 : 0);
+	}
+
+	public function setInt(location: kha.graphics4.ConstantLocation, value: Int): Void {
+		SystemImpl.gl.uniform1i((cast location : ConstantLocation).value, value);
+	}
+
+	public function setInt2(location: kha.graphics4.ConstantLocation, value1: Int, value2: Int): Void {
+		SystemImpl.gl.uniform2i((cast location : ConstantLocation).value, value1, value2);
+	}
+
+	public function setInt3(location: kha.graphics4.ConstantLocation, value1: Int, value2: Int, value3: Int): Void {
+		SystemImpl.gl.uniform3i((cast location : ConstantLocation).value, value1, value2, value3);
+	}
+
+	public function setInt4(location: kha.graphics4.ConstantLocation, value1: Int, value2: Int, value3: Int, value4: Int): Void {
+		SystemImpl.gl.uniform4i((cast location : ConstantLocation).value, value1, value2, value3, value4);
+	}
+
+	public function setInts(location: kha.graphics4.ConstantLocation, values: Int32Array): Void {
+		var webglLocation = (cast location : ConstantLocation);
+		var rawValues = new js.lib.Int32Array(values.buffer, values.byteOffset, values.length);
+		switch (webglLocation.type) {
+			case GL.INT_VEC2:
+				SystemImpl.gl.uniform2iv(webglLocation.value, rawValues);
+			case GL.INT_VEC3:
+				SystemImpl.gl.uniform3iv(webglLocation.value, rawValues);
+			case GL.INT_VEC4:
+				SystemImpl.gl.uniform4iv(webglLocation.value, rawValues);
+			default:
+				SystemImpl.gl.uniform1iv(webglLocation.value, rawValues);
+		}
+	}
+
+	public function setFloat(location: kha.graphics4.ConstantLocation, value: FastFloat): Void {
+		SystemImpl.gl.uniform1f((cast location : ConstantLocation).value, value);
+	}
+
+	public function setFloat2(location: kha.graphics4.ConstantLocation, value1: FastFloat, value2: FastFloat): Void {
+		SystemImpl.gl.uniform2f((cast location : ConstantLocation).value, value1, value2);
+	}
+
+	public function setFloat3(location: kha.graphics4.ConstantLocation, value1: FastFloat, value2: FastFloat, value3: FastFloat): Void {
+		SystemImpl.gl.uniform3f((cast location : ConstantLocation).value, value1, value2, value3);
+	}
+
+	public function setFloat4(location: kha.graphics4.ConstantLocation, value1: FastFloat, value2: FastFloat, value3: FastFloat, value4: FastFloat): Void {
+		SystemImpl.gl.uniform4f((cast location : ConstantLocation).value, value1, value2, value3, value4);
+	}
+
+	public function setFloats(location: kha.graphics4.ConstantLocation, values: Float32Array): Void {
+		var webglLocation = (cast location : ConstantLocation);
+		var rawValues = new js.lib.Float32Array(values.buffer, values.byteOffset, values.length);
+		switch (webglLocation.type) {
+			case GL.FLOAT_VEC2:
+				SystemImpl.gl.uniform2fv(webglLocation.value, rawValues);
+			case GL.FLOAT_VEC3:
+				SystemImpl.gl.uniform3fv(webglLocation.value, rawValues);
+			case GL.FLOAT_VEC4:
+				SystemImpl.gl.uniform4fv(webglLocation.value, rawValues);
+			case GL.FLOAT_MAT4:
+				SystemImpl.gl.uniformMatrix4fv(webglLocation.value, false, rawValues);
+			default:
+				SystemImpl.gl.uniform1fv(webglLocation.value, rawValues);
+		}
+	}
+
+	public function setVector2(location: kha.graphics4.ConstantLocation, value: FastVector2): Void {
+		SystemImpl.gl.uniform2f((cast location : ConstantLocation).value, value.x, value.y);
+	}
+
+	public function setVector3(location: kha.graphics4.ConstantLocation, value: FastVector3): Void {
+		SystemImpl.gl.uniform3f((cast location : ConstantLocation).value, value.x, value.y, value.z);
+	}
+
+	public function setVector4(location: kha.graphics4.ConstantLocation, value: FastVector4): Void {
+		SystemImpl.gl.uniform4f((cast location : ConstantLocation).value, value.x, value.y, value.z, value.w);
+	}
+
+	static var matrixCache = new js.lib.Float32Array(16);
+	public inline function setMatrix(location: kha.graphics4.ConstantLocation, matrix: FastMatrix4): Void {
+		matrixCache[0] = matrix._00;
+		matrixCache[1] = matrix._01;
+		matrixCache[2] = matrix._02;
+		matrixCache[3] = matrix._03;
+		matrixCache[4] = matrix._10;
+		matrixCache[5] = matrix._11;
+		matrixCache[6] = matrix._12;
+		matrixCache[7] = matrix._13;
+		matrixCache[8] = matrix._20;
+		matrixCache[9] = matrix._21;
+		matrixCache[10] = matrix._22;
+		matrixCache[11] = matrix._23;
+		matrixCache[12] = matrix._30;
+		matrixCache[13] = matrix._31;
+		matrixCache[14] = matrix._32;
+		matrixCache[15] = matrix._33;
+		SystemImpl.gl.uniformMatrix4fv((cast location : ConstantLocation).value, false, matrixCache);
+	}
+
+	static var matrix3Cache = new js.lib.Float32Array(9);
+	public inline function setMatrix3(location: kha.graphics4.ConstantLocation, matrix: FastMatrix3): Void {
+		matrix3Cache[0] = matrix._00;
+		matrix3Cache[1] = matrix._01;
+		matrix3Cache[2] = matrix._02;
+		matrix3Cache[3] = matrix._10;
+		matrix3Cache[4] = matrix._11;
+		matrix3Cache[5] = matrix._12;
+		matrix3Cache[6] = matrix._20;
+		matrix3Cache[7] = matrix._21;
+		matrix3Cache[8] = matrix._22;
+		SystemImpl.gl.uniformMatrix3fv((cast location : ConstantLocation).value, false, matrix3Cache);
+	}
+
+	public function drawIndexedVertices(start: Int = 0, count: Int = -1): Void {
+		var type = SystemImpl.elementIndexUint == null ? GL.UNSIGNED_SHORT : GL.UNSIGNED_INT;
+		var size = type == GL.UNSIGNED_SHORT ? 2 : 4;
+		SystemImpl.gl.drawElements(GL.TRIANGLES, count == -1 ? indicesCount : count, type, start * size);
+	}
+
+	function convertStencilAction(action: StencilAction) {
+		switch (action) {
+			case StencilAction.Decrement:
+				return GL.DECR;
+			case StencilAction.DecrementWrap:
+				return GL.DECR_WRAP;
+			case StencilAction.Increment:
+				return GL.INCR;
+			case StencilAction.IncrementWrap:
+				return GL.INCR_WRAP;
+			case StencilAction.Invert:
+				return GL.INVERT;
+			case StencilAction.Keep:
+				return GL.KEEP;
+			case StencilAction.Replace:
+				return GL.REPLACE;
+			case StencilAction.Zero:
+				return GL.ZERO;
+		}
+	}
+
+	function convertCompareMode(compareMode: CompareMode) {
+		switch (compareMode) {
+			case Always:
+				return GL.ALWAYS;
+			case Equal:
+				return GL.EQUAL;
+			case Greater:
+				return GL.GREATER;
+			case GreaterEqual:
+				return GL.GEQUAL;
+			case Less:
+				return GL.LESS;
+			case LessEqual:
+				return GL.LEQUAL;
+			case Never:
+				return GL.NEVER;
+			case NotEqual:
+				return GL.NOTEQUAL;
+		}
+	}
+
+	public function setStencilParameters(front: Bool, compareMode: CompareMode, bothPass: StencilAction, depthFail: StencilAction, stencilFail: StencilAction,
+			referenceValue: StencilValue, readMask: Int = 0xff, writeMask: Int = 0xff): Void {
+		var stencilFunc = convertCompareMode(compareMode);
+		SystemImpl.gl.stencilMaskSeparate(front ? GL.FRONT : GL.BACK, writeMask);
+		SystemImpl.gl.stencilOpSeparate(front ? GL.FRONT : GL.BACK, convertStencilAction(stencilFail), convertStencilAction(depthFail),
+			convertStencilAction(bothPass));
+		switch (referenceValue) {
+			case Static(value):
+				SystemImpl.gl.stencilFuncSeparate(front ? GL.FRONT : GL.BACK, stencilFunc, value, readMask);
+			case Dynamic:
+				SystemImpl.gl.stencilFuncSeparate(front ? GL.FRONT : GL.BACK, stencilFunc, 0, readMask);
+		}
+	}
+
+	public function drawIndexedVerticesInstanced(instanceCount: Int, start: Int = 0, count: Int = -1) {
+		if (instancedRenderingAvailable()) {
+			var type = SystemImpl.elementIndexUint == null ? GL.UNSIGNED_SHORT : GL.UNSIGNED_INT;
+			var typeSize = SystemImpl.elementIndexUint == null ? 2 : 4;
+			if (SystemImpl.gl2) {
+				untyped SystemImpl.gl.drawElementsInstanced(GL.TRIANGLES, count == -1 ? indicesCount : count, type, start * typeSize, instanceCount);
+			}
+			else {
+				instancedExtension.drawElementsInstancedANGLE(GL.TRIANGLES, count == -1 ? indicesCount : count, type, start * typeSize, instanceCount);
+			}
+		}
+	}
+
+	public function instancedRenderingAvailable(): Bool {
+		return instancedExtension;
+	}
+}

Kha/Backends/HTML5/kha/js/graphics4/Graphics2.hx

@@ -0,0 +1,25 @@
+package kha.js.graphics4;
+
+import js.html.webgl.GL;
+import kha.Color;
+
+class Graphics2 extends kha.graphics4.Graphics2 {
+	public function new(canvas: Canvas) {
+		super(canvas);
+	}
+
+	override public function drawVideoInternal(video: kha.Video, x: Float, y: Float, width: Float, height: Float): Void {
+		var v = cast(video, Video);
+		drawScaledSubImage(v.texture, 0, 0, v.texture.width, v.texture.height, x, y, width, height);
+	}
+
+	override public function begin(clear: Bool = true, clearColor: Color = null): Void {
+		SystemImpl.gl.colorMask(true, true, true, true);
+
+		// Disable depth test so that everything is just overpainted as determined by the order of function calls2
+		SystemImpl.gl.disable(GL.DEPTH_TEST);
+		SystemImpl.gl.depthFunc(GL.ALWAYS);
+
+		super.begin(clear, clearColor);
+	}
+}

Kha/Backends/HTML5/kha/js/graphics4/TextureUnit.hx

@@ -0,0 +1,9 @@
+package kha.js.graphics4;
+
+class TextureUnit implements kha.graphics4.TextureUnit {
+	public var value: Int;
+
+	public function new(value: Int) {
+		this.value = value;
+	}
+}

Kha/Backends/HTML5/kha/js/vr/VrInterface.hx

@@ -0,0 +1,249 @@
+package kha.js.vr;
+
+import js.Syntax;
+import js.lib.Float32Array;
+import kha.vr.Pose;
+import kha.vr.PoseState;
+import kha.vr.SensorState;
+import kha.vr.TimeWarpParms;
+import kha.math.FastMatrix4;
+import kha.math.Vector3;
+import kha.math.Quaternion;
+import kha.SystemImpl;
+
+class VrInterface extends kha.vr.VrInterface {
+	var vrEnabled: Bool = false;
+
+	var vrDisplay: Dynamic;
+	var frameData: Dynamic;
+
+	var leftProjectionMatrix: FastMatrix4 = FastMatrix4.identity();
+	var rightProjectionMatrix: FastMatrix4 = FastMatrix4.identity();
+	var leftViewMatrix: FastMatrix4 = FastMatrix4.identity();
+	var rightViewMatrix: FastMatrix4 = FastMatrix4.identity();
+
+	var width: Int = 0;
+	var height: Int = 0;
+	var vrWidth: Int = 0;
+	var vrHeight: Int = 0;
+
+	public function new() {
+		super();
+		#if kha_webvr
+		var displayEnabled: Bool = Syntax.code("navigator.getVRDisplays");
+		#else
+		var displayEnabled = false;
+		#end
+		if (displayEnabled) {
+			vrEnabled = true;
+			getVRDisplays();
+			trace("Display enabled.");
+		}
+	}
+
+	function getVRDisplays() {
+		var vrDisplayInstance = Syntax.code("navigator.getVRDisplays()");
+		vrDisplayInstance.then(function(displays) {
+			if (displays.length > 0) {
+				frameData = Syntax.code("new VRFrameData()");
+				vrDisplay = Syntax.code("displays[0]");
+				vrDisplay.depthNear = 0.1;
+				vrDisplay.depthFar = 1024.0;
+
+				var leftEye = vrDisplay.getEyeParameters("left");
+				var rightEye = vrDisplay.getEyeParameters("right");
+				width = SystemImpl.khanvas.width;
+				height = SystemImpl.khanvas.height;
+				vrWidth = Std.int(Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2);
+				vrHeight = Std.int(Math.max(leftEye.renderHeight, rightEye.renderHeight));
+			}
+			else {
+				trace("There are no VR displays connected.");
+			}
+		});
+	}
+
+	public override function onVRRequestPresent() {
+		try {
+			vrDisplay.requestPresent([{source: SystemImpl.khanvas}]).then(function() {
+				onResize();
+				vrDisplay.requestAnimationFrame(onAnimationFrame);
+			});
+		}
+		catch (err:Dynamic) {
+			trace("Failed to requestPresent.");
+			trace(err);
+		}
+	}
+
+	public override function onVRExitPresent() {
+		try {
+			vrDisplay.exitPresent([{source: SystemImpl.khanvas}]).then(function() {
+				onResize();
+			});
+		}
+		catch (err:Dynamic) {
+			trace("Failed to exitPresent.");
+			trace(err);
+		}
+	}
+
+	public override function onResetPose() {
+		try {
+			vrDisplay.resetPose();
+		}
+		catch (err:Dynamic) {
+			trace("Failed to resetPose");
+			trace(err);
+		}
+	}
+
+	function onAnimationFrame(timestamp: Float): Void {
+		if (vrDisplay != null && vrDisplay.isPresenting) {
+			vrDisplay.requestAnimationFrame(onAnimationFrame);
+
+			vrDisplay.getFrameData(frameData);
+
+			leftProjectionMatrix = createMatrixFromArray(untyped frameData.leftProjectionMatrix);
+			leftViewMatrix = createMatrixFromArray(untyped frameData.leftViewMatrix);
+
+			rightProjectionMatrix = createMatrixFromArray(untyped frameData.rightProjectionMatrix);
+			rightViewMatrix = createMatrixFromArray(untyped frameData.rightViewMatrix);
+
+			// Submit the newly rendered layer to be presented by the VRDisplay
+			vrDisplay.submitFrame();
+		}
+	}
+
+	function onResize() {
+		if (vrDisplay != null && vrDisplay.isPresenting) {
+			SystemImpl.khanvas.width = vrWidth;
+			SystemImpl.khanvas.height = vrHeight;
+		}
+		else {
+			SystemImpl.khanvas.width = width;
+			SystemImpl.khanvas.height = height;
+		}
+	}
+
+	public override function GetSensorState(): SensorState {
+		return GetPredictedSensorState(0.0);
+	}
+
+	public override function GetPredictedSensorState(time: Float): SensorState {
+		var result: SensorState = new SensorState();
+
+		result.Predicted = new PoseState();
+		result.Recorded = result.Predicted;
+
+		result.Predicted.AngularAcceleration = new Vector3();
+		result.Predicted.AngularVelocity = new Vector3();
+		result.Predicted.LinearAcceleration = new Vector3();
+		result.Predicted.LinearVelocity = new Vector3();
+		result.Predicted.TimeInSeconds = time;
+		result.Predicted.Pose = new Pose();
+		result.Predicted.Pose.Orientation = new Quaternion();
+		result.Predicted.Pose.Position = new Vector3();
+
+		var mPose = frameData.pose; // predicted pose of the vrDisplay
+		if (mPose != null) {
+			result.Predicted.AngularVelocity = createVectorFromArray(untyped mPose.angularVelocity);
+			result.Predicted.AngularAcceleration = createVectorFromArray(untyped mPose.angularAcceleration);
+			result.Predicted.LinearVelocity = createVectorFromArray(untyped mPose.linearVelocity);
+			result.Predicted.LinearAcceleration = createVectorFromArray(untyped mPose.linearAcceleration);
+			result.Predicted.Pose.Orientation = createQuaternion(untyped mPose.orientation);
+			result.Predicted.Pose.Position = createVectorFromArray(untyped mPose.position);
+		}
+
+		return result;
+	}
+
+	// Sends a black image to the warp swap thread
+	public override function WarpSwapBlack(): Void {
+		// TODO: Implement
+	}
+
+	// Sends the Oculus loading symbol to the warp swap thread
+	public override function WarpSwapLoadingIcon(): Void {
+		// TODO: Implement
+	}
+
+	// Sends the set of images to the warp swap thread
+	public override function WarpSwap(parms: TimeWarpParms): Void {
+		// TODO: Implement
+	}
+
+	public override function IsPresenting(): Bool {
+		if (vrDisplay != null)
+			return vrDisplay.isPresenting;
+		return false;
+	}
+
+	public override function IsVrEnabled(): Bool {
+		return vrEnabled;
+	}
+
+	public override function GetTimeInSeconds(): Float {
+		return Scheduler.time();
+	}
+
+	public override function GetProjectionMatrix(eye: Int): FastMatrix4 {
+		if (eye == 0) {
+			return leftProjectionMatrix;
+		}
+		else {
+			return rightProjectionMatrix;
+		}
+	}
+
+	public override function GetViewMatrix(eye: Int): FastMatrix4 {
+		if (eye == 0) {
+			return leftViewMatrix;
+		}
+		else {
+			return rightViewMatrix;
+		}
+	}
+
+	function createMatrixFromArray(array: Float32Array): FastMatrix4 {
+		var matrix: FastMatrix4 = FastMatrix4.identity();
+		matrix._00 = array[0];
+		matrix._01 = array[1];
+		matrix._02 = array[2];
+		matrix._03 = array[3];
+		matrix._10 = array[4];
+		matrix._11 = array[5];
+		matrix._12 = array[6];
+		matrix._13 = array[7];
+		matrix._20 = array[8];
+		matrix._21 = array[9];
+		matrix._22 = array[10];
+		matrix._23 = array[11];
+		matrix._30 = array[12];
+		matrix._31 = array[13];
+		matrix._32 = array[14];
+		matrix._33 = array[15];
+		return matrix;
+	}
+
+	function createVectorFromArray(array: Float32Array): Vector3 {
+		var vector: Vector3 = new Vector3(0, 0, 0);
+		if (array != null) {
+			vector.x = array[0];
+			vector.y = array[1];
+			vector.z = array[2];
+		}
+		return vector;
+	}
+
+	function createQuaternion(array: Float32Array): Quaternion {
+		var quaternion: Quaternion = new Quaternion(0, 0, 0, 0);
+		if (array != null) {
+			quaternion.x = array[0];
+			quaternion.y = array[1];
+			quaternion.z = array[2];
+			quaternion.w = array[3];
+		}
+		return quaternion;
+	}
+}