Skip to content

Instantly share code, notes, and snippets.

Florian Morel ayamflow

Block or report user

Report or block ayamflow

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@ayamflow
ayamflow / cheap-parabola.glsl
Created Jul 27, 2019
Cheap parabola in GLSL
View cheap-parabola.glsl
// Doesn't require pow()
float cheapParabola(float x) {
return 1.0 - abs(x * 2.0 - 1.0);
}
@ayamflow
ayamflow / responsive-components.md
Last active Aug 9, 2018
Mobile responsive components
View responsive-components.md
  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 / update.js
Created Jun 20, 2018
Threejs - Rendering 2 scenes on top of each other without breaking render targets
View update.js
// Need to toggle the autoClear flag to avoid breaking rendering to RenderTarget
function update(dt) {
renderer.render(scene, camera);
renderer.autoClear = false;
renderer.clearDepth();
renderer.render(orthoScene, orthoCamera);
renderer.autoClear = true;
}
@ayamflow
ayamflow / gltf-anim.js
Last active Oct 17, 2018
threejs GLTF animation
View gltf-anim.js
// There's always some fiddling because the GLTF exports a whole scene
// with root bone and skinned mesh already appended to it.
let gltf = loadedGltf;
let skinned;
gltf.scene.traverse(function(object) {
if (object instanceof THREE.SkinnedMesh) {
skinned = object;
}
})
@ayamflow
ayamflow / gist:a99fd49b773a53bc757df41f77fb369c
Created Apr 6, 2018
Visible width/height with threejs perspective camera
View gist:a99fd49b773a53bc757df41f77fb369c
// https://discourse.threejs.org/t/functions-to-calculate-the-visible-width-height-at-a-given-z-depth-from-a-perspective-camera/269
function visibleHeightAtDepth(depth, camera) {
// compensate for cameras not positioned at z=0
const cameraOffset = camera.position.z;
if ( depth < cameraOffset ) depth -= cameraOffset;
else depth += cameraOffset;
// vertical fov in radians
const vFOV = camera.fov * Math.PI / 180;
// Math.abs to ensure the result is always positive
@ayamflow
ayamflow / three-object3d-prs.js
Created Apr 5, 2018
Threejs Object3D position/rotation/scale getters/setters for tweens & convenience
View three-object3d-prs.js
Object.defineProperties(THREE.Object3D.prototype, {
x: {
get: function() {
return this.position.x
},
set: function(value) {
this.position.x = value
}
},
y: {
@ayamflow
ayamflow / share.js
Created Feb 24, 2018
Inline sharing
View share.js
export default {
facebook(url) {
if (url.indexOf('http') < 0) {
url = location.protocol + '//' + location.host + url;
}
window.open('http://www.facebook.com/dialog/feed?app_id=' + FACEBOOK_ID +
'&link=' + SITE__URL +
'&picture=' + url +
'&name=' + encodeURIComponent('title') +
@ayamflow
ayamflow / levels.glsl
Created Feb 20, 2018 — forked from activetheory/levels.glsl
A GLSL module for color levels manipulation
View levels.glsl
float levelChannel(float inPixel, float inBlack, float inGamma, float inWhite, float outBlack, float outWhite) {
return (pow(((inPixel * 255.0) - inBlack) / (inWhite - inBlack), inGamma) * (outWhite - outBlack) + outBlack) / 255.0;
}
vec3 levels(vec3 inPixel, float inBlack, float inGamma, float inWhite, float outBlack, float outWhite) {
vec3 o = vec3(1.0);
o.r = levelChannel(inPixel.r, inBlack, inGamma, inWhite, outBlack, outWhite);
o.g = levelChannel(inPixel.g, inBlack, inGamma, inWhite, outBlack, outWhite);
o.b = levelChannel(inPixel.b, inBlack, inGamma, inWhite, outBlack, outWhite);
return o;
@ayamflow
ayamflow / numbers.css
Created Feb 15, 2018
Prevent animated counters numbers to shift
View numbers.css
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
@ayamflow
ayamflow / layer.glsl
Created Feb 8, 2018
Layer 2 textures on top of each other in GLSL
View layer.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);
You can’t perform that action at this time.