modelX/Y/Z() and screenX/Y/Z() for p5.js (WebGL)

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

This feature set would increase access by improving feature parity between Java P5 and p5.js. Js seems more accessible than Java these days, (esp. on the Web), and both are learning tools, so I feel, where possible, equivalent functionality would be desirable.

I also believe 3D is a core Processing.org feature, offering a uniquely low bar to entry.

The alternative to these "matrix access" functions seems to be direct matrix manipulation and/or access to WebGL. In my experience so far, these both add steep learning curves to what may be accomplished in Java P5 quite intuitively using push()/pop(), transformation, and these "matrix access" functions.

From the history of related requests, besides limiting common access to a well-implemented feature set, I feel the lack of easier "matrix access" functions also poses a risk to learners (like me!) getting frustrated trying to integrate unmaintained, external dependencies, or cooking up their own creative & idiosyncratic, but also potentially limiting theories & workarounds , (as valuable as such frustrations may be).

Most appropriate sub-area of p5.js?

• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Other (specify if possible)

New feature details:

This is a request to implement, specifically for WEBGL mode, modelX(), modelY(), & modelZ(), and screenX(), screenY(), & screenZ().

I've collected all the related requests I could find below, but most of them are P2D-specific and seem to be precluded by canvas-specific issues. (Maybe a future WebGL-implementation of 2D mode would remove that obstacle, and offer users a common 2D/3D code and visualization space...?)

As a compromise/alternative to implementation of modelX/Y/Z() (departing a little from Java P5 convenience), if "let gl = getGlMatrix();" were a thing in p5.js, could that be used à la applyMatrix( gl.a, gl.b, gl.c, gl.d., gl.e., gl.f., gl.g, gl.h, gl.i, gl.j, gl.k, gl.l, gl.m, gl.n, gl.o, gl.p ) to reproduce WebGL transformations outside of push()/pop()? applyMatrix() seems to require matrix elements as individual arguments...so maybe a separate array? mat4? version "applyGlMatrix( gl )" would be nicer? (Something like this seems to exist in the p5.Matrix functions.)

Is there already an easy way to grab the current 3D transformation matrix, (p5.Matrix.mat4 or something)? I feel this would be less accessible and intuitive than modelX/Y/Z(), but still sufficiently abstracted for a learner like me to get things done.... (Did it, I think! Please see next post....)

With the transformation matrix, (a bit more study, and a few more steps), I gather we should be able to get transformed coordinates just as we would with modelX/Y/Z(), right?

Lastly, there's the "projection matrix", of possible relevance to the screenX/Y/Z() part of this request, I think. I understand from playing with Java P5, that screenZ() returns z-buffer values, for 3d picking, "screen space" effects etc.--a little unpredictable, but still fun....

Out of my depth, but some of this even seems semi-doable for me! If I could figure out how to get the current GL context and transformation matrix...and get help writing code on par for contribution here....

Thanks for considering!

#243 (push()/pop() discussion)
#377 (modelX(), modelY() feature request)
#1553 (screenX() screenY(), screenZ() feature request)
#1873 (modelX(), modelY() feature request)
#4337 (matrix functions...completed!)

Start by reading the existing p5.Matrix functions and the related requests #377, #1553, and #1873. Investigate how WebGL exposes the current transformation and projection matrices, then define how the six Processing-compatible coordinate functions should behave in p5.js. Done means the functions work in WEBGL mode and cover model-to-screen coordinate use cases.