ayamflow

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

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

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

• Install msdf-bmfont-xml from npm

ayamflow

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

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

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

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

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

// 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

• 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 input.mov -vcodec h264 -acodec mp2 output.mp4

• mp4 to gif