ayamflow

vec2 rotateUV(vec2 uv, float rotation)
{
    float mid = 0.5;
    return vec2(
        cos(rotation) * (uv.x - mid) + sin(rotation) * (uv.y - mid) + mid,
        cos(rotation) * (uv.y - mid) - sin(rotation) * (uv.x - mid) + mid
    );
}

vec2 rotateUV(vec2 uv, float rotation, vec2 mid)

ayamflow

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

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

// Doesn't require pow()

// Not smoothed i.e. like a triangle function
float linearParabola(float x) {
    return 1.0 - abs(x * 2.0 - 1.0);
}

// Slightly smoothed, no math function
float parabola(float x) {
    return 4.0 * x * (1.0 - x);

ayamflow

// http://stackoverflow.com/a/13351534

var vFOV = this.camera.fov * Math.PI / 180;;
var h = 2 * Math.tan( vFOV / 2 ) * this.camera.position.z;
var aspect = width / height;
var w = h * aspect;

ayamflow

// https://stackoverflow.com/questions/24480901/libgdx-overlay-texture-above-another-texture-using-shader

vec4 layer(vec4 foreground, vec4 background) {
    return foreground * foreground.a + background * (1.0 - foreground.a);
}

#pragma glslify: export(layer);

ayamflow

import _ from 'underscore';

export default class TextureAtlas {
    constructor(json, image) {
        this._textures = {};
        let texture = new THREE.Texture(image);
        texture.needsUpdate = true;

        let frames = json.frames;
        _.keys(frames).forEach(function(key, i) {

ayamflow

1. Size components in px from mockup size

width: 300px;
height: 240px;

2. in resize, change component fontSize from default (16px) to ratio of "device size / mockup size")

el.style.fontSize = Math.min(width, height) / 360 * 16 + 'px'

ayamflow

import THREE from 'three';

export default class MeshLine {
  constructor() {
    this.attributes = {};
    this.positions = [];
    this.geometry = new THREE.BufferGeometry();
    this.widthCallback = null;
  }

ayamflow

// Check your coordinates space!
// Lat, Lon (SW) = -Lat, -Lon (NE)
// Lat, Lon (NW) = -Lat, Lon (NE)
// etc

var ray = new Ray()

 /*
    positionToUV
    Converts a 3D world position to UV coordinates on a given sphere mesh