search

kevinroast / phoria.js

JavaScript library for simple 3D graphics and visualisation on a HTML5 canvas 2D renderer. It does not use WebGL. Works on all HTML5 browsers, including desktop, iOS and Android.
BSD 3-Clause "New" or "Revised" License
500 stars 127 forks source link

Distortion with texture when camera moves #40

Open aindilis opened 6 years ago

aindilis commented 6 years ago

I set up something by using the code from test0 with the code from test5. My application is to get something that looks like this: https://frdcsa.org/~andrewdo/writings/homeless-story/IEM.jpg

The image starts out somewhat highly distorted, but when I move the camera forward the center of the image moves to the right. I've included links to code and screenshots.

https://frdcsa.org/~andrewdo/writings/homeless-story/sample-index.tt

https://frdcsa.org/~andrewdo/writings/homeless-story/sample-bug-1-2.jpg https://frdcsa.org/~andrewdo/writings/homeless-story/sample-bug-2-2.jpg

You can notice this same behavior (less severely) if you move the camera around on test5.

Thanks, I have very little experience with 3d graphics so I could be doing something wrong. TY. Andrew

aindilis commented 6 years ago

I also asked a friend and they pointed out that the left hand image, the texture on the ground looks similar:

https://github.com/ssloy/tinyrenderer/wiki/Technical-difficulties:-linear-interpolation-with-perspective-deformations

darkuranium commented 6 years ago

Huh, my comment didn't get posted. Let me retry:

I am said friend. I should mention the issue also happens in the demos (e.g. test5, and test0t --- though it's less noticable in the latter due to the texture used, it does occur there).

Unfortunately, the only option I know of in the HTML canvas is to subdivide (but this is going to be slow): https://acko.net/blog/projective-texturing-with-canvas/ ; an alternative option would be CSS3 transforms, but I doubt that would end well when combined with canvas (a third option is of course WebGL, but that would defeat the point of this project).