1-1_red is always fullscreen

[clankill3r]

In the 1-1_red example, no matter what I change this too:

rect(0,0,width, height);.

The rectangle will always be drawn fullscreen. Also resetShader and other attempts to fix it did not work.

[mlantin]

I have the same issue. From the p5js documentation I was under the impression that the origin for the coordinate system in the WEBGL mode is the centre of the screen. So rect(0,0,width, height) should start from the centre, and it does not. In any case, it doesn't matter what I set it to: rect(0,0,1,1) still fills the screen. Something is wonky with the coordinates in the shader. I haven't been able to find an answer to this issue...and all p5js shader examples I've seen seem to want to fill the screen so I'm a bit at a loss.

[aferriss]

Hi @mlantin and @clankill3r , sorry I didn't respond sooner. You're seeing this because the vertex shader is simplified for the sake of dealing with fewer things. If you want the positions and scale from rect to pass through into the shader you will need to use the model view projection matrices. Take a look at the vertex shader in some of the 3d examples.

// Get the position attribute of the geometry
attribute vec3 aPosition;

// Get the texture coordinate attribute from the geometry
attribute vec2 aTexCoord;

// 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, but two of them have already been combined into a single one
// 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;


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);

  // 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 * positionVec4;

  // Send the texture coordinates to the fragment shader
  vTexCoord = aTexCoord;
}

[mlantin]

Thanks for this! After I posted I did come across another post of yours explaining the behaviour. Also I noticed that p5js 1.4.1 has made it even simpler which is great...and doesn't seem to flip textures anymore either! But it also seems to have broken the alpha channel on shaders. I'll post a bug report in a bit, when I have a chance to make a simplified example of how it's broken.