29th week: Google Geo-Spatial

Google Geo-Spatial

Firstly, I didn’t get the permission, this API is not opened for mainland China. I need a abroad VISA card.

This is a slideshow to introduce it.

This is the official document. This is about using google geo-spatial on unity. It is based on AR Foundation.

These are some samples.

This is an ARCore official page.

Earth Studio uses google geo-spatial to build Video assets.

This is a google’s WebXR tutorial, I’ll check it out this week.

Also, here is some webXR tutorial in babylon.js.

use Babylon editor and react-babylon.js

The Babylon editor uses CANNON as physical engine, before importing, I need to inject it.

BabylonFileLoaderConfiguration.LoaderInjectedPhysicsEngine = CANNON;

And the asset should be relatively put in the root_dir.

SceneLoader.AppendAsync(`${root_dir}`, "scene.babylon", scene);

OpenFaas

This is a new world to me, I found an ebook, Kubernetes 中文指南. I don’t have time to read it yet.

GASP

GASP is an animation library, I heard from @WawaSensei. He’s got some nice shader tutorials I want to learn.

Face tracking on WebXR

Currently, Face tracking is not supported in WebXR. This is a 3rd party library mind-AR.js that supports it.

Swift on Linux

This is a page about swift on linux. It seems only Vapor is still alive now (as a web server).

3D LUT File

LUT file(look up table) is a file that contains color correction data. It is used in video editing. Adobe Premiere can export it.

Video with depth

This is a script in Codelab to make depthify video. I can also use stable diffusion to make one.

Lottie

Lottie is a SVG animation tool. Differences between Lottie and Rive is in this document.

React v18

useSyncExternalStore is a new react hook in v18. It can be used observe an element outside react environment

let data = {w: 0, h: 0};
const subscribe = snap => {
    window.addEventListener('resize', snap);
    () => window.removeEventListener('resize', snap);
}

const snapshot = () => {
    const w = window.innerWidth;
    const h = window.innerHeight;
    if (w !== data.w || h !== data.h) {
        data = {w, h};
    }
    return data
}
const Component = () => {
    const {w, h} = useSyncExternalStore(subscribe, snapshot);
}

Suspense is updated to support data fetching.

let data = null
let promise = null
const Suspender = () => {
    if (data === null) {
        if (promise === null) {
            promise = fetch('url').then(res => res.json()).then(res => {
                data = res;
                promise = null;
            });
        }
        throw promise;
    }
    return <div>{data}</div>
}

const Component = () => {
    return (
        <Suspense fallback={<div>loading</div>}>
            <Suspender />
        </Suspense>
    )
}

react-babylon.js

I’ve finished the examples in react-babylon.js. I will try webXR next week. Still, there are some stuff I don’t understand. Like pbrMaterial, reflectionFresnelParameters, arcRotateCamera, and mesh-lookat.

Next week

I’ll try Google’s webXR tutorial, and the babylon one.

I’ll continue the tensorflow tutorial. And the rust on android one.

I’ll try to compare Remix and Next.js.