College Study77 [GLSL] Float-float Noise https://thebookofshaders.com/11/ The Book of Shaders Gentle step-by-step guide through the abstract and complex universe of Fragment Shaders. thebookofshaders.com The left side is a noise graph, and the right side is a random graph. A noise and a random are different. Let's make a noise function. float i = floor(x); // integer float f = fract(x); // fraction y = rand(i); float i = floor(x); // i.. 2022. 1. 6. [GLSL] Maze and Glitch #ifdef GL_ES precision mediump float; #endif #define ROOT2 1.414 uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; float random(float f); float random(vec2 f); float random(vec3 f); float line(vec2 coord, bool dir){ float y; float thc = .2; if(dir){ y = coord.x; }else{ y = 1. - coord.x; } return smoothstep(y-thc, y, coord.y) - smoothstep(y, y+thc, coord.y); } void main(){ ve.. 2022. 1. 6. [GLSL] Random https://thebookofshaders.com/10/ The Book of Shaders Gentle step-by-step guide through the abstract and complex universe of Fragment Shaders. thebookofshaders.com Let's write the function 'random' that returns randomed-float data. float random(float st); float random(vec2 st); float random(vec3 st); float random(float f){ float y = fract(sin(f*100.)*100.); return y; } The function 'dot' downgrad.. 2022. 1. 6. [GLSL] Patterns https://thebookofshaders.com/09/ The Book of Shaders Gentle step-by-step guide through the abstract and complex universe of Fragment Shaders. thebookofshaders.com For the first, let's make a circle. #ifdef GL_ES precision mediump float; #endif uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; void main(){ vec2 coord = gl_FragCoord.xy/u_resolution; coord.x *= u_resolution.x/u.. 2022. 1. 6. [GLSL] Rotate and Scale https://thebookofshaders.com/08/ The Book of Shaders Gentle step-by-step guide through the abstract and complex universe of Fragment Shaders. thebookofshaders.com https://en.wikipedia.org/wiki/Rotation_matrix Rotation matrix - Wikipedia en.wikipedia.org mat2 rotate2d(float _angle){ return mat2(cos(_angle),-sin(_angle), sin(_angle),cos(_angle)); } #ifdef GL_ES precision mediump float; #endif unif.. 2022. 1. 6. [GLSL] Translate https://thebookofshaders.com/08/ The Book of Shaders Gentle step-by-step guide through the abstract and complex universe of Fragment Shaders. thebookofshaders.com #ifdef GL_ES precision mediump float; #endif uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; float bar (vec2 loc, vec2 size, vec2 coord){ vec2 lb = loc - size/2.; vec2 rt = loc + size/2.; vec2 st = step(lb, coord.. 2022. 1. 6. [GLSL] Polar Shapes https://thebookofshaders.com/07/ The Book of Shaders Gentle step-by-step guide through the abstract and complex universe of Fragment Shaders. thebookofshaders.com A circle is a figure with the same radius regardless of the angle from the center. But this time, let's make a shape that changes the distance to the center according to the angle. Declare the variables a, d, and r in the default code... 2022. 1. 6. [GLSL] Circle Shapes https://thebookofshaders.com/07/ The Book of Shaders Gentle step-by-step guide through the abstract and complex universe of Fragment Shaders. thebookofshaders.com Let's make mirrored circle wave. New default codes: #ifdef GL_ES precision mediump float; #endif uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; void main(){ vec2 coord = gl_FragCoord.xy/u_resolution; coord.x *= .. 2022. 1. 6. [GLSL] Circle https://thebookofshaders.com/07/ To make circle, the functions ‘length’ and ‘distance’ are often used. // Author @patriciogv - 2015 // http://patriciogonzalezvivo.com #ifdef GL_ES precision mediump float; #endif uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; void main(){ vec2 st = gl_FragCoord.xy/u_resolution; float pct = 0.0; vec2 toCenter = vec2(0.5)-st; pct = length(to.. 2022. 1. 6. 이전 1 2 3 4 5 ··· 9 다음
