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.
Name | Stars | Last Commit | Description |
---|---|---|---|
three.js | ![GitHub |
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); | |
}` |
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.
Name | Stars | Last Commit | Description |
---|---|---|---|
three.js | ![GitHub |
// 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')); |
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.
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
float rand(float n){return fract(sin(n) * 43758.5453123);}
float noise(float p){
float fl = floor(p);
float fc = fract(p);
(by @andrestaltz)
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.
# 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 |