NOTE: This site has just upgraded to Forester 5.x and is still having some style and functionality issues, we will fix them ASAP.

technical notes (draft) [uts-0012]

Try some alternative browsers [uts-016N]

I decided to widen my horizon about browsers. After browsing a few subreddits, I have chosen these 3 browsers:

- Arc
    - Chromium based
    - the team has moved on to Dia, an AI browser
    - but people still miss the UX of Arc, it seems to be one of a kind, so I have to know
    - unlikely to be open-source
    - Mac/iOS/Windows, no Linux
- Orion
    - WebKit based, this engine is the best hope for degoogle
    - will be open-source
    - not mature yetA
    - Mac/iOS, Linux WIP, no Windows/Android
- Floorp
    - Firefox based
    - open-source
    - Mac/Windows/Linux, no mobile

How to run perf in a colima container [uts-016L]

Just to note down that it's not straightforward to get perf working.

Here's what worked finally:

First, the container needs to be started with proper capabilities:

```bash
docker run --rm -it --platform linux/amd64 --cap-add PERFMON ubuntu:jammy bash
```

Secondly, some flags need to be set from the VM:

```bash
# this would start a shell in the VM, outside of containers
colima ssh

# don't know why, sudo doesn't work, but it works in a root shell
# -1 or 2 both work
sudo bash -c 'echo -1 > /proc/sys/kernel/perf_event_paranoid'
```

Lastly, install perf in the container:

```bash
apt install -y linux-tools-$(uname -r) linux-cloud-tools-$(uname -r)
```

Then the following works:

```bash
perf record -g echo 1
perf report -g graph,0.5,caller
```

Note also that you can't pass `"echo 1"` because perf will failed to find a file named "echo 1".

Learned this while working on Trying Zig's self-hosted x86 backend on Apple Silicon and before submitting this issue about unable to run `poop` in `colima` containers.

Follow-up:

It's important to check whether certain perf counters actually work:

```
sleep 10 &
perf stat -p $! -e "cpu-cycles,instructions,cache-references,cache-misses,branch-misses"
```

On a machine that supports corresponding counters, it should give something like:

```
 Performance counter stats for process id '101011':

            511488      cpu-cycles                                                  
            280194      instructions              #    0.55  insn per cycle         
             16193      cache-references                                            
              6161      cache-misses              #   38.047 8730      branch-misses                                               

      10.009515156 seconds time elapsed
```

On an unsupported machine, the output would be like:

```
 Performance counter stats for process id '552':

   <not supported>      cpu-cycles
   <not supported>      instructions
   <not supported>      cache-references
   <not supported>      cache-misses
   <not supported>      branch-misses

       6.491105847 seconds time elapsed
```

Resources about Rubik's Cube [uts-016J]

- speed solving
    - Roux (a.k.a as bridging)
        - Learning the Roux method
        - Simple Roux Method of Solving Rubik's Cube
        - Introduction - Roux Tutorial
            - uses TwistySim
    - ZZ
        - Example Solves - Beginner ZZ Tutorial
- notation
    - Rubik's cube notation by Sebastiano Tronto
    - 3x3x3 notation
        - which clarifies naming of `E`, `S`, `r` etc.
- papers
    - The Generalized Rubik’s Cube: Combinatorial Insights Through Group Theory
        - it cites Nxnxn rubik’s cubes and god’s number[salkinder2021nxnxn]
        - has its own notation for nxnxn cubies
        - works out many details about general nxnxn cubes and their corresponding group theory
    - Commutators in the Rubik’s Cube Group
        - uses notations like `UR`, `FUR` to denote edges and corners, which I prefered
        - nice diagrams
        - demo with Twizzle
    - Generalising the configurations of an N×N×N Rubik’s Cube
        - aimed to find an expression for the total number of possible configurations of an N×N×N Rubik’s Cube
        - uses notations like `ur`, `fur`, `u_1` for 3x3x3 and 4x4x4 cubes
        - generalize to N×N×N with 3x3x3-style edges and 4x4x4-style corners
- solving with linear algebra
    - asked by this Reddit post
    - Mathematics of the Rubik’s cube by W. D. Joyner in 1996
    - Non-Commutative Gaussian Elimination and Rubik’s Cube
- Test TwistySim
- Test Twizzle

My setup with 4 screens and 2 Macs [uts-016B]

Recently, a MacBookPro and a Mac Mini, both are M4 Pro, have become my primary productivity tools. Along with them, I have 3 monitors, plus the one comes with MacBookPro, counts as 4 screens in total. On top of that, I have the logi MX Keys keyboard and MX Master 3S suite, and an Apple Magic Trackpad.

It turns out that I need to come up with a productive setup for them.

## TL;DR as an ASCII art

```
                                              +---------+
                                              |         |
  +-----------------+   +-----------------+   |  Tall   |
  |    Reference    |   |     Primary     |   |         |
  |    Display      |   |     Display     |   | Display |
  +-----------------+   +-----------------+   |         |
                                              |         |
        +------+           +------------+     +---------+
        | Mini |           |    MBP     |
        +------+           +------------+
                           | [Keyboard] |
                           |   [Pad]    |
                           +------------+
                            [ MX Keys   ]       [MX 3S]
                              [Pad]
```

## Screen arrangement

Above the screen of MacBookPro, I have my primary display, which serves as the main workspace for coding, browsing etc. The second display is placed on its left, on the same height, hosting stuff for reference. Both are horizontal and wide.

The third display (I would like to call it the "tall display") is placed on the right, yet vertically, with its middle part aligned with the primary display, it might host IM, PDFs, AI assistants, or any stuff that are tall, including vertically stacked windows that requires less width.

## Mac-display correspondence

Mac Mini is placed under the second display, and it's connected to the first 2 displays, and all of them if desired.

MacBookPro is connected to the tall display, and optionally also to the primary display.

## Keyboard and mouse

I could just use the keyboard and trackpad of MacBookPro, and they can travel to the nearby Mac Mini.

As I have muscle memory that's already used to MacBookPro's keyboard, MX Keys would be a good fit, as the keys are flatter, the key distance is also shorter.

I'm so used to use the trackpad to scroll, zoom, switching between spaces, and move cursor during coding, so that I would either put MX Keys on top of the keyboard of MacBookPro so I can reach its trackpad effortlessly, or I would just MX Keys and the Magic Trackpad beneath it, with the same relative location like the MacBookPro's keyboard and trackpad.

When I work with diagrams, slides, or UIs that require meticulous mouse control, I would use the MX Master 3S mouse. Its side wheel is configured to send `Ctrl+Left` and `Ctrl+Right`, and side buttons are configured to send `Ctrl+Up` and `Ctrl+Down`, both serving space switching.

The logi keyboard and mouse supports switch between 3 devices, so I can switch between 2 Macs. Unfortunately, one doesn't follow the other to switch, so I would rely on Mac's native support for keyboard and mouse sharing, and it goes like `2->1->MacBookPro->Tall`, so there is minimal extra travel between 1 and tall.

One might noticed that such a setup is highly redundant, but this provides me with maximum flexibility and productivity:

- In coding mode, I could have both hands on the keyboard, with the left hand sometimes on the trackpad
- In browing mode, my left hand is on the trackpad, and the right hand is on the mouse
- In diagramming mode, both hands are also on the keyboard, with the right hand sometimes on the mouse

## Thunderbolt bridge

I also have a Thunderbolt bridge, by connecting 2 Macs with a Thunderbolt cable, and following this guide. This would create a secure and fast connection between them for file transfer, screen sharing, distributed AI inference etc.

Such a bridge could also be used in MX Flow, but it has certain delay each time the cursor moves between the 2 Macs, so I didn't use it.

Organizing files [uts-002J]

I wish to note down my exploration of solutions to organize massive amount of (mostly binary media) files.

## Wishlist

- Performant
    - it should be able to handle huge amount of files, with cached metadata, thumbnails, etc. so I can browse over their contents quickly
    - batch operations to files on NAS should be as performant as local files, e.g. using client-server architecture, using rsync to determine the diff, etc.
- Data integrity
    - it should be able to use versioning, deduplication, etc. to ensure data integrity so I can mess with the files (mostly moving around, renaming) without worrying about losing them and their metadata such as timestamp, and this should be efficient in terms of storage
- Semi-auto tagging
    - I should be able to tag files manually, in batch, and set rules to tag files automatically with metadata or based on content (using ML models)
    - preferably, tags could have its own hierarchy
    - tags should not be using filename or metadata, but rather a separate database
- Open-source, freemium or affordable one-time purchase
    - in anycase, I should not be locked in, and the data should be exportable, so I can script

## Candidate solutions

- git-annex
    - Pros
        - it maintains a versioned record for files, can even track offline media
    - Cons
        - it only have access to the file contents when they are present at the registered location
        - even with the web UI, it's not realy user-friendly
- DataLad
    - it builds on git-annex, but still a CLI
- kopia
    - Pros
        - backup, versioning, deduplication, encryption, compression, error correction etc.
        - it can mount or restore any snapshot to a directory
        - there is official support for syncing the repo, making it reliable to backup the backup
    - Cons
        - can't really check the history of a file
        - relies on other tools for checking file location changes
        - lost the time added, preserving only the modification time
- Commander One
    - dual-pane file manager, trying out
- `dua -i`
    - it can analyze disk usage recursively, interactively
    - I can mark files for deletion
- jw
    - Pros
        - it can calculate the hashes of files in deep directories really quick
        - I use it to check the integrity of files after copying files
    - Cons
        - it doesn't check file renaming/moving
- VeraCrypt
    - Pros
        - useful if you just want to encrypt files in a container
    - Cons
        - it's inconvenient to mount in docker
- Garage
    - Pros
        - it's a S3-compatible storage
        - it works with git-annex and kopia
- macFUSE
    - needed to mount various filesystems
- photo management
    - HomeGallery
    - librephotos
    - digiKam
    - PhotoPrism
    - Immich
    - Lychee
- asset management
    - Eagle 4
    - Pixcall
    - Billfish

Notes on modern C++ programming [uts-002H]

useful tools and key mappings for TUI [uts-002G]

some useful key mappings in Neovim [uts-002F]

initial survey on headless render/testing for WebGL [uts-001N]

I want to be able to run headless render or visual regression tests, both locally where GPU is available, and on CI where GPU has to be emulated.

The ingredients seems to be Storybook+Playwright+Xvfb.

- use OrbStack as local docker engine
- use act (usage) to run GitHub Actions locally
- use Storybook to building pages and components in isolation
- use Playwright to verify the visual appearance on different browsers
- use Xvfb to emulate a display server

If I'm a bit more ambitious, I would like to be able to do the same for WebGPU. At least we do know that Xvfb support OpenGL via mesa (which also supports Vulkan etc.), and there are some libraries to run WebGPU via WebGL 2 (e.g. wgpu).

Some resources I found so far:

- Effortless CI Integration: Running Playwright Tests with GitHub Actions uses `xvfb-run`
- `playwright`'s own CI uses `xvfb-run`
- Headless chrome – testing WebGL using playwright demonstrates WegGL testing when GPU is available, see also its writeup
- Options to enable GPU Hardware Acceleration in headeless mode
- use xquartz with PyVirtualDisplay on Mac
- use libosmesa with Chrome from 2016
- use VirtualGL with Xvfb 
For an earlier survey on headless testing, see SSR of WebGL.

SSR of WebGL [uts-0013]


## Server-side rendering of WebGL

Combining `xvfb-run`, headless-gl, three.js, should make it possible, e.g. see Headless rendering with THREE.js, see also:

- sharp for rendering to various image formats
- three.js + headless.gl rendering with texturing in CoffeeScript
- How to run OpenGL based tests on Github Actions

## Plotly.js

I wish to draw a style similar to Project contour profiles onto a graph by Matplotlib, which plots a 3D surface then its contour profiles projected to surrounding planes.

Plotly.js has a similar example as Surface Plot With Contours.

Plotly requires a `div` element to render the plot, it will initialize a WebGL-capable `canvas` to do so. It has support for using virtual WebGL context but no native way to specify a `canvas` from the outside.

When running in headless mode from node, we will typically use jsdom which in turn uses node-canvas that's not WebGL-capable. There is an open issue to detect the presence of node-canvas-webgl and use it, as it integrations `node-canvas` and headless-gl. Another idea is to make NPM packages `get-canvas-context` and in turn `webgl-context` to handle this.

A commercial plot libraries `LightningChart JS` has made Headless server use support for itself, which could be used as a reference.

Should I Render Three.js to Video on the Client or Server? has some discussions on this topic.

initial survey on writing Rust in Forester [uts-0011]

I wish to be able to call rust libraries that are WASM compatible to use it for both BSR and SSR.

Here is my initial survey:

- wasm-pack and wasm-bindgen are the two main tools for building and binding rust to javascript, more info see awesome-rust-and-webassembly
- I wish to write one-file Rust and specify the dependencies in the file, rust-script is similar in spirit but it's for server-side execution.
- I wish to find prior art on doing this with bun, found bun-ffi-rust and hyperimport, but again, it's for server-side execution.

some links for learning shaders [uts-000H]

some links for rendering implicit surfaces [uts-000G]


# readings: raymarching on implicit surfaces

- [singh2009real] has reviews on related work, an algorithm and many examples. But it has no code.
- Ray Marching and Signed Distance Functions is a good introduction to ray-marching and signed distance functions, and the author learns from Inigo Quilez.
- Rendering Worlds with Two Triangles with raytracing on the GPU in 4096 bytes by Iñigo Quilez in 2008
- Raymarching Distance Fields in 2013
- raymarching terrains by Iñigo Quilez in 2002
- Volumetric Rendering: Raymarching in 2016
- Painting with Math: A Gentle Study of Raymarching in 2023, which has interative illustration of ray-marching algorithm, and shader examples from simple to complex
- CUDA Ray Marching by Jonathan Granskog
- Slides on GPU Ray Marching by Alex Benton in 2017–18, with more related materials here.
- Ray Tracing Deterministic 3-D Fractals in 1989
- Ray-marching Thurston geometries in 2022
- PU-Ray: Domain-Independent Point Cloud Upsampling via Ray Marching on Neural Implicit Surface in 2024
- Ray Tracing Harmonic Functions in 2024
- Lipschitz-agnostic, efficient and accurate rendering of implicit surfaces in 2024
- What is raytracing/raymarching/raycasting
- Ray Marching in JS, the source code has a link to the principle behind ray marching shadows: soft shadows in raymarched SDFs - 2010
- Raymarching Voxel Rendering in 2017
- UC Berkeley CS184/284A Lecture 9: Ray Tracing & Acceleration Structures in 2024
- Third Year and MSc Interactive Computer Graphics in 2008
- Raymarching Distance Fields in 2013
- Perfecting anti-aliasing on signed distance functions in 2025

# libraries and tools: raymarching on implicit surfaces

- SURFER renders implicit surfaces using ray-tracing, the result is stunning well. It also has a Java library with many examples.
- Raycasting Implicit Surfaces based on CindyJS is Web-based implicit surface renderer using ray-tracing, and the source code is best suited for reproducing and learning. It also has a rich set of examples.
- Raycasting a surface of degree 4 is a relatively simpler example of ray-tracing implicit surfaces with source here.
- mla has a series of shaders from simple to complicated to render the Kummer surface, see here. mla has also ported a tiny ray tracer here which could be a starting point.
- A simpler but more versatile ray-tracer for implicit surfaces is Implicit surfaces created by Rogolop.
- 3D Bifurcation Diagram
- MA1104-implicitplot has a naive implicit surface plotter.
- usegpu.live demo of ploting implicit surface
- Surface Plotter makes use of Paul Bourke's Marching Cubes algorithm with edge table, to turn implicit surfaces into polygonal meshes. See Marching Cubes and its references.

## Implicit reconstruction or polygonization

- A Heat Method for Generalized Signed Distance in 2024
- Robust Creation of Implicit Surfaces from Polygonal Meshes in 2002
- Curvature Dependent Polygonization of Implicit Surfaces in 2004
- Implicit Meshes for Modeling and Reconstruction in 2018
- Differential Geometry in Neural Implicits in 2022
- Differentiable Iterated Function Systems in 2024
- Adaptive grid generation for discretizing implicit complexes in 2024
- SDFGen: A simple commandline utility to generate grid-based signed distance field (level set) generator from triangle meshes, using code from Robert Bridson's website. Found from Merging Meshes with Signed Distance Fields.
- sdf: Generate 3D meshes based on SDFs (signed distance functions) with a dirt simple Python API.
- SDFStudio: A Unified Framework for Surface Reconstruction

For learning shaders, see some links for learning shaders.

Convert some of the links to citations.

I would like to have a formal specification of the raymarching algorithm (in algorithm2e or algorithmicx+algpseudocode or even algpseudocodex), and find propositions worth proving.

Distributing my binaries [uts-016P]

- Repology
- brew for mac & linux
    - personal tap repo: see
        - Taps (Third-Party Repositories) — Homebrew Documentation
        - Adding Software to Homebrew — Homebrew Documentation
        - `create`, `bottle` in brew(1), also `bump*`
- Windows or all platforms
    - Aqua private registery
        - then supported by mise or maybe more
        - see Develop a Registry | aqua

Using Zig to build more [uts-016O]

- C/C++ projects
    - All Your Codebase | Loris Cro's Blog
        - All Your Codebase
            - no GiNaC yet
- help rust to cross-compile
    - rust-cross/cargo-zigbuild
        - Compile Cargo project with zig as linker for easier cross compiling
- help PyPI to store less
    - The Python Package Index Should Get Rid Of Its Training Wheels | Loris Cro's Blog
    - zig is also available as a PyPI package
        - ziglang · PyPI
- zig alternative to PyO3/maturin: Build and publish crates with pyo3, cffi and uniffi bindings as well as rust binaries as python packages
    - spiraldb/ziggy-pydust: A toolkit for building Python extensions in Zig.
        - the orginal template that ueses poetry
        - the community template that uses uv and hatchling
            - where hatchling seems to be a better build backend than setup tools post 3.12 for projects with native extensions and custom build hooks
            - see also Why Hatch? - Hatch