Examples: Fix onWindowResize

[Methuselah96]

Related issue: N/A

Description

The camera is an OrthographicCamera, not a PerspectiveCamera, so setting the aspect property is ineffectual. The orthographic camera's planes are not based on the window's aspect ratio, so no updates to the camera are necessary on window resize.

[WestLangley]

The orthographic camera's planes are not based on the window's aspect ratio, so no updates to the camera are necessary on window resize.

This example is not correct. The camera and viewport must have the same aspect ratio to prevent distortion, as we do for other orthographic examples.

[WestLangley]

FWIW, I think this WebGPU example by @cmhhelgeson (the original author) is far better. Maybe the three.js example can be modified to look like that one. 🙏

[cmhhelgeson]

FWIW, I think this WebGPU example by @cmhhelgeson (the original author) is far better. Maybe the three.js example can be modified to look like that one. 🙏

Aside from the removal of screen curvature and the aforementioned orthographic problem, the shaders should be mostly the same between that link and the example version in Three.js. I could put that back in, but I'm not sure what else needs to be modified?

[WestLangley]

IMHO, the scrolling obfuscates what you are trying to demonstrate, and is unnecessary. Also, with a static image and a properly-maintained aspect ratio, you can see how changing the window size affects the shader.

Also, I think a single plane geometry and a GUI toggle to switch shaders would be more consistent with how the other examples are structured.

I do like your dog example.