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.

Sign up for GitHub

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

Support for 3D coordinate on Image #7172

Draft
wants to merge 26 commits into
base: main
Choose a base branch
from
Draft

Support for 3D coordinate on Image #7172

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
4326a02
Support for 3D coordinate on Image
Forchapeatl Aug 14, 2024
97efe53
Added function to support 3D image coordinates and texture
Forchapeatl Aug 14, 2024
c2d6142
fixed 2D breakage
Forchapeatl Aug 16, 2024
168e0e3
commit changes
Forchapeatl Aug 16, 2024
aab2120
catch framebuffer or graphic instance
Forchapeatl Aug 19, 2024
7942b73
added scalling
Forchapeatl Aug 20, 2024
2a80879
using vertex for texture mapping instead of plane
Forchapeatl Aug 22, 2024
96997fd
defaulting to 0 in webgl context
Forchapeatl Aug 22, 2024
ca19e53
Added examples and dz param introduction
Forchapeatl Aug 22, 2024
1c76a8d
removed examples
Forchapeatl Aug 22, 2024
6e31086
removed dz param introduction
Forchapeatl Aug 22, 2024
247e855
Added dz Param and examples
Forchapeatl Aug 23, 2024
8d81b73
dz parameter on Contain
Forchapeatl Aug 23, 2024
7ae6f8b
replaced WEBGL check with dz check
Forchapeatl Aug 25, 2024
ab32870
removed Image3D function
Forchapeatl Aug 26, 2024
ed1796a
added support for Z coordiante
Forchapeatl Aug 26, 2024
e764cb1
fixed syntax error
Forchapeatl Aug 26, 2024
038a5ad
fixed syntax error
Forchapeatl Aug 26, 2024
71027b0
fixed lint
Forchapeatl Aug 26, 2024
07beef9
Added support for webgl mode
Forchapeatl Sep 7, 2024
1b53827
dz as last parameter
Forchapeatl Sep 8, 2024
af0b2e8
dz as last parameter on imade2D
Forchapeatl Sep 8, 2024
9e19785
Update p5.Renderer2D.js
Forchapeatl Sep 8, 2024
80844dc
revert changes
Forchapeatl Sep 8, 2024
15d0015
revert changes
Forchapeatl Sep 8, 2024
f0f57cc
removed dz from param docs
Forchapeatl Sep 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 30 additions & 12 deletions src/image/loading_displaying.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1097,6 +1097,7 @@ p5.prototype.image = function(
img,
dx,
dy,
dz,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think placing this argument here will break calls to image() that don't use z but do use the arguments that follow it.

I think we might need to follow the approach of some other 2D/3D functions like dist here, where we reinterpret the arguments array based on some criteria:

p5.js/src/math/calculation.js

Lines 221 to 227 in 21d7c8c

if (args.length === 4) {
//2D
return Math.hypot(args[2] - args[0], args[3] - args[1]);
} else if (args.length === 6) {
//3D
return Math.hypot(args[3] - args[0], args[4] - args[1], args[5] - args[2]);
}

In this case, the criteria will probably depend on the length of the arguments.

Since this is somewhat complex, I think it would also be a good idea to add some unit tests to make sure that this continues to work for the 2D case as well as the new 3D case.

Copy link
Contributor Author

@Forchapeatl Forchapeatl Aug 16, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for the review. I went with the length approach initially .

Odd number of parameters → Use 2D mode.
Even number of parameters → Check if the 10th parameter is a number.
If it's not a number, defer to 2D mode.
If it's a number, use 3D mode.

but starting from the third parameter single arguments become optional image(img, dx, dy, dWidth, dHeight, sx, sy, [sWidth], [sHeight], [fit], [xAlign], [yAlign]) hence my even/odd length logic fails as soon as the function starts receiving optional arguments.

Screenshot from 2024-08-16 19-26-04

The best solution I got at the moment was, to shift the values of the input argument to the right in case of 2D_rendering.

  if(this._renderer instanceof p5.RendererGL == false){
    // Store the value of 'yAlign' temporarily
    let   temp = yAlign;
    // From the 3rd arguement shift the assingment one position to the right   
    yAlign = xAlign;
    xAlign = fit;
    fit = sHeight;
    sHeight = sWidth;
    sWidth = sy;
    sy = sx;
    sx = dHeight;
    dHeight = dWidth;
    dWidth = dz;    
  }

The results have been successful in every test .

Screenshot from 2024-08-16 19-31-01

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this also work for 3D mode if the z coordinate is omitted?

Also a possible other approach for the even/odd check: you might need to check if the number of arguments up to the fit parameter (which should be a string instead of a number) is even or odd. That might mean something like:

let endIndex = args.findIndex(arg => arg === constants.COVER || arg === constants.CONTAIN)
if (endIndex === -1) {
  endIndex = args.length
}
const argsUpToFit = args.slice(0, endIndex)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this also work for 3D mode if the z coordinate is omitted?

yes.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you are in WebGL mode and call image without z but with some of the options after z, does that still work? e.g. this should draw the image fullscreen on the canvas:

imageMode(CENTER)
image(yourImg, 0, 0, width, height, 0, 0, yourImg.width, yourImg.height, COVER)

Just based on the code so far, it looks like in WebGL mode, it never shifts all the arguments over the way it does when this._renderer instanceof p5.RendererGL === false.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

It seems like the ImgeMode(CENTER) is a trap on WebGL mode. Is there any way to workaround this ? we could add a new imageModeGL that supports WebGL coordinates ?

dWidth,
dHeight,
sx,
Expand Down Expand Up @@ -1175,18 +1176,35 @@ p5.prototype.image = function(
_sh
);

// tint the image if there is a tint
this._renderer.image(
img,
vals.sx,
vals.sy,
vals.sw,
vals.sh,
vals.dx,
vals.dy,
vals.dw,
vals.dh
);
//if it is a WEGL instance default use 3D rendering
if (this._renderer instanceof p5.RendererGL) {
this._renderer.image3D(
img,
vals.sx,
vals.sy,
dz,
vals.sw,
vals.sh,
vals.dx,
vals.dy,
vals.dw,
vals.dh
);
}else {
// tint the image if there is a tint
// Default 2D rendering
this._renderer.image(
img,
vals.sx,
vals.sy,
vals.sw,
vals.sh,
vals.dx,
vals.dy,
vals.dw,
vals.dh
);
}
};

/**
Expand Down
18 changes: 18 additions & 0 deletions src/webgl/p5.RendererGL.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2391,6 +2391,24 @@ p5.RendererGL = class RendererGL extends p5.Renderer {

return triangleVerts;
}

image3D(img,sx,sy,sz,sWidth,sHeight,dx,dy,dWidth,dHeight) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This shares a lot of code with p5.RendererGL.image, maybe we could make that function support a z coordinate rather than duplicating the code for this case?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code uses 3D primitives and changes to p5.RendererGL has been removed

if (this._isErasing) {
this.blendMode(this._cachedBlendMode);
}

this._pInst.push();
this._pInst.translate(sx, sy, sz);
this._pInst.texture(img);
this._pInst.noStroke();
this._pInst.plane(sWidth, sHeight);
this._pInst.pop();

if (this._isErasing) {
this.blendMode(constants.REMOVE);
}
}

};
/**
* ensures that p5 is using a 3d renderer. throws an error if not.
Expand Down