Skip to content

Instantly share code, notes, and snippets.

Avatar

Florian Morel ayamflow

View GitHub Profile
@ayamflow
ayamflow / circle-slice.glsl
Created Jun 30, 2020
Drawing/animating circle arc in glsl
View circle-slice.glsl
const float PI = 3.141592653589793;
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
);
}
@ayamflow
ayamflow / xr-touch-events.js
Last active May 28, 2020
webXR mouse/touch events
View xr-touch-events.js
let session = await navigator.xr.requestSession('immersive-ar');
let rafId = null;
session.addEventListener('selectstart', event => {
inputSource = event.inputSource
onStart(getEvent());
rafId = requestAnimationFrame(updateInput);
});
session.addEventListener('selectend', event => {
@ayamflow
ayamflow / latlon3d.js
Last active Apr 8, 2020
(WebGL) Longitude / Latitude to 3D to UV
View latlon3d.js
// 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
View ffmpeg-snippets.md
  • img sequence to mp4

ffmpeg -r 24 -f image2 -pattern_type glob -i "*?png" -vcodec libx264 -crf 20 -pix_fmt yuv420p output.mp4 where 24 is the desired fps

  • mov to mp4

ffmpeg -i input.mov -vcodec h264 -acodec mp2 output.mp4

  • remove audio
@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: {
You can’t perform that action at this time.