From 727edc2c7a8a4843bc7ebcc211fd0a1bbfc94642 Mon Sep 17 00:00:00 2001 From: JetStarBlues Date: Mon, 17 May 2021 18:15:25 -0600 Subject: [PATCH 1/5] roughout example pages for default shader attrs and uniforms --- .../en/20_3D/12_default_shader_attributes.js | 47 +++++++++++++++++++ .../en/20_3D/13_default_shader_uniforms.js | 37 +++++++++++++++ 2 files changed, 84 insertions(+) create mode 100644 src/data/examples/en/20_3D/12_default_shader_attributes.js create mode 100644 src/data/examples/en/20_3D/13_default_shader_uniforms.js diff --git a/src/data/examples/en/20_3D/12_default_shader_attributes.js b/src/data/examples/en/20_3D/12_default_shader_attributes.js new file mode 100644 index 0000000000..1ac6914bad --- /dev/null +++ b/src/data/examples/en/20_3D/12_default_shader_attributes.js @@ -0,0 +1,47 @@ +/* + * @name Default Shader Attributes + * @description

p5 provides kjfsdk attributes akjlfa

+ *

+ * • aPosition
+ *   ◦ long description here
+ * • aTexCoord
+ *   ◦ long description here
+ * • aNormal
+ *   ◦ long description here
+ * • aMaterialColor
+ *   ◦ long description here
+ *

+ *

To learn more about using shaders in p5.js: p5.js Shaders

+ */ + + // this variable will hold our shader object + let theShader; + // this variable will hold our webcam video + let cam; + + function preload(){ + // load the shader + theShader = loadShader('assets/webcam.vert', 'assets/webcam.frag'); + } + + function setup() { + // shaders require WEBGL mode to work + createCanvas(710, 400, WEBGL); + noStroke(); + + cam = createCapture(VIDEO); + cam.size(710, 400); + + cam.hide(); + } + + function draw() { + // shader() sets the active shader with our shader + shader(theShader); + + // passing cam as a texture + theShader.setUniform('tex0', cam); + + // rect gives us some geometry on the screen + rect(0,0,width,height); + } diff --git a/src/data/examples/en/20_3D/13_default_shader_uniforms.js b/src/data/examples/en/20_3D/13_default_shader_uniforms.js new file mode 100644 index 0000000000..a3ed382cff --- /dev/null +++ b/src/data/examples/en/20_3D/13_default_shader_uniforms.js @@ -0,0 +1,37 @@ +/* + * @name Shader Using Webcam + * @description The webcam can be passed to shaders as a texture. + *
To learn more about using shaders in p5.js: p5.js Shaders + */ + + // this variable will hold our shader object + let theShader; + // this variable will hold our webcam video + let cam; + + function preload(){ + // load the shader + theShader = loadShader('assets/webcam.vert', 'assets/webcam.frag'); + } + + function setup() { + // shaders require WEBGL mode to work + createCanvas(710, 400, WEBGL); + noStroke(); + + cam = createCapture(VIDEO); + cam.size(710, 400); + + cam.hide(); + } + + function draw() { + // shader() sets the active shader with our shader + shader(theShader); + + // passing cam as a texture + theShader.setUniform('tex0', cam); + + // rect gives us some geometry on the screen + rect(0,0,width,height); + } From a2b0020be0823f9f3d6796770f648c1d51200754 Mon Sep 17 00:00:00 2001 From: JetStarBlues Date: Mon, 17 May 2021 19:25:19 -0600 Subject: [PATCH 2/5] Consolidate into single file --- ...ributes.js => 12_default_shader_inputs.js} | 20 ++++++++-- .../en/20_3D/13_default_shader_uniforms.js | 37 ------------------- 2 files changed, 16 insertions(+), 41 deletions(-) rename src/data/examples/en/20_3D/{12_default_shader_attributes.js => 12_default_shader_inputs.js} (63%) delete mode 100644 src/data/examples/en/20_3D/13_default_shader_uniforms.js diff --git a/src/data/examples/en/20_3D/12_default_shader_attributes.js b/src/data/examples/en/20_3D/12_default_shader_inputs.js similarity index 63% rename from src/data/examples/en/20_3D/12_default_shader_attributes.js rename to src/data/examples/en/20_3D/12_default_shader_inputs.js index 1ac6914bad..cf6f81e228 100644 --- a/src/data/examples/en/20_3D/12_default_shader_attributes.js +++ b/src/data/examples/en/20_3D/12_default_shader_inputs.js @@ -1,6 +1,7 @@ /* - * @name Default Shader Attributes - * @description

p5 provides kjfsdk attributes akjlfa

+ * @name Default Shader Inputs + * @description + *

p5 provides ... attributes ...

*

* • aPosition
*   ◦ long description here
@@ -10,8 +11,19 @@ *   ◦ long description here
* • aMaterialColor
*   ◦ long description here
- *

- *

To learn more about using shaders in p5.js: p5.js Shaders

+ *


+ *

p5 provides ... uniforms ...

+ *

+ * • uViewMatrix
+ *   ◦ long description here
+ * • uProjectionMatrix
+ *   ◦ long description here
+ * • uModelViewMatrix
+ *   ◦ long description here
+ * • uNormalMatrix
+ *   ◦ long description here
+ *


+ *

To learn more about using shaders in p5.js: p5.js Shaders


*/ // this variable will hold our shader object diff --git a/src/data/examples/en/20_3D/13_default_shader_uniforms.js b/src/data/examples/en/20_3D/13_default_shader_uniforms.js deleted file mode 100644 index a3ed382cff..0000000000 --- a/src/data/examples/en/20_3D/13_default_shader_uniforms.js +++ /dev/null @@ -1,37 +0,0 @@ -/* - * @name Shader Using Webcam - * @description The webcam can be passed to shaders as a texture. - *
To learn more about using shaders in p5.js: p5.js Shaders - */ - - // this variable will hold our shader object - let theShader; - // this variable will hold our webcam video - let cam; - - function preload(){ - // load the shader - theShader = loadShader('assets/webcam.vert', 'assets/webcam.frag'); - } - - function setup() { - // shaders require WEBGL mode to work - createCanvas(710, 400, WEBGL); - noStroke(); - - cam = createCapture(VIDEO); - cam.size(710, 400); - - cam.hide(); - } - - function draw() { - // shader() sets the active shader with our shader - shader(theShader); - - // passing cam as a texture - theShader.setUniform('tex0', cam); - - // rect gives us some geometry on the screen - rect(0,0,width,height); - } From a0444f5ddc11f5f4a211953667980321ddc36654 Mon Sep 17 00:00:00 2001 From: JetStarBlues Date: Tue, 18 May 2021 14:18:21 -0600 Subject: [PATCH 3/5] Add example and start work on descriptions --- src/data/examples/assets/shader_defaults.frag | 25 +++++ src/data/examples/assets/shader_defaults.vert | 82 ++++++++++++++++ .../en/20_3D/12_default_shader_inputs.js | 96 ++++++++++++------- 3 files changed, 168 insertions(+), 35 deletions(-) create mode 100644 src/data/examples/assets/shader_defaults.frag create mode 100644 src/data/examples/assets/shader_defaults.vert diff --git a/src/data/examples/assets/shader_defaults.frag b/src/data/examples/assets/shader_defaults.frag new file mode 100644 index 0000000000..e0c93e2cd2 --- /dev/null +++ b/src/data/examples/assets/shader_defaults.frag @@ -0,0 +1,25 @@ +/* This is a modification of a shader by Adam Ferriss + https://github.com/aferriss/p5jsShaderExamples/blob/gh-pages/6_3d/6-2_vertexDisplacement +*/ + +/* WebGL requires that the first line of the fragment shader + specify the precision. + Precision is dependent on the the device. + Sometimes you'll see bugs if you use lowp so stick to mediump or highp. +*/ +precision mediump float; + +/* Get the normal from the vertex shader. + This is the same variable we declared in the vertex shader. + We need to declare it here too! +*/ +varying vec3 vNormal; + +void main() { + + // Normalize the normal + vec3 color = vNormal * 0.5 + 0.5; + + // Assign the color to be output to the screen + gl_FragColor = vec4(color, 1.0); +} diff --git a/src/data/examples/assets/shader_defaults.vert b/src/data/examples/assets/shader_defaults.vert new file mode 100644 index 0000000000..1b5a7643e8 --- /dev/null +++ b/src/data/examples/assets/shader_defaults.vert @@ -0,0 +1,82 @@ +/* This is a modification of a shader by Adam Ferriss + https://github.com/aferriss/p5jsShaderExamples/blob/gh-pages/6_3d/6-2_vertexDisplacement +*/ + +// Get the vertex position attribute of the geometry +attribute vec3 aPosition; + +// Get the vertex normal attribute of the geometry +attribute vec3 aNormal; + +/* When we use 3d geometry, we need to also use some builtin variables + that p5 provides. + Most 3d engines will provide these variables for you. + They are 4x4 matrices that define the camera position / rotation, + and the geometry position / rotation / scale. + + There are actually 3 matrices (model, view, projection), but + two of them have already been combined into a single one (modelView). + This pre combination is an optimization trick so that the vertex + shader doesn't have to do as much work. +*/ + +/* uProjectionMatrix is used to convert the 3d world coordinates into + screen coordinates +*/ +uniform mat4 uProjectionMatrix; + +/* uModelViewMatrix is a combination of the model matrix and the + view matrix + + The model matrix defines the object position / rotation / scale. + Multiplying uModelMatrix * vec4(aPosition, 1.0) would move the + object into it's world position. + + The view matrix defines attributes about the camera, such as + focal length and camera position. + Multiplying uModelViewMatrix * vec4(aPosition, 1.0) would move the + object into its world position in front of the camera. +*/ +uniform mat4 uModelViewMatrix; + +// Get the framecount uniform +uniform float uFrameCount; + +/* This is a variable that will be shared with the fragment shader. + We will assign the attribute aNormal to the varying vNormal to + move it from the vertex shader to the fragment shader. + It can be called whatever you want, but ofter people prefix it + with 'v' to indicate that it is a varying. +*/ +varying vec3 vNormal; + +void main() { + + // Copy the position data into a vec4, using 1.0 as the w component + vec4 position = vec4(aPosition, 1.0); + + // Frequency and Amplitude will determine the look of the displacement + float frequency = 20.0; + float amplitude = 0.1; + + /* Displace the x position withe the sine of the x + time. + Multiply by the normal to move it in the correct direction. + You could add more distortions to the other axes too. + */ + float distortion = sin(position.x * frequency + uFrameCount * 0.1); + position.x += distortion * aNormal.x * amplitude; + + + // Send the normal to the fragment shader + vNormal = aNormal; + + + /* Move our vertex positions into screen space. + + The order of multiplication is always, + projection * view * model * position + In this case model and view have been combined so we just do, + projection * modelView * position + */ + gl_Position = uProjectionMatrix * uModelViewMatrix * position; +} diff --git a/src/data/examples/en/20_3D/12_default_shader_inputs.js b/src/data/examples/en/20_3D/12_default_shader_inputs.js index cf6f81e228..1dadc1f332 100644 --- a/src/data/examples/en/20_3D/12_default_shader_inputs.js +++ b/src/data/examples/en/20_3D/12_default_shader_inputs.js @@ -1,59 +1,85 @@ /* * @name Default Shader Inputs * @description - *

p5 provides ... attributes ...

+ *

p5.js provides some default attributes and uniforms that can be used in your shader programs. Attributes provide per vertex information that can be used in a vertex shader. Uniforms provide information that can be used in both vertex and fragment shaders. (All vertices in a vertex shader, and all pixels in a fragment shader receive the same uniform value as input.)


+ *

Attributes

*

* • aPosition
- *   ◦ long description here
+ *   ◦ vec3 (x, y, z)
+ *   ◦ position associated with a vertex
* • aTexCoord
- *   ◦ long description here
+ *   ◦ vec2 (x, y)
+ *   ◦ texture coordinates associated with a vertex
* • aNormal
- *   ◦ long description here
+ *   ◦ vec3 (x, y, z)
+ *   ◦ normal associated with vertex
* • aMaterialColor
- *   ◦ long description here
+ *   ◦ vec4 (r, g, b, a)
+ *   ◦ color associated with a vertex
+ * • The following attribute names are reserved:
+ *   ◦ aAmbientColor
*


- *

p5 provides ... uniforms ...

+ *

Uniforms

*

* • uViewMatrix
- *   ◦ long description here
+ *   ◦ mat4 (4x4 matrix)
+ *   ◦ defines attributes about the camera?? such as position and focal length
* • uProjectionMatrix
- *   ◦ long description here
+ *   ◦ mat4 (4x4 matrix)
+ *   ◦ used to convert 3D world coordinates into screen
* • uModelViewMatrix
- *   ◦ long description here
+ *   ◦ mat4 (4x4 matrix)
+ *   ◦ combination of the model and view matrices
* • uNormalMatrix
- *   ◦ long description here
+ *   ◦ mat3 (3x3 matrix)
+ *   ◦ ?
+ * • The following uniform names are reserved:
+ *   ◦ uViewport
+ *   ◦ uPerspective
*


- *

To learn more about using shaders in p5.js: p5.js Shaders


+ *

To learn more about using shaders in p5.js see p5.js Shaders


*/ - // this variable will hold our shader object - let theShader; - // this variable will hold our webcam video - let cam; +// This variable will hold our shader object +let shaderProgram; - function preload(){ - // load the shader - theShader = loadShader('assets/webcam.vert', 'assets/webcam.frag'); - } +function preload() { + /* A shader is composed of two parts, a vertex shader, and a + fragment shader. + The vertex shader prepares the vertices and geometry to be drawn. + The fragment shader renders the actual pixel colors. - function setup() { - // shaders require WEBGL mode to work - createCanvas(710, 400, WEBGL); - noStroke(); + loadShader() is asynchronous so it needs to be in preload. + loadShader() first takes as input the filename of a vertex shader, + and a fragment shader. + These file types are usually .vert and .frag, but you can actually + use anything. .glsl is another common one + */ + shaderProgram = loadShader("assets/shader_defaults.vert", "assets/shader_defaults.frag"); +} - cam = createCapture(VIDEO); - cam.size(710, 400); +function setup() { + // Shaders require WEBGL mode to work + createCanvas(710, 400, WEBGL); + noStroke(); +} - cam.hide(); - } +function draw() { + background(0); - function draw() { - // shader() sets the active shader with our shader - shader(theShader); + // shader() sets the active shader with our shader + shader(shaderProgram); - // passing cam as a texture - theShader.setUniform('tex0', cam); + // Send the frameCount to the shader + shaderProgram.setUniform("uFrameCount", frameCount); - // rect gives us some geometry on the screen - rect(0,0,width,height); - } + // Rotate our geometry on the X and Y axes + rotateX(frameCount * 0.01); + rotateY(frameCount * 0.005); + + // Draw some geometry to the screen + /* We're going to tessellate the sphere a bit so we have some more + vertices to work with + */ + sphere(width / 5, 200, 200); +} From eabf755bd68eb20c72791dc13d7238383897bc46 Mon Sep 17 00:00:00 2001 From: JetStarBlues Date: Wed, 19 May 2021 23:09:21 -0600 Subject: [PATCH 4/5] Add line context (type/description) --- .../en/20_3D/12_default_shader_inputs.js | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/data/examples/en/20_3D/12_default_shader_inputs.js b/src/data/examples/en/20_3D/12_default_shader_inputs.js index 1dadc1f332..7e1ae96887 100644 --- a/src/data/examples/en/20_3D/12_default_shader_inputs.js +++ b/src/data/examples/en/20_3D/12_default_shader_inputs.js @@ -5,34 +5,34 @@ *

Attributes

*

* • aPosition
- *   ◦ vec3 (x, y, z)
- *   ◦ position associated with a vertex
+ *   ◦ Type: vec3 (x, y, z)
+ *   ◦ Description: position associated with a vertex
* • aTexCoord
- *   ◦ vec2 (x, y)
- *   ◦ texture coordinates associated with a vertex
+ *   ◦ Type: vec2 (x, y)
+ *   ◦ Description: texture coordinates associated with a vertex
* • aNormal
- *   ◦ vec3 (x, y, z)
- *   ◦ normal associated with vertex
+ *   ◦ Type: vec3 (x, y, z)
+ *   ◦ Description: normal associated with vertex
* • aMaterialColor
- *   ◦ vec4 (r, g, b, a)
- *   ◦ color associated with a vertex
+ *   ◦ Type: vec4 (r, g, b, a)
+ *   ◦ Description: color associated with a vertex
* • The following attribute names are reserved:
*   ◦ aAmbientColor
*


*

Uniforms

*

* • uViewMatrix
- *   ◦ mat4 (4x4 matrix)
- *   ◦ defines attributes about the camera?? such as position and focal length
+ *   ◦ Type: mat4 (4x4 matrix)
+ *   ◦ Description: defines attributes about the camera?? such as position and focal length
* • uProjectionMatrix
- *   ◦ mat4 (4x4 matrix)
- *   ◦ used to convert 3D world coordinates into screen
+ *   ◦ Type: mat4 (4x4 matrix)
+ *   ◦ Description: used to convert 3D world coordinates into screen
* • uModelViewMatrix
- *   ◦ mat4 (4x4 matrix)
- *   ◦ combination of the model and view matrices
+ *   ◦ Type: mat4 (4x4 matrix)
+ *   ◦ Description: combination of the model and view matrices
* • uNormalMatrix
- *   ◦ mat3 (3x3 matrix)
- *   ◦ ?
+ *   ◦ Type: mat3 (3x3 matrix)
+ *   ◦ Description: the transpose inverse of the model matrix. Typically used in lighting calculations
* • The following uniform names are reserved:
*   ◦ uViewport
*   ◦ uPerspective
From 062d01871ff7babfbd87e6d29f0c908fa641c4e9 Mon Sep 17 00:00:00 2001 From: JetStarBlues Date: Mon, 31 May 2021 20:49:18 -0600 Subject: [PATCH 5/5] Work on descriptions --- .../en/20_3D/12_default_shader_inputs.js | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/data/examples/en/20_3D/12_default_shader_inputs.js b/src/data/examples/en/20_3D/12_default_shader_inputs.js index 7e1ae96887..9b25bf0aea 100644 --- a/src/data/examples/en/20_3D/12_default_shader_inputs.js +++ b/src/data/examples/en/20_3D/12_default_shader_inputs.js @@ -6,16 +6,16 @@ *

* • aPosition
*   ◦ Type: vec3 (x, y, z)
- *   ◦ Description: position associated with a vertex
+ *   ◦ Description: Position associated with a vertex
* • aTexCoord
*   ◦ Type: vec2 (x, y)
- *   ◦ Description: texture coordinates associated with a vertex
+ *   ◦ Description: Texture coordinates associated with a vertex
* • aNormal
*   ◦ Type: vec3 (x, y, z)
- *   ◦ Description: normal associated with vertex
+ *   ◦ Description: Normal associated with vertex
* • aMaterialColor
*   ◦ Type: vec4 (r, g, b, a)
- *   ◦ Description: color associated with a vertex
+ *   ◦ Description: Color associated with a vertex
* • The following attribute names are reserved:
*   ◦ aAmbientColor
*


@@ -23,19 +23,21 @@ *

* • uViewMatrix
*   ◦ Type: mat4 (4x4 matrix)
- *   ◦ Description: defines attributes about the camera?? such as position and focal length
+ *   ◦ Description: Contains information about the current camera such as position and rotation. Used to ?
* • uProjectionMatrix
*   ◦ Type: mat4 (4x4 matrix)
- *   ◦ Description: used to convert 3D world coordinates into screen
+ *   ◦ Description: Contains information about the current projection such as near and far clipping planes. Used to convert 3D world coordinates into 2D screen coordinates
* • uModelViewMatrix
*   ◦ Type: mat4 (4x4 matrix)
- *   ◦ Description: combination of the model and view matrices
+ *   ◦ Description: Combination of the model and view matrices. Used to ?
+ * • uModelViewProjectionMatrix
+ *   ◦ Type: mat4 (4x4 matrix)
+ *   ◦ Description: Combination of the model, view, and projection matrices. Used to ?
* • uNormalMatrix
*   ◦ Type: mat3 (3x3 matrix)
- *   ◦ Description: the transpose inverse of the model matrix. Typically used in lighting calculations
+ *   ◦ Description: Transpose inverse of the model matrix. Typically used in lighting calculations
* • The following uniform names are reserved:
- *   ◦ uViewport
- *   ◦ uPerspective
+ *   ◦ uStrokeWeight
*


*

To learn more about using shaders in p5.js see p5.js Shaders


*/