Skip to content

Instantly share code, notes, and snippets.

ayamflow / deferred.js
Created January 24, 2022 13:50
js deferred using promise
View deferred.js
class Deferred {
constructor() {
this.promise = new Promise((resolve, reject) => {
this.resolve = resolve
this.reject = reject
this.then = this.promise.then.bind(this.promise)
this.catch = this.promise.catch.bind(this.promise)
ayamflow / animate-array.js
Created January 7, 2022 15:26
Tween array values with animejs
View animate-array.js
import anime from 'animejs'
Options are your usual animejs options.
They need to have a value: XX or value: [start, end].
Add a special `stagger` prop
Have not tested with diff target values or more complex use case
but the power is in your hands now
ayamflow /
Last active August 14, 2021 17:02
Font workflow for Web & WebGL

CSS fonts

Use a font converter like transfonter:

  • Upload all fonts
  • Enter subset (usually latin, can also copy/paste your specific subset if needed, saves a lot of weight)
  • Woff/woff2
  • (Optionally) if the exported font has issues, try a different hinting param

WebGL fonts

Convert fonts to msdf format in a single texture and compress them

ayamflow /
Created December 22, 2020 13:31
kill process blocking a port in sh
lsof -i tcp:<port>
kill -9 <pid>
# Using port 8000 for example:
lsof -i tcp:8000
# This will list all the processes using this port with their PID
node 15248 admin ....
kill -i 15248
ayamflow / custom-material.js
Last active December 17, 2020 10:11
Extend threejs material
View custom-material.js
import { ShaderMaterial } from 'three'
import { Color } from 'three'
import { mergeUniforms } from 'three/src/renderers/shaders/UniformsUtils'
import { ShaderLib } from 'three/src/renderers/shaders/ShaderLib'
// Simple example juste replacing the diffuse color with a new uniform
// defines and light: true are important!
export class CustomMaterial extends ShaderMaterial {
constructor(options = {}) {
ayamflow /
Last active October 18, 2020 17:10
Unity gotchas

I'm learning unity by redoing old projects or scenes of videogames (coming from a webGL background), and documenting things I get stuck on, as well as findings.

OpenUPM (and other UPM)

Basically npm for Unity. Just need to add dependencies and scopedRegistries to Packages/manifest.json, Unity will detect the change and install the package.

Importing upm packages in a shader (ShaderLab)

Add this line in CGPROGRAM, after #include "UnityCG.cginc":

#include "Packages/jp.keijiro.noiseshader/Shader/SimplexNoise2D.hlsl"

ayamflow / circle-slice.glsl
Created June 30, 2020 00:19
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 / xr-touch-events.js
Last active February 22, 2022 10:40
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
rafId = requestAnimationFrame(updateInput);
session.addEventListener('selectend', event => {
ayamflow / latlon3d.js
Last active June 20, 2022 09:54
(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()
Converts a 3D world position to UV coordinates on a given sphere mesh
ayamflow /
Last active October 28, 2021 17:53
FFMpeg snippets
  • img sequence to mp4

ffmpeg -framerate <fps> -pattern_type glob -i "*.jpg" -c:v libx264 -r 30 -pix_fmt yuv420p output.mp4 where 24 is the desired fps

  • mov to mp4

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

  • mp4 to gif