From b48734476d57744e473ff01a3780bc1bd1c45949 Mon Sep 17 00:00:00 2001 From: JetStarBlues Date: Thu, 22 Apr 2021 11:05:44 -0600 Subject: [PATCH 1/4] Fixes incorrect values in example. See issue #1021. --- src/data/examples/assets/uniforms.frag | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/data/examples/assets/uniforms.frag b/src/data/examples/assets/uniforms.frag index bf2ad1bc5d..46a32e423d 100644 --- a/src/data/examples/assets/uniforms.frag +++ b/src/data/examples/assets/uniforms.frag @@ -54,8 +54,8 @@ vec4 poly(float x, float y, float size, float sides, float rotation, vec3 col){ void main() { - vec2 center = resolution * 1.0; // draw the shape at the center of the screen - float size = resolution.y * 0.5; // make the shape a quarter of the screen height + vec2 center = resolution * 0.5; // draw the shape at the center of the screen + float size = resolution.y * 0.25; // make the shape a quarter of the screen height float sides = mod(floor(mouse), 7.0) + 3.0; // slowly increase the sides, when it reaches 10 sides, go back down to 3 float rotation = time; // rotation is in radians, but for time it doesnt really matter From 3ce8e903cb0704e64c33d08e46422173caae315f Mon Sep 17 00:00:00 2001 From: JetStarBlues Date: Tue, 27 Apr 2021 18:37:05 -0600 Subject: [PATCH 2/4] Use resolution independent calculations. See discussion on issue #1021. --- src/data/examples/assets/uniforms.frag | 13 +++++---- src/data/examples/assets/uniforms.vert | 27 +++++++++++++------ .../en/20_3D/10_passing_shader_uniforms.js | 2 +- 3 files changed, 28 insertions(+), 14 deletions(-) diff --git a/src/data/examples/assets/uniforms.frag b/src/data/examples/assets/uniforms.frag index 46a32e423d..ea1d35f64b 100644 --- a/src/data/examples/assets/uniforms.frag +++ b/src/data/examples/assets/uniforms.frag @@ -9,7 +9,6 @@ precision mediump float; // these are known as preprocessor directive // essentially we are just declaring some variables that wont change // you can think of them just like const variables - #define PI 3.14159265359 #define TWO_PI 6.28318530718 @@ -18,6 +17,10 @@ uniform vec2 resolution; uniform float time; uniform float mouse; +// this is the same variable we declared in the vertex shader +// we need to declare it here too! +varying vec2 vTexCoord; + // this is a function that turns an rgb value that goes from 0 - 255 into 0.0 - 1.0 vec3 rgb(float r, float g, float b){ return vec3(r / 255.0, g / 255.0, b / 255.0); @@ -25,7 +28,7 @@ vec3 rgb(float r, float g, float b){ vec4 poly(float x, float y, float size, float sides, float rotation, vec3 col){ // get our coordinates - vec2 coord = gl_FragCoord.xy; + vec2 coord = vTexCoord; // move the coordinates to where we want to draw the shape vec2 pos = vec2(x,y) - coord; @@ -45,7 +48,7 @@ vec4 poly(float x, float y, float size, float sides, float rotation, vec3 col){ // restrict our shape to black and white and set it's size // we use the smoothstep function to get a nice soft edge - d = 1.0 - smoothstep(size*0.5, size*0.5+1.0, d); + d = 1.0 - smoothstep(size*0.5, size*0.5+0.002, d); // return the color with the shape as the alpha channel return vec4(col, d); @@ -54,8 +57,8 @@ vec4 poly(float x, float y, float size, float sides, float rotation, vec3 col){ void main() { - vec2 center = resolution * 0.5; // draw the shape at the center of the screen - float size = resolution.y * 0.25; // make the shape a quarter of the screen height + vec2 center = vec2(0.5); // draw the shape at the center of the screen + float size = 0.25; // make the shape a quarter of the screen height float sides = mod(floor(mouse), 7.0) + 3.0; // slowly increase the sides, when it reaches 10 sides, go back down to 3 float rotation = time; // rotation is in radians, but for time it doesnt really matter diff --git a/src/data/examples/assets/uniforms.vert b/src/data/examples/assets/uniforms.vert index 568a87edd2..dcd0739f24 100644 --- a/src/data/examples/assets/uniforms.vert +++ b/src/data/examples/assets/uniforms.vert @@ -1,19 +1,30 @@ // vert file and comments from adam ferriss // https://github.com/aferriss/p5jsShaderExamples +// our vertex data attribute vec3 aPosition; + +// our texcoordinates attribute vec2 aTexCoord; +// this is a variable that will be shared with the fragment shader +// we will assign the attribute texcoords to the varying texcoords to move them from the vert shader to the frag shader +// it can be called whatever you want but often people prefix it with 'v' to indicate that it is a varying +varying vec2 vTexCoord; + void main() { - // copy the position data into a vec4, using 1.0 as the w component - vec4 positionVec4 = vec4(aPosition, 1.0); + // copy the texture coordinates + vTexCoord = aTexCoord; + + // copy the position data into a vec4, using 1.0 as the w component + vec4 positionVec4 = vec4(aPosition, 1.0); - // scale the rect by two, and move it to the center of the screen - // if we don't do this, it will appear with its bottom left corner in the center of the sketch - // try commenting this line out to see what happens - positionVec4.xy = positionVec4.xy * 2.0 - 1.0; + // scale the rect by two, and move it to the center of the screen + // if we don't do this, it will appear with its bottom left corner in the center of the sketch + // try commenting this line out to see what happens + positionVec4.xy = positionVec4.xy * 2.0 - 1.0; - // send the vertex information on to the fragment shader - gl_Position = positionVec4; + // send the vertex information on to the fragment shader + gl_Position = positionVec4; } diff --git a/src/data/examples/en/20_3D/10_passing_shader_uniforms.js b/src/data/examples/en/20_3D/10_passing_shader_uniforms.js index 3d6dc2ec1b..5a962cf303 100644 --- a/src/data/examples/en/20_3D/10_passing_shader_uniforms.js +++ b/src/data/examples/en/20_3D/10_passing_shader_uniforms.js @@ -14,7 +14,7 @@ function setup() { // shaders require WEBGL mode to work - createCanvas(710, 400, WEBGL); + createCanvas(400, 400, WEBGL); noStroke(); } From f62811d98243df43636d4381af8f6c4f6ede86ff Mon Sep 17 00:00:00 2001 From: JetStarBlues Date: Thu, 20 May 2021 15:24:42 -0600 Subject: [PATCH 3/4] Update es, ko, and zh-Hans examples --- src/data/examples/es/20_3D/10_passing_shader_uniforms.js | 2 +- src/data/examples/ko/20_3D/10_passing_shader_uniforms.js | 2 +- src/data/examples/zh-Hans/20_3D/10_passing_shader_uniforms.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/data/examples/es/20_3D/10_passing_shader_uniforms.js b/src/data/examples/es/20_3D/10_passing_shader_uniforms.js index 3d6dc2ec1b..5a962cf303 100644 --- a/src/data/examples/es/20_3D/10_passing_shader_uniforms.js +++ b/src/data/examples/es/20_3D/10_passing_shader_uniforms.js @@ -14,7 +14,7 @@ function setup() { // shaders require WEBGL mode to work - createCanvas(710, 400, WEBGL); + createCanvas(400, 400, WEBGL); noStroke(); } diff --git a/src/data/examples/ko/20_3D/10_passing_shader_uniforms.js b/src/data/examples/ko/20_3D/10_passing_shader_uniforms.js index 3b274aef49..ade3f0b716 100644 --- a/src/data/examples/ko/20_3D/10_passing_shader_uniforms.js +++ b/src/data/examples/ko/20_3D/10_passing_shader_uniforms.js @@ -14,7 +14,7 @@ function setup() { // 셰이더를 작동하기 위해 WEBGL 모드가 필요합니다. - createCanvas(710, 400, WEBGL); + createCanvas(400, 400, WEBGL); noStroke(); } diff --git a/src/data/examples/zh-Hans/20_3D/10_passing_shader_uniforms.js b/src/data/examples/zh-Hans/20_3D/10_passing_shader_uniforms.js index 3d6dc2ec1b..5a962cf303 100644 --- a/src/data/examples/zh-Hans/20_3D/10_passing_shader_uniforms.js +++ b/src/data/examples/zh-Hans/20_3D/10_passing_shader_uniforms.js @@ -14,7 +14,7 @@ function setup() { // shaders require WEBGL mode to work - createCanvas(710, 400, WEBGL); + createCanvas(400, 400, WEBGL); noStroke(); } From a659fe7d1e47edfc9c53d1a32bb881e37b88e652 Mon Sep 17 00:00:00 2001 From: JetStarBlues Date: Thu, 20 May 2021 15:42:59 -0600 Subject: [PATCH 4/4] retrigger checks