charlieroberts / marching

A JavaScript library that compiles GLSL ray marchers.
MIT License
208 stars 13 forks source link

Resizeable window/canvas #17

Open LostMoho opened 2 years ago

LostMoho commented 2 years ago

Sorry for creating an issue to ask a question, but I'm playing around with Marching.js and I find that if I resize the browser window, that rendering gets all messed up. Similarly, if I set up a canvas that is not the shape of the window, say 1000px x 200px, then the rendering has an incorrect aspect ratio.

I suspect that the rendering is based on the initial size of the window. Is there some way to tell marching that the window or canvas has been resized? And is there another place people discuss Marching.js that would be more appropriate for questions?

LostMoho commented 2 years ago

Oh yeah, it's definitely what I thought. In the Scene object's resolution and render methods, the code is using window.innerWidth instead of this.canvas.clientWidth. This suggests that Marching.js is intended to always use a full-window canvas. I was able to get it to work in a canvas that was not full-window by changing these lines. But it still doesn't resize properly when the canvas resizes - the aspect ratio doesn't adapt to the new canvas size, the rendered image appears stretched. So I guess I'm still trying to figure out how resizing is supposed to be handled.