Skip to content

Instantly share code, notes, and snippets.

View linearDepth.glsl
uniform float zNear = 0.1;
uniform float zFar = 500.0;
// depthSample from depthTexture.r, for instance
float linearDepth(float depthSample)
{
depthSample = 2.0 * depthSample - 1.0;
float zLinear = 2.0 * zNear * zFar / (zFar + zNear - depthSample * (zFar - zNear));
return zLinear;
}
View align.glsl
vec3 align(vec3 pos, vec3 dir) {
vec3 initDir = vec3(1.0, 0.0, 0.0);
vec3 axis = cross(dir, initDir);
float angle = acos(dot(dir, initDir));
return rotate(pos, axis, angle);
}
@yiwenl
yiwenl / bezier.glsl
Last active Oct 8, 2021
Bezier curve in GLSL
View bezier.glsl
// bezier curve with 2 control points
// A is the starting point, B, C are the control points, D is the destination
// t from 0 ~ 1
vec3 bezier(vec3 A, vec3 B, vec3 C, vec3 D, float t) {
vec3 E = mix(A, B, t);
vec3 F = mix(B, C, t);
vec3 G = mix(C, D, t);
vec3 H = mix(E, F, t);
vec3 I = mix(F, G, t);
@yiwenl
yiwenl / map.glsl
Last active Oct 15, 2019
Mapping function
View map.glsl
float map(float value, float start, float end, float newStart, float newEnd) {
float percent = (value - start) / (end - start);
if (percent < 0.0) {
percent = 0.0;
}
if (percent > 1.0) {
percent = 1.0;
}
float newValue = newStart + (newEnd - newStart) * percent;
return newValue;
View Camera Viewport
// fov in Radians, camera position in [x, y, z]
const fovHeight = Math.tan(camera.fov / 2) * camera.position[2]
const fovWidth = fovHeight * camera.aspectRatio
View Javascript Save canvas to image
// saveImage.js
const dataURLtoBlob = (dataurl) => {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}
View encode&decode
// compression.js
const defaultPrecision = 10;
const encode = (a, b, mPrecision=defaultPrecision) => {
const precision = mPrecision;
const base = Math.floor(Math.sqrt(Math.pow(93, precision)));
let lat = a, lng = b;
let lng935 = Math.floor( ( parseFloat(lng) +180)*base/360 );
let lat935 = Math.floor( ( parseFloat(lat) +90)*base/180 );
View Drag & Drop Image handle
const dropArea = window;
const preventDefaults = (e)=> {
e.preventDefault()
e.stopPropagation();
}
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false);
})
View glsl-rotation-2d
vec2 rotate(vec2 v, float a) {
float s = sin(a);
float c = cos(a);
mat2 m = mat2(c, -s, s, c);
return m * v;
}
View glsl-comapre-function
vec4 when_eq(vec4 x, vec4 y) {
return 1.0 - abs(sign(x - y));
}
vec4 when_neq(vec4 x, vec4 y) {
return abs(sign(x - y));
}
vec4 when_gt(vec4 x, vec4 y) {
return max(sign(x - y), 0.0);