Inverted y in WEBGL createGraphics() canvas

[serverizzo]

Most appropriate sub-area of p5.js?

• Accessibility (Web Accessibility)
• Build tools and processes
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Friendly error system
• Image
• IO (Input/Output)
• Localization
• Math
• Unit Testing
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Details about the bug:

• p5.js version:
• Web browser and version: Firefox v91.0 (64-bit)
• Operating System: Windows
• Steps to reproduce this:
  Long but necessary back story:
  I've been implementing a way to detect specific 3d objects through a technique called 3d picking. Essentially, you create 2 canvases. One through normal means, and the other through createGraphics(). After, you create the same objects on both canvases, but on the hidden canvas, you create objects with different colors. Using loadPixels() and get() you can detect when you are hovering over an object. The important thing to note is that all operations on the shown canvas need to be replicated in the hidden canvas. Because I want my application to be interactive later on, I needed to create my own camera functions (orbit control would not do since it does not interact with the hidden canvas).

The actual issue:
I created a demo of 4 boxes at the origin and one in purely either x y or z. I have found that all operations in the y direction (things like translation and even camera translations) for the hidden canvas are inverted, for some reason. For example, in my functions mcamera and mTranslate, the y value needs to be negated to change the boxes from pink to white on hover. Otherwise, the box created in the hidden canvas would appear above instead of below. Please refer to the mcamera() function and mTranslate() function within sketch.js to see the inverted-y.

Link to the program with the 'fixed' issue:
https://editor.p5js.org/edwardC/sketches/AYWqbJrW0

To move the camera.
wasd for pan up, left, down, right respectively.
and shift+a, shift+d for rotations.

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[davepagurek]

Hi! I just did a quick test and it seems like this isn't an issue with the image being flipped: if you display the createGraphics canvas in your example, when you don't negate y, it looks visually the same as the main canvas, and also if you call .get() on the main canvas, it has the same issue where the colors only change when you hover over the opposite side of where a cube should be.

Instead, I think the issue is that the y order of the pixels array seems to be reversed (possibly explaining why there's an UNPACK_FLIP_Y option when loading images into WebGL?) I think to fix this, we would have to reverse the order of rows here:

p5.js/src/webgl/p5.RendererGL.js

Line 838 in 00821f3

this.GL.readPixels(

...and also here for getting a single pixel:

p5.js/src/webgl/p5.RendererGL.js

Line 795 in 00821f3

x, y, 1, 1,

[davepagurek]

This was fixed as of #5981 🙂

[davepagurek]

Never mind, opening this up again because I realized that PR isn't actually merged 😅 Must have mixed up my github notifications.

[davepagurek]

Closed for real this time with #6109!