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

attribute vec3 position;
uniform mat4 modelViewMatrix;
uniform mat4 modelMatrix;
uniform mat4 projectionMatrix;

uniform float scale;
uniform float size;
uniform float aspect;
varying vec2 vUv;

roboshoes

export function tween( time, update ) {
    const start = Date.now();

    var isCanceled = false;
    var isComplete = false;

    var chain = [];

    function loop() {
        if ( isCanceled ) return;

mattdesl

uniform vec4 offsetRepeat; // from ThreeJS Texture
uniform float time;
#pragma glslify: noise = require('glsl-noise/simplex/2d');

float pattern(float v, float repeats, float threshold) {
  float result = mod(v * repeats, 1.0);
  return step(threshold, result);
}

void main () {

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

gregtatum

const {
  dot,
  length,
  add,
  scale,
  normalize,
  divide,
  subtract,
  cross,
  distance,

xem

Conventions

• A = [xA, yA] is a point on the 2D plane. Same for B, C, ...
• lengths are in any unit (ex: pixels)
• code snippets are in JavaScript

Degrees to radians

angleRad = angleDeg * Math.PI / 180;

mattdesl

uniform vec3 diffuse;
uniform vec3 emissive;
uniform float opacity;

varying vec3 vLightFront;

#ifdef DOUBLE_SIDED

  varying vec3 vLightBack;

mattdesl

var buffer = null,
    bufferContext = null;

//null => not yet checked
var multiplyDetected = null;

function isMultiplySupported() {
    if (multiplyDetected === null) { //we haven't checked yet
        if (!buffer) { //shared buffer...
            buffer = document.createElement("canvas");