├── LICENSE ├── README.md ├── package.json └── src ├── calcRotateMat3.glsl ├── calcRotateMat4.glsl ├── calcRotateMat4X.glsl ├── calcRotateMat4Y.glsl ├── calcRotateMat4Z.glsl ├── calcScaleMat4.glsl ├── calcTranslateMat4.glsl ├── convertHsvToRgb.glsl ├── convertRgbToHsv.glsl ├── gaussianBlur.glsl ├── lookAt.glsl ├── polar.glsl ├── random.glsl └── rotateAxisAngle.glsl /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Yoichi Kobayashi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # glsl-util 2 | 3 | Private GLSL utility functions created by @ykob 4 | These functions are dependent on [glslify](https://github.com/glslify/glslify). 5 | 6 | ## Install 7 | 8 | ### npm 9 | 10 | ``` 11 | npm i @ykob/glsl-util 12 | ``` 13 | 14 | ### yarn 15 | 16 | ``` 17 | yarn add @ykob/glsl-util 18 | ``` 19 | 20 | ## Usage 21 | 22 | ### `calcRotateMat3(float radian)` 23 | 24 | Calculate a 3D Rotation Matrix. 25 | 26 | ``` 27 | #pragma glslify: calcRotateMat3 = require(@ykob/glsl-util/src/calcRotateMat3); 28 | ``` 29 | 30 | ### `calcRotateMat4(vec3 radian)` 31 | 32 | Calculate a 4D Rotation Matrix. 33 | 34 | ``` 35 | #pragma glslify: calcRotateMat4 = require(@ykob/glsl-util/src/calcRotateMat4); 36 | ``` 37 | 38 | ### `calcRotateMat4X(float radian)` 39 | 40 | Calculate a 4D Rotation Matrix with axis X. 41 | 42 | ``` 43 | #pragma glslify: calcRotateMat4X = require(@ykob/glsl-util/src/calcRotateMat4X); 44 | ``` 45 | 46 | ### `calcRotateMat4Y(float radian)` 47 | 48 | Calculate a 4D Rotation Matrix with axis Y. 49 | 50 | ``` 51 | #pragma glslify: calcRotateMat4Y = require(@ykob/glsl-util/src/calcRotateMat4Y); 52 | ``` 53 | 54 | ### `calcRotateMat4Z(float radian)` 55 | 56 | Calculate a 4D Rotation Matrix with axis Z. 57 | 58 | ``` 59 | #pragma glslify: calcRotateMat4Z = require(@ykob/glsl-util/src/calcRotateMat4Z); 60 | ``` 61 | 62 | ### `calcScaleMat4(vec3 scale)` 63 | 64 | Calculate a 4D Scaling Matrix. 65 | 66 | ``` 67 | #pragma glslify: calcScaleMat4 = require(@ykob/glsl-util/src/calcScaleMat4); 68 | ``` 69 | 70 | ### `calcTranslateMat4(vec3 v)` 71 | 72 | Calculate a 4D Translation Matrix. 73 | 74 | ``` 75 | #pragma glslify: calcTranslateMat4 = require(@ykob/glsl-util/src/calcTranslateMat4); 76 | ``` 77 | 78 | ### `convertHsvToRgb(vec3 hsv)` 79 | 80 | Convert HSV to RGB. 81 | http://lolengine.net/blog/2013/07/27/rgb-to-hsv-in-glsl 82 | 83 | ``` 84 | #pragma glslify: convertHsvToRgb = require(@ykob/glsl-util/src/convertHsvToRgb); 85 | ``` 86 | 87 | ### `convertRgbToHsv(vec3 rgb)` 88 | 89 | Convert RGB to HSV. 90 | http://lolengine.net/blog/2013/07/27/rgb-to-hsv-in-glsl 91 | 92 | ``` 93 | #pragma glslify: convertRgbToHsv = require(@ykob/glsl-util/src/convertRgbToHsv); 94 | ``` 95 | 96 | ### `random(vec2 p)` 97 | 98 | Calculate the white noise. 99 | 100 | ``` 101 | #pragma glslify: random = require(@ykob/glsl-util/src/random); 102 | ``` 103 | 104 | ### `polar(float radian1, float radian2, float radius)` 105 | 106 | Calculate the polar coordinates. 107 | 108 | ``` 109 | #pragma glslify: polar = require(@ykob/glsl-util/src/polar); 110 | ``` 111 | 112 | ### `gaussianBlur(sampler2D texture, vec2 uv, float radius, vec2 resolution, vec2 direction)` 113 | 114 | Calculate the Gaussian blur. 115 | 116 | ``` 117 | #pragma glslify: gaussianBlur = require(@ykob/glsl-util/src/gaussianBlur); 118 | ``` 119 | 120 | ### `lookAt(vec3 base, vec3 p1, vec3 p2, vec3 up)` 121 | 122 | Rotate a vector in any direction. 123 | 124 | ``` 125 | #pragma glslify: lookAt = require(@ykob/glsl-util/src/lookAt); 126 | ``` 127 | 128 | ### `rotateAxisAngle(vec3 p, vec3 axis, float angle)` 129 | 130 | Rotate a vector with axis and angle. 131 | 132 | ``` 133 | #pragma glslify: rotateAxisAngle = require(@ykob/glsl-util/src/rotateAxisAngle); 134 | ``` 135 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ykob/glsl-util", 3 | "version": "1.1.0", 4 | "description": "Private GLSL utility functions created by @ykob", 5 | "author": { 6 | "name": "Yoichi Kobayashi", 7 | "email": "info@tplh.net", 8 | "url": "https://www.tplh.net/" 9 | }, 10 | "browserify": { 11 | "transform": "glslify" 12 | }, 13 | "license": "MIT", 14 | "main": "index.js", 15 | "private": false, 16 | "publishConfig": { 17 | "access": "public" 18 | }, 19 | "repository": { 20 | "type": "git", 21 | "url": "https://github.com/ykob/glsl-util.git" 22 | }, 23 | "keywords": [ 24 | "glsl", 25 | "glslify" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /src/calcRotateMat3.glsl: -------------------------------------------------------------------------------- 1 | mat3 calcRotateMat3(float radian) { 2 | return mat3( 3 | cos(radian), -sin(radian), 0.0, 4 | sin(radian), cos(radian), 0.0, 5 | 0.0, 0.0, 1.0 6 | ); 7 | } 8 | #pragma glslify: export(calcRotateMat3) 9 | -------------------------------------------------------------------------------- /src/calcRotateMat4.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify: calcRotateMat4X = require(./calcRotateMat4X); 2 | #pragma glslify: calcRotateMat4Y = require(./calcRotateMat4Y); 3 | #pragma glslify: calcRotateMat4Z = require(./calcRotateMat4Z); 4 | 5 | mat4 calcRotateMat4(vec3 radian) { 6 | return calcRotateMat4X(radian.x) * calcRotateMat4Y(radian.y) * calcRotateMat4Z(radian.z); 7 | } 8 | #pragma glslify: export(calcRotateMat4) 9 | -------------------------------------------------------------------------------- /src/calcRotateMat4X.glsl: -------------------------------------------------------------------------------- 1 | mat4 calcRotateMat4X(float radian) { 2 | return mat4( 3 | 1.0, 0.0, 0.0, 0.0, 4 | 0.0, cos(radian), -sin(radian), 0.0, 5 | 0.0, sin(radian), cos(radian), 0.0, 6 | 0.0, 0.0, 0.0, 1.0 7 | ); 8 | } 9 | #pragma glslify: export(calcRotateMat4X) 10 | -------------------------------------------------------------------------------- /src/calcRotateMat4Y.glsl: -------------------------------------------------------------------------------- 1 | mat4 calcRotateMat4Y(float radian) { 2 | return mat4( 3 | cos(radian), 0.0, sin(radian), 0.0, 4 | 0.0, 1.0, 0.0, 0.0, 5 | -sin(radian), 0.0, cos(radian), 0.0, 6 | 0.0, 0.0, 0.0, 1.0 7 | ); 8 | } 9 | #pragma glslify: export(calcRotateMat4Y) 10 | -------------------------------------------------------------------------------- /src/calcRotateMat4Z.glsl: -------------------------------------------------------------------------------- 1 | mat4 calcRotateMat4Z(float radian) { 2 | return mat4( 3 | cos(radian), -sin(radian), 0.0, 0.0, 4 | sin(radian), cos(radian), 0.0, 0.0, 5 | 0.0, 0.0, 1.0, 0.0, 6 | 0.0, 0.0, 0.0, 1.0 7 | ); 8 | } 9 | #pragma glslify: export(calcRotateMat4Z) 10 | -------------------------------------------------------------------------------- /src/calcScaleMat4.glsl: -------------------------------------------------------------------------------- 1 | mat4 calcScaleMat4(vec3 scale) { 2 | return mat4( 3 | scale.x, 0.0, 0.0, 0.0, 4 | 0.0, scale.y, 0.0, 0.0, 5 | 0.0, 0.0, scale.z, 0.0, 6 | 0.0, 0.0, 0.0, 1.0 7 | ); 8 | } 9 | #pragma glslify: export(calcScaleMat4) 10 | -------------------------------------------------------------------------------- /src/calcTranslateMat4.glsl: -------------------------------------------------------------------------------- 1 | mat4 calcTranslateMat4(vec3 v) { 2 | return mat4( 3 | 1.0, 0.0, 0.0, 0.0, 4 | 0.0, 1.0, 0.0, 0.0, 5 | 0.0, 0.0, 1.0, 0.0, 6 | v.x, v.y, v.z, 1.0 7 | ); 8 | } 9 | #pragma glslify: export(calcTranslateMat4) 10 | -------------------------------------------------------------------------------- /src/convertHsvToRgb.glsl: -------------------------------------------------------------------------------- 1 | vec3 convertHsvToRgb(vec3 c) { 2 | vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); 3 | vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www); 4 | return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y); 5 | } 6 | #pragma glslify: export(convertHsvToRgb) 7 | -------------------------------------------------------------------------------- /src/convertRgbToHsv.glsl: -------------------------------------------------------------------------------- 1 | vec3 convertRgbToHsv(vec3 c) { 2 | vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0); 3 | vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g)); 4 | vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r)); 5 | 6 | float d = q.x - min(q.w, q.y); 7 | float e = 1.0e-10; 8 | return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x); 9 | } 10 | #pragma glslify: export(convertRgbToHsv) 11 | -------------------------------------------------------------------------------- /src/gaussianBlur.glsl: -------------------------------------------------------------------------------- 1 | vec4 gaussianBlur(sampler2D texture, vec2 uv, float radius, vec2 resolution, vec2 direction) { 2 | vec4 color = vec4(0.0); 3 | vec2 step = radius / resolution * direction; 4 | color += texture2D(texture, uv - 4.0 * step) * 0.02699548325659403; 5 | color += texture2D(texture, uv - 3.0 * step) * 0.06475879783294587; 6 | color += texture2D(texture, uv - 2.0 * step) * 0.12098536225957168; 7 | color += texture2D(texture, uv - 1.0 * step) * 0.17603266338214976; 8 | color += texture2D(texture, uv) * 0.19947114020071635; 9 | color += texture2D(texture, uv + 1.0 * step) * 0.17603266338214976; 10 | color += texture2D(texture, uv + 2.0 * step) * 0.12098536225957168; 11 | color += texture2D(texture, uv + 3.0 * step) * 0.06475879783294587; 12 | color += texture2D(texture, uv + 4.0 * step) * 0.02699548325659403; 13 | return color; 14 | } 15 | #pragma glslify: export(gaussianBlur) 16 | -------------------------------------------------------------------------------- /src/lookAt.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify: rotateAxisAngle = require(./rotateAxisAngle); 2 | 3 | vec3 lookAt(vec3 base, vec3 p1, vec3 p2, vec3 up) { 4 | vec3 diff = normalize(p2 - p1); 5 | float d = dot(diff, up); 6 | vec3 c = cross(p1, p2); 7 | float a = acos(d); 8 | return rotateAxisAngle(base, c, a); 9 | } 10 | #pragma glslify: export(lookAt) 11 | -------------------------------------------------------------------------------- /src/polar.glsl: -------------------------------------------------------------------------------- 1 | vec3 spherical(float radian1, float radian2, float radius) { 2 | return vec3( 3 | cos(radian1) * cos(radian2) * radius, 4 | sin(radian1) * radius, 5 | cos(radian1) * sin(radian2) * radius 6 | ); 7 | } 8 | #pragma glslify: export(spherical) 9 | -------------------------------------------------------------------------------- /src/random.glsl: -------------------------------------------------------------------------------- 1 | float random(vec2 c){ 2 | return fract(sin(dot(c.xy, vec2(12.9898,78.233))) * 43758.5453); 3 | } 4 | #pragma glslify: export(random) 5 | -------------------------------------------------------------------------------- /src/rotateAxisAngle.glsl: -------------------------------------------------------------------------------- 1 | vec3 rotateAxisAngle(vec3 p, vec3 axis, float angle){ 2 | float c = cos(angle); 3 | float s = sin(angle); 4 | float t = 1.0 - c; 5 | vec3 a = normalize(axis); 6 | mat3 m = mat3( 7 | t * a.x * a.x + c, 8 | t * a.x * a.y + a.z * s, 9 | t * a.x * a.z - a.y * s, 10 | t * a.y * a.x - a.z * s, 11 | t * a.y * a.y + c, 12 | t * a.y * a.z + a.x * s, 13 | t * a.z * a.x + a.y * s, 14 | t * a.z * a.y - a.x * s, 15 | t * a.z * a.z + c 16 | ); 17 | return m * p; 18 | } 19 | #pragma glslify: export(rotateAxisAngle) 20 | --------------------------------------------------------------------------------