search

regl-project / regl-site

Code for the regl website
http://regl.party/
MIT License
3 stars 3 forks source link

Texture image flipped in examples #5

Open petergoes opened 5 years ago

petergoes commented 5 years ago

Hi there,

I am dipping my toes in WebGL and writing my own shaders. Big noob here.

When looking through the texture example, I notices that the baboon is flipped over the X axis. If you look at the highlight on its nose, in the examples, that is on the LEFT side of his nose. However, in the original source on NPM, the highlight is located on the RIGHT side of its nose.

The same is true for the the tip of the nose, in the example it tips towards the right, and in the original, it tips to the left.

I think it has to do with the calculation in the vertex shader. In my own experiment, when I change the calculation to: gl_Position = vec4(2.0 * position + -1.0, 0, 1); it seems to flip a texture correctly. instead of the current gl_Position = vec4(1.0 - 2.0 * position, 0, 1); However, I am not sure.

I could not find the source of the examples in this repo. So I did not try to fix the actual example.

rreusser commented 5 years ago

@petergoes Did you try the flipY flag when creating the texture? (see: texture constructor parameters) It sounds like maybe you're having a left-right issue and not an up-down issue, but I feel like I usually need the flipY flag with images and then things work out without further workarounds. flipY basically accounts for things image data starting in the top left corner rather than the bottom right corner. That'd be my first suggestion, but don't hesitate to follow up if that doesn't get things closer.

petergoes commented 5 years ago

@rreusser I did indeed find flipY for my own needs. And I roughly understand what it does.

However, I noticed that the example on regl.party the baboon is flipped over the X axis. I do not know if that is intentionally, but I noticed it, and thus wanted to report it.