Florian Morel ayamflow

Building an Astro site with SPA-like page transitions & component framework

Swup & swup/astro come with most fixes for the typical problems but if you're using something else I'll resume the fixes here as I just went through this rabbit hole.

Steps

1. Pick a pjax routing library

Barba, swup, highway, taxi, etc

2. Update the `<head>`

If your pjax lib doesn't do it, you'll need to update the `` after every route to import correct styles & scripts.

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

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"

	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)
	}

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

	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

	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 = {}) {

	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
	);
	}

	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 => {

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