--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/Platforms/WebAssembly/wasm-viewport.js	Thu Jun 14 10:57:02 2018 +0200
@@ -0,0 +1,197 @@
+// http://stackoverflow.com/a/28900478/881731
+
+function WebAssemblyViewport(module, canvasId) {
+    this.module = module;
+    
+    // Obtain a reference to the canvas element using its id
+    this.htmlCanvas = document.getElementById(canvasId);
+  
+    // Obtain a graphics context on the canvas element for drawing.
+    this.context = htmlCanvas.getContext('2d');
+  
+    // ImageData structure that can be used to update the content of the canvas
+    this.imageData = null;
+  
+    // Temporary buffer in the WebAssembly heap that is used to render the pixels
+    this.renderingBuffer = null;
+  
+    // Get access to the WebAssembly functions
+    this.ViewportSetSize = this.module.cwrap('ViewportSetSize', null, [ 'number', 'number' ]);
+    this.ViewportRender = this.module.cwrap('ViewportRender', 'number', [ 'number', 'number', 'number' ]);
+    this.ViewportMouseDown = this.module.cwrap('ViewportMouseDown', null, [ 'number', 'number', 'number', 'number' ]);
+    this.ViewportMouseMove = this.module.cwrap('ViewportMouseMove', null, [ 'number', 'number' ]);
+    this.ViewportMouseUp = this.module.cwrap('ViewportMouseUp', null, [ ]);
+    this.ViewportMouseEnter = this.module.cwrap('ViewportMouseEnter', null, []);
+    this.ViewportMouseLeave = this.module.cwrap('ViewportMouseLeave', null, []);
+    this.ViewportMouseWheel = this.module.cwrap('ViewportMouseWheel', null, [ 'number', 'number', 'number', 'number' ]);
+    this.ViewportKeyPressed = this.module.cwrap('ViewportKeyPressed', null, [ 'string', 'number', 'number' ]);
+  
+    this.Redraw = function() {
+      if (this.imageData === null ||
+          this.renderingBuffer === null ||
+          ViewportRender(this.imageData.width,
+                         this.imageData.height,
+                         this.renderingBuffer) == 0) {
+        console.log('The rendering has failed');
+      } else {
+        // Create an accessor to the rendering buffer (i.e. create a
+        // "window" above the heap of the WASM module), then copy it to
+        // the ImageData object
+        this.imageData.data.set(new Uint8ClampedArray(
+          this.module.buffer,
+          this.renderingBuffer,
+          this.imageData.width * this.imageData.height * 4));
+        
+        this.context.putImageData(imageData, 0, 0);
+      }
+    }
+  
+    this.Resize = function() {
+      if (this.imageData != null &&
+          (this.imageData.width != this.window.innerWidth ||
+           this.imageData.height != this.window.innerHeight)) {
+        this.imageData = null;
+      }
+      
+      this.htmlCanvas.width = window.innerWidth;
+      this.htmlCanvas.height = window.innerHeight;
+  
+      if (this.imageData === null) {
+        this.imageData = context.getImageData(0, 0, this.htmlCanvas.width, this.htmlCanvas.height);
+        ViewportSetSize(this.htmlCanvas.width, this.htmlCanvas.height);
+  
+        if (this.renderingBuffer != null) {
+          this.module._free(this.renderingBuffer);
+        }
+        
+        renderingBuffer = this.module._malloc(this.imageData.width * this.imageData.height * 4);
+      }
+      
+      this.Redraw();
+    }
+  
+    // Force the rendering of the viewport for the first time
+    this.Resize();
+  
+    // Register an event listener to call the Resize() function 
+    // each time the window is resized.
+    window.addEventListener('resize', this.Resize, false);
+  
+    var that = this;
+  
+    this.htmlCanvas.addEventListener('contextmenu', function(event) {
+      // Prevent right click on the canvas
+      event.preventDefault();
+    }, false);
+    
+    this.htmlCanvas.addEventListener('mouseleave', function(event) {
+      that.ViewportMouseLeave();
+    });
+    
+    this.htmlCanvas.addEventListener('mouseenter', function(event) {
+      that.ViewportMouseEnter();
+    });
+  
+    this.htmlCanvas.addEventListener('mousedown', function(event) {
+      var x = event.pageX - this.offsetLeft;
+      var y = event.pageY - this.offsetTop;
+      that.ViewportMouseDown(event.button, x, y, 0 /* TODO */);    
+    });
+  
+    this.htmlCanvas.addEventListener('mousemove', function(event) {
+      var x = event.pageX - this.offsetLeft;
+      var y = event.pageY - this.offsetTop;
+      that.ViewportMouseMove(x, y);
+    });
+  
+    this.htmlCanvas.addEventListener('mouseup', function(event) {
+      that.ViewportMouseUp();
+    });
+  
+    window.addEventListener('keydown', function(event) {
+      that.ViewportKeyPressed(event.key, event.shiftKey, event.ctrlKey, event.altKey);
+    });
+  
+    this.htmlCanvas.addEventListener('wheel', function(event) {
+      var x = event.pageX - this.offsetLeft;
+      var y = event.pageY - this.offsetTop;
+      that.ViewportMouseWheel(event.deltaY, x, y, event.ctrlKey);
+      event.preventDefault();
+    });
+  
+  
+    // Touch events
+    this.touchTranslation = false;
+    this.touchZoom = false;
+  
+    this.ResetTouch = function() {
+      if (this.touchTranslation ||
+          this.touchZoom) {
+        this.ViewportMouseUp();
+      }
+  
+      this.touchTranslation = false;
+      this.touchZoom = false;
+    }
+  
+    this.GetTouchTranslation = function(event) {
+      var touch = event.targetTouches[0];
+      return [
+        touch.pageX,
+        touch.pageY
+      ];
+    }
+    
+    this.GetTouchZoom = function(event) {
+      var touch1 = event.targetTouches[0];
+      var touch2 = event.targetTouches[1];
+      var dx = (touch1.pageX - touch2.pageX);
+      var dy = (touch1.pageY - touch2.pageY);
+      var d = Math.sqrt(dx * dx + dy * dy);
+      return [
+        (touch1.pageX + touch2.pageX) / 2.0,
+        (touch1.pageY + touch2.pageY) / 2.0,
+        d
+      ];
+    }
+    
+    this.htmlCanvas.addEventListener('touchstart', function(event) {
+      ResetTouch();
+    });
+  
+    this.htmlCanvas.addEventListener('touchend', function(event) {
+      ResetTouch();
+    });
+    
+    this.htmlCanvas.addEventListener('touchmove', function(event) {
+      if (that.touchTranslation.length == 2) {
+        var t = GetTouchTranslation(event);
+        that.ViewportMouseMove(t[0], t[1]);
+      }
+      else if (that.touchZoom.length == 3) {
+        var z0 = that.touchZoom;
+        var z1 = GetTouchZoom(event);
+        that.ViewportMouseMove(z0[0], z0[1] - z0[2] + z1[2]);
+      }
+      else {
+        // Realize the gesture event
+        if (event.targetTouches.length == 1) {
+          // Exactly one finger inside the canvas => Setup a translation
+          that.touchTranslation = GetTouchTranslation(event);
+          that.ViewportMouseDown(1 /* middle button */,
+                                 that.touchTranslation[0],
+                                 that.touchTranslation[1], 0);
+        } else if (event.targetTouches.length == 2) {
+          // Exactly 2 fingers inside the canvas => Setup a pinch/zoom
+          that.touchZoom = GetTouchZoom(event);
+          var z0 = that.touchZoom;
+          that.ViewportMouseDown(2 /* right button */,
+                                 z0[0],
+                                 z0[1], 0);
+        }        
+      }
+    });
+    
+    return this;
+  }
+  
\ No newline at end of file