cdata

const cloneGltf = (gltf) => {
  const clone = {
    animations: gltf.animations,
    scene: gltf.scene.clone(true)
  };

  const skinnedMeshes = {};

  gltf.scene.traverse(node => {
    if (node.isSkinnedMesh) {

selfsame

Generating Procedural Game Worlds with Wave Function Collapse

Wave Function Collapse (WFC) by @exutumno is a new algorithm that can generate procedural patterns from a sample image. It's especially exciting for game designers, letting us draw our ideas instead of hand coding them. We'll take a look at the kinds of output WFC can produce and the meaning of the algorithm's parameters. Then we'll walk through setting up WFC in javascript and the Unity game engine.

The traditional approach to this sort of output is to hand code algorithms that generate features, and combine them to alter your game map. For example you could sprinkle some trees at random coordinates, draw roads with a brownian motion, and add rooms with a Binary Space Partition. This is powerful but time consuming, and your original vision can someti

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;