Riccardo Scalco riccardoscalco

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

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

Please consider using http://lygia.xyz instead of copy/pasting this functions. It expand suport for voronoi, voronoise, fbm, noise, worley, noise, derivatives and much more, through simple file dependencies. Take a look to https://github.com/patriciogonzalezvivo/lygia/tree/main/generative

Generic 1,2,3 Noise

float rand(float n){return fract(sin(n) * 43758.5453123);}

float noise(float p){
	float fl = floor(p);
  float fc = fract(p);

Trigonometry

const float PI = 3.1415926535897932384626433832795;
const float PI_2 = 1.57079632679489661923;
const float PI_4 = 0.785398163397448309616;

float PHI = (1.0+sqrtf(5.0))/2.0;

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.

General Background and Overview

Probabilistic Data Structures for Web Analytics and Data Mining : A great overview of the space of probabilistic data structures and how they are used in approximation algorithm implementation.
Models and Issues in Data Stream Systems
Philippe Flajolet’s contribution to streaming algorithms : A presentation by Jérémie Lumbroso that visits some of the hostorical perspectives and how it all began with Flajolet
Approximate Frequency Counts over Data Streams by Gurmeet Singh Manku & Rajeev Motwani : One of the early papers on the subject.
[Methods for Finding Frequent Items in Data Streams](http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.187.9800&rep=rep1&t

	const vertex = `
	attribute vec2 a_position;
	attribute vec3 a_barycentric;
	uniform mat3 u_matrix;
	varying vec3 vbc;

	void main() {
	vbc = a_barycentric;
	gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);
	}`

	// e.g. console.save({hello: 'world'})
	(function(console){
	console.save = function(data, filename){
	if(!data) {
	console.error('Console.save: No data')
	return;
	}
	if(!filename) filename = 'console.json'
	if(typeof data === "object"){
	data = JSON.stringify(data, undefined, 4)

	const glslify = require('glslify');
	const path = require('path');

	// This is the original source, we will copy + paste it for our own GLSL
	// const vertexShader = THREE.ShaderChunk.meshphysical_vert;
	// const fragmentShader = THREE.ShaderChunk.meshphysical_frag;

	// Our custom shaders
	const fragmentShader = glslify(path.resolve(__dirname, 'standard.frag'));
	const vertexShader = glslify(path.resolve(__dirname, 'standard.vert'));

	# Install ARCH Linux with encrypted file-system and UEFI
	# The official installation guide (https://wiki.archlinux.org/index.php/Installation_Guide) contains a more verbose description.

	# Download the archiso image from https://www.archlinux.org/
	# Copy to a usb-drive
	dd if=archlinux.img of=/dev/sdX bs=16M && sync # on linux

	# Boot from the usb. If the usb fails to boot, make sure that secure boot is disabled in the BIOS configuration.

	# Set swedish keymap