steveruizok

/**
 * Find the control points for a cubic segment from point a to point c passing through point b.
 * @param a The curve's start point
 * @param b The point to curve through
 * @param c The curve's end point
 */
export function findCubicControlPoints(
  a: { x: number; y: number },
  b: { x: number; y: number },
  c: { x: number; y: number }

ayamflow

I'm learning unity by redoing old projects or scenes of videogames (coming from a webGL background), and documenting things I get stuck on, as well as findings.

OpenUPM (and other UPM)

Basically npm for Unity. Just need to add dependencies and scopedRegistries to Packages/manifest.json, Unity will detect the change and install the package.

Importing upm packages in a shader (ShaderLab)

Add this line in CGPROGRAM, after #include "UnityCG.cginc":

#include "Packages/jp.keijiro.noiseshader/Shader/SimplexNoise2D.hlsl"

ayamflow

vec2 rotateUV(vec2 uv, float rotation)
{
    float mid = 0.5;
    return vec2(
        cos(rotation) * (uv.x - mid) + sin(rotation) * (uv.y - mid) + mid,
        cos(rotation) * (uv.y - mid) - sin(rotation) * (uv.x - mid) + mid
    );
}

vec2 rotateUV(vec2 uv, float rotation, vec2 mid)

ayamflow

// Check FPS estimate over an interval of time and trigger callback if it becomes too slow.
// Ideally callback turn quality settings down (canvas dpr, post process, number of particles, ...)
// See also
// https://mrnmnm.com/
// http://findinglove.activetheory.net

const PAST_FRAMES = 60; // Memorize 1s of render time
const BAD_FRAMES = 30; // Max number of slow frame before downgrade

export default class PerformanceMonitor {

mattdesl

optimize GLTF file

This optimizes a GLTF file that was exported by blender (or similar) by de-duplicating buffer views (i.e. chunks of bytes) that are equal and removing redundant accessors.

For example, 100 cubes of different scales/materials/rotations/etc should all end up using a single BufferGeometry in ThreeJS, which isn't the case with current GLTF exporters in Blender and parsers for ThreeJS.

In scenes with a lot of instancing, it can dramatically reduce total file size as well as render performance. In one test scene:

Before: 4.8MB file size, 832 THREE.Geometry instances across 832 THREE.Mesh objects
After: 661KB file size, 13 THREE.Geometry instances across 832 THREE.Mesh objects

floz

import vs from "shaders/physicalcustom.vs"
import fs from "shaders/physicalcustom.fs"

export default class MeshCustomMaterial extends THREE.MeshPhysicalMaterial {

	constructor(parameters, uniforms={}){
		super(parameters)

		this.defines = { 'PHYSICAL': '' };

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

ayamflow

// Add on element with overflow
-webkit-mask-image: -webkit-radial-gradient(white, black);

protrolium

ffmpeg

Converting Audio into Different Formats / Sample Rates

Minimal example: transcode from MP3 to WMA:
ffmpeg -i input.mp3 output.wma

You can get the list of supported formats with:
ffmpeg -formats

You can get the list of installed codecs with: