yonatan

// This is Twigl's "geekest mode" so the code runs inside a "main" function.
// FC.xy is fragcoord
// r.xy is resolution
// t is time (in seconds I think)
// o.rgba is output color

// This is the original code, before any readability improvements:
/*

  #define X(S,D)I=ivec3(S);D=fract(float(I.x^I.y^I.z)*PI

munrocket

Console On Screen Universal Solution

const scrConsole = document.createElement('div');
scrConsole.id = 'screenConsole';
scrConsole.style.position = 'absolute';
scrConsole.style.zIndex = 9e9;
scrConsole.style.bottom = '5px';
scrConsole.style.left = '5px';
scrConsole.style.color = 'white'; 
scrConsole.style.fontSize = '.8em'; 

devxom

{
	"Block (with comment)": {
		"prefix": "di",
		"body": [
			"<!-- begin ${1} -->",
			"<div class=\"${1}\">",
			"\t${2}",
			"</div>",
			"<!-- end ${1} -->"
		]

akella

function loadImages(paths,whenLoaded){
  var imgs=[];
  paths.forEach(function(path){
    var img = new Image;
    img.onload = function(){
      imgs.push(img);
      if (imgs.length==paths.length) whenLoaded(imgs);
    }
    img.src = path;
  });

shospodarets

const puppeteer = require('puppeteer');

(async () => {

    const browser = await puppeteer.launch();
    const page = await browser.newPage();
// Adjustments particular to this page to ensure we hit desktop breakpoint.
    page.setViewport({width: 1000, height: 600, deviceScaleFactor: 1});

    await page.goto('https://www.chromestatus.com/samples', {waitUntil: 'networkidle'});

dmnsgn

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

mattdesl

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'));

yiwenl

vec2 rotate(vec2 v, float a) {
	float s = sin(a);
	float c = cos(a);
	mat2 m = mat2(c, s, -s, c);
	return m * v;
}

cjddmut

/*
 * Created by C.J. Kimberlin
 * 
 * The MIT License (MIT)
 * 
 * Copyright (c) 2019
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights

patriciogonzalezvivo

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);