Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a uModelViewProjectionMatrix uniform #5282

Closed
1 task done
JetStarBlues opened this issue Jun 1, 2021 · 0 comments · Fixed by #5283
Closed
1 task done

Add a uModelViewProjectionMatrix uniform #5282

JetStarBlues opened this issue Jun 1, 2021 · 0 comments · Fixed by #5283

Comments

@JetStarBlues
Copy link
Contributor

Add a uModelViewProjectionMatrix uniform

How would this new feature help increase access to p5.js?

Makes the modelViewProjection matrix available as a uniform for users to use in their shader programs.

As a result, the minimum code that a user needs to write in their program decreases (and the final code is more performant).

Most appropriate sub-area of p5.js?

  • WebGL

Feature enhancement details:

The modelViewProjection (mvp) matrix is needed by all vertex shaders that seek to display 3D coordinates on a 2D screen.

Currently, only the uModelViewMatrix and uProjectionMatrix are provided by p5 for use in shader programs. As a result, the mvpMatrix must be calculated in the vertex shader.

attribute vec3 aPosition;

uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;

void main() {

  vec4 position = vec4(aPosition, 1.0);

  gl_Position = uProjectionMatrix * uModelViewMatrix * position;
}

If available as a uniform, vertex shaders can be simplified to:

attribute vec3 aPosition;

uniform mat4 uModelViewProjectionMatrix;

void main() {

  vec4 position = vec4(aPosition, 1.0);

  gl_Position = uModelViewProjectionMatrix * position;
}

This simplification makes the vertex shader code less dense.

Since currently this calculation is done per vertex, there is also a performance boost earned by doing this calculation once on the CPU and passing the value on to the shader as a uniform.

---

More discussion on this can be found on the related issue on the p5.js-website repo.
This discussion is also related.
A live example of this workflow can be found here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant