Skip to content

Instantly share code, notes, and snippets.

@ayamflow
ayamflow / rotate-uv.glsl
Created January 16, 2018 23:24
Rotate UV in GLSL
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
ayamflow / gist:96a1f554c3f88eef2f9d0024fc42940f
Last active May 15, 2024 12:37
Threejs Fit plane to screen
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
ayamflow / gist:b602ab436ac9f05660d9c15190f4fd7b
Created May 9, 2016 19:10
Safari border-radius + overflow: hidden + CSS transform fix
// Add on element with overflow
-webkit-mask-image: -webkit-radial-gradient(white, black);
@ayamflow
ayamflow / layer.glsl
Created February 8, 2018 00:24
Layer 2 textures on top of each other in GLSL
// 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
ayamflow / texture-atlas.js
Last active November 21, 2023 01:22
threejs Texture Atlas (TexturePacker spritesheet)
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
ayamflow / .js
Created February 16, 2016 01:37
Three.js - get visible width/height in pixels for an object
// 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
ayamflow / responsive-components.md
Last active October 19, 2022 20:49
Mobile responsive components
  1. Size components in px from mockup size
width: 300px;
height: 240px;
  1. 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
ayamflow / MeshLine.js
Created February 29, 2016 16:34 — forked from superguigui/MeshLine.js
THREE.Meshline from spite in ES6 with update method
import THREE from 'three';
export default class MeshLine {
constructor() {
this.attributes = {};
this.positions = [];
this.geometry = new THREE.BufferGeometry();
this.widthCallback = null;
}
@ayamflow
ayamflow / latlon3d.js
Last active June 20, 2022 09:54
(WebGL) Longitude / Latitude to 3D to UV
// 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
@ayamflow
ayamflow / cheap-parabola.glsl
Last active May 31, 2022 18:52
Cheap parabola in GLSL
// 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);