Skip to content

Instantly share code, notes, and snippets.

@yiwenl
yiwenl / hsv2rgb
Last active Nov 5, 2021
GLSL Color Coversions
View hsv2rgb
vec3 hsv2rgb(vec3 c)
{
vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}
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});
}
@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);
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;
}
@yiwenl
yiwenl / GLSL_contrast
Last active May 17, 2021
Greyscale in glsl
View GLSL_contrast
float contrast(float mValue, float mScale, float mMidPoint) {
return clamp( (mValue - mMidPoint) * mScale + mMidPoint, 0.0, 1.0);
}
float contrast(float mValue, float mScale) {
return contrast(mValue, mScale, .5);
}
vec3 contrast(vec3 mValue, float mScale, float mMidPoint) {
return vec3( contrast(mValue.r, mScale, mMidPoint), contrast(mValue.g, mScale, mMidPoint), contrast(mValue.b, mScale, mMidPoint) );
@yiwenl
yiwenl / JsBlobSaveJson
Last active Apr 8, 2021
Javascript using Blob to save json file
View JsBlobSaveJson
var saveJson = function(obj) {
var str = JSON.stringify(obj);
var data = encode( str );
var blob = new Blob( [ data ], {
type: 'application/octet-stream'
});
var url = URL.createObjectURL( blob );
var link = document.createElement( 'a' );
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
@yiwenl
yiwenl / GLSL_Random
Created Mar 5, 2015
GLSL random function
View GLSL_Random
// From glfx.js : https://github.com/evanw/glfx.js
float random(vec3 scale, float seed) {
/* use the fragment position for a different seed per-pixel */
return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);
}
float rand(vec2 co){
return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}
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);
}
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;
}