ayamflow

// Add on element with overflow
-webkit-mask-image: -webkit-radial-gradient(white, black);

ayamflow

canvasvideo.js / video Blob

Desktop

• All work as expected
• Blob: TODO test drag buffering

iOS

• canvasvideo.js: autoplay without sound, with sound need interaction
• Blob: load without interaction, needs interaction to play
• Blob + canvas: works without interaction

ayamflow

// MIT http://rem.mit-license.org

function trim(c) {
  var ctx = c.getContext('2d'),
    copy = document.createElement('canvas').getContext('2d'),
    pixels = ctx.getImageData(0, 0, c.width, c.height),
    l = pixels.data.length,
    i,
    bound = {
      top: null,

ayamflow

// Vertex

varying vec3 vNormal;

void main() {
    vNormal = normal;
    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
}

// Fragment

ayamflow

// from inear
http://www.inear.se/2011/09/set-a-sphere-on-fire-with-three-js/

float PI = 3.14159265;
float TWOPI = 6.28318531;
float BaseRadius = 1.0;

vec3 sphere( float u, float v) {

	u *= PI;

ayamflow

// https://github.com/hay/gifvideo/blob/master/gifvideo.js

var start;
var previousTime;
video.load();

// requestAnimationFrame automatically provides Date.now()
function play(now) {
    // only play if it has the data,
    // without waiting for ambiguous events

ayamflow

  http://www.facebook.com/dialog/feed?app_id=[FACEBOOK_APP_ID]' +
        '&link=[FULLY_QUALIFIED_LINK_TO_SHARE_CONTENT]' +
        '&picture=[LINK_TO_IMAGE]' +
        '&name=' + encodeURIComponent('[CONTENT_TITLE]') +
        '&caption=' + encodeURIComponent('[CONTENT_CAPTION]) +
        '&description=' + encodeURIComponent('[CONTENT_DESCRIPTION]') +
        '&redirect_uri=' + FBVars.baseURL + '[URL_TO_REDIRECT_TO_AFTER_SHARE]'

ayamflow

var cameraZ = camera.position.z;
var planeZ = 5;
var distance = cameraZ - planeZ;
var aspect = viewWidth / viewHeight;
var vFov = camera.fov * Math.PI / 180;
var planeHeightAtDistance = 2 * Math.tan(vFov / 2) * distance;
var planeWidthAtDistance = planeHeightAtDistance * aspect;

// or

ayamflow

// https://stackoverflow.com/questions/31775686/is-there-a-way-to-know-anything-about-hardware-resources-of-platform-accessing/31896597#31896597
// https://stackoverflow.com/questions/15464896/get-cpu-gpu-memory-information


var canvas = document.createElement('canvas')
var gl = canvas.getContext('experimental-webgl');
var params = [gl.RENDERER, gl.VENDOR, gl.VERSION, gl.SHADING_LANGUAGE_VERSION];
var infos = gl.getExtension('WEBGL_debug_renderer_info');
params.push(infos.UNMASKED_RENDERER_WEBGL, infos.UNMASKED_VENDOR_WEBGL);
params.forEach(function(param) {

ayamflow

// Get x/y
let x = i % this.size;
let y = (i - i % this.size) / this.size;

// Set from x/y
this.array[this.size * row + col] = value;

// ----
let index = y * width + x
let y = index / width;