Marcin Ignac vorg

WGSL 3D SDF Primitives

Revision: 06.08.2023, https://compute.toys/view/407

Sphere - exact

fn sdSphere(p: vec3f, r: f32) -> f32 {
  return length(p) - r;
}

WGSL Noise Algorithms

Good and fast integer hash

// https://www.pcg-random.org/
fn pcg(n: u32) -> u32 {
    var h = n * 747796405u + 2891336453u;
    h = ((h >> ((h >> 28u) + 4u)) ^ h) * 277803737u;
    return (h >> 22u) ^ h;
}

A non-exhaustive list of WebGL and WebGPU frameworks and libraries. It is mostly for learning purposes as some of the libraries listed are wip/outdated/not maintained anymore.

Engines and libraries ⚙️

Name	Stars	Last Commit	Description
three.js	![GitHub

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

Make it real

Ideas are cheap. Make a prototype, sketch a CLI session, draw a wireframe. Discuss around concrete examples, not hand-waving abstractions. Don't say you did something, provide a URL that proves it.

Ship it

Nothing is real until it's being used by a real user. This doesn't mean you make a prototype in the morning and blog about it in the evening. It means you find one person you believe your product will help and try to get them to use it.

	1) Clone and build WebKit

	git clone https://github.com/WebKit/WebKit.git WebKit
	cd WebKit
	Tools/Scripts/build-webkit -cmakeargs="-DENABLE_WEBGPU_BY_DEFAULT=1" --debug


	2) Run your app

	__XPC_METAL_CAPTURE_ENABLED=1 Tools/Scripts/run-minibrowser --debug --url http://localhost:5000/index.html#/loaders/gsplat

	import SwiftUI
	import PlaygroundSupport

	struct Desktop: View {
	var body: some View {
	ZStack {
	// Image(uiImage: #imageLiteral(resourceName: "IMG_6281.JPG"))
	Color(UIColor.systemBlue)
	macOS()
	}

	#!/bin/sh

	# From http://blog.pkh.me/p/21-high-quality-gif-with-ffmpeg.html

	# Usage:
	# ./makegif.sh inputframes output.gif
	# where inputframes is a directory containing .png frames

	# Change size here
	filters="scale=640:-1:flags=lanczos"

	// MIT licensed.

	function fabsf (arg) {
	return arg >= 0 ? arg : -arg
	}
	function planeBoxOverlap (normal, vert, maxbox) {
	var q
	var vmin = []
	var vmax = []
	var v